Join: 양식 일부 수정

hwe/ts/Join.vue

@@ -109,10 +109,16 @@
           <b-button variant="secondary" class="stat-btn" @click="randStatRandom"
             >랜덤형</b-button
           >
-          <b-button variant="secondary" class="stat-btn" @click="randStatLeadPow"
+          <b-button
+            variant="secondary"
+            class="stat-btn"
+            @click="randStatLeadPow"
             >통솔무력형</b-button
           >
-          <b-button variant="secondary" class="stat-btn" @click="randStatLeadInt"
+          <b-button
+            variant="secondary"
+            class="stat-btn"
+            @click="randStatLeadInt"
             >통솔지력형</b-button
           >
           <b-button variant="secondary" class="stat-btn" @click="randStatPowInt"
@@ -165,97 +171,114 @@
           />
         </div>
       </div>
+      <hr />
       <div class="row">
-        <div class="col">
+        <div class="col col-md-6 col-sm-6 col-12 p-2 align-self-center">
-          <NumberInputWithInfo
+          <div class="row">
-            title="통솔"
+            <div class="col col-6 a-right align-self-center">천재로 생성</div>
-            v-model="args.inheritBonusStat[0]"
+            <div class="col col-6 align-self-center">
-          />
+              <select
+                class="form-select form-inline"
+                style="max-width: 20ch"
+                v-model="args.inheritSpecial"
+              >
+                <option :value="undefined">사용안함</option>
+                <option
+                  v-for="(inheritSpecial, key) in availableInheritSpecial"
+                  :key="key"
+                  :value="key"
+                >
+                  {{ inheritSpecial.name }}
+                </option>
+              </select>
+            </div>
+          </div>
+          <div class="col align-self-center">
+            <small
+              class="text-muted"
+              v-html="
+                (availableInheritSpecial[args.inheritSpecial] ?? { info: '' })
+                  .info
+              "
+            />
+          </div>
         </div>
-        <div class="col">
+
-          <NumberInputWithInfo
+        <div class="col col-md-6 col-sm-6 col-12 p-2 align-self-center">
-            title="무력"
+          <div class="row">
-            v-model="args.inheritBonusStat[1]"
+            <div class="col col-6 a-right align-self-center">도시</div>
-          />
+            <div class="col col-6 align-self-center">
+              <select
+                class="form-select form-inline"
+                style="max-width: 20ch"
+                v-model="args.inheritCity"
+              >
+                <option :value="undefined">사용안함</option>
+                <option
+                  v-for="city in availableInheritCity"
+                  :key="city[0]"
+                  :value="city[0]"
+                >
+                  {{ `[${city[1]}] ${city[2]}` }}
+                </option>
+              </select>
+            </div>
+          </div>
         </div>
-        <div class="col">
+
-          <NumberInputWithInfo
+        <div class="col col-md-6 col-sm-6 col-12 p-2 align-self-center">
-            title="지력"
+          <div class="a-center">
-            v-model="args.inheritBonusStat[2]"
+            <label
-          />
+              ><input type="checkbox" v-model="inheritTurnTimeSet" />턴 시간
-        </div>
+              고정</label
-      </div>
-      <div class="row">
-        <div class="col">천재로 생성</div>
-        <div class="col align-self-center">
-          <select
-            class="form-select form-inline"
-            style="max-width: 20ch"
-            v-model="args.inheritSpecial"
-          >
-            <option :value="undefined">사용안함</option>
-            <option
-              v-for="(inheritSpecial, key) in availableInheritSpecial"
-              :key="key"
-              :value="key"
             >
-              {{ inheritSpecial.name }}
+          </div>
-            </option>
+          <div class="row turn_time_pad">
-          </select>
+            <div class="col col-md-4 offset-md-3 col-4 offset-3">
+              <NumberInputWithInfo
+                :readonly="!inheritTurnTimeSet"
+                :min="0"
+                :max="1 - turnterm"
+                v-model="inheritTurnTimeMinute"
+                :right="true"
+                title="분"
+              />
+            </div>
+            <div class="col col-md-4 col-4">
+              <NumberInputWithInfo
+                :readonly="!inheritTurnTimeSet"
+                :min="0"
+                :max="60"
+                v-model="inheritTurnTimeSecond"
+                :right="true"
+                title="초"
+              />
+            </div>
+          </div>
         </div>
-        <div class="col align-self-center">
+
-          <small
+        <div class="col col-md-6 col-12 p-2">
-            class="text-muted"
+          <div class="a-center">추가 능력치 고정</div>
-            v-html="
+          <div class="row">
-              (availableInheritSpecial[args.inheritSpecial] ?? { info: '' })
+            <div class="col">
-                .info
+              <NumberInputWithInfo
-            "
+                title="통솔"
-          />
+                v-model="args.inheritBonusStat[0]"
-        </div>
+              />
-      </div>
+            </div>
-      <div class="row">
+            <div class="col">
-        <div class="col">도시</div>
+              <NumberInputWithInfo
-        <div class="col">
+                title="무력"
-          <select
+                v-model="args.inheritBonusStat[1]"
-            class="form-select form-inline"
+              />
-            style="max-width: 20ch"
+            </div>
-            v-model="args.inheritCity"
+            <div class="col">
-          >
+              <NumberInputWithInfo
-            <option :value="undefined">사용안함</option>
+                title="지력"
-            <option
+                v-model="args.inheritBonusStat[2]"
-              v-for="city in availableInheritCity"
+              />
-              :key="city[0]"
+            </div>
-              :value="city[0]"
+          </div>
-            >
-              {{ `[${city[1]}] ${city[2]}` }}
-            </option>
-          </select>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <label
-            ><input type="checkbox" v-model="inheritTurnTimeSet" />턴 시간
-            수정</label
-          >
-        </div>
-        <div class="col">
-          <NumberInputWithInfo
-            :readonly="!inheritTurnTimeSet"
-            :min="0"
-            :max="1 - turnterm"
-            v-model="inheritTurnTimeMinute"
-            title="분"
-          />
-        </div>
-        <div class="col">
-          <NumberInputWithInfo
-            :readonly="!inheritTurnTimeSet"
-            :min="0"
-            :max="60"
-            v-model="inheritTurnTimeSecond"
-            title="초"
-          />
         </div>
       </div>
     </div>
@@ -263,7 +286,9 @@
     <div class="row" style="border-top: solid 1px #aaa">
       <div class="col a-center" style="margin: 0.5em">
         <b-button color="primary" @click="submitForm">장수 생성</b-button
-        >&nbsp;<b-button color="secondary" @click="resetArgs">다시 입력</b-button>
+        >&nbsp;<b-button color="secondary" @click="resetArgs"
+          >다시 입력</b-button
+        >
       </div>
     </div>
   </div>
@@ -538,7 +563,7 @@ export default defineComponent({
   },
 });
 </script>
-<style scoped>
+<style>
 #container {
   width: 100%;
   max-width: 1000px;
@@ -570,4 +595,12 @@ export default defineComponent({
   overflow-y: hidden;
   width: 870px;
 }
+
+.col-form-label {
+  text-align: right;
+}
+
+.turn_time_pad .col-form-label{
+  text-align: left;
+}
 </style>

hwe/ts/components/NumberInputWithInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="row form-group number-input-with-info">
-    <label class="col-6 col-form-label">{{ title }}</label>
+    <label v-if="!right" class="col-6 col-form-label">{{ title }}</label>
     <div class="col-6">
       <input
         ref="input"
@@ -23,6 +23,7 @@
         :style="{ display: !editmode ? undefined : 'none' }"
       />
     </div>
+    <label v-if="right" class="col-6 col-form-label">{{ title }}</label>
   </div>
   <div style="text-align: right">
     <small class="form-text text-muted"><slot></slot></small>
@@ -65,6 +66,11 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
+    right: {
+      type: Boolean,
+      required: false,
+      default: false,
+    }
   },
   emits: ["update:modelValue"],
   data() {