From fbdf6bc27caec207abb08056d5458e90ba5a21b6 Mon Sep 17 00:00:00 2001
From: whidix <theodor.vallier@whidix.dev>
Date: Sun, 8 Mar 2026 19:44:41 +0100
Subject: [PATCH] feat: remove unused import from completion page

---
 src/lib/components/StepForm.svelte            | 351 ++++++++++--------
 .../play/[sessionCode]/complete/+page.svelte  |   1 -
 2 files changed, 205 insertions(+), 147 deletions(-)

diff --git a/src/lib/components/StepForm.svelte b/src/lib/components/StepForm.svelte
index c2929d8..ee8cb11 100644
--- a/src/lib/components/StepForm.svelte
+++ b/src/lib/components/StepForm.svelte
@@ -77,47 +77,6 @@
 			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>
 
 <div class="min-h-screen bg-gray-50">
@@ -185,121 +144,120 @@
 						/>
 					</div>
 
-					<div class="col-span-2">
-						<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 class="col-span-2">
-						<label for="content" class="block text-sm font-medium text-gray-700 mb-2">
-							{fieldConfig.contentLabel}
-						</label>
-						<textarea
-							id="content"
-							name="content"
-							placeholder={fieldConfig.contentPlaceholder}
-							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>
-
-					{#if fieldConfig.showAnswer}
-						<div class="col-span-2">
-							<label for="answer" class="block text-sm font-medium text-gray-700 mb-2">
-								Expected answer
-							</label>
-							<input
-								id="answer"
-								type="text"
-								name="answer"
-								value={initialValues.answer}
-								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"
-							/>
-						</div>
-					{/if}
-
-					{#if fieldConfig.showHint}
-						<div class="col-span-2">
-							<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>
-					{/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">
+					{#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="latitude" class="block text-sm font-medium text-gray-700 mb-2">
-										Latitude <span class="text-red-500">*</span>
+									<label for="description" class="block text-sm font-medium text-gray-700 mb-2">
+										Description
 									</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
-									/>
+									<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="longitude" class="block text-sm font-medium text-gray-700 mb-2">
-										Longitude <span class="text-red-500">*</span>
+									<label for="content" class="block text-sm font-medium text-gray-700 mb-2">
+										Text to display
 									</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>
+									<textarea
+										id="content"
+										name="content"
+										placeholder="Text shown to 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>
 						</div>
-					{/if}
-
-					{#if fieldConfig.showPuzzle}
+					{: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">
+										Expected answer <span class="text-red-500">*</span>
+									</label>
+									<input
+										id="answer"
+										type="text"
+										name="answer"
+										value={initialValues.answer}
+										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"
+										required
+									/>
+								</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 === 'puzzle'}
 						<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>
 							<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>
 									<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}
@@ -349,7 +307,6 @@
 										Upload an image for the puzzle. Accepted formats: JPG, PNG, GIF, WebP (max 10MB)
 									</p>
 								</div>
-								
 								<div>
 									<label for="puzzlePieces" class="block text-sm font-medium text-gray-700 mb-2">
 										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>
 								</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>
 					{/if}
diff --git a/src/routes/(game)/game/play/[sessionCode]/complete/+page.svelte b/src/routes/(game)/game/play/[sessionCode]/complete/+page.svelte
index 2fd99c0..cf90d4b 100644
--- a/src/routes/(game)/game/play/[sessionCode]/complete/+page.svelte
+++ b/src/routes/(game)/game/play/[sessionCode]/complete/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { resolve } from '$app/paths';
 	import type { PageData } from './$types';
 	import { t } from '$lib/i18n';