vue: NPCControl

- 외향  모사(딱히 의미는 없으나..)
- 약간 반응형
This commit is contained in:
2021-09-08 20:39:04 +09:00
parent 6323b174c6
commit 394284d8de
4 changed files with 285 additions and 264 deletions
+71 -65
View File
@@ -4,19 +4,18 @@
<div <div
id="container" id="container"
class="tb_layout bg0" class="tb_layout bg0"
:style="{ width: '1000px', margin: 'auto', border: 'solid 1px #888888' }" :style="{ maxWidth: '1000px', margin: 'auto', border: 'solid 1px #888888' }"
> >
<div class="bg1 section_bar">국가 정책</div> <div class="bg1 section_bar">국가 정책</div>
<div class="px-3" style="text-align:right;"> <div class="px-3" style="text-align: right">
<small class="form-text text-muted"> <small class="form-text text-muted">
최근 설정: 최근 설정:
{{ lastSetters.policy.setter ?? "-없음-" }} {{ lastSetters.policy.setter ?? "-없음-" }}
({{ lastSetters.policy.date ?? "설정 기록 없음" }}) ({{ lastSetters.policy.date ?? "설정 기록 없음" }})
</small> </small>
</div> </div>
<div class="form_list"> <div class="form_list row row-cols-md-2 row-cols-1">
<div class="form-group row"> <div class="col">
<div class="col-sm-6">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.reqNationGold" v-model="nationPolicy.reqNationGold"
:step="100" :step="100"
@@ -25,7 +24,7 @@
제외)</NumberInputWithInfo 제외)</NumberInputWithInfo
> >
</div> </div>
<div class="col-sm-6"> <div class="col">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.reqNationRice" v-model="nationPolicy.reqNationRice"
:step="100" :step="100"
@@ -34,9 +33,7 @@
제외)</NumberInputWithInfo 제외)</NumberInputWithInfo
> >
</div> </div>
</div> <div class="col">
<div class="form-group row">
<div class="col-sm-6">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.reqHumanWarUrgentGold" v-model="nationPolicy.reqHumanWarUrgentGold"
:step="100" :step="100"
@@ -49,22 +46,20 @@
}}입니다.</NumberInputWithInfo }}입니다.</NumberInputWithInfo
> >
</div> </div>
<div class="col-sm-6"> <div class="col">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.reqHumanWarUrgentRice" v-model="nationPolicy.reqHumanWarUrgentRice"
:step="100" :step="100"
title="유저전투장 긴급포상 금" title="유저전투장 긴급포상 금"
>유저장긴급포상시 이보다 쌀이 적은 장수에게 포상합니다.<br />0이면 >유저장긴급포상시 이보다 쌀이 적은 장수에게 포상합니다.<br />0이면
기본 병종으로 {{ (defaultStatMax * 100).toLocaleString() }} * 6 기본 병종으로 {{ (defaultStatMax * 100).toLocaleString() }} * 6 사살
사살 가능한 쌀을 기준으로 하며, 수치는 현재 가능한 쌀을 기준으로 하며, 수치는 현재
{{ {{
zeroPolicy.reqHumanWarUrgentRice.toLocaleString() zeroPolicy.reqHumanWarUrgentRice.toLocaleString()
}}입니다.</NumberInputWithInfo }}입니다.</NumberInputWithInfo
> >
</div> </div>
</div> <div class="col">
<div class="form-group row">
<div class="col-sm-6">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.reqHumanWarRecommandGold" v-model="nationPolicy.reqHumanWarRecommandGold"
:step="100" :step="100"
@@ -76,7 +71,7 @@
}}입니다.</NumberInputWithInfo }}입니다.</NumberInputWithInfo
> >
</div> </div>
<div class="col-sm-6"> <div class="col">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.reqHumanWarRecommandRice" v-model="nationPolicy.reqHumanWarRecommandRice"
:step="100" :step="100"
@@ -88,9 +83,7 @@
}}입니다.</NumberInputWithInfo }}입니다.</NumberInputWithInfo
> >
</div> </div>
</div> <div class="col">
<div class="form-group row">
<div class="col-sm-6">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.reqHumanDevelGold" v-model="nationPolicy.reqHumanDevelGold"
:step="100" :step="100"
@@ -99,7 +92,7 @@
포상합니다.</NumberInputWithInfo 포상합니다.</NumberInputWithInfo
> >
</div> </div>
<div class="col-sm-6"> <div class="col">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.reqHumanDevelRice" v-model="nationPolicy.reqHumanDevelRice"
:step="100" :step="100"
@@ -108,9 +101,7 @@
포상합니다.</NumberInputWithInfo 포상합니다.</NumberInputWithInfo
> >
</div> </div>
</div> <div class="col">
<div class="form-group row">
<div class="col-sm-6">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.reqNPCWarGold" v-model="nationPolicy.reqNPCWarGold"
:step="100" :step="100"
@@ -123,7 +114,7 @@
}}입니다.</NumberInputWithInfo }}입니다.</NumberInputWithInfo
> >
</div> </div>
<div class="col-sm-6"> <div class="col">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.reqNPCWarRice" v-model="nationPolicy.reqNPCWarRice"
:step="100" :step="100"
@@ -137,9 +128,7 @@
}}입니다.</NumberInputWithInfo }}입니다.</NumberInputWithInfo
> >
</div> </div>
</div> <div class="col">
<div class="form-group row">
<div class="col-sm-6">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.reqNPCDevelGold" v-model="nationPolicy.reqNPCDevelGold"
:step="100" :step="100"
@@ -149,7 +138,7 @@
{{ zeroPolicy.reqNPCDevelGold }}입니다.</NumberInputWithInfo {{ zeroPolicy.reqNPCDevelGold }}입니다.</NumberInputWithInfo
> >
</div> </div>
<div class="col-sm-6"> <div class="col">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.reqNPCDevelRice" v-model="nationPolicy.reqNPCDevelRice"
:step="100" :step="100"
@@ -158,18 +147,15 @@
헌납합니다.</NumberInputWithInfo 헌납합니다.</NumberInputWithInfo
> >
</div> </div>
</div> <div class="col">
<div class="form-group row">
<div class="col-sm-6">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.minimumResourceActionAmount" v-model="nationPolicy.minimumResourceActionAmount"
:step="100" :step="100"
title="포상/몰수/헌납/삼/팜 최소 단위" title="포상/몰수/헌납/삼/팜 최소 단위"
>연산결과가 단위보다 적다면 수행하지 >연산결과가 단위보다 적다면 수행하지 않습니다.</NumberInputWithInfo
않습니다.</NumberInputWithInfo
> >
</div> </div>
<div class="col-sm-6"> <div class="col">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.minWarCrew" v-model="nationPolicy.minWarCrew"
:step="50" :step="50"
@@ -177,9 +163,7 @@
>이보다 적을 때에는 징병을 시도합니다.</NumberInputWithInfo >이보다 적을 때에는 징병을 시도합니다.</NumberInputWithInfo
> >
</div> </div>
</div> <div class="col">
<div class="form-group row">
<div class="col-sm-6">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.minNPCRecruitCityPopulation" v-model="nationPolicy.minNPCRecruitCityPopulation"
:step="100" :step="100"
@@ -189,7 +173,7 @@
정착장려를 합니다.</NumberInputWithInfo 정착장려를 합니다.</NumberInputWithInfo
> >
</div> </div>
<div class="col-sm-6"> <div class="col">
<NumberInputWithInfo <NumberInputWithInfo
:modelValue="nationPolicy.safeRecruitCityPopulationRatio * 100" :modelValue="nationPolicy.safeRecruitCityPopulationRatio * 100"
@update:modelValue=" @update:modelValue="
@@ -205,9 +189,7 @@
제자리에서 정착장려를 합니다.</NumberInputWithInfo 제자리에서 정착장려를 합니다.</NumberInputWithInfo
> >
</div> </div>
</div> <div class="col">
<div class="form-group row">
<div class="col-sm-6">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.minNPCWarLeadership" v-model="nationPolicy.minNPCWarLeadership"
:step="5" :step="5"
@@ -216,7 +198,7 @@
분류됩니다.</NumberInputWithInfo 분류됩니다.</NumberInputWithInfo
> >
</div> </div>
<div class="col-sm-6"> <div class="col">
<NumberInputWithInfo <NumberInputWithInfo
v-model="nationPolicy.properWarTrainAtmos" v-model="nationPolicy.properWarTrainAtmos"
:step="5" :step="5"
@@ -227,9 +209,9 @@
출병합니다.</NumberInputWithInfo 출병합니다.</NumberInputWithInfo
> >
</div> </div>
</div>
<!--allowNpcAttackCity는 현재 게임 비활성--> <!--allowNpcAttackCity는 현재 게임 비활성-->
</div>
<div style="padding: 0 8pt">
<div class="alert alert-secondary"> <div class="alert alert-secondary">
전투 부대는 작업중입니다(json양식: 전투 부대는 작업중입니다(json양식:
{부대번호:[시작도시번호(아국),도착도시번호(적군)],...})<br /> {부대번호:[시작도시번호(아국),도착도시번호(적군)],...})<br />
@@ -280,8 +262,8 @@
설정 설정
</button> </button>
</div> </div>
<div class="row"> <div class="row row-cols-md-2 row-cols-1 g-0">
<div class="col-sm-6 half_section_left"> <div class="col half_section_left">
<div class="bg1 section_bar">NPC 사령턴 우선순위</div> <div class="bg1 section_bar">NPC 사령턴 우선순위</div>
<div class="float-right px-3"> <div class="float-right px-3">
<small class="form-text text-muted"> <small class="form-text text-muted">
@@ -296,16 +278,21 @@
사령턴을 시도합니다.</small 사령턴을 시도합니다.</small
> >
</div> </div>
<div class="form_list"> <div>
<div class="row"> <div class="row g-0">
<div class="col-sm-6"> <div class="col">
<div class="bg2 sub_bar">비활성</div> <div class="bg2 sub_bar">비활성</div>
<draggable <draggable
:list="chiefActionUnused" :list="chiefActionUnused"
group="chiefAction" group="chiefAction"
class="list-group col" class="list-group col priority-list"
itemKey="id" itemKey="id"
> >
<template #header>
<div class="list-group-item list-group-item-dark">
&lt;비활성화 항목들&gt;
</div>
</template>
<template #item="{ element }"> <template #item="{ element }">
<div class="list-group-item"> <div class="list-group-item">
<i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
@@ -320,12 +307,12 @@
</template> </template>
</draggable> </draggable>
</div> </div>
<div class="col-sm-6"> <div class="col">
<div class="bg2 sub_bar">활성</div> <div class="bg2 sub_bar">활성</div>
<draggable <draggable
:list="chiefActionPriority" :list="chiefActionPriority"
group="chiefAction" group="chiefAction"
class="list-group col" class="list-group col priority-list"
itemKey="id" itemKey="id"
> >
<template #item="{ element }"> <template #item="{ element }">
@@ -369,7 +356,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-6 half_section_right"> <div class="col half_section_right">
<div class="bg1 section_bar">NPC 일반턴 우선순위</div> <div class="bg1 section_bar">NPC 일반턴 우선순위</div>
<div class="float-right px-3"> <div class="float-right px-3">
<small class="form-text text-muted"> <small class="form-text text-muted">
@@ -384,16 +371,21 @@
물자조달이나 인재탐색을 합니다.</small 물자조달이나 인재탐색을 합니다.</small
> >
</div> </div>
<div class="form_list"> <div>
<div class="row"> <div class="row g-0">
<div class="col-sm-6"> <div class="col">
<div class="bg2 sub_bar">비활성</div> <div class="bg2 sub_bar">비활성</div>
<draggable <draggable
:list="generalActionUnused" :list="generalActionUnused"
group="generalAction" group="generalAction"
class="list-group col" class="list-group col priority-list"
itemKey="id" itemKey="id"
> >
<template #header>
<div class="list-group-item list-group-item-dark">
&lt;비활성화 항목들&gt;
</div>
</template>
<template #item="{ element }"> <template #item="{ element }">
<div class="list-group-item"> <div class="list-group-item">
<i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
@@ -407,12 +399,12 @@
</template> </template>
</draggable> </draggable>
</div> </div>
<div class="col-sm-6"> <div class="col">
<div class="bg2 sub_bar">활성</div> <div class="bg2 sub_bar">활성</div>
<draggable <draggable
:list="generalActionPriority" :list="generalActionPriority"
group="generalAction" group="generalAction"
class="list-group col" class="list-group col priority-list"
itemKey="id" itemKey="id"
> >
<template #item="{ element }"> <template #item="{ element }">
@@ -824,11 +816,30 @@ export default defineComponent({
text-align: left; text-align: left;
} }
.form_list {
margin: 8px;
}
.sub_bar {
text-align: center;
border: 0.5px solid #aaa;
margin-left: 5px;
margin-right: 5px;
}
.priority-list {
margin: 0 10px;
}
.control_bar { .control_bar {
margin-top: 8pt; padding: 0 8pt 8pt 8pt;
text-align: right; text-align: right;
} }
.control_bar .btn {
margin-top: 8pt;
}
.reset_btn { .reset_btn {
width: 15ch; width: 15ch;
} }
@@ -843,14 +854,9 @@ export default defineComponent({
} }
.half_section_left { .half_section_left {
padding-right: 0;
border-right: 0.5px solid #aaa; border-right: 0.5px solid #aaa;
} }
.half_section_right {
padding-left: 0;
}
.section_bar { .section_bar {
text-align: center; text-align: center;
border: 0.5px solid #aaa; border: 0.5px solid #aaa;
+2 -2
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="row form-group number-input-with-info"> <div class="row form-group number-input-with-info">
<label class="col-sm-6 col-form-label">{{ title }}</label> <label class="col-6 col-form-label">{{ title }}</label>
<div class="col-sm-6"> <div class="col-6">
<input <input
ref="input" ref="input"
type="number" type="number"
+35 -20
View File
@@ -1,15 +1,10 @@
<template> <template>
<table style="width: 1000px; margin: auto" class="tb_layout bg0"> <div class="tb_layout bg0 back_bar">
<tr> <button type="button" class="btn btn-primary back_btn" @click="back">
<td style="text-align: left"> 돌아가기
{{title}}<br /><button </button>
type="button" <h2 class="title">{{ title }}</h2>
class="btn btn-primary" </div>
@click="back"
>돌아가기</button><br />
</td>
</tr>
</table>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -20,17 +15,15 @@ export default defineComponent({
name: "TopBackBar", name: "TopBackBar",
methods: { methods: {
back() { back() {
if(this.type === 'normal'){ if (this.type === "normal") {
location.href = './'; location.href = "./";
} } else if (this.type == "chief") {
else if(this.type == 'chief'){ location.href = "b_chiefcenter.php";
location.href = 'b_chiefcenter.php'; } else {
}
else{
//TODO: window.close하려면 부모창이 있어야함! //TODO: window.close하려면 부모창이 있어야함!
window.close(); window.close();
} }
} },
}, },
props: { props: {
title: { title: {
@@ -47,5 +40,27 @@ export default defineComponent({
</script> </script>
<style> <style scoped>
.back_bar {
max-width: 1000px;
width: 100%;
margin: auto;
position: relative;
border-left: 1px solid #888;
border-right: 1px solid #888;
height: 24pt;
}
.back_btn {
position: absolute;
left: 0;
height: 24pt;
}
.title {
text-align: center;
line-height: 24pt;
font-size: 18pt;
margin: 0;
}
</style> </style>
+1 -1
View File
@@ -89,7 +89,7 @@ $lastSetters = [
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=1024" /> <meta name="viewport" content="width=device-with" />
<title><?= UniqueConst::$serverName ?>: 임시 NPC 정책</title> <title><?= UniqueConst::$serverName ?>: 임시 NPC 정책</title>
<?= WebUtil::printStaticValues([ <?= WebUtil::printStaticValues([
'nationID' => $nationID, 'nationID' => $nationID,