feat,wip: 입찰 기능 동작

hwe/ts/PageAuction.vue

@@ -1,11 +1,32 @@
 <template>
-  <div>테스트</div>
+  <BContainer id="container" :toast="{ root: true }" class="bg0">
+    <TopBackBar type="normal" :title="isResAuction ? '경매장' : '유니크 경매장'" :reloadable="true" @reload="tryReload">
+      <BButton @click="isResAuction = true">금/쌀</BButton>
+      <BButton @click="isResAuction = false">유니크</BButton>
+    </TopBackBar>
+    <AuctionResource v-if="isResAuction"></AuctionResource>
+    <AuctionUniqueItem v-else></AuctionUniqueItem>
+    <BottomBar></BottomBar>
+  </BContainer>
 </template>
 <script lang="ts">
 /*declare const staticValues: {
     serverID: string,
-    serverNick: string,
     turnterm: number,
+    serverNick: string,
 };*/
 </script>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { BButton, BContainer } from "bootstrap-vue-3";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "./components/BottomBar.vue";
+import AuctionResource from "@/components/AuctionResource.vue";
+import AuctionUniqueItem from "@/components/AuctionUniqueItem.vue";
+import { ref } from "vue";
+
+const isResAuction = ref(true);
+
+function tryReload() {
+  console.log('갱신');
+}
+</script>

hwe/ts/build_exports.json

@@ -22,6 +22,7 @@
         "common": "common_deprecated.ts"
     },
     "ingame_vue": {
+        "v_auction": "v_auction.ts",
         "v_inheritPoint": "v_inheritPoint.ts",
         "v_board": "v_board.ts",
         "v_cachedMap": "v_cachedMap",

hwe/ts/components/AuctionResource.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="bg0">
+    <div class="bg2">거래장</div>
+    <div style="background-color: orange">쌀 구매</div>
+    <div class="row gx-0">
+      <div class="col">번호</div>
+      <div class="col">판매자</div>
+      <div class="col">물품</div>
+      <div class="col">수량</div>
+      <div class="col">시작 구매가</div>
+      <div class="col">현재 구매가</div>
+      <div class="col">즉시 구매가</div>
+      <div class="col">단가</div>
+      <div class="col">구매 예정자</div>
+      <div class="col">거래 종료</div>
+    </div>
+    <div v-for="auction of buyRice" :key="auction.id" class="row gx-0" @click="selectedBuyRiceAuction = auction">
+      <div class="col">{{ auction.id }}</div>
+      <div class="col">{{ auction.hostName }}</div>
+      <div class="col">쌀</div>
+      <div class="col">{{ auction.amount }}</div>
+      <div class="col">{{ auction.startBidAmount }}</div>
+      <div class="col">{{ auction.highestBid ? auction.highestBid.amount : "-" }}</div>
+      <div class="col">{{ auction.finishBidAmount }}</div>
+      <div class="col">{{ auction.highestBid ? auction.highestBid.amount / auction.amount : "-" }}</div>
+      <div class="col">{{ auction.highestBid ? auction.highestBid.generalName : "-" }}</div>
+      <div class="col">{{ auction.closeDate }}</div>
+    </div>
+    <div v-if="selectedBuyRiceAuction !== undefined">
+      <div class="col">{{ selectedBuyRiceAuction.id }}번 쌀 {{ selectedBuyRiceAuction.amount }} 경매에</div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="bidAmountBuyRiceAuction"
+          :int="true"
+          :min="selectedBuyRiceAuction.startBidAmount"
+          :max="selectedBuyRiceAuction.finishBidAmount"
+          title="금"
+          :step="10"
+        ></NumberInputWithInfo>
+      </div>
+      <div class="col"><BButton @click="bidBuyRiceAuction">입찰</BButton></div>
+    </div>
+
+    <div style="background-color: skyblue">쌀 판매</div>
+    <div class="row gx-0">
+      <div class="col">번호</div>
+      <div class="col">판매자</div>
+      <div class="col">물품</div>
+      <div class="col">수량</div>
+      <div class="col">시작 구매가</div>
+      <div class="col">현재 구매가</div>
+      <div class="col">즉시 구매가</div>
+      <div class="col">단가</div>
+      <div class="col">구매 예정자</div>
+      <div class="col">거래 종료</div>
+    </div>
+    <div v-for="auction of sellRice" :key="auction.id" class="row gx-0" @click="selectedSellRiceAuction = auction">
+      <div class="col">{{ auction.id }}</div>
+      <div class="col">{{ auction.hostName }}</div>
+      <div class="col">금</div>
+      <div class="col">{{ auction.amount }}</div>
+      <div class="col">{{ auction.startBidAmount }}</div>
+      <div class="col">{{ auction.highestBid ? auction.highestBid.amount : "-" }}</div>
+      <div class="col">{{ auction.finishBidAmount }}</div>
+      <div class="col">{{ auction.highestBid ? auction.highestBid.amount / auction.amount : "-" }}</div>
+      <div class="col">{{ auction.highestBid ? auction.highestBid.generalName : "-" }}</div>
+      <div class="col">{{ auction.closeDate }}</div>
+    </div>
+    <div v-if="selectedSellRiceAuction !== undefined" class="row">
+      <div class="col">{{ selectedSellRiceAuction.id }}번 금 {{ selectedSellRiceAuction.amount }} 경매에</div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="bidAmountSellRiceAuction"
+          :int="true"
+          :min="selectedSellRiceAuction.startBidAmount"
+          :max="selectedSellRiceAuction.finishBidAmount"
+          title="쌀"
+          :step="10"
+        ></NumberInputWithInfo>
+      </div>
+      <div class="col"><BButton @click="bidSellRiceAuction">입찰</BButton></div>
+    </div>
+
+    <div>경매 등록</div>
+    <div class="row">
+      <div class="col">
+        매물
+        <BButtonGroup>
+          <BButton :pressed="openAuctionInfo.type == 'buyRice'" @click="openAuctionInfo.type = 'buyRice'"> 쌀 </BButton>
+          <BButton :pressed="openAuctionInfo.type == 'sellRice'" @click="openAuctionInfo.type = 'sellRice'">
+            금
+          </BButton>
+        </BButtonGroup>
+      </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="openAuctionInfo.amount"
+          :int="true"
+          :min="100"
+          :max="10000"
+          title="수량"
+          :step="10"
+        ></NumberInputWithInfo>
+      </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="openAuctionInfo.startBidAmount"
+          :int="true"
+          :min="100"
+          :max="10000"
+          title="시작구매가"
+          :step="10"
+        ></NumberInputWithInfo>
+      </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="openAuctionInfo.finishBidAmount"
+          :int="true"
+          :min="100"
+          :max="10000"
+          title="즉시구매가"
+          :step="10"
+        ></NumberInputWithInfo>
+      </div>
+      <div class="col">
+        <BButton @click="openAuction">등록</BButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { BasicResourceAuctionInfo } from "@/defs/API/Auction";
+import { SammoAPI } from "@/SammoAPI";
+import { unwrap } from "@/util/unwrap";
+import { useToast, BButtonGroup, BButton } from "bootstrap-vue-3";
+import { isString } from "lodash";
+import { onMounted, reactive, ref, watch } from "vue";
+import NumberInputWithInfo from "@/components/NumberInputWithInfo.vue";
+const toasts = unwrap(useToast());
+
+const buyRice = ref<BasicResourceAuctionInfo[]>([]);
+const sellRice = ref<BasicResourceAuctionInfo[]>([]);
+
+const selectedBuyRiceAuction = ref<BasicResourceAuctionInfo | undefined>(undefined);
+const bidAmountBuyRiceAuction = ref<number>(0);
+
+watch(selectedBuyRiceAuction, (auction) => {
+  if (!auction) {
+    return;
+  }
+  bidAmountBuyRiceAuction.value = auction.highestBid ? auction.highestBid.amount : auction.startBidAmount;
+});
+
+
+async function bidBuyRiceAuction() {
+  if (selectedBuyRiceAuction.value === undefined) {
+    return;
+  }
+  try {
+    await SammoAPI.Auction.BidBuyRiceAuction({
+      auctionID: selectedBuyRiceAuction.value.id,
+      amount: bidAmountBuyRiceAuction.value,
+    });
+    toasts.success({
+      title: "입찰 완료",
+      body: `입찰했습니다.`,
+    });
+    await refresh();
+  } catch (e) {
+    console.error(e);
+    if (isString(e)) {
+      toasts.danger({
+        title: "에러",
+        body: e,
+      });
+    }
+  }
+}
+
+const selectedSellRiceAuction = ref<BasicResourceAuctionInfo | undefined>(undefined);
+const bidAmountSellRiceAuction = ref<number>(0);
+
+watch(selectedSellRiceAuction, (auction) => {
+  if (!auction) {
+    return;
+  }
+  bidAmountSellRiceAuction.value = auction.highestBid ? auction.highestBid.amount : auction.startBidAmount;
+});
+
+async function bidSellRiceAuction() {
+  if (selectedSellRiceAuction.value === undefined) {
+    return;
+  }
+  try {
+    await SammoAPI.Auction.BidSellRiceAuction({
+      auctionID: selectedSellRiceAuction.value.id,
+      amount: bidAmountSellRiceAuction.value,
+    });
+    toasts.success({
+      title: "입찰 완료",
+      body: `입찰했습니다.`,
+    });
+    await refresh();
+  } catch (e) {
+    console.error(e);
+    if (isString(e)) {
+      toasts.danger({
+        title: "에러",
+        body: e,
+      });
+    }
+  }
+}
+
+type openAuctionT = {
+  type: "buyRice" | "sellRice";
+  amount: number;
+  startBidAmount: number;
+  finishBidAmount: number;
+  closeTurnCnt: number;
+};
+
+const openAuctionInfo = reactive<openAuctionT>({
+  type: "buyRice",
+  amount: 1000,
+  startBidAmount: 500,
+  finishBidAmount: 2000,
+  closeTurnCnt: 24,
+});
+
+async function refresh() {
+  try {
+    const result = await SammoAPI.Auction.GetActiveResourceAuctionList();
+    buyRice.value = result.buyRice;
+    sellRice.value = result.sellRice;
+  } catch (e) {
+    console.error(e);
+    if (isString(e)) {
+      toasts.danger({
+        title: "에러",
+        body: e,
+      });
+    }
+  }
+}
+
+async function openAuction() {
+  const { type, amount, startBidAmount, finishBidAmount, closeTurnCnt } = openAuctionInfo;
+
+  try {
+    const apiCall = type === "buyRice" ? SammoAPI.Auction.OpenBuyRiceAuction : SammoAPI.Auction.OpenSellRiceAuction;
+    const result = await apiCall({
+      amount,
+      startBidAmount,
+      finishBidAmount,
+      closeTurnCnt,
+    });
+    toasts.success({
+      title: "성공",
+      body: `${result.auctionID}번 경매로 등록되었습니다.`,
+    });
+    await refresh();
+  } catch (e) {
+    console.error(e);
+    if (isString(e)) {
+      toasts.danger({
+        title: "에러",
+        body: e,
+      });
+    }
+  }
+}
+
+onMounted(async () => {
+  void refresh();
+  console.log("mounted");
+});
+</script>

hwe/ts/components/AuctionUniqueItem.vue

@@ -0,0 +1,7 @@
+<template>
+<div>유니크 경매장</div>
+</template>
+
+<script lang="ts" setup>
+
+</script>

hwe/ts/v_auction.ts

@@ -1,7 +1,7 @@
 import "@scss/auction.scss";
 import { createApp } from 'vue'
 import PageAuction from '@/PageAuction.vue';
-import BootstrapVue3 from 'bootstrap-vue-3'
+import BootstrapVue3, { BToastPlugin } from 'bootstrap-vue-3'
 import { auto500px } from "./util/auto500px";
 import { insertCustomCSS } from "./util/customCSS";
 import { htmlReady } from "./util/htmlReady";
@@ -11,4 +11,4 @@ auto500px();
 htmlReady(() => {
     insertCustomCSS();
   });
-createApp(PageAuction).use(BootstrapVue3).mount('#app')
+createApp(PageAuction).use(BootstrapVue3).use(BToastPlugin).mount('#app')