refac: GameInfo, gameEvent.scss 분리

hwe/scss/gameEvent.scss

@@ -0,0 +1,28 @@
+.ev_warning {
+  color: orangered;
+}
+
+.ev_notice {
+  color: orangered;
+}
+
+.ev_succes {
+  color: lightgreen;
+}
+
+.ev_sell {
+  color: orange;
+}
+
+.ev_failed {
+  color: orangered;
+}
+
+.ev_highlight {
+  color: orangered;
+}
+
+.hidden_but_copyable {
+  color: rgba(0, 0, 0, 0);
+  font-size: 0;
+}

hwe/ts/PageFront.vue

@@ -23,81 +23,13 @@
               variant="sammo-base2"
             />
           </div>
-          <h3 class="scenarioName center">
+          <GameInfo
-            {{ gameConstStore?.gameConst.title }} {{ serverName }}{{ frontInfo?.global.serverCnt }}기
+            v-if="frontInfo"
-            <span class="avoid-wrap" style="color: cyan">{{ frontInfo?.global.scenarioText }}</span>
+            :frontInfo="frontInfo"
-          </h3>
+            :serverLocked="serverLocked"
-          <div v-if="frontInfo" class="gameInfo row gx-0">
+            :serverName="serverName"
-            <div class="s-border-t col py-2 col-8 col-md-4 subScenarioName" style="color: cyan">
+            :lastExecuted="lastExecuted"
-              {{ globalInfo.scenarioText }}
+          />
-            </div>
-            <div class="s-border-t col py-2 col-4 col-md-2 subNPCType" style="color: cyan">
-              NPC 수, 상성:
-              {{ globalInfo.extendedGeneral ? "확장" : "표준" }}
-              {{ globalInfo.isFiction ? "가상" : "사실" }}
-            </div>
-            <div class="s-border-t col py-2 col-4 col-md-2 subNPCMode" style="color: cyan">
-              NPC선택: {{ ["불가능", "가능", "선택 생성"][globalInfo.npcMode] }}
-            </div>
-            <div class="s-border-t col py-2 col-4 col-md-2 subTournamentMode" style="color: cyan">
-              토너먼트: 경기당 {{ calcTournamentTerm(globalInfo.turnterm) }}분
-            </div>
-            <div class="s-border-t col py-2 col-4 col-md-2 subOtherSetting" style="color: cyan">
-              기타 설정:
-              <AutorunInfo :autorunMode="globalInfo.autorunUser" />
-            </div>
-            <div class="s-border-t col py-2 col-8 col-md-4 subYearMonth">
-              현재: {{ globalInfo.year }}年 {{ globalInfo.month }}月 ({{ globalInfo.turnterm }}분 턴 서버)
-            </div>
-            <div class="s-border-t col py-2 col-4 col-md-2 subOnlineUserCnt">
-              전체 접속자 수: {{ globalInfo.onlineUserCnt.toLocaleString() }}명
-            </div>
-            <div class="s-border-t col py-2 col-4 col-md-2 subAPILimit">
-              턴당 갱신횟수: {{ globalInfo.apiLimit.toLocaleString() }}회
-            </div>
-            <div class="s-border-t col py-2 col-8 col-md-4 subGeneralCnt">
-              등록 장수: 유저
-              {{ createdUserCnt.toLocaleString() }} / {{ globalInfo.generalCntLimit.toLocaleString() }} +
-              <span style="color: cyan">NPC {{ createdNPCCnt.toLocaleString() }} 명</span>
-            </div>
-            <div class="s-border-t py-2 col col-6 col-md-4 subTournamentState">
-              <span v-if="frontInfo.global.tournamentType">
-                <a v-if="tournamentStep.availableJoin" href="b_tournament.php" target="_blank">
-                  ↑<span style="color: cyan"
-                    >{{ formatTournamentType(frontInfo.global.tournamentType) }}
-                    <span style="color: orange">{{ tournamentStep.state }}</span> {{ tournamentStep.nextText }}
-                    {{ formatTime(tournamentTime).substring(11, 16) }}</span
-                  >↑
-                </a>
-                <span v-else>
-                  ↑<span style="color: cyan"
-                    >{{ formatTournamentType(frontInfo.global.tournamentType) }}
-                    <span style="color: magenta">{{ tournamentStep.state }}</span> {{ tournamentStep.nextText }}
-                    {{ formatTime(tournamentTime).substring(11, 16) }}</span
-                  >↑
-                </span>
-              </span>
-              <span v-else style="color: magenta"> 현재 토너먼트 경기 없음 </span>
-            </div>
-            <div
-              class="s-border-t py-2 col col-6 col-md-2 subLastExecuted"
-              :style="{ color: serverLocked ? 'magenta' : 'cyan' }"
-            >
-              동작 시각: {{ formatTime(lastExecuted).substring(5) }}
-            </div>
-            <div class="s-border-t py-2 col col-6 col-md-2 subAuctionState">
-              <a v-if="globalInfo.auctionCount" href="v_auction.php" target="_blank" style="color: cyan">
-                {{ globalInfo.auctionCount.toLocaleString() }}건 거래 진행중
-              </a>
-              <span v-else style="color: magenta">진행중인 거래 없음</span>
-            </div>
-            <div class="s-border-t py-2 col col-6 col-md-4 subVoteState">
-              <a v-if="globalInfo.lastVote" href="v_vote.php" target="_blank">
-                <span style="color: cyan">설문 진행 중: </span><span>{{ globalInfo.lastVote.title }}</span>
-              </a>
-              <span v-else style="color: magenta">진행중인 설문 없음</span>
-            </div>
-          </div>
           <div class="s-border-t px-2 py-2 onlineNations">접속중인 국가: {{ globalInfo.onlineNations }}</div>
           <div class="s-border-t px-2 py-2 onlineUsers">【 접속자 】 {{ nationInfo?.onlineGen }}</div>
           <div class="s-border-t py-2 nationNotice">
@@ -216,11 +148,11 @@
           </div>
           <MessagePanel
             v-if="generalInfo"
+            ref="msgPanel"
             :generalID="generalInfo.no"
             :generalName="generalInfo.name"
             :nationID="generalInfo.nation"
             :permissionLevel="generalInfo.permission"
-            ref="msgPanel"
           />
           <div class="commonToolbar">
             <GlobalMenu
@@ -257,28 +189,24 @@ import { BContainer, BButton, useToast } from "bootstrap-vue-3";
 import { isString } from "lodash";
 import { computed, onMounted, provide, ref, watch } from "vue";
 import { GameConstStore, getGameConstStore } from "./GameConstStore";
-import { SammoAPI, type InvalidResponse } from "./SammoAPI";
+import { SammoAPI } from "./SammoAPI";
 import { parseTime } from "./util/parseTime";
 import { unwrap } from "./util/unwrap";
 import Denque from "denque";
 import { formatLog } from "@/utilGame/formatLog";
-import type { ExecuteResponse, GetFrontInfoResponse, GetMenuResponse } from "./defs/API/Global";
+import type { GetFrontInfoResponse, GetMenuResponse } from "./defs/API/Global";
 import { delay } from "./util/delay";
 import CityBasicCard from "./components/CityBasicCard.vue";
 import NationBasicCard from "./components/NationBasicCard.vue";
 import GeneralBasicCard from "./components/GeneralBasicCard.vue";
 import MessagePanel from "./components/MessagePanel.vue";
-import type { NationInfoFull } from "./defs/API/Nation";
 import type { MapResult, NationStaticItem } from "./defs";
-import { formatTime } from "./util/formatTime";
-import { calcTournamentTerm } from "./utilGame";
 import MapViewer, { type CityPositionMap, type MapCityParsed, type MapCityParsedRaw } from "./components/MapViewer.vue";
 import PartialReservedCommand from "./PartialReservedCommand.vue";
-import AutorunInfo from "./components/AutorunInfo.vue";
 import { scrollHardTo } from "./util/scrollHardTo";
 import MainControlBar from "./components/MainControlBar.vue";
 import GlobalMenu from "./components/GlobalMenu.vue";
-import { formatTournamentStep, formatTournamentType, type TournamentStepType } from "./utilGame/formatTournament";
+import GameInfo from "./components/GameInfo.vue";
 
 const { serverName, serverNick, serverID } = staticValues;
 
@@ -394,63 +322,38 @@ watch(refreshCounter, async () => {
   try {
     recordLock = true;
 
+
     const response = await SammoAPI.Global.GetRecentRecord({
       lastGeneralRecordID: lastGeneralRecordID.value,
       lastWorldHistoryID: lastWorldHistoryID.value,
     });
     recordLock = false;
 
-    if (response.flushGeneral) {
-      generalRecords.value = new Denque<[number, string]>();
-    }
-    if (response.flushGlobal) {
-      globalRecords.value = new Denque<[number, string]>();
-    }
-    if (response.flushHistory) {
-      worldHistory.value = new Denque<[number, string]>();
-    }
 
-    if (response.general.length) {
+    const recordIter = [
-      lastGeneralRecordID.value = Math.max(lastGeneralRecordID.value, response.general[0][0]);
+      ['flushGeneral', generalRecords, 'general'],
-    }
+      ['flushGlobal', globalRecords, 'global'],
-    if (response.global.length) {
+      ['flushHistory', worldHistory, 'history'],
-      lastGeneralRecordID.value = Math.max(lastGeneralRecordID.value, response.global[0][0]);
+    ] as const;
-    }
-    if (response.history.length) {
-      lastWorldHistoryID.value = Math.max(lastWorldHistoryID.value, response.history[0][0]);
-    }
 
-    while (response.general.length) {
+    for(const [flushKey, recordRef, recordKey] of recordIter) {
-      const [id, record] = unwrap(response.general.pop());
+      if (response[flushKey]) {
-      if (!generalRecords.value.isEmpty() && id <= unwrap(generalRecords.value.get(0))[0]) {
+        recordRef.value = new Denque<[number, string]>();
-        continue;
       }
-      if (generalRecords.value.length >= 15) {
+      if (response[recordKey].length) {
-        generalRecords.value.pop();
+        lastGeneralRecordID.value = Math.max(lastGeneralRecordID.value, response[recordKey][0][0]);
       }
-      generalRecords.value.unshift([id, record]);
+      const subRecord = response[recordKey];
-    }
+      while(subRecord.length){
-
+        const [id, record] = unwrap(subRecord.pop());
-    while (response.global.length) {
+        if(!recordRef.value.isEmpty() && id <= unwrap(recordRef.value.get(0))[0]){
-      const [id, record] = unwrap(response.global.pop());
+          continue;
-      if (!globalRecords.value.isEmpty() && id <= unwrap(globalRecords.value.get(0))[0]) {
+        }
-        continue;
+        if(recordRef.value.length >= 15){
+          recordRef.value.pop();
+        }
+        recordRef.value.unshift([id, formatLog(record)]);
       }
-      if (globalRecords.value.length >= 15) {
-        globalRecords.value.pop();
-      }
-      globalRecords.value.unshift([id, record]);
-    }
-
-    while (response.history.length) {
-      const [id, record] = unwrap(response.history.pop());
-      if (!worldHistory.value.isEmpty() && id <= unwrap(worldHistory.value.get(0))[0]) {
-        continue;
-      }
-      if (worldHistory.value.length >= 15) {
-        worldHistory.value.pop();
-      }
-      worldHistory.value.unshift([id, record]);
     }
   } catch (e) {
     recordLock = false;
@@ -483,16 +386,6 @@ const globalInfo = ref<GetFrontInfoResponse["global"]>({} as GetFrontInfoRespons
 const generalInfo = ref<GetFrontInfoResponse["general"]>();
 const nationStaticInfo = ref<NationStaticItem>();
 const nationInfo = ref<GetFrontInfoResponse["nation"]>();
-const generalCnt = ref(new Map<number, number>());
-const createdUserCnt = ref(0);
-const createdNPCCnt = ref(0);
-
-const tournamentStep = ref<TournamentStepType>({
-  availableJoin: false,
-  state: "초기화 중",
-  nextText: "",
-});
-const tournamentTime = ref<Date>(new Date());
 
 let generalInfoLock = false;
 
@@ -536,26 +429,6 @@ watch(refreshCounter, async () => {
   }
 });
 
-watch(globalInfo, (global) => {
-  const value = new Map<number, number>();
-  let userCnt = 0;
-  let npcCnt = 0;
-  for (const [npcType, cnt] of global.genCount) {
-    value.set(npcType, cnt);
-    if (npcType < 2) {
-      userCnt += cnt;
-    } else {
-      npcCnt += cnt;
-    }
-  }
-  generalCnt.value = value;
-  createdUserCnt.value = userCnt;
-  createdNPCCnt.value = npcCnt;
-
-  tournamentStep.value = formatTournamentStep(global.tournamentState);
-  tournamentTime.value = parseTime(global.tournamentTime);
-});
-
 const map = ref<MapResult>();
 
 const cityPosition = getCityPosition();
@@ -599,10 +472,8 @@ watch(refreshCounter, async () => {
 </script>
 <style lang="scss" scoped>
 @import "@scss/common/break_500px.scss";
-
+:deep(){
-:deep(.hidden_but_copyable) {
+  @import "@scss/gameEvent.scss";
-  color: rgba(0, 0, 0, 0);
-  font-size: 0;
 }
 
 #mobileBottomBar {
@@ -615,10 +486,6 @@ watch(refreshCounter, async () => {
   justify-content: space-between;
 }
 
-.gameInfo {
-  text-align: center;
-}
-
 .generalInfo {
   width: 500px;
 }
@@ -633,14 +500,6 @@ watch(refreshCounter, async () => {
   }
 }
 
-.subVoteState,
-.subAuctionState,
-.subTournamentState {
-  a {
-    text-decoration: gray underline;
-  }
-}
-
 @include media-500px {
   #outBlock {
     position: absolute;

hwe/ts/components/GameInfo.vue

@@ -0,0 +1,155 @@
+<template>
+  <h3 class="scenarioName center">
+    {{ gameConstStore?.gameConst.title }} {{ serverName }}{{ frontInfo?.global.serverCnt }}기
+    <span class="avoid-wrap" style="color: cyan">{{ frontInfo?.global.scenarioText }}</span>
+  </h3>
+  <div v-if="frontInfo" class="gameInfo row gx-0">
+    <div class="s-border-t col py-2 col-8 col-md-4 subScenarioName" style="color: cyan">
+      {{ globalInfo.scenarioText }}
+    </div>
+    <div class="s-border-t col py-2 col-4 col-md-2 subNPCType" style="color: cyan">
+      NPC 수, 상성:
+      {{ globalInfo.extendedGeneral ? "확장" : "표준" }}
+      {{ globalInfo.isFiction ? "가상" : "사실" }}
+    </div>
+    <div class="s-border-t col py-2 col-4 col-md-2 subNPCMode" style="color: cyan">
+      NPC선택: {{ ["불가능", "가능", "선택 생성"][globalInfo.npcMode] }}
+    </div>
+    <div class="s-border-t col py-2 col-4 col-md-2 subTournamentMode" style="color: cyan">
+      토너먼트: 경기당 {{ calcTournamentTerm(globalInfo.turnterm) }}분
+    </div>
+    <div class="s-border-t col py-2 col-4 col-md-2 subOtherSetting" style="color: cyan">
+      기타 설정:
+      <AutorunInfo :autorunMode="globalInfo.autorunUser" />
+    </div>
+    <div class="s-border-t col py-2 col-8 col-md-4 subYearMonth">
+      현재: {{ globalInfo.year }}年 {{ globalInfo.month }}月 ({{ globalInfo.turnterm }}분 턴 서버)
+    </div>
+    <div class="s-border-t col py-2 col-4 col-md-2 subOnlineUserCnt">
+      전체 접속자 수: {{ globalInfo.onlineUserCnt.toLocaleString() }}명
+    </div>
+    <div class="s-border-t col py-2 col-4 col-md-2 subAPILimit">
+      턴당 갱신횟수: {{ globalInfo.apiLimit.toLocaleString() }}회
+    </div>
+    <div class="s-border-t col py-2 col-8 col-md-4 subGeneralCnt">
+      등록 장수: 유저
+      {{ createdUserCnt.toLocaleString() }} / {{ globalInfo.generalCntLimit.toLocaleString() }} +
+      <span style="color: cyan">NPC {{ createdNPCCnt.toLocaleString() }} 명</span>
+    </div>
+    <div class="s-border-t py-2 col col-6 col-md-4 subTournamentState">
+      <span v-if="frontInfo.global.tournamentType">
+        <a v-if="tournamentStep.availableJoin" href="b_tournament.php" target="_blank">
+          ↑<span style="color: cyan"
+            >{{ formatTournamentType(frontInfo.global.tournamentType) }}
+            <span style="color: orange">{{ tournamentStep.state }}</span> {{ tournamentStep.nextText }}
+            {{ formatTime(tournamentTime).substring(11, 16) }}</span
+          >↑
+        </a>
+        <span v-else>
+          ↑<span style="color: cyan"
+            >{{ formatTournamentType(frontInfo.global.tournamentType) }}
+            <span style="color: magenta">{{ tournamentStep.state }}</span> {{ tournamentStep.nextText }}
+            {{ formatTime(tournamentTime).substring(11, 16) }}</span
+          >↑
+        </span>
+      </span>
+      <span v-else style="color: magenta"> 현재 토너먼트 경기 없음 </span>
+    </div>
+    <div
+      class="s-border-t py-2 col col-6 col-md-2 subLastExecuted"
+      :style="{ color: serverLocked ? 'magenta' : 'cyan' }"
+    >
+      동작 시각: {{ formatTime(lastExecuted).substring(5) }}
+    </div>
+    <div class="s-border-t py-2 col col-6 col-md-2 subAuctionState">
+      <a v-if="globalInfo.auctionCount" href="v_auction.php" target="_blank" style="color: cyan">
+        {{ globalInfo.auctionCount.toLocaleString() }}건 거래 진행중
+      </a>
+      <span v-else style="color: magenta">진행중인 거래 없음</span>
+    </div>
+    <div class="s-border-t py-2 col col-6 col-md-4 subVoteState">
+      <a v-if="globalInfo.lastVote" href="v_vote.php" target="_blank">
+        <span style="color: cyan">설문 진행 중: </span><span>{{ globalInfo.lastVote.title }}</span>
+      </a>
+      <span v-else style="color: magenta">진행중인 설문 없음</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { GetFrontInfoResponse } from "@/defs/API/Global";
+import type { GameConstStore } from "@/GameConstStore";
+import { unwrap } from "@/util/unwrap";
+import { inject, toRefs, ref, watch } from "vue";
+import { formatTime } from "@/util/formatTime";
+import { calcTournamentTerm } from "@/utilGame";
+import { formatTournamentStep, type TournamentStepType, formatTournamentType } from "@/utilGame/formatTournament";
+import { parseTime } from "@/util/parseTime";
+import AutorunInfo from "./AutorunInfo.vue";
+
+const props = defineProps<{
+  frontInfo: GetFrontInfoResponse;
+  serverName: string;
+  serverLocked: boolean;
+  lastExecuted: Date;
+}>();
+
+const { frontInfo, serverName, serverLocked, lastExecuted } = toRefs(props);
+
+const globalInfo = ref(frontInfo.value.global);
+
+const gameConstStore = unwrap(inject<GameConstStore>("gameConstStore"));
+
+const generalCnt = ref(new Map<number, number>());
+const createdUserCnt = ref(0);
+const createdNPCCnt = ref(0);
+
+const tournamentStep = ref<TournamentStepType>({
+  availableJoin: false,
+  state: "초기화 중",
+  nextText: "",
+});
+const tournamentTime = ref<Date>(new Date());
+
+function updateFrontInfo(frontInfo: GetFrontInfoResponse){
+  const global = frontInfo.global;
+  globalInfo.value = global;
+
+  const value = new Map<number, number>();
+  let userCnt = 0;
+  let npcCnt = 0;
+  for (const [npcType, cnt] of global.genCount) {
+    value.set(npcType, cnt);
+    if (npcType < 2) {
+      userCnt += cnt;
+    } else {
+      npcCnt += cnt;
+    }
+  }
+  generalCnt.value = value;
+  createdUserCnt.value = userCnt;
+  createdNPCCnt.value = npcCnt;
+
+  tournamentStep.value = formatTournamentStep(global.tournamentState);
+  tournamentTime.value = parseTime(global.tournamentTime);
+}
+
+watch(frontInfo, updateFrontInfo, {immediate: true});
+
+</script>
+
+<style lang="scss" scoped>
+@import "@scss/common/break_500px.scss";
+
+.gameInfo {
+  text-align: center;
+}
+
+.subVoteState,
+.subAuctionState,
+.subTournamentState {
+  a {
+    text-decoration: gray underline;
+  }
+}
+
+</style>