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

feat: remove unused import from completion page
All checks were successful
Migrate supabase / migrate (push) Successful in 15s
Details

Browse Source
This commit is contained in:
whidix
2026-03-08 19:44:41 +01:00
parent 4c44d98444
commit fbdf6bc27c
2 changed files with 205 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
src/lib/components/StepForm.svelte
View File

@@ -77,47 +77,6 @@
fileInput.value = ''; fileInput.value = '';
} }
} }
let fieldConfig = $derived.by(() => {
switch (selectedType) {
case 'text':
return {
contentLabel: 'Text to display',
contentPlaceholder: 'Text shown to players',
showLocation: false,
showAnswer: false,
showHint: false,
showPuzzle: false
};
case 'location':
return {
contentLabel: 'Location instruction',
contentPlaceholder: 'Describe where players need to go',
showLocation: true,
showAnswer: true,
showHint: true,
showPuzzle: false
};
case 'puzzle':
return {
contentLabel: 'Puzzle statement',
contentPlaceholder: 'Describe the puzzle to solve',
showLocation: false,
showAnswer: true,
showHint: true,
showPuzzle: true
};
default:
return {
contentLabel: 'Question',
contentPlaceholder: 'Enter the question for players',
showLocation: false,
showAnswer: true,
showHint: true,
showPuzzle: false
};
}
});
</script> </script>
<div class="min-h-screen bg-gray-50"> <div class="min-h-screen bg-gray-50">
@@ -185,7 +144,11 @@
/> />
</div> </div>
<div class="col-span-2"> {#if selectedType === 'text'}
<div class="col-span-2 p-4 bg-gray-50 rounded-lg border border-gray-200">
<h3 class="text-sm font-semibold text-gray-900 mb-4">Text Content</h3>
<div class="space-y-4">
<div>
<label for="description" class="block text-sm font-medium text-gray-700 mb-2"> <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
Description Description
</label> </label>
@@ -197,24 +160,51 @@
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none"
>{initialValues.description}</textarea> >{initialValues.description}</textarea>
</div> </div>
<div>
<div class="col-span-2">
<label for="content" class="block text-sm font-medium text-gray-700 mb-2"> <label for="content" class="block text-sm font-medium text-gray-700 mb-2">
{fieldConfig.contentLabel} Text to display
</label> </label>
<textarea <textarea
id="content" id="content"
name="content" name="content"
placeholder={fieldConfig.contentPlaceholder} placeholder="Text shown to players"
rows="4" rows="4"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none"
>{initialValues.content}</textarea> >{initialValues.content}</textarea>
</div> </div>
</div>
{#if fieldConfig.showAnswer} </div>
<div class="col-span-2"> {:else if selectedType === 'question'}
<div class="col-span-2 p-4 bg-indigo-50 rounded-lg border border-indigo-200">
<h3 class="text-sm font-semibold text-indigo-900 mb-4">Question Configuration</h3>
<div class="space-y-4">
<div>
<label for="description" class="block text-sm font-medium text-gray-700 mb-2">
Description
</label>
<textarea
id="description"
name="description"
placeholder="Describe this step"
rows="3"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none"
>{initialValues.description}</textarea>
</div>
<div>
<label for="content" class="block text-sm font-medium text-gray-700 mb-2">
Question
</label>
<textarea
id="content"
name="content"
placeholder="Enter the question for players"
rows="4"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none"
>{initialValues.content}</textarea>
</div>
<div>
<label for="answer" class="block text-sm font-medium text-gray-700 mb-2"> <label for="answer" class="block text-sm font-medium text-gray-700 mb-2">
Expected answer Expected answer <span class="text-red-500">*</span>
</label> </label>
<input <input
id="answer" id="answer"
@@ -223,12 +213,10 @@
value={initialValues.answer} value={initialValues.answer}
placeholder="Expected answer for this step" placeholder="Expected answer for this step"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors"
required
/> />
</div> </div>
{/if} <div>
{#if fieldConfig.showHint}
<div class="col-span-2">
<label for="hint" class="block text-sm font-medium text-gray-700 mb-2"> <label for="hint" class="block text-sm font-medium text-gray-700 mb-2">
Hint Hint
</label> </label>
@@ -240,66 +228,36 @@
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none"
>{initialValues.hint}</textarea> >{initialValues.hint}</textarea>
</div> </div>
{/if}
{#if fieldConfig.showLocation}
<div class="col-span-2 p-4 bg-blue-50 rounded-lg border border-blue-200">
<h3 class="text-sm font-semibold text-blue-900 mb-4">Location Coordinates</h3>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="latitude" class="block text-sm font-medium text-gray-700 mb-2">
Latitude <span class="text-red-500">*</span>
</label>
<input
id="latitude"
type="number"
step="any"
name="latitude"
value={initialValues.latitude ?? ''}
placeholder="e.g., 48.8566"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors"
required
/>
</div>
<div>
<label for="longitude" class="block text-sm font-medium text-gray-700 mb-2">
Longitude <span class="text-red-500">*</span>
</label>
<input
id="longitude"
type="number"
step="any"
name="longitude"
value={initialValues.longitude ?? ''}
placeholder="e.g., 2.3522"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors"
required
/>
</div>
<div class="col-span-2">
<label for="proximityRadius" class="block text-sm font-medium text-gray-700 mb-2">
Proximity Radius (meters)
</label>
<input
id="proximityRadius"
type="number"
name="proximityRadius"
value={initialValues.proximityRadius ?? 50}
min="5"
max="500"
placeholder="50"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors"
/>
<p class="text-xs text-gray-500 mt-1">Distance in meters within which the step will be validated (default: 50m)</p>
</div> </div>
</div> </div>
</div> {:else if selectedType === 'puzzle'}
{/if}
{#if fieldConfig.showPuzzle}
<div class="col-span-2 p-4 bg-purple-50 rounded-lg border border-purple-200"> <div class="col-span-2 p-4 bg-purple-50 rounded-lg border border-purple-200">
<h3 class="text-sm font-semibold text-purple-900 mb-4">Puzzle Configuration</h3> <h3 class="text-sm font-semibold text-purple-900 mb-4">Puzzle Configuration</h3>
<div class="space-y-4"> <div class="space-y-4">
<div>
<label for="description" class="block text-sm font-medium text-gray-700 mb-2">
Description
</label>
<textarea
id="description"
name="description"
placeholder="Describe this step"
rows="3"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none"
>{initialValues.description}</textarea>
</div>
<div>
<label for="content" class="block text-sm font-medium text-gray-700 mb-2">
Puzzle statement
</label>
<textarea
id="content"
name="content"
placeholder="Describe the puzzle to solve"
rows="4"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none"
>{initialValues.content}</textarea>
</div>
<div> <div>
<label for="puzzleImage" class="block text-sm font-medium text-gray-700 mb-2"> <label for="puzzleImage" class="block text-sm font-medium text-gray-700 mb-2">
Puzzle Image {#if !initialValues.imageUrl}<span class="text-red-500">*</span>{/if} Puzzle Image {#if !initialValues.imageUrl}<span class="text-red-500">*</span>{/if}
@@ -349,7 +307,6 @@
Upload an image for the puzzle. Accepted formats: JPG, PNG, GIF, WebP (max 10MB) Upload an image for the puzzle. Accepted formats: JPG, PNG, GIF, WebP (max 10MB)
</p> </p>
</div> </div>
<div> <div>
<label for="puzzlePieces" class="block text-sm font-medium text-gray-700 mb-2"> <label for="puzzlePieces" class="block text-sm font-medium text-gray-700 mb-2">
Number of Pieces Number of Pieces
@@ -366,6 +323,108 @@
/> />
<p class="text-xs text-gray-500 mt-1">Recommended: 4 (2×2), 9 (3×3), 16 (4×4), or 25 (5×5) pieces</p> <p class="text-xs text-gray-500 mt-1">Recommended: 4 (2×2), 9 (3×3), 16 (4×4), or 25 (5×5) pieces</p>
</div> </div>
<div>
<label for="hint" class="block text-sm font-medium text-gray-700 mb-2">
Hint
</label>
<textarea
id="hint"
name="hint"
placeholder="Optional hint for players"
rows="2"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none"
>{initialValues.hint}</textarea>
</div>
</div>
</div>
{:else if selectedType === 'location'}
<div class="col-span-2 p-4 bg-blue-50 rounded-lg border border-blue-200">
<h3 class="text-sm font-semibold text-blue-900 mb-4">Location Configuration</h3>
<div class="space-y-4">
<div>
<label for="description" class="block text-sm font-medium text-gray-700 mb-2">
Description
</label>
<textarea
id="description"
name="description"
placeholder="Describe this step"
rows="3"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none"
>{initialValues.description}</textarea>
</div>
<div>
<label for="content" class="block text-sm font-medium text-gray-700 mb-2">
Location instruction
</label>
<textarea
id="content"
name="content"
placeholder="Describe where players need to go"
rows="4"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none"
>{initialValues.content}</textarea>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="latitude" class="block text-sm font-medium text-gray-700 mb-2">
Latitude <span class="text-red-500">*</span>
</label>
<input
id="latitude"
type="number"
step="any"
name="latitude"
value={initialValues.latitude ?? ''}
placeholder="e.g., 48.8566"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors"
required
/>
</div>
<div>
<label for="longitude" class="block text-sm font-medium text-gray-700 mb-2">
Longitude <span class="text-red-500">*</span>
</label>
<input
id="longitude"
type="number"
step="any"
name="longitude"
value={initialValues.longitude ?? ''}
placeholder="e.g., 2.3522"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors"
required
/>
</div>
<div class="col-span-2">
<label for="proximityRadius" class="block text-sm font-medium text-gray-700 mb-2">
Proximity Radius (meters)
</label>
<input
id="proximityRadius"
type="number"
name="proximityRadius"
value={initialValues.proximityRadius ?? 50}
min="5"
max="500"
placeholder="50"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors"
/>
<p class="text-xs text-gray-500 mt-1">Distance in meters within which the step will be validated (default: 50m)</p>
</div>
</div>
<div>
<label for="hint" class="block text-sm font-medium text-gray-700 mb-2">
Hint
</label>
<textarea
id="hint"
name="hint"
placeholder="Optional hint for players"
rows="2"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:outline-none transition-colors resize-none"
>{initialValues.hint}</textarea>
</div>
</div> </div>
</div> </div>
{/if} {/if}

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

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { resolve } from '$app/paths';
import type { PageData } from './$types'; import type { PageData } from './$types';
import { t } from '$lib/i18n'; import { t } from '$lib/i18n';