fix: hoist prompt toast to App.vue so it survives ChoicePanel unmount after selection
This commit is contained in:
35
src/App.vue
35
src/App.vue
@@ -26,6 +26,8 @@ const showChapterSelect = ref(false)
|
||||
const hasAutoSave = ref(false)
|
||||
const currentSpeed = ref(1)
|
||||
const canSkip = ref(false)
|
||||
const promptToast = ref('')
|
||||
const showPromptToast = ref(false)
|
||||
|
||||
const { loadGame, start, resumeAutoSave, makeChoice, clickHotspot, startChapter,
|
||||
skipScene, setSpeed, getSpeed, isSceneWatched,
|
||||
@@ -57,6 +59,12 @@ function onChoose(index: number) {
|
||||
makeChoice(index)
|
||||
}
|
||||
|
||||
function onPrompt(text: string) {
|
||||
promptToast.value = text
|
||||
showPromptToast.value = true
|
||||
setTimeout(() => { showPromptToast.value = false }, 2500)
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
showMenu.value = !showMenu.value
|
||||
if (showMenu.value) {
|
||||
@@ -167,7 +175,11 @@ init()
|
||||
:timer-total="store.timerTotal"
|
||||
:timer-remaining="store.timerRemaining"
|
||||
@choose="onChoose"
|
||||
@prompt="onPrompt"
|
||||
/>
|
||||
<Transition name="prompt-toast">
|
||||
<div v-if="showPromptToast" class="prompt-toast">{{ promptToast }}</div>
|
||||
</Transition>
|
||||
<div v-if="started && !store.gameEnded" class="top-bar">
|
||||
<LangSwitch />
|
||||
<PlaybackBar
|
||||
@@ -356,4 +368,27 @@ html, body {
|
||||
.end-btn:hover {
|
||||
background: rgba(255, 200, 100, 0.15);
|
||||
}
|
||||
|
||||
.prompt-toast {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 16px 36px;
|
||||
font-size: 20px;
|
||||
color: #ffc107;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
border: 1px solid rgba(255, 193, 7, 0.4);
|
||||
border-radius: 6px;
|
||||
letter-spacing: 3px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.prompt-toast-enter-active { transition: opacity 0.3s ease; }
|
||||
.prompt-toast-leave-active { transition: opacity 0.8s ease; }
|
||||
.prompt-toast-enter-from,
|
||||
.prompt-toast-leave-to { opacity: 0; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user