feat: processing 체계를 일괄 변경

This commit is contained in:
2021-12-23 01:34:45 +09:00
parent 41d5df60f4
commit 2969ed2edc
16 changed files with 122 additions and 66 deletions
+6 -5
View File
@@ -16,20 +16,21 @@
</li>
</ul>
<div class="row">
<div class="col-12 col-md-4">
국명 : <b-form-input v-model="destNationName" />
<div class="col-4 col-md-2">
국명 : <b-form-input maxlength="18" v-model="destNationName" />
</div>
<div class="col-6 col-md-2">
<div class="col-3 col-md-2">
색상 : <ColorSelect :colors="colors" v-model="selectedColorID" />
</div>
<div class="col-6 col-md-2">
<div class="col-3 col-md-2">
<label>성향 :</label>
<b-form-select
:options="nationTypesOption"
v-model="selectedNationType"
/>
</div>
<div class="col-12 col-md-2 d-grid">
<div class="col-2 col-md-2 d-grid">
<b-button @click="submit">{{ commandName }}</b-button>
</div>
</div>
@@ -12,7 +12,7 @@
<b-button :pressed="!buyRice" @click="buyRice=false"></b-button>
</b-button-group>
</div>
<div class="col-6 col-md-4">
<div class="col-7 col-md-4">
금액 :
<SelectAmount
:amountGuide="amountGuide"
@@ -21,7 +21,7 @@
:minAmount="minAmount"
/>
</div>
<div class="col-4 col-md-2 d-grid">
<div class="col-3 col-md-2 d-grid">
<b-button variant="primary" @click="submit">{{ commandName }}</b-button>
</div>
</div>
+2 -2
View File
@@ -11,7 +11,7 @@
장수를 선택하세요.<br />
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="col-9 col-md-4">
장수 :
<SelectGeneral
:generals="generalList"
@@ -19,7 +19,7 @@
v-model="selectedGeneralID"
/>
</div>
<div class="col-4 col-md-2 d-grid">
<div class="col-3 col-md-2 d-grid">
<b-button variant="primary" @click="submit">{{ commandName }}</b-button>
</div>
</div>
@@ -8,7 +8,7 @@
임관할 국가를 목록에서 선택하세요.<br />
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="col-8 col-md-4">
장수 :
<SelectGeneral
:generals="generalList"
@@ -25,11 +25,20 @@
<div class="nation-header nation-row bg1 center">
<div>국가명</div>
<div>임관권유문</div>
<div class="zoom-toggle d-grid">
<b-button
:pressed="toggleZoom"
:variant="toggleZoom ? 'info' : 'secondary'"
v-model="toggleZoom"
@click="toggleZoom = !toggleZoom"
>{{ toggleZoom ? "작게 보기" : "크게 보기" }}</b-button
>
</div>
</div>
<div
v-for="[, nation] in nationList"
:key="nation.id"
class="nation-row s-border-b"
:class="['nation-row', 's-border-b', toggleZoom ? 'on-zoom' : 'on-fit']"
>
<div
:style="{
@@ -87,6 +96,7 @@ export default defineComponent({
procRes.generals
);
const toggleZoom = ref(true);
const selectedGeneralID = ref(generalList[0].no);
function textHelpGeneral(gen: procGeneralItem): string {
@@ -116,6 +126,7 @@ export default defineComponent({
selectedGeneralID,
generalList,
commandName,
toggleZoom,
isBrightColor,
textHelpGeneral,
submit,
@@ -132,24 +143,57 @@ export default defineComponent({
display: grid;
grid-template-columns: 130px 870px;
}
.zoom-toggle {
display: none;
}
.zoom-toggle > * {
display: none;
}
}
@include media-500px {
.nation-list .nation-row.nation-header {
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: 1fr 1fr;
.zoom-toggle {
grid-column: 2/3;
grid-row: 1/3;
}
}
.nation-list .nation-row {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr minmax(1fr, calc(200px * 500 / 870));
}
.nation-scout-plate {
max-height: calc(200px * 500 / 870);
overflow: hidden;
.on-fit {
.nation-scout-plate {
max-height: calc(200px * 500 / 870);
overflow: hidden;
}
.nation-scout-msg {
width: 870px;
transform-origin: 0px 0px;
transform: scale(calc(500 / 870));
}
}
.nation-scout-msg {
width: 870px;
transform-origin: 0px 0px;
transform: scale(calc(500 / 870));
.on-zoom {
.nation-scout-plate {
max-height: 200px;
overflow-y: hidden;
overflow-x: auto;
}
.nation-scout-msg {
max-width: 870px;
}
}
}
</style>
+29 -27
View File
@@ -61,11 +61,12 @@
></div>
<div
:style="{
backgroundColor: (destCrewType.notAvailable
? 'red'
: destCrewType.reqTech == 0
? 'green'
: 'limegreen')+' !important',
backgroundColor:
(destCrewType.notAvailable
? 'red'
: destCrewType.reqTech == 0
? 'green'
: 'limegreen') + ' !important',
height: '100%',
}"
class="d-grid"
@@ -74,7 +75,7 @@
{{ destCrewType.name }}
</div>
</div>
<div>{{ destCrewType.baseCost.toFixed(1) }}</div>
<div></div>
<div class="crewTypePanel">
<b-button-group
><b-button class="py-1" variant="dark" @click="beHalf"
@@ -107,7 +108,7 @@
><div style="margin-left: auto">
{{
Math.ceil(
amount * destCrewType.baseCost
amount * destCrewType.baseCost * goldCoeff
).toLocaleString()
}}
</div></span
@@ -116,6 +117,7 @@
</div>
</div>
</div>
<div></div>
<b-button variant="primary" @click="submit">{{
commandName
}}</b-button>
@@ -126,9 +128,9 @@
<div>공격</div>
<div>방어</div>
<div>기동</div>
<div>회피</div>
<div>가격</div>
<div>군량</div>
<div>회피</div>
<div class="crewTypePanel">병사 </div>
<div class="crewTypeBtn">행동</div>
<div class="crewTypeInfo">특징</div>
@@ -140,10 +142,17 @@
:key="armCrewType.armType"
>
<div class="s-border-b row gx-0">
<div class="col-7 col-md-10 align-self-center px-3" style="font-size:1.3em;">{{ armCrewType.armName }} 계열</div>
<div
class="col-7 col-md-10 align-self-center px-3"
style="font-size: 1.3em"
>
{{ armCrewType.armName }} 계열
</div>
<div class="col-5 col-md-2 d-grid">
<b-button
:variant="showNotAvailable.get(armCrewType.armType) ? 'warning' : 'dark'"
:variant="
showNotAvailable.get(armCrewType.armType) ? 'warning' : 'dark'
"
:pressed="showNotAvailable.get(armCrewType.armType)"
class="btn-sm"
@click="toggleShowNotAvailable(armCrewType.armType)"
@@ -166,6 +175,7 @@
:commandName="commandName"
:currentCrewType="currentCrewType"
:crew="crew"
:goldCoeff="goldCoeff"
@submitOutput="trySubmit"
@click="
destCrewType = crewTypeMap.get(crewType.id);
@@ -262,26 +272,18 @@ export default defineComponent({
void submit(e);
}
function toggleShowNotAvailable(armType: number){
showNotAvailable.value.set(armType, !(showNotAvailable.value.get(armType)??0));
function toggleShowNotAvailable(armType: number) {
showNotAvailable.value.set(
armType,
!(showNotAvailable.value.get(armType) ?? 0)
);
}
return {
destCrewType,
amount,
showNotAvailable,
relYear: procRes.relYear,
year: procRes.year,
tech: procRes.tech,
techLevel: procRes.techLevel,
startYear: procRes.startYear,
goldCoeff: procRes.goldCoeff,
leadership: procRes.leadership,
fullLeadership: procRes.fullLeadership,
armCrewTypes: procRes.armCrewTypes,
currentCrewType: procRes.currentCrewType,
crew: procRes.crew,
gold: procRes.gold,
...procRes,
crewTypeMap,
commandName,
beHalf,
@@ -320,8 +322,8 @@ export default defineComponent({
display: none;
}
.only500pxMode{
display: none;
.only500pxMode {
display: none;
}
}
@@ -367,7 +369,7 @@ export default defineComponent({
.miniCrewPanel {
display: grid;
grid-template-columns: 64px 1.5fr 1fr 270px 2fr;
grid-template-columns: 64px 1.5fr 0.5fr 270px 0.5fr 2fr;
grid-template-rows: 64px;
align-items: center;
}
+2 -2
View File
@@ -12,7 +12,7 @@
<b-button :pressed="!isGold" @click="isGold = false"></b-button>
</b-button-group>
</div>
<div class="col-6 col-md-4">
<div class="col-7 col-md-4">
금액 :
<SelectAmount
:amountGuide="amountGuide"
@@ -21,7 +21,7 @@
:minAmount="minAmount"
/>
</div>
<div class="col-4 col-md-2 d-grid">
<div class="col-3 col-md-2 d-grid">
<b-button variant="primary" @click="submit">{{ commandName }}</b-button>
</div>
</div>