Whidix/Escape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update step navigation to use step order instead of IDs
All checks were successful
Migrate supabase / migrate (push) Successful in 15s
Details

Browse Source
This commit is contained in:
whidix
2026-03-08 21:36:44 +01:00
parent 09794bdefd
commit c03c3a4534
3 changed files with 13 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/routes/(game)/game/play/[sessionCode]/+layout.server.ts
View File

@@ -71,21 +71,21 @@ export const load: LayoutServerLoad = async ({ params, url }) => {
? steps.filter((entry) => entry.order <= currentStep.order)
: steps;
const requestedStepId = Number.parseInt(url.searchParams.get('step') ?? '', 10);
const isRequestedStepUnlocked = unlockedSteps.some((entry) => entry.id === requestedStepId);
const requestedStepOrder = Number.parseInt(url.searchParams.get('step') ?? '', 10);
const isRequestedStepUnlocked = unlockedSteps.some((entry) => entry.order === requestedStepOrder);
const displayedStepRecord = isRequestedStepUnlocked
? (unlockedSteps.find((entry) => entry.id === requestedStepId) ?? null)
? (unlockedSteps.find((entry) => entry.order === requestedStepOrder) ?? null)
: (currentStep ?? unlockedSteps.at(-1) ?? null);
const displayedStepIndex = displayedStepRecord
? unlockedSteps.findIndex((entry) => entry.id === displayedStepRecord.id)
: -1;
const previousStepId = displayedStepIndex > 0 ? unlockedSteps[displayedStepIndex - 1].id : null;
const nextStepId =
const previousStepOrder = displayedStepIndex > 0 ? unlockedSteps[displayedStepIndex - 1].order : null;
const nextStepOrder =
displayedStepIndex >= 0 && displayedStepIndex < unlockedSteps.length - 1
? unlockedSteps[displayedStepIndex + 1].id
? unlockedSteps[displayedStepIndex + 1].order
: null;
return {
@@ -114,8 +114,8 @@ export const load: LayoutServerLoad = async ({ params, url }) => {
title: entry.title,
isCompleted: completedStepIds.has(entry.id)
})),
previousStepId,
nextStepId,
previousStepOrder,
nextStepOrder,
collectedItems: session.collectedItems.map((entry) => ({
id: entry.item.id,
name: entry.item.name,

8
src/routes/(game)/game/play/[sessionCode]/+layout.svelte
View File

@@ -91,9 +91,9 @@
</svg>
</button>
{#if data.previousStepId}
{#if data.previousStepOrder}
<form method="GET" action={resolve('/(game)/game/play/[sessionCode]', { sessionCode: data.sessionCode })}>
<input type="hidden" name="step" value={data.previousStepId} />
<input type="hidden" name="step" value={data.previousStepOrder} />
<button
type="submit"
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-center text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100"
@@ -107,9 +107,9 @@
</span>
{/if}
{#if data.nextStepId}
{#if data.nextStepOrder}
<form method="GET" action={resolve('/(game)/game/play/[sessionCode]', { sessionCode: data.sessionCode })}>
<input type="hidden" name="step" value={data.nextStepId} />
<input type="hidden" name="step" value={data.nextStepOrder} />
<button
type="submit"
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-center text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100"

12
src/routes/(game)/game/play/[sessionCode]/+page.svelte
View File

@@ -303,20 +303,10 @@
});
</script>
<div class="min-h-dvh bg-gray-50">
<header class="sticky top-0 z-10 bg-white/95 shadow-sm backdrop-blur">
<div class="mx-auto max-w-4xl px-3 py-3 sm:px-4 sm:py-4">
<h1 class="text-xl font-bold text-gray-900 sm:text-2xl">{$t.home.title}</h1>
<p class="text-sm text-gray-600">{$t.gameplay.progress}: {data.sessionCode || 'Loading...'}</p>
</div>
</header>
<div class="min-h-full bg-gray-50">
<main class="mx-auto max-w-4xl px-3 py-5 sm:px-4 sm:py-8">
<div class="mb-5 sm:mb-8">
<div class="flex items-center justify-between mb-2">
<span class="text-sm font-medium text-gray-700">{$t.gameplay.progress}</span>
<span class="text-xs text-gray-500 sm:text-sm">{$t.gameplay.step} {data.currentStepOrder || 0} {$t.gameplay.of} {data.totalSteps || 0}</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div
class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300"