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

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

@@ -91,9 +91,9 @@
</svg> </svg>
</button> </button>
{#if data.previousStepId} {#if data.previousStepOrder}
<form method="GET" action={resolve('/(game)/game/play/[sessionCode]', { sessionCode: data.sessionCode })}> <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 <button
type="submit" 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" 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> </span>
{/if} {/if}
{#if data.nextStepId} {#if data.nextStepOrder}
<form method="GET" action={resolve('/(game)/game/play/[sessionCode]', { sessionCode: data.sessionCode })}> <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 <button
type="submit" 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" 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> </script>
<div class="min-h-dvh bg-gray-50"> <div class="min-h-full 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>
<main class="mx-auto max-w-4xl px-3 py-5 sm:px-4 sm:py-8"> <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="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="w-full bg-gray-200 rounded-full h-2.5">
<div <div
class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300" class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300"