435 lines
12 KiB
Vue
435 lines
12 KiB
Vue
<template>
|
|
<div class="commandPad">
|
|
<div class="col alert alert-dark m-0 p-1 center">
|
|
<h4 class="m-0">명령 목록</h4>
|
|
</div>
|
|
<div :style="{ position: 'relative' }">
|
|
<div class="bg-dark" :style="{
|
|
position: 'absolute',
|
|
top: `${basicModeRowHeight * currentQuickReserveTarget + 30}px`,
|
|
width: '100%',
|
|
zIndex: 9,
|
|
}">
|
|
<CommandSelectForm ref="commandQuickReserveForm" :activatedCategory="'개인 전략'" :commandList="commandList"
|
|
:hideClose="false" @onClose="chooseQuickReserveCommand($event)" />
|
|
</div>
|
|
</div>
|
|
<div :class="{
|
|
commandTable: true,
|
|
}">
|
|
<div :style="rowGridStyle">
|
|
<div v-for="(turnObj, turnIdx) in reservedCommandList.slice(0, viewMaxTurn)" :key="turnIdx" :turnIdx="turnIdx"
|
|
class="idx_pad center d-grid">
|
|
<div class="plain-center">
|
|
{{ turnIdx + 1 }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div :style="rowGridStyle">
|
|
<div v-for="(turnObj, turnIdx) in reservedCommandList.slice(0, viewMaxTurn)" :key="turnIdx" height="24"
|
|
class="month_pad center" :turnIdx="turnIdx" :style="{
|
|
'white-space': 'nowrap',
|
|
'font-size': `${Math.min(14, (75 / (`${turnObj.year ?? 1}`.length + 8)) * 1.8)}px`,
|
|
overflow: 'hidden',
|
|
}">
|
|
{{ turnObj.year ? `${turnObj.year}年` : "" }}
|
|
{{ turnObj.month ? `${turnObj.month}月` : "" }}
|
|
</div>
|
|
</div>
|
|
<div :style="rowGridStyle">
|
|
<div v-for="(turnObj, turnIdx) in reservedCommandList.slice(0, viewMaxTurn)" :key="turnIdx"
|
|
class="time_pad center" :style="{
|
|
backgroundColor: 'black',
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
}">
|
|
{{ turnObj.time }}
|
|
</div>
|
|
</div>
|
|
<div :style="rowGridStyle">
|
|
<div v-for="(turnObj, turnIdx) in reservedCommandList.slice(0, viewMaxTurn)" :key="turnIdx"
|
|
class="turn_pad center">
|
|
<span v-b-tooltip.hover="turnObj.tooltip" class="turn_text" :style="turnObj.style">
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
<span v-html="turnObj.brief" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div :style="rowGridStyle">
|
|
<div v-for="(turnObj, turnIdx) in reservedUserActionList.slice(0, viewMaxTurn)" :key="turnIdx"
|
|
class="turn_pad center">
|
|
<span v-if="turnObj" class="turn_text">
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
<span v-html="turnObj.brief" />
|
|
</span>
|
|
<span v-else class="turn_text">
|
|
<span>휴식</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div :style="rowGridStyle">
|
|
<div v-for="(turnObj, turnIdx) in reservedUserActionList.slice(0, viewMaxTurn)" :key="turnIdx"
|
|
class="action_pad d-grid">
|
|
<BButton :variant="turnIdx % 2 == 0 ? 'secondary' : 'dark'" size="sm" class="simple_action_btn bi bi-pencil"
|
|
:disabled="!commandList.length" @click="toggleQuickReserveForm(turnIdx)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row gx-1">
|
|
<div class="col d-grid">
|
|
</div>
|
|
<div class="col alert alert-primary m-0 p-0"
|
|
style="text-align: center; display: flex; justify-content: center; align-items: center">
|
|
<SimpleClock :serverTime="serverNow" />
|
|
</div>
|
|
<div class="col d-grid">
|
|
<BButton @click="toggleViewMaxTurn">
|
|
{{ flippedMaxTurn == viewMaxTurn ? "펼치기" : "접기" }}
|
|
</BButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
declare const staticValues: {
|
|
maxTurn: number;
|
|
maxPushTurn: number;
|
|
serverNow: string;
|
|
serverNick: string;
|
|
mapName: string;
|
|
unitSet: string;
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts" setup>
|
|
import addMinutes from "date-fns/esm/addMinutes";
|
|
import { isString, range, trim } from "lodash-es";
|
|
import queryString from "query-string";
|
|
import { onMounted, ref, watch } from "vue";
|
|
import { formatTime } from "@util/formatTime";
|
|
import { joinYearMonth } from "@util/joinYearMonth";
|
|
import { mb_strwidth } from "@util/mb_strwidth";
|
|
import { parseTime } from "@util/parseTime";
|
|
import { parseYearMonth } from "@util/parseYearMonth";
|
|
import { SammoAPI } from "./SammoAPI";
|
|
import type { CommandItem, CommandTableResponse } from "@/defs";
|
|
import CommandSelectForm from "@/components/CommandSelectForm.vue";
|
|
import { BButton, BButtonGroup, BDropdownItem, BDropdown, BDropdownText, BDropdownDivider, useToast } from "bootstrap-vue-next";
|
|
import { StoredActionsHelper } from "./util/StoredActionsHelper";
|
|
import type { TurnObj } from "@/defs";
|
|
import type { Args } from "./processing/args";
|
|
import { getEmptyTurn } from "./util/QueryActionHelper";
|
|
import SimpleClock from "./components/SimpleClock.vue";
|
|
import type { ReservedCommandResponse, ReservedUserActionResponse, UserActionItem } from "./defs/API/Command";
|
|
import { unwrap } from "./util/unwrap";
|
|
|
|
defineExpose({
|
|
updateCommandTable,
|
|
reloadCommandList,
|
|
})
|
|
|
|
const toasts = unwrap(useToast());
|
|
|
|
const { maxTurn } = staticValues;
|
|
|
|
const commandList = ref<CommandTableResponse['commandTable']>([]);
|
|
|
|
const nullCommand: CommandItem = {
|
|
'value': '휴식',
|
|
'compensation': 0,
|
|
'simpleName': '휴식',
|
|
'possible': true,
|
|
'info': '휴식',
|
|
'title': '휴식',
|
|
'reqArg': false,
|
|
}
|
|
|
|
const selectedCommand = ref<CommandItem>(nullCommand);
|
|
const invCommandMap = new Map<string, CommandItem>();
|
|
|
|
async function updateCommandTable() {
|
|
try {
|
|
const response = await SammoAPI.General.GetUserActionCommandTable();
|
|
console.log(response);
|
|
commandList.value = response.commandTable;
|
|
}
|
|
catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
watch(commandList, (commandList) => {
|
|
if (!commandList) {
|
|
return;
|
|
}
|
|
|
|
for (const commandCategories of commandList) {
|
|
if (!commandCategories.values) {
|
|
continue;
|
|
}
|
|
for (const commandObj of commandCategories.values) {
|
|
if (!commandObj.reqArg) {
|
|
continue;
|
|
}
|
|
console.warn(`명령 ${commandObj.value}에는 인자가 필요하나, 현재는 지원하지 않습니다.`);
|
|
}
|
|
}
|
|
|
|
invCommandMap.clear();
|
|
for (const category of commandList) {
|
|
for (const command of category.values) {
|
|
invCommandMap.set(command.value, command);
|
|
}
|
|
}
|
|
|
|
if (selectedCommand.value === nullCommand || !invCommandMap.has(selectedCommand.value.value)) {
|
|
selectedCommand.value = commandList[0].values[0];
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
void updateCommandTable();
|
|
});
|
|
|
|
const reservedCommandList = ref(getEmptyTurn(maxTurn));
|
|
const reservedUserActionList = ref<(UserActionItem | undefined)[]>([]);
|
|
const flippedMaxTurn = 14;
|
|
|
|
const basicModeRowHeight = 34.4;
|
|
const viewMaxTurn = ref(flippedMaxTurn);
|
|
const rowGridStyle = ref({
|
|
display: "grid",
|
|
gridTemplateRows: `repeat(${viewMaxTurn.value}, ${basicModeRowHeight}px)`,
|
|
});
|
|
|
|
watch([viewMaxTurn], ([maxTurn]) => {
|
|
rowGridStyle.value.gridTemplateRows = `repeat(${maxTurn}, ${basicModeRowHeight}px)`;
|
|
});
|
|
|
|
function toggleViewMaxTurn() {
|
|
if (viewMaxTurn.value == flippedMaxTurn) {
|
|
viewMaxTurn.value = maxTurn;
|
|
} else {
|
|
viewMaxTurn.value = flippedMaxTurn;
|
|
}
|
|
}
|
|
|
|
const serverNow = ref(new Date());
|
|
|
|
async function reloadCommandList() {
|
|
let result: ReservedCommandResponse;
|
|
let userActions: ReservedUserActionResponse;
|
|
try {
|
|
[result, userActions] = await Promise.all([
|
|
SammoAPI.Command.GetReservedCommand(),
|
|
SammoAPI.Command.GetReservedUserAction(),
|
|
]);
|
|
|
|
} catch (e) {
|
|
if (isString(e)) {
|
|
toasts.danger({
|
|
title: "에러",
|
|
body: e,
|
|
});
|
|
}
|
|
console.error(e);
|
|
return;
|
|
}
|
|
|
|
let yearMonth = joinYearMonth(result.year, result.month);
|
|
|
|
const turnTime = parseTime(result.turnTime);
|
|
let nextTurnTime = new Date(turnTime);
|
|
|
|
const autorunLimitYearMonth = result.autorun_limit ?? yearMonth - 1;
|
|
const [autorunLimitYear, autorunLimitMonth] = parseYearMonth(autorunLimitYearMonth);
|
|
|
|
reservedCommandList.value = [];
|
|
for (const obj of result.turn) {
|
|
const [year, month] = parseYearMonth(yearMonth);
|
|
let tooltip: string[] = [];
|
|
let style: Record<string, string> = {};
|
|
|
|
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.value.push({
|
|
...obj,
|
|
year,
|
|
month,
|
|
time: formatTime(nextTurnTime, "HH:mm"),
|
|
tooltip: tooltip.length == 0 ? undefined : tooltip.join("\n"),
|
|
style,
|
|
});
|
|
|
|
yearMonth += 1;
|
|
nextTurnTime = addMinutes(nextTurnTime, result.turnTerm);
|
|
}
|
|
|
|
serverNow.value = parseTime(result.date);
|
|
|
|
const newReservedUserActionList: (UserActionItem | undefined)[] = [];
|
|
newReservedUserActionList.length = maxTurn;
|
|
for (const [idx, item] of Object.entries(userActions.userActions.reserved ?? {})) {
|
|
newReservedUserActionList[parseInt(idx)] = item;
|
|
}
|
|
reservedUserActionList.value = newReservedUserActionList;
|
|
}
|
|
|
|
async function reserveCommand() {
|
|
const turnIdx = currentQuickReserveTarget.value;
|
|
|
|
const commandName = selectedCommand.value.value;
|
|
if (turnIdx < 0) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await SammoAPI.Command.ReserveUserAction({
|
|
turnIdx,
|
|
action: commandName,
|
|
});
|
|
} catch (e) {
|
|
if (isString(e)) {
|
|
toasts.danger({
|
|
title: "에러",
|
|
body: e,
|
|
});
|
|
}
|
|
console.error(e);
|
|
return;
|
|
}
|
|
await reloadCommandList();
|
|
}
|
|
|
|
const commandQuickReserveForm = ref<InstanceType<typeof CommandSelectForm> | null>(null);
|
|
|
|
const currentQuickReserveTarget = ref(-1);
|
|
function chooseQuickReserveCommand(val?: string) {
|
|
if (!val) {
|
|
return;
|
|
}
|
|
selectedCommand.value = unwrap(invCommandMap.get(val));
|
|
void reserveCommand();
|
|
}
|
|
function toggleQuickReserveForm(turnIdx: number) {
|
|
if (turnIdx == currentQuickReserveTarget.value) {
|
|
commandQuickReserveForm.value?.toggle();
|
|
return;
|
|
}
|
|
currentQuickReserveTarget.value = turnIdx;
|
|
commandQuickReserveForm.value?.show();
|
|
}
|
|
|
|
onMounted(() => {
|
|
void reloadCommandList();
|
|
});
|
|
</script>
|
|
<style lang="scss">
|
|
@use "sass:color";
|
|
|
|
@import "@scss/common/break_500px.scss";
|
|
@import "@scss/common/variables.scss";
|
|
@import "@scss/common/bootswatch_custom_variables.scss";
|
|
@import "@scss/game_bg.scss";
|
|
|
|
.commandPad {
|
|
background-color: $gray-900;
|
|
position: relative;
|
|
}
|
|
|
|
.commandTable {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns:
|
|
minmax(20px, 0.6fr) minmax(75px, 2.0fr) minmax(40px, 0.9fr) 4.0fr 3.2fr minmax(28px, 0.8fr);
|
|
//30, 70, 37.65, 160
|
|
}
|
|
|
|
@include media-1000px {
|
|
.commandPad {
|
|
margin-left: 10px;
|
|
|
|
.turn_pad {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.multiselect__content-wrapper {
|
|
margin-left: calc(-100% / 7 * 2);
|
|
width: calc(100% / 7 * 12);
|
|
}
|
|
|
|
.multiselect__single {
|
|
display: inline-block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-500px {
|
|
.dropdown-item {
|
|
padding: 8px;
|
|
}
|
|
|
|
.commandPad {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
.btn {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
.month_pad,
|
|
.time_pad,
|
|
.turn_pad {
|
|
padding: 6px;
|
|
}
|
|
}
|
|
|
|
.plain-center {
|
|
background-color: black;
|
|
}
|
|
|
|
.plain-center,
|
|
.month_pad,
|
|
.time_pad,
|
|
.turn_pad {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.turn_pad {
|
|
white-space: nowrap;
|
|
background-color: $nbase2color;
|
|
}
|
|
|
|
.turn_pad:nth-child(2n) {
|
|
background-color: color.adjust($nbase2color, $lightness: -5%);
|
|
}
|
|
|
|
.turn_pad .turn_text {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|