feat(in-progress): 커맨드 목록 UI/UX 정리

hwe/func_template.php

@@ -5,7 +5,7 @@ namespace sammo;
 
 /**
  * 템플릿 생성과 관련된 함수들을 모아두는 파일
- * 
+ *
  * NOTE: 아직 converter와 명확한 구분이 되어있지 않음.
  * TODO: legacy template들을 전부 template 폴더로 모아둘 필요 있음
  * TODO: side effect를 제거
@@ -13,7 +13,7 @@ namespace sammo;
 
  /**
   * 관리자 권한이 필요함을 출력.
-  * @return void 
+  * @return void
   */
 function requireAdminPermissionHTML()
 {
@@ -41,28 +41,6 @@ function requireAdminPermissionHTML()
     return ob_get_clean();
 }
 
-function turnTable()
-{
-
-    $turnList = [];
-    $turnList[] = "<option selected value='0'>1턴</option>";
-    foreach (Util::range(1, GameConst::$maxTurn) as $turnIdx) {
-        $turnText = $turnIdx + 1;
-        $turnList[] = "<option value='{$turnIdx}'>{$turnText}턴</option>";
-    }
-
-    $turnText = join("\n", $turnList);
-
-    return "
-<select id='generalTurnSelector' name=turn[] size=11 multiple>
-    <option value='-3'>전체</option>
-    <option value='-1'>홀턴</option>
-    <option value='-2'>짝턴</option>
-    {$turnText}
-</select>
-";
-}
-
 function chiefTurnTable()
 {
     $turnList = [];

hwe/scss/main.scss

@@ -101,6 +101,12 @@ body {
         grid-column-end: 3;
         grid-row-start: 1;
         grid-row-end: 4;
+        position:relative;
+    }
+
+    .commandPad{
+        position:absolute;
+        z-index: 99;
     }
 
 
@@ -282,13 +288,6 @@ body {
     height: 18px;
 }
 
-#generalTurnSelector {
-    width: 50px;
-    color: white;
-    background-color: black;
-    font-size: 13px;
-}
-
 #sidebar {
     position: fixed;
     right: 0;
@@ -296,18 +295,6 @@ body {
     transform: translateY(-50%);
 }
 
-.turn_pad {
-    white-space: nowrap;
-    font-weight: lighter;
-    max-width: 162px;
-    width: 162px;
-
-}
-
-.turn_pad .turn_text {
-    display: inline-block;
-}
-
 /*임시용 */
 
 #container {

hwe/scss/variables.scss

@@ -0,0 +1,4 @@
+
+//TODO:혹시나 몰라서, 나중에 실제로 수정
+$bg1color: #141c65aa;
+$bg2color: #225500aa;

hwe/ts/ReservedCommand.vue

@@ -1,82 +1,45 @@
 <template>
-  <table width="300" class="tb_layout b2">
+  <div class="commandPad">
-    <thead>
+    <div class="col alert alert-dark m-0 p-1 center">
-      <tr height="24">
+      <h4 class="m-0">명령 목록</h4>
-        <td colspan="4" class="center bg0">
+    </div>
-          <strong>- 명령 목록 - </strong
-          ><input
-            :value="serverNow"
-            type="text"
-            id="clock"
-            size="19"
-            style="background-color: black; color: white; border-style: none"
-          />
-        </td>
-      </tr>
-      <tr>
-        <td colspan="4">
-          <div class="row gx-1">
-            <div class="col d-grid">
-              <b-dropdown
-                right
-                split
-                text="당기기"
-                @click="pullGeneralCommandSingle"
-              >
-                <b-dropdown-item
-                  v-for="turnIdx in maxPushTurn"
-                  :key="turnIdx"
-                  @click="pushGeneralCommand(-turnIdx)"
-                  >{{ turnIdx }}턴
-                </b-dropdown-item>
-              </b-dropdown>
-            </div>
-            <div class="col d-grid">
-              <b-dropdown right split @click="selectAll" text="전체선택">
-                <b-dropdown-item @click="selectAll(true)"
-                  >모든턴</b-dropdown-item
-                >
-                <b-dropdown-item @click="selectStep(0, 2)"
-                  >홀수턴</b-dropdown-item
-                >
-                <b-dropdown-item @click="selectStep(1, 2)"
-                  >짝수턴</b-dropdown-item
-                >
-                <b-dropdown-divider></b-dropdown-divider>
 
-                <b-dropdown-text
+    <div class="row gx-1">
-                  v-for="spanIdx in [3, 4, 5, 6, 7]"
+      <div class="col d-grid">
-                  :key="spanIdx"
+        <b-dropdown right split text="당기기" @click="pullGeneralCommandSingle">
-                >
+          <b-dropdown-item
-                  {{ spanIdx }}턴 간격<br />
+            v-for="turnIdx in maxPushTurn"
-                  <b-button-group>
+            :key="turnIdx"
-                    <b-button
+            @click="pushGeneralCommand(-turnIdx)"
-                      class="ignoreMe"
+            >{{ turnIdx }}턴
-                      v-for="beginIdx in spanIdx"
+          </b-dropdown-item>
-                      :key="beginIdx"
+        </b-dropdown>
-                      @click="selectStep(beginIdx - 1, spanIdx)"
+      </div>
-                      >{{ beginIdx }}</b-button
+      <div
-                    >
+        class="col alert alert-primary m-0 p-0"
-                  </b-button-group>
+        style="
-                </b-dropdown-text>
+          text-align: center;
-              </b-dropdown>
+          display: flex;
-            </div>
+          justify-content: center;
-            <div class="col d-grid">
+          align-items: center;
-              <b-dropdown right text="반복">
+        "
-                <b-dropdown-item
+      >
-                  v-for="turnIdx in maxPushTurn"
+        {{ serverNow }}
-                  :key="turnIdx"
+      </div>
-                  @click="repeatGeneralCommand(turnIdx)"
+      <div class="col d-grid">
-                  >{{ turnIdx }}턴
+        <b-dropdown right text="반복">
-                </b-dropdown-item>
+          <b-dropdown-item
-              </b-dropdown>
+            v-for="turnIdx in maxPushTurn"
-            </div>
+            :key="turnIdx"
-          </div>
+            @click="repeatGeneralCommand(turnIdx)"
-        </td>
+            >{{ turnIdx }}턴
-      </tr>
+          </b-dropdown-item>
-    </thead>
+        </b-dropdown>
-    <tbody class="center" style="font-weight: bold">
+      </div>
-      <tr
+    </div>
+
+    <div class="commandTable">
+      <template
         v-for="(turnObj, turnIdx) in reservedCommandList.slice(
           0,
           Math.min(maxTurn, viewMaxTurn)
@@ -86,23 +49,18 @@
         :id="`command_${turnIdx}`"
         :class="pressed[turnIdx] ? 'pressed' : ''"
       >
-        <td
+        <div class="idx_pad center d-grid" @click="clickTurn(turnIdx)">
-          width="32"
-          class="idx_pad center bg0 d-grid"
-          @click="clickTurn(turnIdx)"
-        >
           <b-button
             size="sm"
             :variant="pressed[turnIdx] ? 'info' : 'primary'"
             >{{ turnIdx + 1 }}</b-button
           >
-        </td>
+        </div>
-        <td
+        <div
           @click="clickTurn(turnIdx)"
           height="24"
-          class="month_pad center bg1"
+          class="month_pad center"
           :style="{
-            'min-width': '70px',
             'white-space': 'nowrap',
             'font-size': `${Math.min(
               14,
@@ -113,16 +71,15 @@
         >
           {{ turnObj.year ? `${turnObj.year}年` : "" }}
           {{ turnObj.month ? `${turnObj.month}月` : "" }}
-        </td>
+        </div>
-        <td
+        <div
           @click="clickTurn(turnIdx)"
-          width="38"
           class="time_pad center"
           style="background-color: black; white-space: nowrap; overflow: hidden"
         >
           {{ turnObj.time }}
-        </td>
+        </div>
-        <td width="160" class="turn_pad center bg2">
+        <div class="turn_pad center">
           <span
             class="turn_text"
             :style="turnObj.style"
@@ -130,57 +87,67 @@
             :title="turnObj.tooltip"
             v-html="turnObj.brief"
           ></span>
-        </td>
+        </div>
-      </tr>
+      </template>
-    </tbody>
-    <tfoot>
-      <tr>
-        <td colspan="4">
-          <div class="row gx-1">
-            <div class="col-4 d-grid">
-              <b-dropdown
-                right
-                split
-                text="미루기"
-                @click="pushGeneralCommandSingle"
-              >
-                <b-dropdown-item
-                  v-for="turnIdx in maxPushTurn"
-                  :key="turnIdx"
-                  @click="pushGeneralCommand(turnIdx)"
-                  >{{ turnIdx }}턴
-                </b-dropdown-item>
-              </b-dropdown>
-            </div>
-            <div class="col-8 d-grid">
-              <b-button @click="toggleViewMaxTurn">{{
-                flippedMaxTurn == viewMaxTurn ? "펼치기" : "접기"
-              }}</b-button>
-            </div>
-          </div>
-        </td>
-      </tr>
-    </tfoot>
-  </table>
-  <div class="row gx-0">
-    <div class="col-10 d-grid">
-      <b-form-select v-model="selectedCommand"
-        ><b-form-select-option-group
-          v-for="cgroup in commandList"
-          :key="cgroup['category']"
-          :label="cgroup['category']"
-          ><b-form-select-option
-            v-for="(citem, ckey) in cgroup['values']"
-            :value="ckey"
-            :key="ckey"
-            >{{ citem.title
-            }}{{ citem.possible ? "" : "(불가)" }}</b-form-select-option
-          >
-        </b-form-select-option-group></b-form-select
-      >
     </div>
-    <div class="col-2 d-grid">
+    <div class="row gx-1">
-      <b-button @click="reserveCommand()">실행</b-button>
+      <div class="col d-grid">
+        <b-dropdown right split text="미루기" @click="pushGeneralCommandSingle">
+          <b-dropdown-item
+            v-for="turnIdx in maxPushTurn"
+            :key="turnIdx"
+            @click="pushGeneralCommand(turnIdx)"
+            >{{ turnIdx }}턴
+          </b-dropdown-item>
+        </b-dropdown>
+      </div>
+      <div class="col d-grid">
+        <b-dropdown right split @click="selectAll" text="전체선택">
+          <b-dropdown-item @click="selectAll(true)">모든턴</b-dropdown-item>
+          <b-dropdown-item @click="selectStep(0, 2)">홀수턴</b-dropdown-item>
+          <b-dropdown-item @click="selectStep(1, 2)">짝수턴</b-dropdown-item>
+          <b-dropdown-divider></b-dropdown-divider>
+
+          <b-dropdown-text v-for="spanIdx in [3, 4, 5, 6, 7]" :key="spanIdx">
+            {{ spanIdx }}턴 간격<br />
+            <b-button-group>
+              <b-button
+                class="ignoreMe"
+                v-for="beginIdx in spanIdx"
+                :key="beginIdx"
+                @click="selectStep(beginIdx - 1, spanIdx)"
+                >{{ beginIdx }}</b-button
+              >
+            </b-button-group>
+          </b-dropdown-text>
+        </b-dropdown>
+      </div>
+      <div class="col d-grid">
+        <b-button @click="toggleViewMaxTurn">{{
+          flippedMaxTurn == viewMaxTurn ? "펼치기" : "접기"
+        }}</b-button>
+      </div>
+    </div>
+    <div class="row gx-0">
+      <div class="col-10 d-grid">
+        <b-form-select v-model="selectedCommand"
+          ><b-form-select-option-group
+            v-for="cgroup in commandList"
+            :key="cgroup['category']"
+            :label="cgroup['category']"
+            ><b-form-select-option
+              v-for="(citem, ckey) in cgroup['values']"
+              :value="ckey"
+              :key="ckey"
+              >{{ citem.title
+              }}{{ citem.possible ? "" : "(불가)" }}</b-form-select-option
+            >
+          </b-form-select-option-group></b-form-select
+        >
+      </div>
+      <div class="col-2 d-grid">
+        <b-button @click="reserveCommand()" variant="primary">실행</b-button>
+      </div>
     </div>
   </div>
 </template>
@@ -274,8 +241,8 @@ export default defineComponent({
 
   methods: {
     updateNow() {
-      const clientNow = addMilliseconds(new Date(), this.timeDiff);
+      const serverNow = addMilliseconds(new Date(), this.timeDiff);
-      this.serverNow = formatTime(clientNow, false);
+      this.serverNow = formatTime(serverNow, "HH:mm:ss");
       setTimeout(() => {
         this.updateNow();
       }, 250);
@@ -468,7 +435,7 @@ export default defineComponent({
       viewMaxTurn: 18,
       maxPushTurn,
       commandList,
-      serverNow,
+      serverNow: formatTime(serverNowObj, "HH:mm:ss"),
       timeDiff,
       pressed,
       selectedCommand,
@@ -480,4 +447,61 @@ export default defineComponent({
     void this.reloadCommandList();
   },
 });
-</script>
+</script>
+<style lang="scss">
+@import "../scss/variables.scss";
+@import "../scss/bootswatch_custom_variables.scss";
+@import "../../node_modules/bootstrap5/scss/bootstrap-utilities.scss";
+
+.commandPad {
+  background-color: $gray-900;
+}
+
+.commandTable {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(30px, 1fr) minmax(70px, 2.5fr) minmax(40px, 1fr) 5fr;
+  //30, 70, 37.65, 160
+}
+
+@include media-breakpoint-up(md) {
+  .commandPad {
+    margin-left: 10px;
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .dropdown-item {
+    padding: 8px;
+  }
+
+  .commandPad {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+
+  .month_pad,
+  .time_pad,
+  .turn_pad {
+    padding: 6px;
+  }
+}
+
+.month_pad,
+.time_pad,
+.turn_pad {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.turn_pad {
+  white-space: nowrap;
+  font-weight: lighter;
+  background-color: rgba($blue, 0.5);
+}
+
+.turn_pad .turn_text {
+  display: inline-block;
+}
+</style>