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;
   }
 }