feat: PageFront 상단 정보(wip)

hwe/sammo/API/General/GetFrontInfo.php

@@ -92,7 +92,8 @@ class GetFrontInfo extends \sammo\BaseAPI
     $isTournamentApplicationOpen = $gameStor->tournament == 1;
     $isBettingActive = $gameStor->tournament == 6;
     $tournamentType = $gameStor->tnmt_type;
-    $tournamentState = getTournamentTermText($gameStor->turnterm);
+    $tournamentState = $gameStor->tournament;
+    $tournamentTime = $gameStor->tnmt_time;
     $isLocked = boolval($db->queryFirstField('SELECT plock FROM plock WHERE `type`="GAME" LIMIT 1'));
 
     $globalGenCount = $db->queryAllLists('SELECT npc, count(no) FROM general GROUP BY npc');
@@ -122,6 +123,7 @@ class GetFrontInfo extends \sammo\BaseAPI
       'isLocked' => $isLocked,
       'tournamentType' => $tournamentType,
       'tournamentState' => $tournamentState,
+      'tournamentTime' => $tournamentTime,
       'genCount' => $globalGenCount,
       'generalCntLimit' => $generalCntLimit,
       'serverCnt' => $serverCnt,
@@ -176,6 +178,7 @@ class GetFrontInfo extends \sammo\BaseAPI
 
     return [
       'id' => $nationID,
+      'full' => true,
       'name' => $rawNation['name'],
       'population' => $nationPopulation,
       'crew' => $nationCrew,
@@ -214,6 +217,7 @@ class GetFrontInfo extends \sammo\BaseAPI
     $staticInfo = getNationStaticInfo(0);
     return [
       'id' => 0,
+      'full' => false,
       'name' => $staticInfo['name'],
       'population' => [
         'cityCnt' => 0,

hwe/ts/PageFront.vue

@@ -23,47 +23,87 @@
               variant="sammo-base2"
             />
           </div>
-          <div class="scenarioName">시나리오</div>
+          <h3 class="scenarioName center">
-          <div v-if="frontInfo" class="gameInfo">
+            {{ gameConstStore?.gameConst.title }} {{ serverName }}{{ frontInfo?.global.serverCnt }}기
-            <div class="subScenarioName">{{ globalInfo.scenarioText }}</div>
+            <span class="avoid-wrap" style="color: cyan">{{ frontInfo?.global.scenarioText }}</span>
-            <div class="subNPCType">
+          </h3>
-              NPC 수, 상성: {{ globalInfo.extendedGeneral ? "확장" : "표준" }}
+          <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="subNPCMode">NPC선택: {{ ["불가능", "가능", "선택 생성"][globalInfo.npcMode] }}</div>
+            <div class="s-border-t col py-2 col-4 col-md-2 subNPCMode" style="color: cyan">
-            <div class="subTournamentMode">토너먼트: 경기당 {{ calcTournamentTerm(globalInfo.turnterm) }}분</div>
+              NPC선택: {{ ["불가능", "가능", "선택 생성"][globalInfo.npcMode] }}
-            <div class="subOtherSetting">
+            </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="subYearMonth">
+            <div class="s-border-t col py-2 col-8 col-md-4 subYearMonth">
               현재: {{ globalInfo.year }}年 {{ globalInfo.month }}月 ({{ globalInfo.turnterm }}분 턴 서버)
             </div>
-            <div class="subOnlineUserCnt">전체 접속자 수: {{ globalInfo.onlineUserCnt.toLocaleString() }}명</div>
+            <div class="s-border-t col py-2 col-4 col-md-2 subOnlineUserCnt">
-            <div class="subAPILimit">턴당 갱신횟수: {{ globalInfo.apiLimit.toLocaleString() }}회</div>
+              전체 접속자 수: {{ globalInfo.onlineUserCnt.toLocaleString() }}명
-            <div class="subGeneralCnt">
-              등록 장수: 유저
-              {{ globalInfo.genCount.toLocaleString() }} / {{ globalInfo.generalCntLimit.toLocaleString() }}
-              + NPC TODO:NPC Cnt 명
             </div>
-            <div class="subTournamentState">TODO: tournament Text</div>
+            <div class="s-border-t col py-2 col-4 col-md-2 subAPILimit">
-            <div class="subLastExecuted" :style="{ color: serverLocked ? 'magenta' : 'cyan' }">
+              턴당 갱신횟수: {{ 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 v-if="globalInfo.auctionCount" class="subAuctionState" style="color: cyan">
+            <div class="s-border-t py-2 col col-6 col-md-2 subAuctionState">
-              {{ globalInfo.auctionCount.toLocaleString() }}건 거래 진행중
+              <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 v-else class="subAcutionState" style="color: magenta">진행중인 거래 없음</div>
+            <div class="s-border-t py-2 col col-6 col-md-4 subVoteState">
-            <div v-if="globalInfo.lastVote" class="subVoteState">
+              <a v-if="globalInfo.lastVote" href="v_vote.php" target="_blank">
-              <span style="color: cyan">설문 진행 중: </span><span>{{ globalInfo.lastVote.title }}</span>
+                <span style="color: cyan">설문 진행 중: </span><span>{{ globalInfo.lastVote.title }}</span>
+              </a>
+              <span v-else style="color: magenta">진행중인 설문 없음</span>
             </div>
-            <div v-else class="subVoteState" style="color: magenta">진행중인 설문 없음</div>
           </div>
-          <div class="onlineNations">접속중인 국가: {{ globalInfo.onlineNations }}</div>
+          <div class="s-border-t px-2 py-2 onlineNations">접속중인 국가: {{ globalInfo.onlineNations }}</div>
-          <div class="onlineUsers">접속자</div>
+          <div class="s-border-t px-2 py-2 onlineUsers">【 접속자 】 {{ nationInfo?.onlineGen }}</div>
-          <div class="nationNotice">국가 방침
+          <div class="s-border-t py-2 nationNotice">
+            <div class="px-2">【 국가방침 】</div>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <div v-if="nationInfo" class="nationNoticeBody" v-html="nationInfo.nationNotice.msg" />
+            <div v-if="nationInfo" class="nationNoticeBody" v-html="nationInfo.notice.msg" />
           </div>
           <div id="ingameBoard">
             <!-- TODO: 운영자 툴바는 어디에?-->
@@ -218,7 +258,7 @@ 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 { NationInfoFull } from "./defs/API/Nation";
 import type { MapResult, NationStaticItem } from "./defs";
 import { formatTime } from "./util/formatTime";
 import { calcTournamentTerm } from "./utilGame";
@@ -228,6 +268,7 @@ 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";
 
 const { serverName, serverNick, serverID } = staticValues;
 
@@ -431,7 +472,18 @@ const frontInfo = ref<GetFrontInfoResponse>();
 const globalInfo = ref<GetFrontInfoResponse["global"]>({} as GetFrontInfoResponse["global"]);
 const generalInfo = ref<GetFrontInfoResponse["general"]>();
 const nationStaticInfo = ref<NationStaticItem>();
-const nationInfo = ref<NationInfoFull>();
+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;
 
 watch(refreshCounter, async () => {
@@ -453,6 +505,7 @@ watch(refreshCounter, async () => {
     }
 
     const rawNation = response.nation;
+    nationInfo.value = rawNation;
     nationStaticInfo.value = {
       nation: rawNation.id,
       name: rawNation.name,
@@ -473,21 +526,24 @@ watch(refreshCounter, async () => {
   }
 });
 
-watch(refreshCounter, async () => {
+watch(globalInfo, (global) => {
-  try {
+  const value = new Map<number, number>();
-    const response = await SammoAPI.Nation.GetNationInfo({full: true});
+  let userCnt = 0;
-    console.log('nation', response);
+  let npcCnt = 0;
-    if(!response.isFull){
+  for (const [npcType, cnt] of global.genCount) {
-      throw 'NationInfo 반환값 에러';
+    value.set(npcType, cnt);
+    if (npcType < 2) {
+      userCnt += cnt;
+    } else {
+      npcCnt += cnt;
     }
-    nationInfo.value = response;
-  } catch (e) {
-    console.error(e);
-    toasts.danger({
-      title: "국가 정보 갱신 실패",
-      body: `${e}`,
-    });
   }
+  generalCnt.value = value;
+  createdUserCnt.value = userCnt;
+  createdNPCCnt.value = npcCnt;
+
+  tournamentStep.value = formatTournamentStep(global.tournamentState);
+  tournamentTime.value = parseTime(global.tournamentTime);
 });
 
 const map = ref<MapResult>();
@@ -544,6 +600,10 @@ watch(refreshCounter, async () => {
   justify-content: space-between;
 }
 
+.gameInfo {
+  text-align: center;
+}
+
 .generalInfo {
   width: 500px;
 }
@@ -552,12 +612,18 @@ watch(refreshCounter, async () => {
   display: grid;
 }
 
-.nationNoticeBody{
+.nationNoticeBody {
   :deep(p) {
     min-height: 1em;
   }
 }
 
+.subVoteState, .subAuctionState, .subTournamentState {
+  a {
+    text-decoration: gray underline;
+  }
+}
+
 @include media-500px {
   #outBlock {
     position: absolute;
@@ -578,10 +644,6 @@ watch(refreshCounter, async () => {
 
   #container {
     width: 500px;
-    > main > div {
-      min-height: 100px;
-      /* 테스트 */
-    }
   }
 
   #ingameBoard {

hwe/ts/components/AutorunInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <span v-if="autorunMode.limit_minutes > 0" v-b-tooltip.hover :title="tooltipText">자율행동</span>
+  <span v-if="autorunMode.limit_minutes > 0" v-b-tooltip.hover :title="tooltipText" style="text-decoration: underline;">자율행동</span>
 </template>
 <script setup lang="ts">
 import type { AutorunUserMode } from '@/defs/API/Global';

hwe/ts/defs/API/Global.ts

@@ -9,7 +9,7 @@ import type {
   GameIActionInfo,
 } from "@/defs/GameObj";
 import type { diplomacyState, MapResult, NationLevel, SimpleNationObj } from "@/defs";
-import type { GeneralListItemP0, GeneralListItemP1 } from "./Nation";
+import type { GeneralListItemP0, GeneralListItemP1, NationNotice } from "./Nation";
 import type { VoteInfo } from "./Vote";
 
 export interface GetConstResponse {
@@ -130,7 +130,8 @@ export type GetFrontInfoResponse = {
     isBettingActive: boolean;
     isLocked: boolean;
     tournamentType: null | 0 | 1 | 2 | 3;
-    tournamentState: string;
+    tournamentState: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+    tournamentTime: string;
     genCount: [number, number][];
     generalCntLimit: number;
     serverCnt: number;
@@ -166,7 +167,7 @@ export type GetFrontInfoResponse = {
       cons: string;
     };
     color: string;
-    level: NationLevel;
+    level: NationLevel
     capital: number;
     gold: number;
     rice: number;
@@ -176,7 +177,7 @@ export type GetFrontInfoResponse = {
     bill: number;
     taxRate: number;
     onlineGen: string;
-    notice: string;
+    notice: NationNotice;
     topChiefs: Record<
       11 | 12,
       {

hwe/ts/utilGame/formatTournament.ts

@@ -0,0 +1,35 @@
+const typeMap = ["전력전", "통솔전", "일기토", "설전"];
+
+export function formatTournamentType(type: null | undefined | 0 | 1 | 2 | 3): string {
+  if (type === null || type === undefined) {
+    return "?";
+  }
+  return typeMap[type];
+}
+
+export type TournamentStepType = {
+  availableJoin: boolean;
+  state: string;
+  nextText: string;
+};
+const stepMap: TournamentStepType[] = [
+  { availableJoin: false, state: "경기 없음", nextText:"" },
+  { availableJoin: true, state: "참가 모집중", nextText:"개막시간" },
+  { availableJoin: false, state: "예선 진행중", nextText:"다음경기" },
+  { availableJoin: false, state: "본선 추첨중", nextText:"다음추첨" },
+  { availableJoin: false, state: "본선 진행중", nextText:"다음경기" },
+  { availableJoin: false, state: "16강 배정중", nextText:"16강배정" },
+  { availableJoin: true, state: "베팅 진행중", nextText:"베팅마감" },
+  { availableJoin: false, state: "16강 진행중", nextText:"다음경기" },
+  { availableJoin: false, state: "8강 진행중", nextText:"다음경기" },
+  { availableJoin: false, state: "4강 진행중", nextText:"다음경기" },
+  { availableJoin: false, state: "결승 진행중", nextText:"다음경기" },
+];
+
+export function formatTournamentStep(step: null | undefined | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10): TournamentStepType {
+  if (step === null || step === undefined) {
+    return stepMap[0];
+  }
+
+  return stepMap[step];
+}