devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(game-ui): add action feedback layer

Browse Source
This commit is contained in:
Hide_D
2026-08-12 15:56:58 +00:00
parent 5e80a940d4
commit 5d4d5009ee
15 changed files with 671 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/views/BoardView.vue
+4 -2
View File
@@ -2,6 +2,7 @@
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useGameFeedback } from '../composables/useGameFeedback';
import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
import { trpc } from '../utils/trpc';
@@ -9,6 +10,7 @@ type BoardArticle = Awaited<ReturnType<typeof trpc.board.getArticles.query>>[num
const route = useRoute();
const router = useRouter();
const { error: showErrorToast } = useGameFeedback();
const isSecretBoard = computed(() => route.name === 'board-secret');
const title = computed(() => (isSecretBoard.value ? '기밀실' : '회의실'));
const closeBoard = () => router.push('/');
@@ -92,7 +94,7 @@ const submitArticle = async () => {
resizeTextArea(articleTextArea.value);
await refreshArticles();
} catch (error) {
window.alert(`실패했습니다. :${errorText(error, '게시물 등록에 실패했습니다.')}`);
showErrorToast(`게시물 등록에 실패했습니다: ${errorText(error, '게시물 등록에 실패했습니다.')}`);
}
};
@@ -106,7 +108,7 @@ const submitComment = async (postId: number) => {
commentDrafts[postId] = '';
await refreshArticles();
} catch (error) {
window.alert(`실패했습니다: ${errorText(error, '댓글 등록에 실패했습니다.')}`);
showErrorToast(`댓글 등록에 실패했습니다: ${errorText(error, '댓글 등록에 실패했습니다.')}`);
}
};
app/game-frontend/src/views/JoinView.vue
+19 -7
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { RouterLink, useRoute, useRouter } from 'vue-router';
import { useGameFeedback } from '../composables/useGameFeedback';
import PanelCard from '../components/ui/PanelCard.vue';
import SkeletonLines from '../components/ui/SkeletonLines.vue';
import MapViewer from '../components/main/MapViewer.vue';
@@ -42,6 +43,7 @@ type PendingPossessAction = {
const router = useRouter();
const route = useRoute();
const session = useSessionStore();
const { error: showErrorToast, showDialog } = useGameFeedback();
const loading = ref(true);
const error = ref<string | null>(null);
@@ -459,14 +461,20 @@ const loadNpcCandidates = async (refresh = false) => {
} catch (err) {
npcError.value = err instanceof Error ? err.message : 'npc_list_failed';
if (refresh) {
window.alert(npcError.value);
if (isTrpcBusinessError(err)) {
await showDialog({
kind: 'error',
title: '빙의 대상 갱신 실패',
message: `${npcError.value}\n확인 후 페이지를 새로고침합니다.`,
});
window.location.reload();
} else {
showErrorToast(`빙의 대상 갱신에 실패했습니다: ${npcError.value}`);
}
} else if (isTrpcBusinessError(err)) {
window.alert(npcError.value);
await showDialog({ kind: 'error', title: '빙의 대상 확인 실패', message: npcError.value });
} else {
window.alert(`알 수 없는 에러: ${npcError.value}`);
showErrorToast(`빙의 대상 확인에 실패했습니다: ${npcError.value}`);
}
} finally {
npcLoading.value = false;
@@ -513,7 +521,7 @@ const submitPossession = async (pending: PendingPossessAction) => {
clientRequestId: pending.clientRequestId,
});
clearPendingPossess(pending);
window.alert('빙의에 성공했습니다.');
await showDialog({ kind: 'success', message: '빙의에 성공했습니다.' });
await session.refreshGeneralStatus();
if (session.hasGeneral) {
await router.push({ name: 'home' });
@@ -524,10 +532,14 @@ const submitPossession = async (pending: PendingPossessAction) => {
}
error.value = err instanceof Error ? err.message : 'possess_failed';
if (isTrpcBusinessError(err) && !isIndeterminateTimeout(err)) {
window.alert(error.value);
await showDialog({
kind: 'error',
title: '빙의 실패',
message: `${error.value}\n확인 후 페이지를 새로고침합니다.`,
});
window.location.reload();
} else if (!isIndeterminateTimeout(err)) {
window.alert(`알 수 없는 에러: ${error.value}`);
showErrorToast(`빙의에 실패했습니다: ${error.value}`);
}
} finally {
submitting.value = false;
@@ -566,7 +578,7 @@ const loadNpcGeneralList = async () => {
npcGeneralListVisibleCount.value = 50;
} catch (err) {
npcGeneralListError.value = err instanceof Error ? err.message : 'npc_general_list_failed';
window.alert(`실패했습니다: ${npcGeneralListError.value}`);
showErrorToast(`NPC 장수 목록을 불러오지 못했습니다: ${npcGeneralListError.value}`);
} finally {
npcGeneralListLoading.value = false;
}
app/game-frontend/src/views/MyPageView.vue
+10 -4
View File
@@ -7,10 +7,12 @@ import { isDefenceTrainPenaltyWaivedByScenarioEffect } from '@sammo-ts/logic';
import { useSessionStore } from '../stores/session';
import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
import LegacyGeneralProgress from '../components/ui/LegacyGeneralProgress.vue';
import { useGameFeedback } from '../composables/useGameFeedback';
const SCREEN_MODE_KEY = 'sam.screenMode';
const CUSTOM_CSS_KEY = 'sam_customCSS';
const PENDING_DIE_ON_PRESTART_KEY = 'sam.pending.dieOnPrestart';
const { error: showErrorToast, showDialog } = useGameFeedback();
type ScreenMode = 'auto' | '500px' | '1000px';
type LogType = 'generalHistory' | 'battleDetail' | 'battleResult' | 'generalAction';
type ItemSlotKey = 'horse' | 'weapon' | 'book' | 'item';
@@ -249,7 +251,7 @@ const changeGeneralIcon = async () => {
});
await loadPage();
} catch (cause) {
alert(`실패했습니다: ${errorText(cause)}`);
showErrorToast(`전용 아이콘 변경에 실패했습니다: ${errorText(cause)}`);
}
};
@@ -259,7 +261,7 @@ const saveSettings = async () => {
await trpc.general.setMySetting.mutate({ ...form });
await loadPage();
} catch (cause) {
alert(`실패했습니다: ${errorText(cause)}`);
showErrorToast(`설정 저장에 실패했습니다: ${errorText(cause)}`);
}
};
@@ -269,7 +271,7 @@ const confirmMutation = async (message: string, mutation: () => Promise<unknown>
await mutation();
await loadPage();
} catch (cause) {
alert(`실패했습니다: ${errorText(cause)}`);
showErrorToast(`요청 처리에 실패했습니다: ${errorText(cause)}`);
if (reloadAfterFailure) {
const code = asRecord(asRecord(cause).data).code;
await loadPage(code !== 'TIMEOUT');
@@ -291,7 +293,11 @@ const dieOnPrestart = async () => {
if (code !== 'TIMEOUT') {
window.sessionStorage.removeItem(PENDING_DIE_ON_PRESTART_KEY);
}
alert(`실패했습니다: ${errorText(cause)}`);
await showDialog({
kind: 'error',
title: '장수 삭제 실패',
message: `요청 처리에 실패했습니다: ${errorText(cause)}\n확인 후 페이지를 새로고침합니다.`,
});
window.location.reload();
}
};
app/game-frontend/src/views/MySettingsView.vue
+5 -3
View File
@@ -2,10 +2,12 @@
import { computed, onMounted, reactive, ref, watch } from 'vue';
import PanelCard from '../components/ui/PanelCard.vue';
import SkeletonLines from '../components/ui/SkeletonLines.vue';
import { useGameFeedback } from '../composables/useGameFeedback';
import { trpc } from '../utils/trpc';
const CUSTOM_CSS_KEY = 'sammo-custom-css';
const SCREEN_MODE_KEY = 'sammo-screen-mode';
const { success: showSuccessToast, error: showErrorToast } = useGameFeedback();
type MyGeneralResponse = Awaited<ReturnType<typeof trpc.general.me.query>>;
@@ -170,7 +172,7 @@ const loadSettings = async () => {
const saveSettings = async () => {
if (!canSave.value) {
alert('설정 저장 가능 횟수가 없습니다.');
showErrorToast('설정 저장 가능 횟수가 없습니다.');
return;
}
@@ -182,9 +184,9 @@ const saveSettings = async () => {
use_auto_nation_turn: resolveNumber(form.use_auto_nation_turn, 1),
});
await loadSettings();
alert('설정을 저장했습니다.');
showSuccessToast('설정을 저장했습니다.');
} catch (err) {
alert(`실패했습니다: ${resolveErrorMessage(err)}`);
showErrorToast(`설정 저장에 실패했습니다: ${resolveErrorMessage(err)}`);
}
};
app/game-frontend/src/views/NationPersonnelView.vue
+3 -1
View File
@@ -2,6 +2,7 @@
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useGameFeedback } from '../composables/useGameFeedback';
import { resolveGeneralIconBackgroundImage } from '../utils/generalIcon';
import { trpc } from '../utils/trpc';
import { cityLevelMap, formatOfficerLevelText, getNationChiefLevel, regionMap } from '../utils/nationFormat';
@@ -27,6 +28,7 @@ const kickTargetId = ref(0);
const ambassadorSelection = ref<number[]>([]);
const auditorSelection = ref<number[]>([]);
const router = useRouter();
const { error: showErrorToast } = useGameFeedback();
const resolveErrorMessage = (value: unknown): string =>
value instanceof Error ? value.message : typeof value === 'string' ? value : 'unknown_error';
@@ -157,7 +159,7 @@ const appointCityOfficer = async (level: OfficerLevel) => {
const enforcePermissionLimit = (selection: number[]) => {
if (selection.length <= 2) return;
selection.splice(0, selection.length - 2);
window.alert('최대 2명까지 설정 가능합니다.');
showErrorToast('최대 2명까지 설정 가능합니다.');
};
const changePermissions = async (isAmbassador: boolean) => {
app/game-frontend/src/views/SelectGeneralView.vue
+8 -6
View File
@@ -2,6 +2,7 @@
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useGameFeedback } from '../composables/useGameFeedback';
import { useSessionStore } from '../stores/session';
import { formatSeoulDateTime } from '../utils/legacyDateTime';
import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
@@ -21,6 +22,7 @@ type PendingSelectionAction = {
const router = useRouter();
const session = useSessionStore();
const { error: showErrorToast, showDialog } = useGameFeedback();
const config = ref<JoinConfig | null>(null);
const reservation = ref<Reservation | null>(null);
@@ -181,7 +183,7 @@ const selectCandidate = async (candidate: Candidate): Promise<void> => {
clientRequestId: pending.clientRequestId,
});
clearPendingAction(pending);
alert('선택한 장수로 변경했습니다.');
await showDialog({ kind: 'success', message: '선택한 장수로 변경했습니다.' });
await session.refreshGeneralStatus();
await router.push('/');
} catch (cause) {
@@ -189,7 +191,7 @@ const selectCandidate = async (candidate: Candidate): Promise<void> => {
if (!isIndeterminateTimeout(cause)) {
clearPendingAction(pending);
}
alert(`실패했습니다: ${errorText(cause)}`);
showErrorToast(`장수 변경에 실패했습니다: ${errorText(cause)}`);
await loadPage();
} finally {
submitting.value = false;
@@ -199,7 +201,7 @@ const selectCandidate = async (candidate: Candidate): Promise<void> => {
const createGeneral = async (): Promise<void> => {
const candidate = selectedCandidate.value;
if (!candidate) {
alert('장수를 선택해주세요!');
showErrorToast('장수를 선택해주세요.');
return;
}
if (!confirm('이 장수로 생성할까요?')) {
@@ -215,7 +217,7 @@ const createGeneral = async (): Promise<void> => {
clientRequestId: pending.clientRequestId,
});
clearPendingAction(pending);
alert('선택한 장수로 생성했습니다.');
await showDialog({ kind: 'success', message: '선택한 장수로 생성했습니다.' });
await session.refreshGeneralStatus();
await router.push('/');
} catch (cause) {
@@ -223,7 +225,7 @@ const createGeneral = async (): Promise<void> => {
if (!isIndeterminateTimeout(cause)) {
clearPendingAction(pending);
}
alert(`실패했습니다: ${errorText(cause)}`);
showErrorToast(`장수 생성에 실패했습니다: ${errorText(cause)}`);
await loadPage();
} finally {
submitting.value = false;
@@ -247,7 +249,7 @@ async function loadPage(): Promise<void> {
} catch (cause) {
console.error(cause);
error.value = errorText(cause);
alert(`실패했습니다: ${error.value}`);
showErrorToast(`장수 선택 정보를 불러오지 못했습니다: ${error.value}`);
} finally {
loading.value = false;
}