feat: add reserved turns management for generals and nations; enhance command selection UI

2026-01-17 02:27:50 +00:00
parent 0fed50b5a9
commit f13f8bc1cf
8 changed files with 552 additions and 15 deletions
@@ -5,6 +5,7 @@ import CommandSelectForm from './CommandSelectForm.vue';
 interface TurnCommandAvailability {
    key: string;
    name: string;
+    reqArg: boolean;
    status: 'available' | 'blocked' | 'needsInput' | 'unknown';
    possible: boolean;
    reason?: string;
@@ -27,17 +28,93 @@ interface SelectedCityInfo {
    regionName: string;
 }

+interface ReservedTurnEntry {
+    index: number;
+    action: string;
+    args: unknown;
+}
+
+interface GeneralInfo {
+    id: number;
+    nationId: number;
+    officerLevel: number;
+}
+
 const props = defineProps<{
    commandTable: TurnCommandTable | null;
    loading: boolean;
    selectedCity: SelectedCityInfo | null;
+    reservedGeneralTurns: ReservedTurnEntry[] | null;
+    reservedNationTurns: ReservedTurnEntry[] | null;
+    general: GeneralInfo | null;
+}>();
+
+const emit = defineEmits<{
+    (event: 'set-general-turn', payload: { index: number; action: string }): void;
+    (event: 'shift-general-turns', amount: number): void;
+    (event: 'set-nation-turn', payload: { index: number; action: string }): void;
+    (event: 'shift-nation-turns', amount: number): void;
 }>();

 const activeCategory = ref('');
+const selectedCommand = ref<TurnCommandAvailability | null>(null);

 const handleSelect = (commandKey: string) => {
-    void commandKey;
+    if (!props.commandTable) {
+        selectedCommand.value = null;
+        return;
+    }
+    const allGroups = [...props.commandTable.general, ...props.commandTable.nation];
+    for (const group of allGroups) {
+        const match = group.values.find((entry) => entry.key === commandKey);
+        if (match) {
+            selectedCommand.value = match;
+            return;
+        }
+    }
+    selectedCommand.value = null;
 };
+
+const canReserveSelected = () => {
+    if (!selectedCommand.value) {
+        return false;
+    }
+    if (!selectedCommand.value.possible) {
+        return false;
+    }
+    if (selectedCommand.value.status !== 'available') {
+        return false;
+    }
+    if (selectedCommand.value.reqArg) {
+        return false;
+    }
+    return true;
+};
+
+const reserveGeneralTurn = (index: number) => {
+    if (!selectedCommand.value) {
+        return;
+    }
+    emit('set-general-turn', { index, action: selectedCommand.value.key });
+};
+
+const reserveNationTurn = (index: number) => {
+    if (!selectedCommand.value) {
+        return;
+    }
+    emit('set-nation-turn', { index, action: selectedCommand.value.key });
+};
+
+const clearGeneralTurn = (index: number) => {
+    emit('set-general-turn', { index, action: '휴식' });
+};
+
+const clearNationTurn = (index: number) => {
+    emit('set-nation-turn', { index, action: '휴식' });
+};
+
+const canNationReserve = () =>
+    Boolean(props.general && props.general.nationId > 0 && props.general.officerLevel >= 5);
 </script>

 <template>
@@ -58,8 +135,61 @@ const handleSelect = (commandKey: string) => {
            @update:active-category="activeCategory = $event"
            @select="handleSelect"
        />
-        <div class="command-placeholder">
-            선택한 명령의 상세/예약 UI는 추후 이식 예정
+        <div class="command-selected">
+            <div class="label">선택 명령</div>
+            <div v-if="selectedCommand" class="value">
+                <div class="name">{{ selectedCommand.name }}</div>
+                <div class="meta">
+                    <span>{{ selectedCommand.status === 'available' ? '가능' : '제한' }}</span>
+                    <span v-if="selectedCommand.reqArg">추가 입력 필요</span>
+                </div>
+            </div>
+            <div v-else class="value muted">명령을 선택하세요.</div>
+        </div>
+        <div class="reserved-section">
+            <div class="reserved-header">
+                <span>일반 예턴</span>
+                <div class="reserved-actions">
+                    <button @click="emit('shift-general-turns', -1)">앞당김</button>
+                    <button @click="emit('shift-general-turns', 1)">밀기</button>
+                </div>
+            </div>
+            <div v-if="!props.reservedGeneralTurns" class="muted">예턴을 불러오지 못했습니다.</div>
+            <div v-else class="reserved-list">
+                <div v-for="turn in props.reservedGeneralTurns" :key="turn.index" class="reserved-item">
+                    <div class="turn-label">#{{ turn.index + 1 }}</div>
+                    <div class="turn-action">{{ turn.action }}</div>
+                    <div class="turn-buttons">
+                        <button :disabled="!canReserveSelected()" @click="reserveGeneralTurn(turn.index)">
+                            배치
+                        </button>
+                        <button class="ghost" @click="clearGeneralTurn(turn.index)">휴식</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="reserved-section">
+            <div class="reserved-header">
+                <span>국가 예턴</span>
+                <div class="reserved-actions">
+                    <button :disabled="!canNationReserve()" @click="emit('shift-nation-turns', -1)">앞당김</button>
+                    <button :disabled="!canNationReserve()" @click="emit('shift-nation-turns', 1)">밀기</button>
+                </div>
+            </div>
+            <div v-if="!canNationReserve()" class="muted">국가 예턴은 최고위 관직부터 가능합니다.</div>
+            <div v-else-if="!props.reservedNationTurns" class="muted">예턴을 불러오지 못했습니다.</div>
+            <div v-else class="reserved-list">
+                <div v-for="turn in props.reservedNationTurns" :key="turn.index" class="reserved-item">
+                    <div class="turn-label">#{{ turn.index + 1 }}</div>
+                    <div class="turn-action">{{ turn.action }}</div>
+                    <div class="turn-buttons">
+                        <button :disabled="!canReserveSelected()" @click="reserveNationTurn(turn.index)">
+                            배치
+                        </button>
+                        <button class="ghost" @click="clearNationTurn(turn.index)">휴식</button>
+                    </div>
+                </div>
+            </div>
        </div>
    </div>
 </template>
@@ -84,10 +214,89 @@ const handleSelect = (commandKey: string) => {
    color: rgba(232, 221, 196, 0.6);
 }

-.command-placeholder {
-    border: 1px dashed rgba(201, 164, 90, 0.3);
+.command-selected {
+    border: 1px solid rgba(201, 164, 90, 0.3);
    padding: 8px;
+    display: grid;
+    gap: 6px;
    font-size: 0.75rem;
+}
+
+.command-selected .label {
    color: rgba(232, 221, 196, 0.6);
 }
+
+.command-selected .meta {
+    display: flex;
+    gap: 8px;
+    font-size: 0.7rem;
+    color: rgba(232, 221, 196, 0.6);
+}
+
+.reserved-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.reserved-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.reserved-actions {
+    display: flex;
+    gap: 6px;
+}
+
+.reserved-actions button {
+    border: 1px solid rgba(201, 164, 90, 0.3);
+    padding: 4px 6px;
+    font-size: 0.7rem;
+}
+
+.reserved-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-height: 240px;
+    overflow-y: auto;
+}
+
+.reserved-item {
+    border: 1px solid rgba(201, 164, 90, 0.2);
+    padding: 6px;
+    display: grid;
+    grid-template-columns: 50px 1fr auto;
+    gap: 6px;
+    align-items: center;
+    font-size: 0.75rem;
+}
+
+.turn-label {
+    color: rgba(232, 221, 196, 0.6);
+}
+
+.turn-buttons {
+    display: flex;
+    gap: 4px;
+}
+
+.turn-buttons button {
+    border: 1px solid rgba(201, 164, 90, 0.3);
+    padding: 4px 6px;
+    font-size: 0.7rem;
+}
+
+.ghost {
+    background: transparent;
+}
+
+.muted {
+    color: rgba(232, 221, 196, 0.6);
+    font-size: 0.75rem;
+}
 </style>
@@ -5,6 +5,7 @@ import SkeletonLines from '../ui/SkeletonLines.vue';
 type CommandAvailability = {
    key: string;
    name: string;
+    reqArg: boolean;
    status: 'available' | 'blocked' | 'needsInput' | 'unknown';
    possible: boolean;
    reason?: string;
@@ -23,6 +23,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
    type MapLayout = Awaited<ReturnType<typeof trpc.world.getMapLayout.query>>;
    type CommandTable = Awaited<ReturnType<typeof trpc.turns.getCommandTable.query>>;
    type MessageBundle = Awaited<ReturnType<typeof trpc.messages.getRecent.query>>;
+    type ReservedTurnView = Awaited<ReturnType<typeof trpc.turns.reserved.getGeneral.query>>[number];

    const loading = ref(false);
    const error = ref<string | null>(null);
@@ -35,6 +36,8 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
    const mapLayout = ref<MapLayout | null>(null);
    const commandTable = ref<CommandTable | null>(null);
    const messages = ref<MessageBundle | null>(null);
+    const reservedGeneralTurns = ref<ReservedTurnView[] | null>(null);
+    const reservedNationTurns = ref<ReservedTurnView[] | null>(null);

    const messageDraftText = ref('');
    const targetMailbox = ref<number>(MESSAGE_MAILBOX_PUBLIC);
@@ -128,18 +131,27 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
            generalContext.value = context;

            if (!context) {
+                reservedGeneralTurns.value = null;
+                reservedNationTurns.value = null;
                loading.value = false;
                return;
            }

            const id = context.general.id;
            const layoutPromise = mapLayout.value ? Promise.resolve(mapLayout.value) : trpc.world.getMapLayout.query();
-            const [layout, lobby, map, commands, messageData] = await Promise.all([
+            const generalTurnsPromise = trpc.turns.reserved.getGeneral.query({ generalId: id });
+            const nationTurnsPromise =
+                context.general.nationId > 0 && context.general.officerLevel >= 5
+                    ? trpc.turns.reserved.getNation.query({ generalId: id })
+                    : Promise.resolve(null);
+            const [layout, lobby, map, commands, messageData, generalTurns, nationTurns] = await Promise.all([
                layoutPromise,
                trpc.lobby.info.query(),
                trpc.world.getMap.query({ generalId: id, showMe: true, useCache: true }),
                trpc.turns.getCommandTable.query({ generalId: id }),
                trpc.messages.getRecent.query({ generalId: id }),
+                generalTurnsPromise,
+                nationTurnsPromise,
            ]);

            mapLayout.value = layout;
@@ -147,6 +159,8 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
            worldMap.value = map;
            commandTable.value = commands;
            messages.value = messageData;
+            reservedGeneralTurns.value = generalTurns;
+            reservedNationTurns.value = nationTurns;
        } catch (err) {
            error.value = resolveErrorMessage(err);
        } finally {
@@ -221,6 +235,83 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
        }
    };

+    const setGeneralTurn = async (turnIndex: number, action: string) => {
+        const id = generalId.value;
+        if (!id) {
+            return;
+        }
+        try {
+            const result = await trpc.turns.reserved.setGeneral.mutate({
+                generalId: id,
+                turnIndex,
+                action,
+                args: {},
+            });
+            reservedGeneralTurns.value = result.turns;
+        } catch (err) {
+            error.value = resolveErrorMessage(err);
+        }
+    };
+
+    const shiftGeneralTurns = async (amount: number) => {
+        const id = generalId.value;
+        if (!id) {
+            return;
+        }
+        try {
+            const result = await trpc.turns.reserved.shiftGeneral.mutate({
+                generalId: id,
+                amount,
+            });
+            reservedGeneralTurns.value = result.turns;
+        } catch (err) {
+            error.value = resolveErrorMessage(err);
+        }
+    };
+
+    const setNationTurn = async (turnIndex: number, action: string) => {
+        const id = generalId.value;
+        const currentGeneral = general.value;
+        if (!id || !currentGeneral) {
+            return;
+        }
+        if (currentGeneral.nationId <= 0 || currentGeneral.officerLevel < 5) {
+            return;
+        }
+        try {
+            const result = await trpc.turns.reserved.setNation.mutate({
+                generalId: id,
+                turnIndex,
+                action,
+                args: {},
+            });
+            reservedNationTurns.value = result.turns;
+        } catch (err) {
+            error.value = resolveErrorMessage(err);
+        }
+    };
+
+    const shiftNationTurns = async (amount: number) => {
+        const id = generalId.value;
+        const currentGeneral = general.value;
+        if (!id || !currentGeneral) {
+            return;
+        }
+        if (currentGeneral.nationId <= 0 || currentGeneral.officerLevel < 5) {
+            return;
+        }
+        try {
+            const result = await trpc.turns.reserved.shiftNation.mutate({
+                generalId: id,
+                amount,
+            });
+            reservedNationTurns.value = result.turns;
+        } catch (err) {
+            error.value = resolveErrorMessage(err);
+        }
+    };
+
+
    let realtimeSource: EventSource | null = null;
    let realtimeToken: string | null = null;

@@ -369,6 +460,8 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
        selectedCity,
        commandTable,
        messages,
+        reservedGeneralTurns,
+        reservedNationTurns,
        messageDraftText,
        targetMailbox,
        mailboxOptions,
@@ -379,5 +472,9 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
        refreshMessages,
        sendMessage,
        loadOlderMessages,
+        setGeneralTurn,
+        shiftGeneralTurns,
+        setNationTurn,
+        shiftNationTurns,
    };
 });
@@ -43,6 +43,8 @@ const {
    selectedCity,
    commandTable,
    messages,
+    reservedGeneralTurns,
+    reservedNationTurns,
    messageDraftText,
    targetMailbox,
    mailboxOptions,
@@ -50,6 +52,22 @@ const {
    realtimeLabel,
 } = storeToRefs(dashboard);

+const reserveGeneralTurn = (payload: { index: number; action: string }) => {
+    void dashboard.setGeneralTurn(payload.index, payload.action);
+};
+
+const shiftGeneralTurns = (amount: number) => {
+    void dashboard.shiftGeneralTurns(amount);
+};
+
+const reserveNationTurn = (payload: { index: number; action: string }) => {
+    void dashboard.setNationTurn(payload.index, payload.action);
+};
+
+const shiftNationTurns = (amount: number) => {
+    void dashboard.shiftNationTurns(amount);
+};
+
 const loadMainData = async () => {
    await dashboard.loadMainData();
 };
@@ -113,7 +131,18 @@ watch(

            <div class="mobile-panel" v-if="mobileTab === 'commands'">
                <PanelCard title="명령 목록" subtitle="예턴/명령 배치 영역">
-                    <CommandListPanel :command-table="commandTable" :loading="loading" :selected-city="selectedCity" />
+                    <CommandListPanel
+                        :command-table="commandTable"
+                        :loading="loading"
+                        :selected-city="selectedCity"
+                        :reserved-general-turns="reservedGeneralTurns"
+                        :reserved-nation-turns="reservedNationTurns"
+                        :general="general"
+                        @set-general-turn="reserveGeneralTurn"
+                        @shift-general-turns="shiftGeneralTurns"
+                        @set-nation-turn="reserveNationTurn"
+                        @shift-nation-turns="shiftNationTurns"
+                    />
                </PanelCard>
            </div>

@@ -200,7 +229,18 @@ watch(

            <div class="stack">
                <PanelCard title="명령 목록" subtitle="예턴/명령 배치 영역">
-                    <CommandListPanel :command-table="commandTable" :loading="loading" :selected-city="selectedCity" />
+                    <CommandListPanel
+                        :command-table="commandTable"
+                        :loading="loading"
+                        :selected-city="selectedCity"
+                        :reserved-general-turns="reservedGeneralTurns"
+                        :reserved-nation-turns="reservedNationTurns"
+                        :general="general"
+                        @set-general-turn="reserveGeneralTurn"
+                        @shift-general-turns="shiftGeneralTurns"
+                        @set-nation-turn="reserveNationTurn"
+                        @shift-nation-turns="shiftNationTurns"
+                    />
                </PanelCard>
                <PanelCard title="장수 스탯">
                    <GeneralBasicCard :general="general" :loading="loading" />