feat(WIP): processing에서 vue 객체 통합, lazy loading

This commit is contained in:
2021-12-19 17:22:54 +09:00
parent c8146814df
commit 72f7811f3d
11 changed files with 61 additions and 318 deletions
+2
View File
@@ -2,6 +2,7 @@
namespace sammo\Command\General;
use phpDocumentor\Reflection\Types\Object_;
use \sammo\DB;
use \sammo\Util;
use \sammo\JosaUtil;
@@ -246,6 +247,7 @@ class che_출병 extends Command\GeneralCommand
'mapTheme' => \sammo\getMapTheme(),
'procRes' => [
'cities' => \sammo\JSOptionsForCities(),
'distanceList' => new \StdClass(),
],
];
}
-50
View File
@@ -232,54 +232,4 @@ class che_몰수 extends Command\NationCommand
]
];
}
public function getForm(): string
{
//TODO: 암행부처럼 보여야...
$db = DB::db();
$destRawGenerals = $db->query('SELECT no,name,officer_level,npc,gold,rice FROM general WHERE nation = %i ORDER BY npc,binary(name)', $this->generalObj->getNationID());
$destGeneralList = [];
foreach ($destRawGenerals as $destGeneral) {
$nameColor = \sammo\getNameColor($destGeneral['npc']);
if ($nameColor) {
$nameColor = " style='color:{$nameColor}'";
}
$name = $destGeneral['name'];
if ($destGeneral['officer_level'] >= 5) {
$name = "*{$name}*";
}
$destGeneralList[] = [
'no' => $destGeneral['no'],
'color' => $nameColor,
'name' => $name,
'gold' => $destGeneral['gold'],
'rice' => $destGeneral['rice']
];
}
ob_start();
?>
장수의 자금이나 군량을 몰수합니다.<br>
몰수한것은 국가재산으로 귀속됩니다.<br>
<select class='formInput' name="destGeneralID" id="destGeneralID" size='1' style='color:white;background-color:black;'>
<?php foreach ($destGeneralList as $destGeneral) : ?>
<option value='<?= $destGeneral['no'] ?>' <?= $destGeneral['color'] ?>><?= $destGeneral['name'] ?>(금:<?= $destGeneral['gold'] ?>, 쌀:<?= $destGeneral['rice'] ?>)</option>
<?php endforeach; ?>
</select>
<select class='formInput' name="isGold" id="isGold" size='1' style='color:white;background-color:black;'>
<option value="true">금</option>
<option value="false">쌀</option>
</select>
</select>
<select class='formInput' name="amount" id="amount" size='1' style='color:white;background-color:black;'>
<?php foreach (GameConst::$resourceActionAmountGuide as $amount) : ?>
<option value='<?= $amount ?>'><?= $amount ?></option>
<?php endforeach; ?>
</select> <input type=button id="commonSubmit" value="<?= $this->getName() ?>"><br>
<br>
<?php
return ob_get_clean();
}
}
+15 -46
View File
@@ -177,53 +177,22 @@ class che_포상 extends Command\NationCommand
return true;
}
public function getForm(): string
public function exportJSVars(): array
{
//TODO: 암행부처럼 보여야...
$db = DB::db();
$destRawGenerals = $db->query('SELECT no,name,officer_level,npc,gold,rice FROM general WHERE nation = %i ORDER BY npc,binary(name)', $this->generalObj->getNationID());
$destGeneralList = [];
foreach ($destRawGenerals as $destGeneral) {
$nameColor = \sammo\getNameColor($destGeneral['npc']);
if ($nameColor) {
$nameColor = " style='color:{$nameColor}'";
}
$name = $destGeneral['name'];
if ($destGeneral['officer_level'] >= 5) {
$name = "*{$name}*";
}
$destGeneralList[] = [
'no' => $destGeneral['no'],
'color' => $nameColor,
'name' => $name,
'gold' => $destGeneral['gold'],
'rice' => $destGeneral['rice']
];
}
ob_start();
?>
국고로 장수에게 자금이나 군량을 지급합니다.<br>
<select class='formInput' name="destGeneralID" id="destGeneralID" size='1' style='color:white;background-color:black;'>
<?php foreach ($destGeneralList as $destGeneral) : ?>
<option value='<?= $destGeneral['no'] ?>' <?= $destGeneral['color'] ?>><?= $destGeneral['name'] ?>(금:<?= $destGeneral['gold'] ?>, 쌀:<?= $destGeneral['rice'] ?>)</option>
<?php endforeach; ?>
</select>
<select class='formInput' name="isGold" id="isGold" size='1' style='color:white;background-color:black;'>
<option value="true">금</option>
<option value="false">쌀</option>
</select>
</select>
<select class='formInput' name="amount" id="amount" size='1' style='color:white;background-color:black;'>
<?php foreach (GameConst::$resourceActionAmountGuide as $amount) : ?>
<option value='<?= $amount ?>'><?= $amount ?></option>
<?php endforeach; ?>
</select> <input type=button id="commonSubmit" value="<?= $this->getName() ?>"><br>
<br>
<?php
return ob_get_clean();
$nationID = $this->getNationID();
$troops = Util::convertArrayToDict($db->query('SELECT * FROM troop WHERE nation=%i', $nationID), 'troop_leader');
$destRawGenerals = $db->queryAllLists('SELECT no,name,officer_level,npc,gold,rice,leadership,strength,intel,city,crew,train,atmos,troop FROM general WHERE nation = %i ORDER BY npc,binary(name)', $nationID);
return [
'procRes' => [
'troops' => $troops,
'generals' => $destRawGenerals,
'generalsKey' => ['no', 'name', 'officerLevel', 'npc', 'gold', 'rice', 'leadership', 'strength', 'intel', 'cityID', 'crew', 'train', 'atmos', 'troopID'],
'cities' => \sammo\JSOptionsForCities(),
'minAmount' => 100,
'maxAmount' => GameConst::$maxResourceActionAmount,
'amountGuide' => GameConst::$resourceActionAmountGuide,
]
];
}
}
-107
View File
@@ -1,107 +0,0 @@
<template>
<TopBackBar :title="commandName" />
<div class="bg0">
<MapLegacyTemplate
:isDetailMap="false"
:clickableAll="true"
:neutralView="true"
:useCachedMap="true"
:mapTheme="mapTheme"
v-model="selectedCityObj"
/>
<div>
선택된 도시로 강행합니다.<br />
최대 3칸내 도시로만 강행이 가능합니다.<br />
목록을 선택하거나 도시를 클릭하세요.<br />
</div>
<div class="row">
<div class="col">
<CitySelect :cities="citiesMap" v-model="selectedCityID" />
</div>
<div class="col">
<b-button @click="submit">{{ commandName }}</b-button>
</div>
</div>
<CityBasedOnDistance
:citiesMap="citiesMap"
:distanceList="distanceList"
@selected="selected"
/>
</div>
<BottomBar :title="commandName" />
</template>
<script lang="ts">
import MapLegacyTemplate, {
MapCityParsed,
} from "@/components/MapLegacyTemplate.vue";
import CitySelect from "@/processing/CitySelect.vue";
import CityBasedOnDistance from "@/processing/CitiesBasedOnDistance.vue";
import { defineComponent, ref } from "vue";
import { unwrap } from "@/util/unwrap";
import { Args } from "@/processing/args";
import TopBackBar from "@/components/TopBackBar.vue";
import BottomBar from "@/components/BottomBar.vue";
declare const mapTheme: string;
declare const commandName: string;
declare const currentCity: number;
declare const procRes: {
distanceList: Record<number, number[]>,
cities: [number, string][],
}
export default defineComponent({
components: {
MapLegacyTemplate,
CitySelect,
CityBasedOnDistance,
TopBackBar,
BottomBar,
},
watch: {
selectedCityObj(city: MapCityParsed) {
this.selectedCityID = city.id;
},
},
setup() {
const citiesMap = new Map<
number,
{
name: string;
info?: string;
}
>();
for (const [id, name] of procRes.cities) {
citiesMap.set(id, { name });
}
const selectedCityID = ref(currentCity);
function selected(cityID: number) {
selectedCityID.value = cityID;
}
async function submit(e: Event) {
const event = new CustomEvent<Args>("customSubmit", {
detail: {
destCityID: selectedCityID.value,
},
});
unwrap(e.target).dispatchEvent(event);
}
return {
mapTheme: ref(mapTheme),
citiesMap: ref(citiesMap),
selectedCityID,
selectedCityObj: ref(undefined as MapCityParsed | undefined),
distanceList: procRes.distanceList,
commandName,
selected,
submit,
};
},
});
</script>
+14 -4
View File
@@ -10,11 +10,21 @@
v-model="selectedCityObj"
/>
<div>
<div v-if="commandName == '강행'">
선택된 도시로 강행합니다.<br />
최대 3칸내 도시로만 강행이 가능합니다.<br />
목록을 선택하거나 도시를 클릭하세요.<br />
</div>
<div v-else-if="commandName == '이동'">
선택된 도시로 이동합니다.<br />
인접 도시로만 이동이 가능합니다.<br />
목록을 선택하거나 도시를 클릭하세요.<br />
</div>
<div v-else-if="commandName == '출병'">
선택된 도시를 향해 침공을 합니다.<br />
침공 경로에 적군의 도시가 있다면 전투를 벌입니다.<br />
목록을 선택하거나 도시를 클릭하세요.<br />
</div>
<div class="row">
<div class="col">
<CitySelect :cities="citiesMap" v-model="selectedCityID" />
@@ -47,9 +57,9 @@ declare const mapTheme: string;
declare const currentCity: number;
declare const commandName: string;
declare const procRes: {
distanceList: Record<number, number[]>,
cities: [number, string][],
}
distanceList: Record<number, number[]>;
cities: [number, string][];
};
export default defineComponent({
components: {
MapLegacyTemplate,
-96
View File
@@ -1,96 +0,0 @@
<template>
<TopBackBar :title="commandName" />
<div class="bg0">
<MapLegacyTemplate
:isDetailMap="false"
:clickableAll="true"
:neutralView="true"
:useCachedMap="true"
:mapTheme="mapTheme"
v-model="selectedCityObj"
/>
<div>
선택된 도시를 향해 침공을 합니다.<br />
침공 경로에 적군의 도시가 있다면 전투를 벌입니다.<br />
목록을 선택하거나 도시를 클릭하세요.<br />
</div>
<div class="row">
<div class="col">
<CitySelect :cities="citiesMap" v-model="selectedCityID" />
</div>
<div class="col">
<b-button @click="submit">{{ commandName }}</b-button>
</div>
</div>
</div>
<BottomBar :title="commandName" />
</template>
<script lang="ts">
import MapLegacyTemplate, {
MapCityParsed,
} from "@/components/MapLegacyTemplate.vue";
import CitySelect from "@/processing/CitySelect.vue";
import { defineComponent, ref } from "vue";
import { unwrap } from "@/util/unwrap";
import { Args } from "@/processing/args";
import TopBackBar from "@/components/TopBackBar.vue";
import BottomBar from "@/components/BottomBar.vue";
declare const mapTheme: string;
declare const currentCity: number;
declare const commandName: string;
declare const procRes: {
cities: [number, string][],
}
export default defineComponent({
components: {
MapLegacyTemplate,
CitySelect,
TopBackBar,
BottomBar,
},
watch: {
selectedCityObj(city: MapCityParsed) {
this.selectedCityID = city.id;
},
},
setup() {
const citiesMap = new Map<
number,
{
name: string;
info?: string;
}
>();
for (const [id, name] of procRes.cities) {
citiesMap.set(id, { name });
}
const selectedCityID = ref(currentCity);
function selected(cityID: number) {
selectedCityID.value = cityID;
}
async function submit(e: Event) {
const event = new CustomEvent<Args>("customSubmit", {
detail: {
destCityID: selectedCityID.value,
},
});
unwrap(e.target).dispatchEvent(event);
}
return {
mapTheme: ref(mapTheme),
citiesMap: ref(citiesMap),
selectedCityID,
selectedCityObj: ref(undefined as MapCityParsed | undefined),
commandName,
selected,
submit,
};
},
});
</script>
+7 -3
View File
@@ -1,3 +1,7 @@
export { default as che_강행 } from "./che_강행.vue";
export { default as che_이동 } from "./che_이동.vue";
export { default as che_출병 } from "./che_출병.vue";
import { default as CityProcess} from "./che_이동.vue";
export const commandMap: Record<string, ()=>typeof CityProcess> = {
che_강행: ()=>CityProcess,
che_이동: ()=>CityProcess,
che_출병: ()=>CityProcess,
}
+4 -2
View File
@@ -1,10 +1,13 @@
<template>
<TopBackBar :title="commandName" type="chief" />
<div class="bg0">
<div>
<div v-if="commandName=='몰수'">
장수의 자금이나 군량을 몰수합니다.<br />
몰수한것은 국가재산으로 귀속됩니다.<br />
</div>
<div v-else-if="commandName=='포상'">
국고로 장수에게 자금이나 군량을 지급합니다.<br />
</div>
<div class="row">
<div class="col-12 col-md-5">
<GeneralSelect
@@ -42,7 +45,6 @@ import {
procGeneralItem,
procGeneralKeyList,
procGeneralRawItemList,
procTroopList,
} from "../processingRes";
import { getNpcColor } from "@/common_legacy";
declare const commandName: string;
+1 -1
View File
@@ -54,7 +54,7 @@ import {
procGeneralRawItemList,
procTroopList,
} from "../processingRes";
import { convertDictById, getNpcColor } from "@/common_legacy";
import { getNpcColor } from "@/common_legacy";
declare const mapTheme: string;
declare const currentCity: number;
declare const commandName: string;
+14 -5
View File
@@ -1,5 +1,14 @@
export { default as che_국기변경 } from "./che_국기변경.vue";
export { default as che_국호변경 } from "./che_국호변경.vue";
export { default as che_급습 } from "./che_급습.vue";
export { default as che_몰수 } from "./che_몰수.vue";
export { default as che_발령 } from "./che_발령.vue";
import { default as che_국기변경 } from "./che_국기변경.vue";
import { default as che_국호변경 } from "./che_국호변경.vue";
import { default as NationProcess } from "./che_급습.vue";
import { default as GeneralAmountProcess } from "./che_몰수.vue";
import { default as GeneralCityProcess } from "./che_발령.vue";
export const commandMap: Record<string, ()=>typeof NationProcess> = {
che_국기변경: ()=>che_국기변경,
che_국호변경: ()=>che_국호변경,
che_급습: ()=>NationProcess,
che_몰수: ()=>GeneralAmountProcess,
che_포상: ()=>GeneralAmountProcess,
che_발령: ()=>GeneralCityProcess,
}
+4 -4
View File
@@ -9,8 +9,8 @@ import { unwrap } from "@util/unwrap";
import { recruitCrewForm } from '@/recruitCrewForm';
import BootstrapVue3 from 'bootstrap-vue-3'
import Multiselect from 'vue-multiselect';
import * as GeneralActions from "@/processing/General";
import * as NationActions from "@/processing/Nation";
import { commandMap as GeneralActions } from "@/processing/General";
import { commandMap as NationActions } from '@/processing/Nation';
import { App, createApp } from 'vue';
import { auto500px } from './util/auto500px';
import { isString } from 'lodash';
@@ -76,7 +76,7 @@ const app: App<Element> | undefined = (function () {
console.error(`${moduleName}${groupName}에 없음`);
return undefined;
}
return createApp(GeneralActions[moduleName]);
return createApp(GeneralActions[moduleName]());
}
if (groupName == 'Nation') {
const moduleName = entryInfo[1];
@@ -84,7 +84,7 @@ const app: App<Element> | undefined = (function () {
console.error(`${moduleName}${groupName}에 없음`);
return undefined;
}
return createApp(NationActions[moduleName]);
return createApp(NationActions[moduleName]());
}
console.error('알수')