feat: chiefCenter 500px 재구현

- API: 사령턴 관련
- TopBackBar에 갱신 추가

hwe/scss/chiefCenter.scss

@@ -0,0 +1,156 @@
+@use "sass:math";
+
+@import "@scss/common/break_500px.scss";
+@import "@scss/common/variables.scss";
+@import "@scss/common/bootswatch_custom_variables.scss";
+@import "@scss/game_bg.scss";
+
+.turn_pad {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#mainTable {
+  .subRows {
+    display: grid;
+    grid-template-columns: 1fr;
+    line-height: 1.05em;
+  }
+
+  .chiefCommand .time_pad {
+    align-self: center;
+    text-align: center;
+    background-color: black;
+    line-height: 30px;
+  }
+}
+
+.commandBox {
+  position: relative;
+}
+
+@include media-1000px {
+  #container {
+    width: 1000px;
+    margin: 0 auto;
+    position: relative;
+  }
+
+  #mainTable {
+    display: grid;
+    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;
+    }
+  }
+
+  #bottomChiefBox {
+    display: none;
+  }
+
+  .only500px {
+    display: none !important;
+  }
+}
+
+@include media-500px {
+  .only1000px {
+    display: none !important;
+  }
+
+  .targetIsNotMe {
+    display: none;
+  }
+
+  #container {
+    position: relative;
+    width: 500px;
+    height: 460px;
+    margin: auto;
+  }
+
+  #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) {
+      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/scss/common/variables.scss

@@ -3,10 +3,13 @@ $base2color: #00582c;
 $base3color: #704615;
 $base4color: #70153b;
 
+$nbase2color: #0c1a41;
+
 $sammoColors: ('base1': $base1color,
     'base2': $base2color,
     'base3': $base3color,
     'base4': $base4color,
+    'nbase2': $nbase2color,
 );
 
 $nationColors: ("000000": #000000,

hwe/scss/game_bg.scss

@@ -1,4 +1,5 @@
 @import '../../d_shared/common.css';
+@import 'common/variables.scss';
 
 html {
     background: black;
@@ -49,4 +50,9 @@ body {
 
 .a-center {
     text-align: center;
+}
+
+
+.c-bg2{
+    background: $nbase2color;
 }