feat: 중앙 컨트롤 바(wip)

hwe/ts/PageFront.vue

@@ -104,7 +104,16 @@
               />
             </div>
 
-            <div class="generalCommandToolbar">국가 툴바</div>
+            <div class="generalCommandToolbar">
+              <MainControlBar
+                v-if="generalInfo"
+                :permission="generalInfo.permission"
+                :showSecret="showSecret"
+                :myLevel="generalInfo.officerLevel"
+                :nationLevel="nationStaticInfo?.level ?? 0"
+                :nationColor="nationStaticInfo?.color.substring(1,7) ?? '000000'"
+              />
+            </div>
             <div id="actionMiniPlateSub" class="gx-0 row">
               <div class="col">
                 <div class="gx-1 row">
@@ -179,7 +188,7 @@ declare const formatCityInfo: (city: MapCityParsedRaw) => MapCityParsed;
 <script lang="ts" setup>
 import { BContainer, BButton, useToast } from "bootstrap-vue-3";
 import { isString } from "lodash";
-import { provide, ref, watch } from "vue";
+import { computed, provide, ref, watch } from "vue";
 import { GameConstStore, getGameConstStore } from "./GameConstStore";
 import { SammoAPI, type InvalidResponse } from "./SammoAPI";
 import { parseTime } from "./util/parseTime";
@@ -200,6 +209,7 @@ import MapViewer, { type CityPositionMap, type MapCityParsed, type MapCityParsed
 import PartialReservedCommand from "./PartialReservedCommand.vue";
 import AutorunInfo from "./components/AutorunInfo.vue";
 import { scrollHardTo } from "./util/scrollHardTo";
+import MainControlBar from "./components/MainControlBar.vue";
 
 const { serverName, serverNick, serverID } = staticValues;
 
@@ -218,6 +228,19 @@ const storeP = getGameConstStore().then((store) => {
   gameConstStore.value = store;
 });
 
+const showSecret = computed(() => {
+  if (!frontInfo.value) {
+    return false;
+  }
+  if (frontInfo.value.general.permission >= 1) {
+    return true;
+  }
+  if (frontInfo.value.general.officerLevel >= 2) {
+    return true;
+  }
+  return false;
+});
+
 let responseLock = false;
 
 const msgPanel = ref<InstanceType<typeof MessagePanel>>();
@@ -508,7 +531,7 @@ watch(refreshCounter, async () => {
     grid-template-columns: 1fr;
   }
 
-  #actionMiniPlate{
+  #actionMiniPlate {
     display: none;
   }
 }
@@ -522,12 +545,12 @@ watch(refreshCounter, async () => {
     grid-template-columns: 500px 200px 300px;
   }
 
-  .mapView{
+  .mapView {
     grid-column: 1 / 3;
     grid-row: 1;
   }
 
-  .reservedCommandZone{
+  .reservedCommandZone {
     grid-column: 3;
     grid-row: 1 / 3;
   }
@@ -537,7 +560,7 @@ watch(refreshCounter, async () => {
     grid-row: 2 / 4;
   }
 
-  #actionMiniPlate{
+  #actionMiniPlate {
     grid-column: 3;
     grid-row: 3;
     padding-left: 10px;
@@ -545,19 +568,19 @@ watch(refreshCounter, async () => {
     padding-bottom: 10px;
   }
 
-  .generalCommandToolbar{
+  .generalCommandToolbar {
     grid-column: 1 / 4;
   }
 
-  .nationInfo{
+  .nationInfo {
     grid-column: 1;
   }
 
-  .generalInfo{
+  .generalInfo {
     grid-column: 2 / 4;
   }
 
-  #actionMiniPlateSub{
+  #actionMiniPlateSub {
     display: none;
   }
 }

hwe/ts/components/MainControlBar.vue

@@ -0,0 +1,117 @@
+<template>
+  <div :class="`sam-color-${nationColor} controlBar`">
+    <a href="v_board.php" :class="`commandButton btn btn-sammo-nation ${myLevel >= 1 ? '' : 'disabled'}`">회 의 실</a>
+    <a
+      href="v_board.php?isSecret=true"
+      :class="`commandButton ${permission >= 2 ? '' : 'disabled'} btn btn-sammo-nation`"
+      >기 밀 실</a
+    >
+    <a
+      href="v_troop.php"
+      :class="`commandButton ${myLevel >= 1 && nationLevel >= 1 ? '' : 'disabled'} btn btn-sammo-nation`"
+      >부대 편성</a
+    >
+    <a href="t_diplomacy.php" :class="`commandButton ${showSecret ? '' : 'disabled'} btn btn-sammo-nation`">외 교 부</a>
+    <a href="b_myBossInfo.php" :class="`commandButton ${myLevel >= 1 ? '' : 'disabled'} btn btn-sammo-nation`"
+      >인 사 부</a
+    >
+    <a href="v_nationStratFinan.php" :class="`commandButton ${showSecret ? '' : 'disabled'} btn btn-sammo-nation`"
+      >내 무 부</a
+    >
+    <a href="v_chiefCenter.php" :class="`commandButton ${showSecret ? '' : 'disabled'} btn btn-sammo-nation`"
+      >사 령 부</a
+    >
+    <a href="v_NPCControl.php" :class="`commandButton ${showSecret ? '' : 'disabled'} btn btn-sammo-nation`"
+      >NPC 정책</a
+    >
+    <a
+      href="b_genList.php"
+      target="_blank"
+      :class="`open-window commandButton btn btn-sammo-nation ${showSecret ? '' : 'disabled'}`"
+      >암 행 부</a
+    >
+    <a href="b_tournament.php" target="_blank" class="commandButton btn btn-sammo-nation">토 너 먼 트</a>
+    <a href="b_myKingdomInfo.php" :class="`commandButton btn btn-sammo-nation ${myLevel >= 1 ? '' : 'disabled'}`"
+      >세력 정보</a
+    >
+    <a
+      href="b_myCityInfo.php"
+      :class="`commandButton btn btn-sammo-nation ${myLevel >= 1 && nationLevel >= 1 ? '' : 'disabled'}`"
+      >세력 도시</a
+    >
+    <a href="v_nationGeneral.php" :class="`commandButton btn btn-sammo-nation ${myLevel >= 1 ? '' : 'disabled'}`"
+      >세력 장수</a
+    >
+    <a href="v_globalDiplomacy.php" class="commandButton btn btn-sammo-nation">중원 정보</a>
+    <a href="b_currentCity.php" class="commandButton btn btn-sammo-nation">현재 도시</a>
+    <a
+      href="v_battleCenter.php"
+      target="_blank"
+      :class="`open-window commandButton btn btn-sammo-nation ${showSecret ? '' : 'disabled'}`"
+      >감 찰 부</a
+    >
+    <a href="v_inheritPoint.php" class="commandButton btn btn-sammo-nation">유산 관리</a>
+    <a href="b_myPage.php" class="commandButton btn btn-sammo-nation">내 정보&amp;설정</a>
+    <div class="btn-group">
+      <a href="v_auction.php" target="_blank" class="open-window commandButton btn btn-sammo-nation">경 매 장</a>
+      <button
+        type="button"
+        class="btn btn-sammo-nation dropdown-toggle dropdown-toggle-split"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        <span class="visually-hidden">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-end">
+        <li>
+          <a href="v_auction.php" target="_blank" class="open-window commandButton dropdown-item">금/쌀 경매장</a>
+        </li>
+        <li>
+          <a href="v_auction.php?type=unique" target="_blank" class="open-window commandButton dropdown-item"
+            >유니크 경매장</a
+          >
+        </li>
+      </ul>
+    </div>
+    <a href="b_betting.php" target="_blank" class="commandButton btn btn-sammo-nation">베 팅 장</a>
+  </div>
+</template>
+<script setup lang="ts">
+import { toRefs } from "vue";
+
+const props = defineProps<{
+  showSecret: boolean;
+  permission: number;
+  myLevel: number;
+  nationLevel: number;
+  nationColor: string;
+}>();
+
+const { showSecret, permission, myLevel, nationLevel, nationColor } = toRefs(props);
+</script>
+
+<style lang="scss" scoped>
+@import "@scss/common/break_500px.scss";
+
+@include media-500px {
+  .controlBar {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.1rem;
+  }
+}
+
+@include media-1000px{
+  .controlBar {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.1rem;
+  }
+}
+</style>