wip: 메인 페이지 메인 정보란 레이아웃

hwe/ts/PageFront.vue

@@ -14,7 +14,7 @@
       </nav>
       <!-- eslint-disable-next-line vue/max-attributes-per-line -->
       <BContainer v-if="asyncReady" id="container" :position="'position-relative'" :toast="{ root: true }" class="bg0">
-        <main class="row gx-0">
+        <main class="gx-0">
           <div class="commonToolbar">툴바?</div>
           <div class="scenarioName">시나리오</div>
           <div v-if="frontInfo" class="gameInfo">
@@ -25,7 +25,8 @@
             </div>
             <div class="subNPCMode">NPC선택: {{ ["불가능", "가능", "선택 생성"][globalInfo.npcMode] }}</div>
             <div class="subTournamentMode">토너먼트: 경기당 {{ calcTournamentTerm(globalInfo.turnterm) }}분</div>
-            <div class="subOtherSetting">기타 설정:
+            <div class="subOtherSetting">
+              기타 설정:
               <AutorunInfo :autorunMode="globalInfo.autorunUser" />
             </div>
             <div class="subYearMonth">
@@ -52,9 +53,9 @@
             <div v-else class="subVoteState" style="color: magenta">진행중인 설문 없음</div>
           </div>
           <div class="onlineNations">접속중인 국가: {{ globalInfo.onlineNations }}</div>
+          <div class="onlineUsers">접속자</div>
           <div class="nationNotice">국가 방침</div>
-          <div>접속자</div>
+          <div id="ingameBoard">
-          <div class="d-grid"><BButton @click="tryRefresh">갱신</BButton></div>
             <!-- TODO: 운영자 툴바는 어디에?-->
             <div class="mapView">
               <MapViewer
@@ -73,15 +74,27 @@
               />
             </div>
             <div class="reservedCommandZone">
-            <PartialReservedCommand ref="reservedCommandPanel" />
+              <PartialReservedCommand id="reservedCommandPanel" ref="reservedCommandPanel" />
+            </div>
+            <div id="actionMiniPlate" class="gx-0 row">
+              <div class="col">
+                <div class="gx-1 row">
+                  <div class="col-8 d-grid">
+                    <button type="button" class="btn btn-sammo-base2" @click="tryRefresh">갱 신</button>
+                  </div>
+                  <div class="col-4 d-grid">
+                    <button type="button" class="btn btn-sammo-base2" @click="moveLobby">로비로</button>
+                  </div>
+                </div>
+              </div>
             </div>
             <div v-if="frontInfo" class="cityInfo">
               <CityBasicCard :city="frontInfo.city" />
             </div>
-          <div v-if="frontInfo" class="nationInfo col-12 col-md-6">
+            <div v-if="frontInfo" class="nationInfo">
               <NationBasicCard :nation="frontInfo.nation" :global="globalInfo" />
             </div>
-          <div v-if="frontInfo && generalInfo && nationStaticInfo" class="generalInfo col-12 col-md-6">
+            <div v-if="frontInfo && generalInfo && nationStaticInfo" class="generalInfo">
               <GeneralBasicCard
                 :general="generalInfo"
                 :nation="nationStaticInfo"
@@ -90,8 +103,26 @@
                 :lastExecuted="lastExecuted"
               />
             </div>
+
             <div class="generalCommandToolbar">국가 툴바</div>
-          <div class="actionMiniPlate">갱신/로비 버튼</div>
+            <div id="actionMiniPlateSub" class="gx-0 row">
+              <div class="col">
+                <div class="gx-1 row">
+                  <div class="col-3 d-grid">
+                    <button type="button" class="btn btn-dark" @click="scrollHardTo('reservedCommandPanel')">
+                      명령으로
+                    </button>
+                  </div>
+                  <div class="col-5 d-grid">
+                    <button type="button" class="btn btn-sammo-base2 refreshPage">갱 신</button>
+                  </div>
+                  <div class="col-4 d-grid">
+                    <button type="button" class="btn btn-sammo-base2" @click="moveLobby">로비로</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="PublicRecord">
             <div class="title">장수 동향</div>
             <template v-for="[idx, rawText] of globalRecords.toArray()" :key="idx">
@@ -144,7 +175,6 @@ declare const staticValues: {
 
 declare const getCityPosition: () => CityPositionMap;
 declare const formatCityInfo: (city: MapCityParsedRaw) => MapCityParsed;
-
 </script>
 <script lang="ts" setup>
 import { BContainer, BButton, useToast } from "bootstrap-vue-3";
@@ -169,6 +199,7 @@ 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";
 
 const { serverName, serverNick, serverID } = staticValues;
 
@@ -191,6 +222,10 @@ let responseLock = false;
 
 const msgPanel = ref<InstanceType<typeof MessagePanel>>();
 
+function moveLobby() {
+  location.replace("../");
+}
+
 async function tryRefresh() {
   msgPanel.value?.tryRefresh();
 
@@ -417,7 +452,6 @@ watch(refreshCounter, async () => {
   }
 });
 
-
 const reservedCommandPanel = ref<InstanceType<typeof PartialReservedCommand> | null>(null);
 watch(refreshCounter, async () => {
   reservedCommandPanel.value?.reloadCommandList();
@@ -440,6 +474,10 @@ watch(refreshCounter, async() => {
   width: 500px;
 }
 
+#ingameBoard {
+  display: grid;
+}
+
 @include media-500px {
   #outBlock {
     position: absolute;
@@ -460,17 +498,67 @@ watch(refreshCounter, async() => {
 
   #container {
     width: 500px;
-
     > main > div {
       min-height: 100px;
       /* 테스트 */
     }
   }
+
+  #ingameBoard {
+    grid-template-columns: 1fr;
+  }
+
+  #actionMiniPlate{
+    display: none;
+  }
 }
 
 @include media-1000px {
   #container {
     width: 1000px;
   }
+
+  #ingameBoard {
+    grid-template-columns: 500px 200px 300px;
+  }
+
+  .mapView{
+    grid-column: 1 / 3;
+    grid-row: 1;
+  }
+
+  .reservedCommandZone{
+    grid-column: 3;
+    grid-row: 1 / 3;
+  }
+
+  .cityInfo {
+    grid-column: 1 / 3;
+    grid-row: 2 / 4;
+  }
+
+  #actionMiniPlate{
+    grid-column: 3;
+    grid-row: 3;
+    padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .generalCommandToolbar{
+    grid-column: 1 / 4;
+  }
+
+  .nationInfo{
+    grid-column: 1;
+  }
+
+  .generalInfo{
+    grid-column: 2 / 4;
+  }
+
+  #actionMiniPlateSub{
+    display: none;
+  }
 }
 </style>