fix: wire up EndingGallery click to open ChapterRecap via chapterId
This commit is contained in:
@@ -92,6 +92,7 @@ export interface EndingDef {
|
|||||||
id: string
|
id: string
|
||||||
label: string
|
label: string
|
||||||
sceneId: string
|
sceneId: string
|
||||||
|
chapterId?: string
|
||||||
thumbnail?: string
|
thumbnail?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -32,9 +32,9 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"endings": [
|
"endings": [
|
||||||
{ "id": "trust_end", "label": "信任的伙伴", "sceneId": "trust_ending", "thumbnail": "/images/end_trust.jpg" },
|
{ "id": "trust_end", "label": "信任的伙伴", "sceneId": "trust_ending", "chapterId": "ch1", "thumbnail": "/images/end_trust.jpg" },
|
||||||
{ "id": "alone_end", "label": "独行之路", "sceneId": "alone_ending", "thumbnail": "/images/end_alone.jpg" },
|
{ "id": "alone_end", "label": "独行之路", "sceneId": "alone_ending", "chapterId": "ch1", "thumbnail": "/images/end_alone.jpg" },
|
||||||
{ "id": "continue_end", "label": "继续前行", "sceneId": "continue_ending", "thumbnail": "/images/end_continue.jpg" }
|
{ "id": "continue_end", "label": "继续前行", "sceneId": "continue_ending", "chapterId": "ch3", "thumbnail": "/images/end_continue.jpg" }
|
||||||
],
|
],
|
||||||
"chapters": [
|
"chapters": [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -240,6 +240,7 @@ init()
|
|||||||
:endings="store.endings"
|
:endings="store.endings"
|
||||||
:visited-ids="store.visitedSceneIds"
|
:visited-ids="store.visitedSceneIds"
|
||||||
@close="showEndingGallery = false"
|
@close="showEndingGallery = false"
|
||||||
|
@select-chapter="(chId: string) => { showEndingGallery = false; recapChapterId = chId }"
|
||||||
/>
|
/>
|
||||||
<ChapterRecap
|
<ChapterRecap
|
||||||
v-if="recapChapterId"
|
v-if="recapChapterId"
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ defineProps<{
|
|||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
close: []
|
close: []
|
||||||
|
selectChapter: [chapterId: string]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
function isUnlocked(ending: EndingDef, visitedIds: Set<string>): boolean {
|
function isUnlocked(ending: EndingDef, visitedIds: Set<string>): boolean {
|
||||||
@@ -25,7 +26,8 @@ function isUnlocked(ending: EndingDef, visitedIds: Set<string>): boolean {
|
|||||||
v-for="end in endings"
|
v-for="end in endings"
|
||||||
:key="end.id"
|
:key="end.id"
|
||||||
class="ending-card"
|
class="ending-card"
|
||||||
:class="{ locked: !isUnlocked(end, visitedIds) }"
|
:class="{ locked: !isUnlocked(end, visitedIds), clickable: isUnlocked(end, visitedIds) && !!end.chapterId }"
|
||||||
|
@click="isUnlocked(end, visitedIds) && end.chapterId && emit('selectChapter', end.chapterId)"
|
||||||
>
|
>
|
||||||
<div class="ending-thumb">
|
<div class="ending-thumb">
|
||||||
<img v-if="end.thumbnail" :src="end.thumbnail" class="thumb-img" />
|
<img v-if="end.thumbnail" :src="end.thumbnail" class="thumb-img" />
|
||||||
@@ -89,6 +91,16 @@ function isUnlocked(ending: EndingDef, visitedIds: Set<string>): boolean {
|
|||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ending-card.clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ending-card.clickable:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
transform: scale(1.05);
|
||||||
|
transition: transform 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
.ending-thumb {
|
.ending-thumb {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 68px;
|
height: 68px;
|
||||||
|
|||||||
Reference in New Issue
Block a user