misc: 턴 선택기에 색 표기

hwe/scss/chiefCenter.scss

@@ -1,157 +1,180 @@
 @use "sass:math";
+@use "sass:color";
 
 @import "@scss/common/break_500px.scss";
 @import "@scss/common/variables.scss";
 @import "@scss/common/bootswatch_custom_variables.scss";
 @import "@scss/game_bg.scss";
 
+$modcolor2: color.adjust($nbase2color, $lightness: +5%);
+
 .turn_pad {
-  white-space: nowrap;
+    white-space: nowrap;
-  overflow: hidden;
+    overflow: hidden;
-  text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    background-color: $nbase2color;
 }
 
 #mainTable {
-  .subRows {
+    .subRows {
-    display: grid;
+        display: grid;
-    grid-template-columns: 1fr;
+        grid-template-columns: 1fr;
-    line-height: 1.05em;
+        line-height: 1.05em;
-  }
+    }
 
-  .chiefCommand .time_pad {
+    .chiefCommand {
-    align-self: center;
+        .time_pad {
-    text-align: center;
+            align-self: center;
-    background-color: black;
+            text-align: center;
-    line-height: 30px;
+            background-color: black;
-  }
+            line-height: 30px;
+        }
+
+        .turn_pad {
+            line-height: 30px;
+        }
+
+        .row:nth-child(even) .turn_pad {
+            background-color: $modcolor2;
+        }
+    }
 }
 
 .commandBox {
-  position: relative;
+    position: relative;
 }
 
 @include media-1000px {
-  #container {
+    #container {
-    width: 1000px;
+        width: 1000px;
-    margin: 0 auto;
+        margin: 0 auto;
-    position: relative;
+        position: relative;
-  }
-
-  #mainTable {
-    display: grid;
-    grid-template-columns: 24px repeat(4, 1fr) 24px;
-
-    .commandPad {
-      margin-left: 0;
     }
 
-    .subRows {
+    #mainTable {
-      display: grid;
+        display: grid;
-      grid-template-columns: 1fr;
+        grid-template-columns: 24px repeat(4, 1fr) 24px;
+
+        .commandPad {
+            margin-left: 0;
+        }
+
+        .subRows {
+            display: grid;
+            grid-template-columns: 1fr;
+        }
+
+        .turnIdx {
+            text-align: center;
+        }
+
+        .time_pad {
+            height: 30px;
+        }
     }
 
-    .turnIdx {
+    #bottomChiefBox {
-      text-align: center;
+        display: none;
     }
 
-    .time_pad {
+    .only500px {
-      height: 30px;
+        display: none !important;
     }
-  }
-
-  #bottomChiefBox {
-    display: none;
-  }
-
-  .only500px {
-    display: none !important;
-  }
 }
 
 @include media-500px {
-  .only1000px {
+    .only1000px {
-    display: none !important;
+        display: none !important;
-  }
-
-  .targetIsNotMe {
-    display: none;
-  }
-
-  #container {
-    position: relative;
-    width: 500px;
-    height: 460px;
-    margin: auto;
-    overflow: hidden;
-  }
-
-  #mainTable {
-    display: block;
-    height: 420px;
-  }
-
-  #mainTable.targetIsNotMe {
-    display: grid;
-    grid-template-columns: 24px 260px 24px;
-    margin-top: 10px;
-    margin-left: calc((500px - 24px - 260px - 24px) / 2);
-
-    .commandBox {
-      display: none;
-    }
-  }
-
-  .commandBox .controlPad{
-      margin-top: 10px;
-  }
-
-  #bottomChiefBox {
-    position: relative;
-    left: calc(50% - 250px);
-
-    width: 500px;
-    height: 320px;
-    overflow: hidden;
-  }
-
-  #bottomChiefList {
-    bottom: 0;
-    left: 0;
-    width: 1000px;
-    font-size: 20px;
-    transform-origin: left top;
-    transform: scale(0.5);
-
-    display: grid;
-    grid-template-columns: 24px repeat(4, 1fr) 24px;
-
-    .subRows {
-      display: grid;
-      grid-template-columns: 1fr;
-      line-height: 1.05em;
     }
 
-    .subRows:not(:first-child) {
+    .targetIsNotMe {
-      border-left: solid 1px white;
+        display: none;
     }
 
-    .tableCell {
+    #container {
-      overflow: hidden;
+        position: relative;
-      white-space: nowrap;
+        width: 500px;
-      text-align: center;
+        height: 460px;
+        margin: auto;
+        overflow: hidden;
     }
 
-    .nameHeader {
+    #mainTable {
-      text-align: center;
+        display: block;
-      font-size: 28px;
+        height: 420px;
-      line-height: 36px;
-      overflow: hidden;
-      white-space: nowrap;
     }
 
-    .turnIdx {
+    #mainTable.targetIsNotMe {
-      font-size: 20px;
+        display: grid;
-      text-align: center;
+        grid-template-columns: 24px 260px 24px;
+        margin-top: 10px;
+        margin-left: calc((500px - 24px - 260px - 24px) / 2);
+
+        .commandBox {
+            display: none;
+        }
+    }
+
+    .commandBox .controlPad {
+        margin-top: 10px;
+
+        .turn_pad:nth-child(even) {
+            background-color: $modcolor2;
+        }
+    }
+
+    #bottomChiefBox {
+        position: relative;
+        left: calc(50% - 250px);
+
+        width: 500px;
+        height: 320px;
+        overflow: hidden;
+
+
+        .turn_pad:nth-child(even) {
+            background-color: $modcolor2;
+        }
+    }
+
+    #bottomChiefList {
+        bottom: 0;
+        left: 0;
+        width: 1000px;
+        font-size: 20px;
+        transform-origin: left top;
+        transform: scale(0.5);
+
+        display: grid;
+        grid-template-columns: 24px repeat(4, 1fr) 24px;
+
+        .subRows {
+            display: grid;
+            grid-template-columns: 1fr;
+            line-height: 1.05em;
+        }
+
+        .subRows:not(:first-child) {
+            border-left: solid 1px white;
+        }
+
+        .tableCell {
+            overflow: hidden;
+            white-space: nowrap;
+            text-align: center;
+        }
+
+        .nameHeader {
+            text-align: center;
+            font-size: 28px;
+            line-height: 36px;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .turnIdx {
+            font-size: 20px;
+            text-align: center;
+        }
     }
-  }
 }

hwe/ts/ChiefCenter/BottomItem.vue

@@ -20,7 +20,7 @@
       <div class="col">{{ officer?((officer?.turnTime ?? "  -  ").slice(-5)):'' }}</div>
     </div>
     <div
-      class="tableCell align-self-center"
+      class="tableCell align-self-center turn_pad"
       v-for="(turn, idx) in officer?.turn??[]"
       :key="idx"
       :style="{

hwe/ts/ChiefCenter/TopItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['subRows', 'c-bg2', 'chiefCommand']" :style="style">
+  <div :class="['subRows', 'chiefCommand']" :style="style">
     <div class="bg1 center row gx-0" style="font-size: 1.2em">
       <div class="col-5 align-self-center text-end">
         {{ officer ? `${officer.officerLevelText} : ` : "" }}
@@ -13,12 +13,12 @@
         {{ officer?.name }}
       </div>
     </div>
-    <div class="row gx-0" v-for="vidx in maxTurn" :key="vidx">
+    <div class="row c-bg2 gx-0" v-for="vidx in maxTurn" :key="vidx">
       <div class="col-2 time_pad f_tnum">
-        {{ turnTimes[vidx - 1] ?? "" }}
+        {{ turnTimes[vidx - 1] }}
       </div>
       <div
-        class="center turn_pad"
+        class="center"
         v-if="!officer || (!officer.turn) || !(vidx - 1 in officer.turn)"
       ></div>
       <div
@@ -66,7 +66,7 @@ export default defineComponent({
     if (!this.officer || !this.officer.turnTime) {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       for (const _ of range(this.maxTurn)) {
-        turnTimes.push("");
+        turnTimes.push("\xa0");
       }
     } else {
       const baseTurnTime = parseTime(this.officer.turnTime);

hwe/ts/PartialReservedCommand.vue

@@ -539,6 +539,8 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
+@use "sass:color";
+
 @import "@scss/common/break_500px.scss";
 @import "@scss/common/variables.scss";
 @import "@scss/common/bootswatch_custom_variables.scss";
@@ -616,6 +618,10 @@ export default defineComponent({
   background-color: $nbase2color;
 }
 
+.turn_pad:nth-child(8n) {
+  background-color: color.adjust($nbase2color, $lightness: +5%);
+}
+
 .turn_pad .turn_text {
   display: inline-block;
   white-space: nowrap;

hwe/ts/components/ChiefReservedCommand.vue

@@ -479,7 +479,6 @@ export default defineComponent({
 
   .turn_pad {
     white-space: nowrap;
-    background-color: $nbase2color;
   }
 
   .turn_pad .turn_text {