feat: chiefCenter 500px 재구현

- API: 사령턴 관련 - TopBackBar에 갱신 추가
2021-12-25 21:51:47 +09:00
parent c961096b70
commit 5142c94f84
27 changed files with 1774 additions and 171 deletions
@@ -50,7 +50,7 @@ return [
        'hwe/b_auction.php',
        'hwe/b_battleCenter.php',
        'hwe/b_betting.php',
-        'hwe/b_chiefcenter.php',
+        'hwe/v_chiefCenter.php',
        'hwe/b_currentCity.php',
        'hwe/b_dipcenter.php',
        'hwe/b_diplomacy.php',
@@ -1,85 +0,0 @@
-<?php
-
-namespace sammo;
-
-include "lib.php";
-include "func.php";
-//로그인 검사
-$session = Session::requireGameLogin()->setReadOnly();
-$userID = Session::getUserID();
-$generalObj = General::createGeneralObjFromDB($session->generalID);
-?>
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=1024" />
-    <title><?= UniqueConst::$serverName ?>: 사령부</title>
-    <?= WebUtil::printJS('../d_shared/common_path.js') ?>
-    <?= WebUtil::printCSS('../d_shared/common.css') ?>
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
-    <?= WebUtil::printCSS('css/chiefCenter.css') ?>
-    <script type="text/javascript">
-        var maxChiefTurn = <?= GameConst::$maxChiefTurn ?>;
-    </script>
-    <?= WebUtil::printDist('ts', ['common', 'chiefCenter']) ?>
-
-</head>
-
-<body>
-    <div id='container' class='tb_layout bg0' style='width:1000px;margin:auto;border:solid 1px #888888;'>
-        <div class='tb_layout bg0'>사 령 부<button type='button' id='reloadTable'>갱신</button><br>
-            <?= backButton() ?></div>
-        <div style='background-color:skyblue;text-align:center;'>수뇌부 일정</div>
-        <div class="chiefSubTable" style='height:<?= 22 * (GameConst::$maxChiefTurn + 1) ?>px;'>
-            <div class='chiefTurnIdxPanel'>
-                <div class='bg1 chiefTurnIdx'>.</div <?php foreach (Util::range(GameConst::$maxChiefTurn) as $idx) : ?>>
-                <div class='bg0 chiefTurnIdx'><?= $idx + 1 ?></div <?php endforeach; ?>>
-            </div <?php foreach ([12, 10, 8, 6] as $chiefIdx) : ?>>
-            <div class='bg2 chiefPlate' style='flex-grow:1;' id='chief_<?= $chiefIdx ?>'>
-                <div class='bg1 chiefNamePlate'><span class='chiefLevelText'>-</span> : <span class='chiefName'>&nbsp;</span></div <?php foreach (Util::range(GameConst::$maxChiefTurn) as $turnIdx) : ?>>
-                <div class='chiefTurnBox turn<?= $turnIdx ?>'>
-                    <div class='chiefTurnTime'>&nbsp;</div>
-                    <div class='chiefTurnPad'><span class='chiefTurnText'>&nbsp;</span></div>
-                </div <?php endforeach; ?>>
-            </div <?php endforeach; ?>>
-            <div class='chiefTurnIdxPanel tail'>
-                <div class='bg1 chiefTurnIdx'>.</div <?php foreach (Util::range(GameConst::$maxChiefTurn) as $idx) : ?>>
-                <div class='bg0 chiefTurnIdx'><?= $idx + 1 ?></div <?php endforeach; ?>>
-            </div>
-        </div>
-        <div id='controlPlate' style='display:flex;flex-flow:row wrap;justify-content:center;'>
-            <div style='width:400px;text-align:right;'><?= chiefTurnTable()
-                                                        ?></div>
-            <div style='width:400px;display: flex;justify-content: center;flex-direction: column;'>
-                <div><input type='button' id='turnPush' style='visibility:hidden;background-color:<?= GameConst::$basecolor2 ?>;color:white;font-size:14px;' value='미루기▼'><input type='button' id='turnPull' style='visibility:hidden;background-color:<?= GameConst::$basecolor2 ?>;color:white;font-size:14px;' value='▲당기기'></div>
-                <div><?= chiefCommandTable($generalObj)
-                        ?><br><input type='button' id='setCommand' style='visibility:hidden;background-color:<?= GameConst::$basecolor2 ?>;color:white;font-size:14px;' value='실 행'></div>
-            </div>
-        </div>
-        <div class="chiefSubTable" style='height:<?= 22 * (GameConst::$maxChiefTurn + 1) ?>px;'>
-            <div class='chiefTurnIdxPanel'>
-                <div class='bg1 chiefTurnIdx'>.</div <?php foreach (Util::range(GameConst::$maxChiefTurn) as $idx) : ?>>
-                <div class='bg0 chiefTurnIdx'><?= $idx + 1 ?></div <?php endforeach; ?>>
-            </div <?php foreach ([11, 9, 7, 5] as $chiefIdx) : ?>>
-            <div class='bg2 chiefPlate' style='flex-grow:1;' id='chief_<?= $chiefIdx ?>'>
-                <div class='bg1 chiefNamePlate'><span class='chiefLevelText'>-</span> : <span class='chiefName'>&nbsp;</span></div <?php foreach (Util::range(GameConst::$maxChiefTurn) as $turnIdx) : ?>>
-                <div class='chiefTurnBox turn<?= $turnIdx ?>'>
-                    <div class='chiefTurnTime'>&nbsp;</div>
-                    <div class='chiefTurnPad'><span class='chiefTurnText'>&nbsp;</span></div>
-                </div <?php endforeach; ?>>
-            </div <?php endforeach; ?>>
-            <div class='chiefTurnIdxPanel tail'>
-                <div class='bg1 chiefTurnIdx'>.</div <?php foreach (Util::range(GameConst::$maxChiefTurn) as $idx) : ?>>
-                <div class='bg0 chiefTurnIdx'><?= $idx + 1 ?></div <?php endforeach; ?>>
-            </div>
-        </div>
-        <div><?= backButton()
-                ?><?= banner()
-        ?></div>
-    </div>
-</body>
-
-</html>
@@ -427,29 +427,6 @@ function checkSecretPermission(array $me, $checkSecretLimit = true)
    return min($secretMin, $secretMax);
 }

-function addCommand($typename, $value, $valid = 1, $color = 0)
-{
-    if ($valid == 1) {
-        switch ($color) {
-            case 0:
-                echo "
-    <option style='color:white;background-color:black;' value='{$value}'>{$typename}</option>";
-                break;
-            case 1:
-                echo "
-    <option style='color:skyblue;background-color:black;' value='{$value}'>{$typename}</option>";
-                break;
-            case 2:
-                echo "
-    <option style='color:orange;background-color:black;' value='{$value}'>{$typename}</option>";
-                break;
-        }
-    } else {
-        echo "
-    <option style='color:white;background-color:red;' value='{$value}'>{$typename}(불가)</option>";
-    }
-}
-
 function commandGroup($typename, $type = 0)
 {
    if ($type == 0) {
@@ -495,52 +472,37 @@ function getCommandTable(General $general)
    return $result;
 }

-function printCommandTable(General $generalObj)
-{
+function getChiefCommandTable(General $general){
    $db = DB::db();
    $gameStor = KVStorage::getStorage($db, 'game_env');
-    $userID = Session::getUserID();
-
    $gameStor->turnOnCache();
    $env = $gameStor->getAll();

-?>
-    <select id='generalCommandList' name='commandtype' size=1 style='height:20px;width:260px;color:white;background-color:black;font-size:12px;'>";
-        <?php
-
-        //보정(Pros,Cons) 여부.
-        $getCompensateClassName = function ($value) {
-            if ($value > 0) {
-                return 'compensatePositive';
-            } else if ($value < 0) {
-                return 'compensateNegative';
-            }
-            return 'compensateNeutral';
-        };
-
-        foreach (GameConst::$availableGeneralCommand as $commandCategory => $commandList) {
-            if ($commandCategory) {
-                commandGroup("======= {$commandCategory} =======");
-            }
-
-            foreach ($commandList as $commandClassName) {
-                $commandObj = buildGeneralCommandClass($commandClassName, $generalObj, $env);
-                if (!$commandObj->canDisplay()) {
-                    continue;
-                }
-        ?>
-                <option class='commandBasic <?= $getCompensateClassName($commandObj->getCompensationStyle()) ?> <?= $commandObj->hasMinConditionMet() ? '' : 'commandImpossible' ?>' value='<?= Util::getClassNameFromObj($commandObj) ?>' data-reqArg='<?= ($commandObj::$reqArg) ? 'true' : 'false' ?>'><?= $commandObj->getCommandDetailTitle() ?><?= $commandObj->hasMinConditionMet() ? '' : '(불가)' ?></option>
-        <?php
-            }
-
-            if ($commandCategory) {
-                commandGroup('', 1);
+    $result = [];
+    foreach (GameConst::$availableChiefCommand as $commandCategory => $commandList) {
+        $subList = [];
+        foreach ($commandList as $commandClassName) {
+            $commandObj = buildNationCommandClass($commandClassName, $general, $env, new LastTurn());
+            if (!$commandObj->canDisplay()) {
+                continue;
            }
+            $subList[] = [
+                'value' => Util::getClassNameFromObj($commandObj),
+                'compensation' => $commandObj->getCompensationStyle(),
+                'possible' => $commandObj->hasMinConditionMet(),
+                'title' => $commandObj->getCommandDetailTitle(),
+                'simpleName' => $commandObj->getName(),
+                'reqArg' => $commandObj::$reqArg,
+            ];
        }

-        ?>
-    </select>
-<?php
+        $result[] = [
+            'category' => $commandCategory,
+            'values' => $subList
+        ];
+    }
+
+    return $result;
 }

 function chiefCommandTable(General $generalObj)
@@ -167,6 +167,38 @@ function pullNationCommand(int $nationID, int $officerLevel, int $turnCnt=1){
    ], 'nation_id=%i AND officer_level=%i ORDER BY turn_idx ASC', $nationID, $officerLevel);
 }

+function repeatNationCommand(int $nationID, int $officerLevel, int $turnCnt){
+    if($turnCnt <= 0){
+        return;
+    }
+    if($turnCnt >= GameConst::$maxChiefTurn){
+        return;
+    }
+
+    $db = DB::db();
+
+    $reqTurn = $turnCnt;
+    if($turnCnt * 2 > GameConst::$maxChiefTurn){
+        $reqTurn = GameConst::$maxChiefTurn - $turnCnt;
+    }
+
+    $turnList = $db->query('SELECT turn_idx, `action`, arg, brief FROM nation_turn WHERE nation_id=%i AND officer_level=%i AND turn_idx < %i', $nationID, $officerLevel, $reqTurn);
+    if(!$turnList){
+        return;
+    }
+    foreach($turnList as $turnItem){
+        $turnIdx = $turnItem['turn_idx'];
+        $turnTarget = iterator_to_array(Util::range($turnIdx+$turnCnt, GameConst::$maxChiefTurn, $turnCnt));
+
+        $db->update('nation_turn', [
+            'action'=>$turnItem['action'],
+            'arg'=>$turnItem['arg'],
+            'brief'=>$turnItem['brief']
+        ], 'nation_id=%i AND officer_level=%i AND turn_idx IN %li', $nationID, $officerLevel, $turnTarget);
+    }
+}
+
+
 function _setGeneralCommand(GeneralCommand $command, array $turnList):void {
    if(!$turnList){
        return;
@@ -120,7 +120,7 @@ function backButton()

 function CoreBackButton()
 {
-    return "<button type='button' class='btn btn-primary back_btn' onclick=location.replace('b_chiefcenter.php')>돌아가기</button><br>";
+    return "<button type='button' class='btn btn-primary back_btn' onclick=location.replace('v_chiefCenter.php')>돌아가기</button><br>";
 }

 function closeButton()
@@ -17,7 +17,7 @@ $me = $db->queryFirstRow('SELECT no,nation,officer_level,con,turntime,belong,pen
 $nationLevel = $db->queryFirstField('SELECT level FROM nation WHERE nation = %i', $me['nation']);
 $nationID = $me['nation'];
 $con = checkLimit($me['con']);
-if($con >= 2) { 
+if($con >= 2) {
    Json::die([
        'result'=>false,
        'reason'=>"접속 제한중입니다. 1턴 이내에 너무 많은 갱신을 하셨습니다. (다음 접속 가능 시각 : {$me['turntime']})"
@@ -83,9 +83,10 @@ foreach($nationTurnList as $officer_level=>$turnBrief){
    $nationTurnBrief[$officer_level] = [
        'name'=>$general->getName(),
        'turnTime'=>$general->getTurnTime($general::TURNTIME_FULL),
+        'officerLevel'=>$general->getVar('officer_level'),
        'officerLevelText'=>getOfficerLevelText($general->getVar('officer_level'), $nationLevel),
        'npcType'=>$general->getNPCType(),
-        'turn'=>$turnBrief
+        'turn'=>$turnBrief,
    ];
 }

@@ -97,5 +98,6 @@ Json::die([
    'date'=>$date,
    'nationTurnBrief'=>$nationTurnBrief,
    'isChief'=>($me['officer_level'] > 4),
+    'officerLevel'=>$me['officer_level'],
    'turnTerm'=>$turnterm
 ]);
@@ -0,0 +1,122 @@
+<?php
+
+namespace sammo\API\NationCommand;
+
+use sammo\Session;
+use DateTimeInterface;
+use sammo\DB;
+use sammo\GameConst;
+use sammo\General;
+use sammo\Json;
+use sammo\KVStorage;
+use sammo\TimeUtil;
+
+use function sammo\checkLimit;
+use function sammo\checkSecretPermission;
+use function sammo\cutTurn;
+use function sammo\getChiefCommandTable;
+use function sammo\getNationChiefLevel;
+use function sammo\getOfficerLevelText;
+use function sammo\increaseRefresh;
+
+class GetReservedCommand extends \sammo\BaseAPI
+{
+    public function validateArgs(): ?string
+    {
+        return null;
+    }
+
+    public function getRequiredSessionMode(): int
+    {
+        return static::REQ_GAME_LOGIN | static::REQ_READ_ONLY;
+    }
+
+    public function launch(Session $session, ?DateTimeInterface $modifiedSince, ?string $reqEtag)
+    {
+        $db = DB::db();
+
+        increaseRefresh("사령부", 1);
+
+        $gameStor = KVStorage::getStorage($db, 'game_env');
+        $userID = $session->userID;
+
+        $me = $db->queryFirstRow('SELECT no,nation,officer_level,con,turntime,belong,penalty,permission FROM general WHERE owner=%i', $userID);
+
+        $nationLevel = $db->queryFirstField('SELECT level FROM nation WHERE nation = %i', $me['nation']);
+        $nationID = $me['nation'];
+        $con = checkLimit($me['con']);
+        if ($con >= 2) {
+            return "접속 제한중입니다. 1턴 이내에 너무 많은 갱신을 하셨습니다. (다음 갱신 가능 시각 : {$me['turntime']})";
+        }
+
+        $permission = checkSecretPermission($me);
+        if ($permission < 0) {
+            return '국가에 소속되어있지 않습니다.';
+        } else if ($permission < 1) {
+            return '수뇌부가 아니거나 사관년도가 부족합니다.';
+        }
+
+        [$turnTerm, $year, $month, $lastExecute] = $gameStor->getValuesAsArray(['turnterm', 'year', 'month', 'turntime']);
+
+        $generals = [];
+        foreach ($db->query('SELECT no,name,turntime,npc,city,nation,officer_level FROM general WHERE nation = %i AND officer_level >= 5', $nationID) as $rawGeneral) {
+            $generals[$rawGeneral['officer_level']] = new General($rawGeneral, null, null, null, $year, $month, false);
+        }
+
+        $nationTurnList = [];
+        foreach ($db->queryAllLists(
+                'SELECT officer_level, turn_idx, action, arg, brief FROM nation_turn WHERE nation_id = %i ORDER BY officer_level DESC, turn_idx ASC',
+                $me['nation']
+            ) as [$officer_level, $turn_idx, $action, $arg, $brief]) {
+            if (!key_exists($officer_level, $nationTurnList)) {
+                $nationTurnList[$officer_level] = [];
+            }
+            $nationTurnList[$officer_level][$turn_idx] = [
+                'action' => $action,
+                'brief' => $brief,
+                'arg' => Json::decode($arg)
+            ];
+        }
+
+
+        $nationChiefList = [];
+        foreach ($nationTurnList as $officer_level => $turnBrief) {
+            if (!key_exists($officer_level, $generals)) {
+                $nationChiefList[$officer_level] = [
+                    'name' => null,
+                    'turnTime' => null,
+                    'officerLevelText' => getOfficerLevelText($officer_level, $nationLevel),
+                    'npcType' => null,
+                    'turn' => $turnBrief
+                ];
+                continue;
+            }
+            $general = $generals[$officer_level];
+            $nationChiefList[$officer_level] = [
+                'name' => $general->getName(),
+                'turnTime' => $general->getTurnTime($general::TURNTIME_FULL),
+                'officerLevel' => $general->getVar('officer_level'),
+                'officerLevelText' => getOfficerLevelText($general->getVar('officer_level'), $nationLevel),
+                'npcType' => $general->getNPCType(),
+                'turn' => $turnBrief,
+            ];
+        }
+
+        $generalObj = General::createGeneralObjFromDB($session->generalID);
+
+
+        return [
+            'result' => true,
+            'lastExecute' => $lastExecute,
+            'year' => $year,
+            'month' => $month,
+            'turnTerm' => $turnTerm,
+            'date' => TimeUtil::now(true),
+            'chiefList' => $nationChiefList,
+            'isChief'=>($me['officer_level'] > 4),
+            'autorun_limit' => $generalObj->getAuxVar('autorun_limit'),
+            'officerLevel' => $me['officer_level'],
+            'commandList' => getChiefCommandTable($generalObj),
+        ];
+    }
+}
@@ -0,0 +1,62 @@
+<?php
+
+namespace sammo\API\NationCommand;
+
+use sammo\Session;
+use DateTimeInterface;
+use sammo\DB;
+use sammo\Validator;
+
+use function sammo\cutTurn;
+use function sammo\pushNationCommand;
+
+class PushCommand extends \sammo\BaseAPI
+{
+    public function validateArgs(): ?string
+    {
+        $v = new Validator($this->args);
+        $v->rule('required', [
+            'amount',
+        ])
+            ->rule('integer', 'amount')
+            ->rule('min', 'amount', -12)
+            ->rule('max', 'amount', 12);
+
+        if (!$v->validate()) {
+            return $v->errorStr();
+        }
+        return null;
+    }
+
+    public function getRequiredSessionMode(): int
+    {
+        return static::REQ_GAME_LOGIN | static::REQ_READ_ONLY;
+    }
+
+    public function launch(Session $session, ?DateTimeInterface $modifiedSince, ?string $reqEtag)
+    {
+        $amount = $this->args['amount'];
+        if($amount == 0){
+            return '0은 불가능합니다';
+        }
+        $db = DB::db();
+        $me = $db->queryFirstRow('SELECT officer_level, nation FROM general WHERE no = %i', $session->generalID);
+        if(!$me){
+            return '올바르지 않은 장수입니다.';
+        }
+
+        if(!$me['nation']){
+            return '국가에 소속되어 있지 않습니다.';
+        }
+
+        if($me['officer_level'] < 5){
+            return '수뇌가 아닙니다.';
+        }
+
+        pushNationCommand($me['nation'],  $me['officer_level'], $amount);
+
+        return [
+            'result'=>true
+        ];
+    }
+}
@@ -0,0 +1,62 @@
+<?php
+
+namespace sammo\API\NationCommand;
+
+use sammo\Session;
+use DateTimeInterface;
+use sammo\DB;
+use sammo\Validator;
+
+use function sammo\cutTurn;
+use function sammo\repeatGeneralCommand;
+use function sammo\repeatNationCommand;
+
+class RepeatCommand extends \sammo\BaseAPI
+{
+    public function validateArgs(): ?string
+    {
+        $v = new Validator($this->args);
+        $v->rule('required', [
+            'amount',
+        ])
+            ->rule('integer', 'amount')
+            ->rule('min', 'amount', 1)
+            ->rule('max', 'amount', 12);
+
+        if (!$v->validate()) {
+            return $v->errorStr();
+        }
+        return null;
+    }
+
+    public function getRequiredSessionMode(): int
+    {
+        return static::REQ_GAME_LOGIN | static::REQ_READ_ONLY;
+    }
+
+    public function launch(Session $session, ?DateTimeInterface $modifiedSince, ?string $reqEtag)
+    {
+
+        $amount = $this->args['amount'];
+
+        $db = DB::db();
+        $me = $db->queryFirstRow('SELECT officer_level, nation FROM general WHERE no = %i', $session->generalID);
+        if(!$me){
+            return '올바르지 않은 장수입니다.';
+        }
+
+        if(!$me['nation']){
+            return '국가에 소속되어 있지 않습니다.';
+        }
+
+        if($me['officer_level'] < 5){
+            return '수뇌가 아닙니다.';
+        }
+
+        repeatNationCommand($me['nation'],  $me['officer_level'], $amount);
+
+        return [
+            'result'=>true
+        ];
+    }
+}
@@ -0,0 +1,56 @@
+<?php
+
+namespace sammo\API\NationCommand;
+
+use sammo\Session;
+use DateTimeInterface;
+use sammo\GameConst;
+use sammo\Util;
+use sammo\Validator;
+
+use function sammo\setNationCommand;
+
+class ReserveCommand extends \sammo\BaseAPI
+{
+    public function validateArgs(): ?string
+    {
+        $v = new Validator($this->args);
+        $v->rule('required', [
+            'action',
+            'turnList'
+        ])
+            ->rule('lengthMin', 'action', 1)
+            ->rule('integerArray', 'turnList');
+
+        if (!$v->validate()) {
+            return $v->errorStr();
+        }
+        return null;
+    }
+
+    public function getRequiredSessionMode(): int
+    {
+        return static::REQ_GAME_LOGIN | static::REQ_READ_ONLY;
+    }
+
+    public function launch(Session $session, ?DateTimeInterface $modifiedSince, ?string $reqEtag)
+    {
+        $action = $this->args['action'];
+        $turnList = $this->args['turnList'];
+        $arg = $this->args['arg']??[];
+
+        if(!$turnList){
+            return '턴이 입력되지 않았습니다';
+        }
+
+        if(!in_array($action, Util::array_flatten(GameConst::$availableChiefCommand))){
+            return '사용할 수 없는 커맨드입니다.';
+        }
+
+        if(!is_array($arg)){
+            '올바른 arg 형태가 아닙니다.';
+        }
+
+        return setNationCommand($session->generalID, $turnList, $action, $arg);
+    }
+}
@@ -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;
+    }
+  }
+}
@@ -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,
@@ -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;
 }
@@ -4,7 +4,7 @@
 <?=$btnBegin??''?><a href='t_diplomacy.php' class='commandButton <?= $showSecret ? '' : 'disabled' ?> <?=$btnClass??""?>'>외 교 부</a><?=$btnEnd??''?>
 <?=$btnBegin??''?><a href='b_myBossInfo.php' class='commandButton <?= $meLevel >= 1 ? '' : 'disabled' ?> <?=$btnClass??""?>'>인 사 부</a><?=$btnEnd??''?>
 <?=$btnBegin??''?><a href='b_dipcenter.php' class='commandButton <?= $showSecret ? '' : 'disabled' ?> <?=$btnClass??""?>'>내 무 부</a><?=$btnEnd??''?>
-<?=$btnBegin??''?><a href='b_chiefcenter.php' class='commandButton <?= $showSecret ? '' : 'disabled' ?> <?=$btnClass??""?>'>사 령 부</a><?=$btnEnd??''?>
+<?=$btnBegin??''?><a href='v_chiefCenter.php' class='commandButton <?= $showSecret ? '' : 'disabled' ?> <?=$btnClass??""?>'>사 령 부</a><?=$btnEnd??''?>
 <?=$btnBegin??''?><a href='v_NPCControl.php' class='commandButton <?= $showSecret ? '' : 'disabled' ?> <?=$btnClass??""?>'>NPC 정책</a><?=$btnEnd??''?>
 <?=$btnBegin??''?><a href='b_genList.php' target='_blank' class='open-window commandButton <?=$btnClass??""?> <?= $showSecret ? '' : 'disabled' ?>'>암 행 부</a><?=$btnEnd??''?>
 <?=$btnBegin??''?><a href='b_tournament.php' target='_blank' class='open-window commandButton <?=$btnClass??""?>'>토 너 먼 트</a><?=$btnEnd??''?>
@@ -0,0 +1,56 @@
+<template>
+  <div
+    :class="[`chiefBox${chiefLevel}`, 'subRows']"
+    v-for="(officer, idx) in [chiefList[chiefLevel]]"
+    :key="idx"
+    :style="style"
+    @click="$emit('click', this)"
+  >
+    <div
+      class="bg1 nameHeader"
+      :style="{
+        color: getNpcColor(officer.npcType ?? 0),
+        textDecoration: isMe ? 'underline' : undefined,
+      }"
+    >
+      {{ officer.name ?? "-" }}
+    </div>
+    <div class="bg1 center row gx-0">
+      <div class="col">{{ officer.officerLevelText }}</div>
+      <div class="col">{{ (officer.turnTime ?? "  -  ").slice(-5) }}</div>
+    </div>
+    <div
+      class="tableCell align-self-center"
+      v-for="(turn, idx) in officer.turn"
+      :key="idx"
+      :style="{
+        fontSize:
+          mb_strwidth(turn.brief) > 28
+            ? `${28 / mb_strwidth(turn.brief)}em`
+            : undefined,
+      }"
+    >
+      {{ turn.brief }}
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { getNpcColor } from "@/common_legacy";
+import { mb_strwidth } from "@/util/mb_strwidth";
+import { defineComponent } from "vue";
+import VueTypes from "vue-types";
+
+export default defineComponent({
+  props: {
+    chiefLevel: VueTypes.integer.isRequired,
+    style: VueTypes.object.isRequired,
+    chiefList: VueTypes.object.isRequired,
+    isMe: VueTypes.bool.isRequired,
+  },
+  emits: ["click"],
+  methods: {
+    mb_strwidth,
+    getNpcColor,
+  },
+});
+</script>
@@ -0,0 +1,83 @@
+<template>
+  <div
+    :class="['subRows', 'c-bg2', '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.officerLevelText }} :
+      </div>
+      <div
+        class="col-7 align-self-center"
+        :style="{
+          color: getNpcColor(officer.npcType ?? 0),
+        }"
+      >
+        {{ officer.name }}
+      </div>
+    </div>
+    <div class="row gx-0" v-for="(turn, idx) in officer.turn" :key="idx">
+      <div class="col-2 time_pad f_tnum">
+        {{ turnTimes[idx] }}
+      </div>
+      <div
+        class="tableCell align-self-center col-10 center turn_pad"
+        :style="{
+          fontSize:
+            mb_strwidth(turn.brief) > 28
+              ? `${28 / mb_strwidth(turn.brief)}em`
+              : undefined,
+        }"
+      >
+        {{ turn.brief }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { getNpcColor } from "@/common_legacy";
+import { ChiefResponse } from "@/defs";
+import { formatTime } from "@/util/formatTime";
+import { mb_strwidth } from "@/util/mb_strwidth";
+import { parseTime } from "@/util/parseTime";
+import addMinutes from "date-fns/esm/addMinutes/index";
+import { range } from "lodash";
+import { defineComponent, PropType } from "vue";
+import VueTypes from "vue-types";
+
+export default defineComponent({
+  props: {
+    style: VueTypes.object.isRequired,
+    officer: {
+        type: Object as PropType<ChiefResponse['chiefList'][0]>,
+        required: true,
+    },
+    turnTerm: VueTypes.integer.isRequired,
+  },
+  methods: {
+    getNpcColor,
+    mb_strwidth,
+  },
+
+  data() {
+      const turnTimes: string[] = [];
+
+      if (!this.officer.turnTime) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          for(const _ of range(this.officer.turn.length)){
+              turnTimes.push('-');
+          }
+      }
+      else{
+          const baseTurnTime = parseTime(this.officer.turnTime);
+          for(const idx of range(this.officer.turn.length)){
+              turnTimes.push(formatTime(addMinutes(baseTurnTime, idx * this.turnTerm), this.turnTerm >= 5 ? "HH:mm":"mm:ss"));
+          }
+      }
+
+      return {
+          turnTimes,
+      }
+  },
+});
+</script>
@@ -0,0 +1,471 @@
+<template>
+  <div id="container" class="pageChiefCenter">
+    <TopBackBar title="사령부" reloadable @reload="reloadTable" />
+
+    <div
+      id="mainTable"
+      v-if="chiefList !== undefined"
+      :class="`${targetIsMe ? 'targetIsMe' : 'targetIsNotMe'}`"
+    >
+      <template
+        v-for="(chiefLevel, vidx) in [12, 10, 8, 6, 11, 9, 7, 5]"
+        :key="chiefLevel"
+      >
+        <div
+          v-if="vidx % 4 == 0"
+          :class="[
+            'turnIdx',
+            vidx == 0 && !targetIsMe ? undefined : 'only1000px',
+          ]"
+        >
+          <div :class="['subRows', 'bg0']" :style="mainTableGridRows">
+            <div class="bg1">&nbsp;</div>
+            <div
+              v-for="idx in maxChiefTurn"
+              :class="[`turnIdxLeft`, 'align-self-center', 'center']"
+              :key="idx"
+            >
+              {{ idx }}
+            </div>
+          </div>
+        </div>
+        <div
+          v-for="(officer, idx) in [chiefList[chiefLevel]]"
+          :key="idx"
+          :class="[`${viewTarget == chiefLevel ? '' : 'only1000px'}`]"
+        >
+          <TopItem
+            v-if="officerLevel != chiefLevel"
+            :style="mainTableGridRows"
+            :officer="officer"
+            :turnTerm="turnTerm"
+          />
+          <div class="commandBox" v-else>
+            <div
+              class="only1000px bg1 center row gx-0"
+              style="height: 24px; font-size: 1.2em"
+            >
+              <div class="col-5 align-self-center text-end">
+                {{ officer.officerLevelText }} :
+              </div>
+              <div
+                class="col-7 align-self-center"
+                :style="{
+                  color: getNpcColor(officer.npcType ?? 0),
+                }"
+              >
+                {{ officer.name }}
+              </div>
+            </div>
+            <div
+              :class="[
+                'row',
+                'controlPad',
+                chiefLevel == officerLevel ? 'targetIsMe' : 'targetIsNotMe',
+              ]"
+            >
+              <div class="col-3 col-md-12 order-md-last">
+                <div class="d-grid mb-1 py-1 only500px bg1 center">
+                  <div
+                    :style="{
+                      color: getNpcColor(officer.npcType ?? 0),
+                      fontSize: '1.2em',
+                    }"
+                  >
+                    {{ officer.name }}
+                  </div>
+                  <div>{{ officer.officerLevelText }}</div>
+                </div>
+                <div class="row gx-1 gy-1 py-1">
+                  <div class="col-md-4 mx-0 mb-0 mt-1 d-grid">
+                    <div class="alert alert-primary mb-0 center" style="padding:0.5rem 0">
+                        {{ serverNow }}
+                    </div>
+                  </div>
+
+                  <b-dropdown class="col-md-4" left 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>
+                  <b-dropdown class="col-md-4" text="반복">
+                    <b-dropdown-item
+                      v-for="turnIdx in maxPushTurn"
+                      :key="turnIdx"
+                      @click="repeatNationCommand(turnIdx)"
+                      >{{ turnIdx }}턴
+                    </b-dropdown-item>
+                  </b-dropdown>
+                  <b-dropdown
+                    class="col-md-6"
+                    split
+                    text="당기기"
+                    @click="pullNationCommandSingle"
+                  >
+                    <b-dropdown-item
+                      v-for="turnIdx in maxPushTurn"
+                      :key="turnIdx"
+                      @click="pushNationCommand(-turnIdx)"
+                      >{{ turnIdx }}턴
+                    </b-dropdown-item>
+                  </b-dropdown>
+                  <b-dropdown
+                    class="col-md-6"
+                    split
+                    text="미루기"
+                    @click="pushNationCommandSingle"
+                  >
+                    <b-dropdown-item
+                      v-for="turnIdx in maxPushTurn"
+                      :key="turnIdx"
+                      @click="pushNationCommand(turnIdx)"
+                      >{{ turnIdx }}턴
+                    </b-dropdown-item>
+                  </b-dropdown>
+                </div>
+              </div>
+              <div class="col">
+                <ChiefReservedCommand
+                  :key="idx"
+                  :year="year"
+                  :month="month"
+                  :turn="officer.turn"
+                  :turnTerm="turnTerm"
+                  :commandList="commandList"
+                  :turnTime="officer.turnTime"
+                  :maxTurn="maxChiefTurn"
+                  :maxPushTurn="Math.floor(maxChiefTurn / 2)"
+                  :date="date"
+                  v-model:selectedTurn="turnList"
+                  @raiseReload="reloadTable()"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="vidx % 4 == 3"
+          :class="[
+            'turnIdx',
+            vidx == 7 && !targetIsMe ? undefined : 'only1000px',
+          ]"
+        >
+          <div :class="['subRows', 'bg0']" :style="mainTableGridRows">
+            <div class="bg1">&nbsp;</div>
+            <div
+              v-for="idx in maxChiefTurn"
+              :class="[`turnIdxRight`, 'align-self-center', 'center']"
+              :key="idx"
+            >
+              {{ idx }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+  <div id="bottomChiefBox" v-if="chiefList">
+    <div id="bottomChiefList" class="c-bg2">
+      <template
+        v-for="(chiefLevel, vidx) in [12, 10, 8, 6, 11, 9, 7, 5]"
+        :key="chiefLevel"
+      >
+        <div
+          class="turnIdx subRows bg0"
+          :style="subTableGridRows"
+          v-if="vidx % 4 == 0"
+        >
+          <div class="bg1" style="grid-row: 1/3"></div>
+          <div v-for="idx in maxChiefTurn" :class="[`turnIdxLeft`]" :key="idx">
+            {{ idx }}
+          </div>
+        </div>
+        <BottomItem
+          :chiefLevel="chiefLevel"
+          :chiefList="chiefList"
+          :style="subTableGridRows"
+          :isMe="targetIsMe"
+          @click="viewTarget = chiefLevel"
+        />
+        <div
+          class="turnIdx subRows bg0"
+          :style="subTableGridRows"
+          v-if="vidx % 4 == 3"
+        >
+          <div class="bg1" style="grid-row: 1/3"></div>
+          <div v-for="idx in maxChiefTurn" :class="`turnIdxRight`" :key="idx">
+            {{ idx }}
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import "@scss/common/bootstrap5.scss";
+import "@scss/game_bg.scss";
+import "../../css/config.css";
+
+import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
+import ChiefReservedCommand from "@/components/ChiefReservedCommand.vue";
+import TopBackBar from "@/components/TopBackBar.vue";
+import VueTypes from "vue-types";
+import { isString, range } from "lodash";
+import { mb_strwidth } from "./util/mb_strwidth";
+import { sammoAPI } from "./util/sammoAPI";
+import { entriesWithType } from "./util/entriesWithType";
+import { addMilliseconds } from "date-fns";
+import { formatTime } from "./util/formatTime";
+import { parseTime } from "./util/parseTime";
+import { getNpcColor } from "./common_legacy";
+import TopItem from "@/ChiefCenter/TopItem.vue";
+import BottomItem from "@/ChiefCenter/BottomItem.vue";
+import { ChiefResponse, OptionalFull } from "./defs";
+
+function isDropdownChildren(e?: Event): boolean {
+  if (!e) {
+    return false;
+  }
+  if (!e.target) {
+    return false;
+  }
+  if (
+    (e.target as HTMLElement).classList.contains("dropdown-item") ||
+    (e.target as HTMLElement).classList.contains("dropdown-toggle-split") ||
+    (e.target as HTMLElement).classList.contains("ignoreMe")
+  ) {
+    return true;
+  }
+  return false;
+}
+
+export default defineComponent({
+  components: {
+    TopBackBar,
+    ChiefReservedCommand,
+    TopItem,
+    BottomItem,
+  },
+  props: {
+    maxChiefTurn: VueTypes.number.isRequired,
+  },
+  watch: {
+    year() {
+      console.log(this.lastExecute);
+    },
+  },
+  methods: {
+    toggleTurn(turnIdx: number) {
+      if (this.turnList.has(turnIdx)) {
+        this.turnList.delete(turnIdx);
+      } else {
+        this.turnList.add(turnIdx);
+      }
+    },
+    selectTurn(turnIdx: number) {
+      this.turnList.clear();
+      this.turnList.add(turnIdx);
+    },
+    selectAll(e: Event | true) {
+      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+      if (e !== true && isDropdownChildren(e)) {
+        return;
+      }
+
+      if (this.turnList.size * 3 > this.maxChiefTurn) {
+        this.turnList.clear();
+      } else {
+        for (let i = 0; i < this.maxChiefTurn; i++) {
+          this.turnList.add(i);
+        }
+      }
+    },
+    selectStep(begin: number, step: number) {
+      this.turnList.clear();
+      for (const idx of range(0, this.maxChiefTurn)) {
+        if ((idx - begin) % step == 0) {
+          this.turnList.add(idx);
+        }
+      }
+    },
+    async repeatNationCommand(amount: number) {
+      try {
+        await sammoAPI(`NationCommand/RepeatCommand`, { amount });
+      } catch (e) {
+        console.error(e);
+        alert(`실패했습니다: ${e}`);
+        return;
+      }
+      await this.reloadTable();
+    },
+    async pushNationCommand(amount: number) {
+      try {
+        await sammoAPI("NationCommand/PushCommand", { amount });
+      } catch (e) {
+        console.error(e);
+        alert(`실패했습니다: ${e}`);
+        return;
+      }
+      await this.reloadTable();
+    },
+    pushNationCommandSingle(e: Event) {
+      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+      if (isDropdownChildren(e)) {
+        return;
+      }
+      void this.pushNationCommand(1);
+    },
+    pullNationCommandSingle(e: Event) {
+      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+      if (isDropdownChildren(e)) {
+        return;
+      }
+      void this.pushNationCommand(-1);
+    },
+  },
+  setup(props) {
+    const viewTarget = ref<number | undefined>();
+
+    const turnList = ref(new Set<number>([2]));
+
+    const targetIsMe = ref<boolean>(false);
+    watch(viewTarget, (val) => {
+      console.log("targetChange!", val, targetIsMe);
+      if (val === undefined) {
+        targetIsMe.value = false;
+        return;
+      }
+      if (tableObj.officerLevel === undefined) {
+        targetIsMe.value = false;
+      }
+      targetIsMe.value = val === tableObj.officerLevel;
+      console.log("result", targetIsMe.value);
+    });
+
+    const tableObj = reactive<Omit<OptionalFull<ChiefResponse>, "result">>({
+      lastExecute: undefined,
+      year: undefined,
+      month: undefined,
+      turnTerm: undefined,
+      date: undefined,
+      chiefList: undefined,
+      isChief: undefined,
+      autorun_limit: undefined,
+      officerLevel: undefined,
+      commandList: undefined,
+    });
+
+    async function reloadTable(): Promise<void> {
+      try {
+        const response = await sammoAPI<ChiefResponse>(
+          "NationCommand/GetReservedCommand"
+        );
+        console.log(response);
+        for (const [key, value] of entriesWithType(response)) {
+          if (key === "result") {
+            continue;
+          }
+
+          if (key === "officerLevel") {
+            if (value < 5) {
+              tableObj.officerLevel = undefined;
+            } else {
+              tableObj.officerLevel = value as number;
+            }
+            continue;
+          }
+
+          //HACK:
+          tableObj[key as unknown as "year"] = value as unknown as undefined;
+        }
+
+        const serverNowObj = parseTime(response.date);
+        const clientNowObj = new Date();
+        timeDiff.value = serverNowObj.getTime() - clientNowObj.getTime();
+
+        if (viewTarget.value === undefined) {
+          viewTarget.value = tableObj.officerLevel;
+        }
+      } catch (e) {
+        if (isString(e)) {
+          alert(e);
+        }
+        console.error(e);
+        return;
+      }
+    }
+    //
+
+    const mainTableGridRows = computed(() => {
+      return {
+        gridTemplateRows: `24px repeat(${props.maxChiefTurn}, 30px)`,
+      };
+    });
+
+    const subTableGridRows = computed(() => {
+      return {
+        gridTemplateRows: `36px repeat(${props.maxChiefTurn + 1}, 1fr)`,
+      };
+    });
+
+    void reloadTable();
+
+    const serverNow = ref(formatTime(new Date(), "HH:mm:ss"));
+    const timeDiff = ref(0);
+
+    function updateNow() {
+      const serverNowObj = addMilliseconds(new Date(), timeDiff.value);
+      serverNow.value = formatTime(serverNowObj, "HH:mm:ss");
+      setTimeout(() => {
+        updateNow();
+      }, 1000 - serverNowObj.getMilliseconds());
+    }
+
+    setTimeout(() => {
+      updateNow();
+    }, 500);
+
+    return {
+      updateNow,
+      serverNow,
+      timeDiff,
+      turnList,
+      ...toRefs(tableObj),
+      mb_strwidth,
+      mainTableGridRows,
+      subTableGridRows,
+      reloadTable,
+      getNpcColor,
+      viewTarget,
+      targetIsMe,
+      maxPushTurn: props.maxChiefTurn / 2,
+    };
+  },
+});
+</script>
+<style lang="scss">
+@import "@scss/chiefCenter.scss";
+</style>
@@ -497,7 +497,7 @@ export default defineComponent({
        if (command.searchText) {
          continue;
        }
-        command.searchText = convertSearch초성(command.simpleName).join('|');
+        command.searchText = convertSearch초성(command.simpleName).join("|");
      }
    }

@@ -542,6 +542,7 @@ export default defineComponent({
@import "@scss/common/break_500px.scss";
@import "@scss/common/variables.scss";
@import "@scss/common/bootswatch_custom_variables.scss";
+@import "@scss/game_bg.scss";

 .commandPad {
  background-color: $gray-900;
@@ -554,7 +555,7 @@ export default defineComponent({
  //30, 70, 37.65, 160
 }

-@include media-1000px{
+@include media-1000px {
  .commandPad {
    margin-left: 10px;

@@ -612,7 +613,7 @@ export default defineComponent({

 .turn_pad {
  white-space: nowrap;
-  background-color: rgba($base1color, 0.5);
+  background-color: $nbase2color;
 }

 .turn_pad .turn_text {
@@ -23,6 +23,7 @@
    "ingame_vue": {
        "v_inheritPoint": "v_inheritPoint.ts",
        "v_board": "v_board.ts",
+        "v_chiefCenter": "v_chiefCenter.ts",
        "v_NPCControl": "v_NPCControl.ts",
        "v_join": "v_join.ts",
        "v_main": "v_main.ts",
@@ -19,7 +19,7 @@ export default defineComponent({
        location.href = './';
      }
      else if(this.type == 'chief'){
-        location.href = 'b_chiefcenter.php';
+        location.href = 'v_chiefCenter.php';
      }
      else{
        //TODO: window.close하려면 부모창이 있어야함!
@@ -0,0 +1,492 @@
+<template>
+  <div class="commandPad chiefReservedCommand">
+    <div class="commandTable">
+      <template
+        v-for="(turnObj, turnIdx) in reservedCommandList"
+        :key="turnIdx"
+      >
+        <div class="idx_pad center d-grid" @click="toggleTurn(turnIdx)">
+          <b-button
+            size="sm"
+            :variant="
+              turnList.has(turnIdx)
+                ? 'info'
+                : turnList.size == 0 && prevTurnList.has(turnIdx)
+                ? 'success'
+                : 'primary'
+            "
+            >{{ turnIdx + 1 }}</b-button
+          >
+        </div>
+        <div
+          @click="selectTurn(turnIdx)"
+          class="time_pad center"
+          style="background-color: black; white-space: nowrap; overflow: hidden"
+        >
+          {{ turnObj.time }}
+        </div>
+        <div class="turn_pad center">
+          <span
+            class="turn_text"
+            :style="turnObj.style"
+            v-b-tooltip.hover
+            :title="turnObj.tooltip"
+            v-html="turnObj.brief"
+          ></span>
+        </div>
+      </template>
+    </div>
+    <div class="row gx-0">
+      <div class="col-2 d-grid">
+        <b-button
+          :pressed="searchModeOn"
+          @click="toggleSearchCommand()"
+          :variant="searchModeOn ? 'info' : 'primary'"
+          v-b-tooltip.hover
+          title="검색 기능을 활성화합니다."
+          ><i class="bi bi-search"></i
+        ></b-button>
+      </div>
+      <div class="col-7">
+        <v-multiselect
+          v-model="selectedCommand"
+          :allow-empty="false"
+          :options="commandList"
+          :group-select="false"
+          group-values="values"
+          group-label="category"
+          label="searchText"
+          track-by="value"
+          open-direction="top"
+          :show-labels="false"
+          selectLabel="선택(엔터)"
+          selectGroupLabel=""
+          selectedLabel="선택됨"
+          deselectLabel="해제(엔터)"
+          deselectGroupLabel=""
+          placeholder="턴 선택"
+          :maxHeight="400"
+          :searchable="searchModeOn"
+        >
+          <template v-slot:noResult>검색 결과가 없습니다.</template>
+          <template v-slot:option="props"
+            ><!--FIXME: 카테고리-->
+            <template v-if="props.option.title">
+              <span
+                class="compensatePositive"
+                v-if="props.option.compensation > 0"
+                >▲</span
+              >
+              <span
+                class="compensateNegative"
+                v-else-if="props.option.compensation < 0"
+                >▼</span
+              >
+              <span class="compensateNeutral" v-else></span>
+              <span :class="[props.option.possible ? '' : 'commandImpossible']">
+                {{ props.option.title }}
+              </span>
+            </template>
+            <template v-else-if="props.option.category">
+              {{ props.option.category }}
+            </template>
+          </template>
+          <template v-slot:singleLabel="props">
+            {{ props.option.simpleName }}
+          </template>
+        </v-multiselect>
+      </div>
+      <div class="col-3 d-grid">
+        <b-button @click="reserveCommand()" variant="primary">실행</b-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import addMinutes from "date-fns/esm/addMinutes";
+import { stringifyUrl } from "query-string";
+import { defineComponent, PropType } from "vue";
+import { formatTime } from "@util/formatTime";
+import { joinYearMonth } from "@util/joinYearMonth";
+import { mb_strwidth } from "@util/mb_strwidth";
+import { parseTime } from "@util/parseTime";
+import { parseYearMonth } from "@util/parseYearMonth";
+import { sammoAPI } from "@util/sammoAPI";
+import { convertSearch초성 } from "@util/convertSearch초성";
+import VueTypes from "vue-types";
+type commandItem = {
+  value: string;
+  title: string;
+  compensation: number;
+  simpleName: string;
+  possible: boolean;
+  reqArg: boolean;
+  searchText?: string;
+};
+
+/*declare const commandList: {
+  category: string;
+  values: commandItem[];
+}[];*/
+type TurnObj = {
+  action: string;
+  brief: string;
+  arg: null | [] | Record<string, number | string | number[] | string[]>;
+};
+
+type TurnObjWithTime = TurnObj & {
+  time: string;
+  year?: number;
+  month?: number;
+  tooltip?: string;
+  style?: Record<string, unknown>;
+};
+
+const searchModeKey = `sammo_searchModeOn`;
+
+export default defineComponent({
+  name: "NationReservedCommand",
+  props: {
+    maxTurn: VueTypes.integer.isRequired,
+    maxPushTurn: VueTypes.integer.isRequired,
+    date: VueTypes.string.isRequired,
+    year: VueTypes.integer.isRequired,
+    month: VueTypes.integer.isRequired,
+    turnTerm: VueTypes.integer.isRequired,
+    turnTime: VueTypes.string.isRequired,
+    selectedTurn: {
+      type: Object as PropType<Set<number>>,
+      required: false,
+      default: () => new Set(),
+    },
+    turn: {
+      type: Array as PropType<TurnObj[]>,
+      required: true,
+    },
+    commandList: {
+      type: Object as PropType<
+        {
+          category: string;
+          values: commandItem[];
+        }[]
+      >,
+      required: true,
+    },
+  },
+  emits: ["raiseReload", "update:selectedTurn"],
+  watch: {
+    date() {
+      this.triggerUpdateCommandList("date");
+    },
+    year() {
+      this.triggerUpdateCommandList("year");
+    },
+    month() {
+      this.triggerUpdateCommandList("month");
+    },
+    turnTime() {
+      this.triggerUpdateCommandList("turnTime");
+    },
+    commandList() {
+      this.triggerUpdateCommandList("commandList");
+    },
+    selectedTurn(val: Set<number>) {
+      console.log(val);
+      if (val === this.turnList) {
+        console.log("pass!");
+        return;
+      }
+      this.turnList.clear();
+      for (const t of val.values()) {
+        this.turnList.add(t);
+      }
+    },
+    turnList: {
+      handler() {
+        console.log(this.turnList);
+        this.$emit("update:selectedTurn", this.turnList);
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    triggerUpdateCommandList(type?: string) {
+      console.log("try update", type);
+      this.updated = false;
+      setTimeout(() => {
+        this.updateCommandList();
+      }, 1);
+    },
+    toggleTurn(val: number) {
+      if (this.turnList.has(val)) {
+        this.turnList.delete(val);
+      } else {
+        this.turnList.add(val);
+      }
+      this.$emit("update:selectedTurn", this.turnList);
+    },
+    selectTurn(val: number) {
+      this.turnList.clear();
+      this.turnList.add(val);
+      this.$emit("update:selectedTurn", this.turnList);
+    },
+    updateCommandList() {
+      if (this.updated) {
+        return;
+      }
+      console.log("do update!");
+      const reservedCommandList: TurnObjWithTime[] = [];
+      let yearMonth = joinYearMonth(this.year, this.month);
+
+      const turnTime = parseTime(this.turnTime);
+      let nextTurnTime = new Date(turnTime);
+
+      const autorunLimitYearMonth = this.autorun_limit ?? yearMonth - 1;
+      const [autorunLimitYear, autorunLimitMonth] = parseYearMonth(
+        autorunLimitYearMonth
+      );
+
+      for (const obj of this.turn) {
+        const [year, month] = parseYearMonth(yearMonth);
+        let tooltip: string[] = [];
+        let style: Record<string, unknown> = {};
+
+        const brief = obj.brief;
+
+        if (yearMonth <= autorunLimitYearMonth) {
+          if (obj.brief == "휴식") {
+            obj.brief = "휴식<small>(자율 행동)</small>";
+          }
+          style.color = "#aaffff";
+
+          tooltip.push(
+            `자율 행동 기간: ${autorunLimitYear}년 ${autorunLimitMonth}월까지`
+          );
+        }
+
+        if (mb_strwidth(brief) > 22) {
+          tooltip.push(brief);
+        }
+
+        reservedCommandList.push({
+          ...obj,
+          year,
+          month,
+          time: formatTime(
+            nextTurnTime,
+            this.turnTerm >= 5 ? "HH:mm" : "mm:ss"
+          ),
+          tooltip: tooltip.length == 0 ? undefined : tooltip.join("\n"),
+          style,
+        });
+
+        yearMonth += 1;
+        nextTurnTime = addMinutes(nextTurnTime, this.turnTerm);
+      }
+      this.reservedCommandList = reservedCommandList;
+
+      const serverNowObj = parseTime(this.date);
+      const clientNowObj = new Date();
+      const timeDiff = serverNowObj.getTime() - clientNowObj.getTime();
+      this.timeDiff = timeDiff;
+      this.updated = true;
+    },
+    async reserveCommand() {
+      let turnList: number[];
+      if (this.turnList.size == 0) {
+        turnList = Array.from(this.prevTurnList.values());
+      } else {
+        turnList = Array.from(this.turnList.values());
+      }
+
+      if (turnList.length == 0) {
+        turnList.push(0);
+      }
+
+      const commandName = this.selectedCommand.value;
+
+      if (this.listReqArgCommand.has(commandName)) {
+        document.location.href = stringifyUrl({
+          url: "v_processing.php",
+          query: {
+            command: commandName,
+            turnList: turnList.join("_"),
+            is_chief: true,
+          },
+        });
+        return;
+      }
+
+      try {
+        await sammoAPI("NationCommand/ReserveCommand", {
+          turnList,
+          action: commandName,
+        });
+
+        if (this.turnList.size > 0) {
+          this.prevTurnList.clear();
+          for (const v of this.turnList) {
+            this.prevTurnList.add(v);
+          }
+          this.turnList.clear();
+        }
+      } catch (e) {
+        console.error(e);
+        alert(`실패했습니다: ${e}`);
+        return;
+      }
+      this.$emit("raiseReload");
+    },
+    toggleSearchCommand() {
+      const searchModeOn = !this.searchModeOn;
+      this.searchModeOn = searchModeOn;
+      localStorage.setItem(searchModeKey, searchModeOn ? "1" : "0");
+    },
+  },
+  data() {
+    const serverNowObj = parseTime(this.date);
+    const clientNowObj = new Date();
+    const timeDiff = serverNowObj.getTime() - clientNowObj.getTime();
+
+    const listReqArgCommand = new Set<string>();
+    for (const commandCategories of this.commandList) {
+      if (!commandCategories.values) {
+        continue;
+      }
+      for (const commandObj of commandCategories.values) {
+        if (!commandObj.reqArg) {
+          continue;
+        }
+        listReqArgCommand.add(commandObj.value);
+      }
+    }
+
+    const selectedCommand = this.commandList[0].values[0];
+    for (const subCategory of this.commandList) {
+      for (const command of subCategory.values) {
+        if (command.searchText) {
+          continue;
+        }
+        command.searchText = convertSearch초성(command.simpleName).join("|");
+      }
+    }
+
+    const searchModeOn = (localStorage.getItem(searchModeKey) ?? "0") != "0";
+
+    const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
+      length: this.maxTurn,
+    }).fill({
+      arg: null,
+      brief: "",
+      action: "",
+      year: undefined,
+      month: undefined,
+      time: "",
+    });
+
+    const prevTurnList = new Set([0]);
+
+    return {
+      updated: false,
+      listReqArgCommand,
+      serverNow: formatTime(serverNowObj, "HH:mm:ss"),
+      timeDiff,
+      prevTurnList,
+      turnList: this.selectedTurn,
+      selectedCommand,
+      reservedCommandList: emptyTurn,
+      autorun_limit: null as null | number,
+      searchModeOn,
+    };
+  },
+  mounted() {
+    this.updateCommandList();
+  },
+});
+</script>
+<style lang="scss">
+@import "@scss/common/break_500px.scss";
+@import "@scss/common/variables.scss";
+@import "@scss/common/bootswatch_custom_variables.scss";
+
+.chiefReservedCommand {
+  background-color: $gray-900;
+
+  .commandTable {
+    width: 100%;
+    display: grid;
+    grid-template-columns: minmax(30px, 1fr) minmax(40px, 1fr) 5fr;
+    //30, 70, 37.65, 160
+  }
+
+  @include media-1000px {
+    .turn_pad {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .multiselect__content-wrapper {
+      margin-left: calc(-100% / 7 * 2);
+      width: calc(100% / 7 * 12);
+    }
+
+    .multiselect__single {
+      display: inline-block;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
+  @include media-500px {
+    .dropdown-item {
+      padding: 8px;
+    }
+
+    .multiselect__content-wrapper {
+      margin-left: calc(-100% / 7 * 2);
+      width: calc(100% / 7 * 12);
+    }
+
+    .commandPad {
+      margin-top: 10px;
+      margin-bottom: 10px;
+
+      .btn {
+        transition: none !important;
+      }
+    }
+
+    .month_pad,
+    .time_pad,
+    .turn_pad {
+      padding: 6px;
+    }
+  }
+
+  .month_pad:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .month_pad,
+  .time_pad,
+  .turn_pad {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .turn_pad {
+    white-space: nowrap;
+    background-color: $nbase2color;
+  }
+
+  .turn_pad .turn_text {
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+</style>
@@ -1,8 +1,19 @@
 <template>
  <div class="bg0 back_bar">
    <button type="button" class="btn btn-sammo-base2 back_btn" @click="back">
-      돌아가기
-    </button><b-button
+      돌아가기</button
+    ><button
+      type="button"
+      v-if="reloadable"
+      class="btn btn-sammo-base2 reload_btn"
+      @click="reload"
+    >
+      갱신
+    </button>
+    <div v-else></div>
+    <h2 class="title">{{ title }}</h2>
+    <div>&nbsp;</div>
+    <b-button
      class="btn-toggle-zoom"
      :variant="toggleSearch ? 'info' : 'secondary'"
      :pressed="toggleSearch"
@@ -10,8 +21,6 @@
      @click="toggleSearch = !toggleSearch"
      >{{ toggleSearch ? "검색 켜짐" : "검색 꺼짐" }}</b-button
    >
-    <h2 class="title">{{ title }}</h2>
-
  </div>
 </template>

@@ -26,19 +35,22 @@ export default defineComponent({
      if (this.type === "normal") {
        location.href = "./";
      } else if (this.type == "chief") {
-        location.href = "b_chiefcenter.php";
+        location.href = "v_chiefCenter.php";
      } else {
        //TODO: window.close하려면 부모창이 있어야함!
        window.close();
      }
    },
+    reload() {
+      this.$emit("reload");
+    },
  },
  data() {
    return {
      toggleSearch: this.searchable,
    };
  },
-  emits: ["update:searchable"],
+  emits: ["update:searchable", "reload"],
  watch: {
    toggleSearch(val: boolean) {
      this.$emit("update:searchable", val);
@@ -59,6 +71,11 @@ export default defineComponent({
      default: undefined,
      required: false,
    },
+    reloadable: {
+      type: Boolean,
+      default: undefined,
+      required: false,
+    },
  },
 });
 </script>
@@ -69,20 +86,24 @@ export default defineComponent({
  max-width: 1000px;
  width: 100%;
  margin: auto;
+  display: grid;
+  grid-template-columns: 80px 80px 1fr 80px 80px;
  position: relative;
  height: 24pt;
 }

-.back_btn {
-  position: absolute;
-  left: 0;
+.reload_btn {
  height: 24pt;
+  margin-right: 2px;
 }

-.btn-toggle-zoom{
-  position: absolute;
+.back_btn {
+  height: 24pt;
+  margin-right: 2px;
+}
+
+.btn-toggle-zoom {
  height: 24pt;
-  right: 0;
 }

 .title {
@@ -155,8 +155,58 @@ export type ToastType = {
 }

 export const keyScreenMode = 'sam.screenMode';
-export type ScreenModeType = 'auto'|'500px'|'1000px';
+export type ScreenModeType = 'auto' | '500px' | '1000px';

 export declare type ValuesOf<T> = T[keyof T];

-export const NoneValue = 'None' as const;
+export const NoneValue = 'None' as const;
+
+export type Optional<Type> = {
+    [Property in keyof Type]+?: Type[Property];
+  };
+
+export type OptionalFull<Type> = {
+    [Property in keyof Type]: Type[Property]|undefined;
+  };
+
+export type commandItem = {
+    value: string;
+    title: string;
+    compensation: number;
+    simpleName: string;
+    possible: boolean;
+    reqArg: boolean;
+    searchText?: string;
+};
+
+
+export type ChiefResponse = {
+    result: true;
+    lastExecute: string;
+    year: number;
+    month: number;
+    turnTerm: number;
+    date: string;
+    chiefList: Record<
+        number,
+        {
+            name: string | undefined;
+            turnTime: string | undefined;
+            officerLevelText: string;
+            officerLevel: number;
+            npcType: number;
+            turn: {
+                action: string;
+                brief: string;
+                arg: Record<string, unknown>;
+            }[];
+        }
+    >;
+    isChief: boolean;
+    autorun_limit: number;
+    officerLevel: number;
+    commandList: {
+        category: string;
+        values: commandItem[];
+    }[];
+};
@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import PageChiefCenter from '@/PageChiefCenter.vue';
+import BootstrapVue3 from 'bootstrap-vue-3'
+import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import Multiselect from 'vue-multiselect';
+
+declare const maxChiefTurn: number;
+
+
+setAxiosXMLHttpRequest();
+createApp(PageChiefCenter, {
+    maxChiefTurn,
+
+}).use(BootstrapVue3).component('v-multiselect', Multiselect).mount('#app')
@@ -47,7 +47,7 @@ async function submitCommand<T>(isChiefTurn: boolean, turnList: number[], comman
        if (!isChiefTurn) {
            window.location.href = './';
        } else {
-            window.location.href = 'b_chiefcenter.php';
+            window.location.href = 'v_chiefCenter.php';
        }

        return data as unknown as T;
@@ -0,0 +1,35 @@
+<?php
+
+namespace sammo;
+
+include "lib.php";
+include "func.php";
+//로그인 검사
+$session = Session::requireGameLogin()->setReadOnly();
+$userID = Session::getUserID();
+$generalObj = General::createGeneralObjFromDB($session->generalID);
+?>
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=500" />
+    <title><?= UniqueConst::$serverName ?>: 사령부</title>
+    <?= WebUtil::printJS('../d_shared/common_path.js') ?>
+    <?= WebUtil::printCSS('../d_shared/common.css') ?>
+    <link rel="stylesheet" type="text/css"
+        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
+    <?= WebUtil::printStaticValues([
+        'maxChiefTurn'=>GameConst::$maxChiefTurn,
+        'generalID'=>$generalObj->getID(),
+    ])?>
+    <?= WebUtil::printDist('vue', 'v_chiefCenter', true) ?>
+</head>
+
+<body>
+    <div id='app'></div>
+</body>
+
+</html>
@@ -16,7 +16,7 @@ function die_redirect()
    if (!$isChiefTurn) {
        header('location:index.php', true, 303);
    } else {
-        header('location:b_chiefcenter.php', true, 303);
+        header('location:v_chiefCenter.php', true, 303);
    }
    die();
 }