devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

refac: 사령부 vue를 setup 방식으로 변경

Browse Source
This commit is contained in:
Hide_D
2022-03-26 21:37:04 +09:00
parent 4dd305de64
commit 6d49d564c5
2 changed files with 513 additions and 614 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/ts/PageChiefCenter.vue
+224 -296
View File
@@ -7,10 +7,7 @@
v-if="chiefList !== undefined"
:class="`${targetIsMe ? 'targetIsMe' : 'targetIsNotMe'}`"
>
<template
v-for="(chiefLevel, vidx) in [12, 10, 8, 6, 11, 9, 7, 5]"
:key="chiefLevel"
>
<template v-for="(chiefLevel, vidx) in [12, 10, 8, 6, 11, 9, 7, 5]" :key="chiefLevel">
<div
v-if="vidx % 4 == 0"
:class="[
@@ -24,9 +21,7 @@
v-for="idx in maxChiefTurn"
:class="[`turnIdxLeft`, 'align-self-center', 'center']"
:key="idx"
>
{{ idx }}
</div>
>{{ idx }}</div>
</div>
</div>
<div
@@ -42,21 +37,14 @@
: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="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>
>{{ officer.name }}</div>
</div>
<div
:class="[
@@ -72,9 +60,7 @@
color: getNpcColor(officer.npcType ?? 0),
fontSize: '1.2em',
}"
>
{{ officer.name }}
</div>
>{{ officer.name }}</div>
<div>{{ officer.officerLevelText }}</div>
</div>
<div class="row gx-1 gy-1 py-1">
@@ -82,39 +68,26 @@
<div
class="alert alert-primary mb-0 center"
style="padding: 0.5rem 0"
>
{{ serverNow }}
</div>
>{{ serverNow }}</div>
</div>
<b-dropdown class="col-md-4" left text="턴 선택">
<b-dropdown-item @click="selectNone()"
>해제</b-dropdown-item
>
<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-item @click="selectNone()">해제</b-dropdown-item>
<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-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
>
>{{ beginIdx }}</b-button>
</b-button-group>
</b-dropdown-text>
</b-dropdown>
@@ -123,34 +96,21 @@
v-for="turnIdx in maxPushTurn"
:key="turnIdx"
@click="repeatNationCommand(turnIdx)"
>{{ turnIdx }}턴
</b-dropdown-item>
>{{ turnIdx }}턴</b-dropdown-item>
</b-dropdown>
<b-dropdown
class="col-md-6"
split
text="당기기"
@click="pullNationCommandSingle"
>
<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>
>{{ turnIdx }}턴</b-dropdown-item>
</b-dropdown>
<b-dropdown
class="col-md-6"
split
text="미루기"
@click="pushNationCommandSingle"
>
<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>
>{{ turnIdx }}턴</b-dropdown-item>
</b-dropdown>
</div>
</div>
@@ -186,9 +146,7 @@
v-for="idx in maxChiefTurn"
:class="[`turnIdxRight`, 'align-self-center', 'center']"
:key="idx"
>
{{ idx }}
</div>
>{{ idx }}</div>
</div>
</div>
</template>
@@ -196,19 +154,10 @@
</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"
>
<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 v-for="idx in maxChiefTurn" :class="[`turnIdxLeft`]" :key="idx">{{ idx }}</div>
</div>
<BottomItem
:chiefLevel="chiefLevel"
@@ -217,15 +166,9 @@
:isMe="chiefLevel == officerLevel"
@click="viewTarget = chiefLevel"
/>
<div
class="turnIdx subRows bg0"
:style="subTableGridRows"
v-if="vidx % 4 == 3"
>
<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 v-for="idx in maxChiefTurn" :class="`turnIdxRight`" :key="idx">{{ idx }}</div>
</div>
</template>
</div>
@@ -234,18 +177,17 @@
<BottomBar />
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import "@scss/common/bootstrap5.scss";
import "@scss/game_bg.scss";
import "../../css/config.css";
import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
import { computed, defineProps, reactive, ref, toRefs, watch } from "vue";
import ChiefReservedCommand from "@/components/ChiefReservedCommand.vue";
import TopBackBar from "@/components/TopBackBar.vue";
import BottomBar from "@/components/BottomBar.vue";
import VueTypes from "vue-types";
import { isString, range } from "lodash";
import { mb_strwidth } from "./util/mb_strwidth";
import { entriesWithType } from "./util/entriesWithType";
import { addMilliseconds } from "date-fns";
import { formatTime } from "./util/formatTime";
@@ -274,219 +216,205 @@ function isDropdownChildren(e?: Event): boolean {
return false;
}
export default defineComponent({
components: {
TopBackBar,
BottomBar,
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);
},
selectNone() {
this.turnList.clear();
},
selectAll(e: Event | true) {
//NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
if (e !== true && isDropdownChildren(e)) {
return;
}
const props = defineProps({
maxChiefTurn: VueTypes.number.isRequired,
})
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 maxPushTurn = props.maxChiefTurn / 2;
const turnList = ref(new Set<number>());
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,
mapName: undefined,
unitSet: undefined,
});
async function reloadTable(): Promise<void> {
try {
const response =
await SammoAPI.NationCommand.GetReservedCommand<ChiefResponse>();
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) {
if (!tableObj.officerLevel) {
viewTarget.value = 12;
} else {
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,
unwrap,
viewTarget,
targetIsMe,
maxPushTurn: props.maxChiefTurn / 2,
};
},
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,
mapName: undefined,
unitSet: undefined,
});
const {
year,
month,
turnTerm,
date,
chiefList,
officerLevel,
commandList,
} = toRefs(tableObj);
const viewTarget = ref<number | undefined>();
const turnList = ref(new Set<number>());
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);
});
function toggleTurn(turnIdx: number) {
if (turnList.value.has(turnIdx)) {
turnList.value.delete(turnIdx);
} else {
turnList.value.add(turnIdx);
}
}
function selectTurn(turnIdx: number) {
turnList.value.clear();
turnList.value.add(turnIdx);
}
function selectNone() {
turnList.value.clear();
}
function selectAll(e: Event | true) {
//NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
if (e !== true && isDropdownChildren(e)) {
return;
}
if (turnList.value.size * 3 > props.maxChiefTurn) {
turnList.value.clear();
} else {
for (let i = 0; i < props.maxChiefTurn; i++) {
turnList.value.add(i);
}
}
}
function selectStep(begin: number, step: number) {
turnList.value.clear();
for (const idx of range(0, props.maxChiefTurn)) {
if ((idx - begin) % step == 0) {
turnList.value.add(idx);
}
}
}
async function repeatNationCommand(amount: number) {
try {
await SammoAPI.NationCommand.RepeatCommand({ amount });
} catch (e) {
console.error(e);
alert(`실패했습니다: ${e}`);
return;
}
await reloadTable();
}
async function pushNationCommand(amount: number) {
try {
await SammoAPI.NationCommand.PushCommand({ amount });
} catch (e) {
console.error(e);
alert(`실패했습니다: ${e}`);
return;
}
await reloadTable();
}
function pushNationCommandSingle(e: Event) {
//NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
if (isDropdownChildren(e)) {
return;
}
void pushNationCommand(1);
}
function pullNationCommandSingle(e: Event) {
//NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
if (isDropdownChildren(e)) {
return;
}
void pushNationCommand(-1);
}
async function reloadTable(): Promise<void> {
try {
const response =
await SammoAPI.NationCommand.GetReservedCommand<ChiefResponse>();
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) {
if (!tableObj.officerLevel) {
viewTarget.value = 12;
} else {
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);
</script>
<style lang="scss">
@import "@scss/chiefCenter.scss";
hwe/ts/components/ChiefReservedCommand.vue
+289 -318
View File
@@ -6,8 +6,8 @@
attribute="turnIdx"
@dragStart="isDragSingle = true"
@dragDone="
isDragSingle = false;
selectTurn(...$event);
isDragSingle = false;
selectTurn(...$event);
"
v-slot="{ selected }"
>
@@ -23,17 +23,15 @@
color:
isDragSingle && selected.has(`${turnIdx}`) ? 'cyan' : undefined,
}"
>
{{ turnObj.time }}
</div>
>{{ turnObj.time }}</div>
</DragSelect>
<DragSelect
:style="rowGridStyle"
attribute="turnIdx"
@dragStart="isDragToggle = true"
@dragDone="
isDragToggle = false;
toggleTurn(...$event);
isDragToggle = false;
toggleTurn(...$event);
"
v-slot="{ selected }"
>
@@ -49,13 +47,12 @@
isDragToggle && selected.has(`${turnIdx}`)
? 'light'
: turnList.has(turnIdx)
? 'info'
: turnList.size == 0 && prevTurnList.has(turnIdx)
? 'success'
: 'primary'
? 'info'
: turnList.size == 0 && prevTurnList.has(turnIdx)
? 'success'
: 'primary'
"
>{{ turnIdx + 1 }}</b-button
>
>{{ turnIdx + 1 }}</b-button>
</div>
</DragSelect>
<div :style="rowGridStyle">
@@ -83,8 +80,9 @@
:variant="searchModeOn ? 'info' : 'primary'"
v-b-tooltip.hover
title="검색 기능을 활성화합니다."
><i class="bi bi-search"></i
></b-button>
>
<i class="bi bi-search"></i>
</b-button>
</div>
<div class="col-7">
<v-multiselect
@@ -99,40 +97,28 @@
open-direction="top"
:show-labels="false"
selectLabel="선택(엔터)"
selectGroupLabel=""
selectGroupLabel
selectedLabel="선택됨"
deselectLabel="해제(엔터)"
deselectGroupLabel=""
deselectGroupLabel
placeholder="턴 선택"
:maxHeight="400"
:searchable="searchModeOn"
>
<template v-slot:noResult>검색 결과가 없습니다.</template>
<template v-slot:option="props"
><!--FIXME: 카테고리-->
<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="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 }}
<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>
<template v-slot:singleLabel="props">{{ props.option.simpleName }}</template>
</v-multiselect>
</div>
<div class="col-3 d-grid">
@@ -142,10 +128,10 @@
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import addMinutes from "date-fns/esm/addMinutes";
import { stringifyUrl } from "query-string";
import { defineComponent, type PropType } from "vue";
import { defineProps, defineEmits, onMounted, ref, watch, type PropType } from "vue";
import { formatTime } from "@util/formatTime";
import { joinYearMonth } from "@util/joinYearMonth";
import { mb_strwidth } from "@util/mb_strwidth";
@@ -159,11 +145,6 @@ import { SammoAPI } from "@/SammoAPI";
import type { ChiefResponse, CommandItem, TurnObj } from "@/defs";
/*declare const commandList: {
category: string;
values: commandItem[];
}[];*/
type TurnObjWithTime = TurnObj & {
time: string;
year?: number;
@@ -174,293 +155,283 @@ type TurnObjWithTime = TurnObj & {
const searchModeKey = `sammo_searchModeOn`;
export default defineComponent({
name: "NationReservedCommand",
components: {
DragSelect
const props = defineProps({
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(),
},
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<ChiefResponse['commandList']>,
required: true,
},
turn: {
type: Array as PropType<TurnObj[]>,
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,
},
commandList: {
type: Object as PropType<ChiefResponse['commandList']>,
required: true,
},
methods: {
triggerUpdateCommandList(type?: string) {
console.log("try update", type);
this.updated = false;
setTimeout(() => {
this.updateCommandList();
}, 1);
},
toggleTurn(...turnList: number[] | string[]) {
for (let turnIdx of turnList) {
if (isString(turnIdx)) {
turnIdx = parseInt(turnIdx);
}
if (this.turnList.has(turnIdx)) {
this.turnList.delete(turnIdx);
} else {
this.turnList.add(turnIdx);
}
}
this.$emit("update:selectedTurn", this.turnList);
},
selectTurn(...turnList: number[] | string[]) {
this.turnList.clear();
for (const turnIdx of turnList) {
if (isString(turnIdx)) {
this.turnList.add(parseInt(turnIdx));
} else {
this.turnList.add(turnIdx);
}
}
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
const serverNowObj = ref(parseTime(props.date));
const clientNowObj = ref(new Date());
const timeDiff = ref(serverNowObj.value.getTime() - clientNowObj.value.getTime());
const listReqArgCommand = new Set<string>();
for (const commandCategories of props.commandList) {
if (!commandCategories.values) {
continue;
}
for (const commandObj of commandCategories.values) {
if (!commandObj.reqArg) {
continue;
}
listReqArgCommand.add(commandObj.value);
}
}
const selectedCommand = ref(props.commandList[0].values[0]);
for (const subCategory of props.commandList) {
for (const command of subCategory.values) {
if (command.searchText) {
continue;
}
command.searchText = convertSearch초성(command.simpleName).join("|");
}
}
const invCommandMap: Record<string, CommandItem> = {};
for (const category of props.commandList) {
for (const command of category.values) {
invCommandMap[command.value] = command;
}
}
const searchModeOn = ref((localStorage.getItem(searchModeKey) ?? "0") != "0");
const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
length: props.maxTurn,
}).fill({
arg: {},
brief: "",
action: "",
year: undefined,
month: undefined,
time: "",
});
const prevTurnList = ref(new Set([0]));
const rowGridStyle = ref({
display: "grid",
gridTemplateRows: `repeat(${props.maxTurn}, 30px)`,
});
const updated = ref(false);
const isDragSingle = ref(false);
const isDragToggle = ref(false);
const reservedCommandList = ref(emptyTurn);
const turnList = ref(props.selectedTurn);
const autorun_limit = ref<number | null>(null);
const emit = defineEmits<{
(event: 'raiseReload'): void,
(event: 'update:selectedTurn', value: Set<number>): void,
}>();
function triggerUpdateCommandList(type?: string) {
console.log("try update", type);
updated.value = false;
setTimeout(() => {
updateCommandList();
}, 1);
}
function toggleTurn(...reqTurnList: number[] | string[]) {
for (let turnIdx of reqTurnList) {
if (isString(turnIdx)) {
turnIdx = parseInt(turnIdx);
}
if (turnList.value.has(turnIdx)) {
turnList.value.delete(turnIdx);
} else {
turnList.value.add(turnIdx);
}
}
emit("update:selectedTurn", turnList.value);
}
function selectTurn(...reqTurnList: number[] | string[]) {
turnList.value.clear();
for (const turnIdx of reqTurnList) {
if (isString(turnIdx)) {
turnList.value.add(parseInt(turnIdx));
} else {
turnList.value.add(turnIdx);
}
}
emit("update:selectedTurn", turnList.value);
}
function updateCommandList() {
if (updated.value) {
return;
}
console.log("do update!");
const _reservedCommandList: TurnObjWithTime[] = [];
let yearMonth = joinYearMonth(props.year, props.month);
const turnTime = parseTime(props.turnTime);
let nextTurnTime = new Date(turnTime);
const autorunLimitYearMonth = autorun_limit.value ?? yearMonth - 1;
const [autorunLimitYear, autorunLimitMonth] = parseYearMonth(
autorunLimitYearMonth
);
for (const obj of props.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}월까지`
);
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");
},
chooseCommand(val: string){
this.selectedCommand = this.invCommandMap[val];
},
},
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("|");
}
if (mb_strwidth(brief) > 22) {
tooltip.push(brief);
}
const invCommandMap: Record<string, CommandItem> = {};
for(const category of this.commandList){
for(const command of category.values){
invCommandMap[command.value] = command;
}
}
const searchModeOn = (localStorage.getItem(searchModeKey) ?? "0") != "0";
const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
length: this.maxTurn,
}).fill({
arg: {},
brief: "",
action: "",
year: undefined,
month: undefined,
time: "",
_reservedCommandList.push({
...obj,
year,
month,
time: formatTime(
nextTurnTime,
props.turnTerm >= 5 ? "HH:mm" : "mm:ss"
),
tooltip: tooltip.length == 0 ? undefined : tooltip.join("\n"),
style,
});
const prevTurnList = new Set([0]);
yearMonth += 1;
nextTurnTime = addMinutes(nextTurnTime, props.turnTerm);
}
reservedCommandList.value = _reservedCommandList;
const rowGridStyle = {
display: "grid",
gridTemplateRows: `repeat(${this.maxTurn}, 30px)`,
};
const serverNowObj = parseTime(props.date);
const clientNowObj = new Date();
timeDiff.value = serverNowObj.getTime() - clientNowObj.getTime();
updated.value = true;
}
async function reserveCommand() {
let reqTurnList: number[];
if (turnList.value.size == 0) {
reqTurnList = Array.from(prevTurnList.value.values());
} else {
reqTurnList = Array.from(turnList.value.values());
}
if (reqTurnList.length == 0) {
reqTurnList.push(0);
}
const commandName = selectedCommand.value.value;
if (listReqArgCommand.has(commandName)) {
document.location.href = stringifyUrl({
url: "v_processing.php",
query: {
command: commandName,
turnList: reqTurnList.join("_"),
is_chief: true,
},
});
return;
}
try {
await SammoAPI.NationCommand.ReserveCommand({
turnList: reqTurnList,
action: commandName,
});
if (turnList.value.size > 0) {
prevTurnList.value.clear();
for (const v of reqTurnList) {
prevTurnList.value.add(v);
}
turnList.value.clear();
}
} catch (e) {
console.error(e);
alert(`실패했습니다: ${e}`);
return;
}
emit("raiseReload");
}
function toggleSearchCommand() {
searchModeOn.value = !searchModeOn.value;
localStorage.setItem(searchModeKey, searchModeOn.value ? "1" : "0");
}
function chooseCommand(val: string) {
selectedCommand.value = invCommandMap[val];
}
watch(() => props.date, () => {
triggerUpdateCommandList("date");
})
watch(() => props.year, () => {
triggerUpdateCommandList("year");
})
watch(() => props.month, () => {
triggerUpdateCommandList("month");
})
watch(() => props.turnTime, () => {
triggerUpdateCommandList("turnTime");
})
watch(() => props.commandList, () => {
triggerUpdateCommandList("commandList");
})
watch(() => props.selectedTurn, (val: Set<number>) => {
console.log(val);
if (val === turnList.value) {
console.log("pass!");
return;
}
turnList.value.clear();
for (const t of val.values()) {
turnList.value.add(t);
}
})
watch(turnList, () => {
console.log(turnList.value);
emit("update:selectedTurn", turnList.value);
})
onMounted(() => {
updateCommandList();
})
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,
rowGridStyle,
isDragSingle: false,
isDragToggle: false,
invCommandMap,
};
},
mounted() {
this.updateCommandList();
},
});
</script>
<style lang="scss">
@import "@scss/common/break_500px.scss";