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,46 +53,76 @@
             <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: 운영자 툴바는 어디에?-->
-          <!-- TODO: 운영자 툴바는 어디에?-->
+            <div class="mapView">
-          <div class="mapView">
+              <MapViewer
-            <MapViewer
+                v-if="map"
-              v-if="map"
+                :serverNick="serverNick"
-              :serverNick="serverNick"
+                :serverID="serverID"
-              :serverID="serverID"
+                :mapName="unwrap(gameConstStore?.gameConst.mapName)"
-              :mapName="unwrap(gameConstStore?.gameConst.mapName)"
+                :isDetailMap="true"
-              :isDetailMap="true"
+                :cityPosition="cityPosition"
-              :cityPosition="cityPosition"
+                :imagePath="imagePath"
-              :imagePath="imagePath"
+                :formatCityInfo="formatCityInfoText"
-              :formatCityInfo="formatCityInfoText"
+                :mapData="map"
-              :mapData="map"
+                :disallowClick="false"
-              :disallowClick="false"
+                :genHref="genMapCityHref"
-              :genHref="genMapCityHref"
+                @city-click="onCityClick"
-              @city-click="onCityClick"
+              />
-            />
+            </div>
+            <div class="reservedCommandZone">
+              <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">
+              <NationBasicCard :nation="frontInfo.nation" :global="globalInfo" />
+            </div>
+            <div v-if="frontInfo && generalInfo && nationStaticInfo" class="generalInfo">
+              <GeneralBasicCard
+                :general="generalInfo"
+                :nation="nationStaticInfo"
+                :troopInfo="frontInfo.general.troopInfo"
+                :turnTerm="globalInfo.turnterm"
+                :lastExecuted="lastExecuted"
+              />
+            </div>
+
+            <div class="generalCommandToolbar">국가 툴바</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="reservedCommandZone">
-            <PartialReservedCommand ref="reservedCommandPanel" />
-          </div>
-          <div v-if="frontInfo" class="cityInfo">
-            <CityBasicCard :city="frontInfo.city" />
-          </div>
-          <div v-if="frontInfo" class="nationInfo col-12 col-md-6">
-            <NationBasicCard :nation="frontInfo.nation" :global="globalInfo" />
-          </div>
-          <div v-if="frontInfo && generalInfo && nationStaticInfo" class="generalInfo col-12 col-md-6">
-            <GeneralBasicCard
-              :general="generalInfo"
-              :nation="nationStaticInfo"
-              :troopInfo="frontInfo.general.troopInfo"
-              :turnTerm="globalInfo.turnterm"
-              :lastExecuted="lastExecuted"
-            />
-          </div>
-          <div class="generalCommandToolbar">국가 툴바</div>
-          <div class="actionMiniPlate">갱신/로비 버튼</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();
 
@@ -387,7 +422,7 @@ const cityPosition = getCityPosition();
 const formatCityInfoText = formatCityInfo;
 const imagePath = window.pathConfig.gameImage;
 
-function genMapCityHref(cityID: number){
+function genMapCityHref(cityID: number) {
   return `b_currentCity.php?citylist=${cityID}`;
 }
 
@@ -417,9 +452,8 @@ watch(refreshCounter, async () => {
   }
 });
 
-
 const reservedCommandPanel = ref<InstanceType<typeof PartialReservedCommand> | null>(null);
-watch(refreshCounter, async() => {
+watch(refreshCounter, async () => {
   reservedCommandPanel.value?.reloadCommandList();
 });
 </script>
@@ -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>