Toggle Board Hint

khaled-0 · Jan 20, 2024 · 5f1191a · 5f1191a
1 parent ec6578e
commit 5f1191a
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 37 deletions.
diff --git a/src/app.css b/src/app.css
@@ -6,3 +6,12 @@ body {
 	@apply bg-platinum-900 dark:bg-rich_black-500;
 	@apply text-rich_black-500 dark:text-platinum-900;
 }
+
+button {
+	@apply text-center;
+}
+
+button:active {
+	@apply opacity-80;
+	@apply select-none;
+}
diff --git a/src/lib/components/Player/PlayerDetailsDialog.svelte b/src/lib/components/Player/PlayerDetailsDialog.svelte
@@ -25,10 +25,11 @@
 		</div>
 		{#if playerScore?.words.length}
 			<div class="global-field">
-				<label for="message" class="block mb-2"
+				<label for="wordslist" class="block mb-2"
 					>Words <span class="float-end">({playerScore.words.length})</span></label
 				>
 				<textarea
+					id="wordslist"
 					readonly
 					rows="9"
 					value={playerScore.words.map((w) => `${w}(${w.length})`).join(', ')}

diff --git a/src/lib/components/Preference/Preference.svelte b/src/lib/components/Preference/Preference.svelte
diff --git a/src/lib/components/Preference/PreferenceDialog.svelte b/src/lib/components/Preference/PreferenceDialog.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-	import Preference from './Preference.svelte';
+	import ScaleControl from './ScaleControl.svelte';
+	import TogglePreference from './TogglePreference.svelte';
 	export let dialog: HTMLDialogElement;
 
+	export let boardHint: boolean;
+	export let boardScale: number;
+
 	const dispatch = createEventDispatcher<{
 		centerBoard: void;
+		scaleUpdate: number;
 	}>();
 </script>
 
@@ -14,28 +19,11 @@
 		<button class="rounded-xl h-5 w-5 bg-red-600" on:click={() => dialog.close()} />
 	</div>
 	<div class="body">
-		<Preference title="Board Hint" />
-		<div class="global-field p-2">
-			<div class="ml-auto w-fit">
-				<button
-					type="button"
-					on:click={() => dispatch('centerBoard')}
-					class="global-container-bg active:opacity-80 select-none font-medium rounded-lg text-sm pr-1 py-0.5 text-center inline-flex items-center"
-				>
-					<svg
-						class="h-8 w-8 p-2 fill-current"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 122.88 109.78"
-						><path
-							d="M28.94,13.7l.09-.09,5.65-5.67.15-.13c2.61-2.4,5.24-1.62,6.76,1.44a1.59,1.59,0,0,1,.16.54c1.25,10.35,2.1,20.29,3.34,30.64.25,3.42-2.08,4.84-5.24,4.47l-28.21-3c-4.92-.58-7.36-3.84-3.42-7.78,1.78-1.77,3.54-3.58,5.34-5.32l-13-13a2,2,0,0,1,0-2.8L13,.58a2,2,0,0,1,2.81,0L28.94,13.7Zm32.5,27.58A13.61,13.61,0,1,1,47.83,54.89,13.61,13.61,0,0,1,61.44,41.28Zm32.5,54.8-.09.09-5.66,5.67a.86.86,0,0,1-.14.13c-2.61,2.4-5.24,1.62-6.76-1.44a1.58,1.58,0,0,1-.16-.55C79.88,89.64,79,79.7,77.79,69.35c-.25-3.42,2.07-4.84,5.24-4.47l28.21,3c4.92.58,7.36,3.84,3.42,7.78-1.78,1.77-3.54,3.58-5.34,5.32l13,13a2,2,0,0,1,0,2.8l-12.42,12.43a2,2,0,0,1-2.81,0L93.94,96.08Zm-65,0,.09.09,5.65,5.67.15.13c2.61,2.4,5.24,1.62,6.76-1.44a1.58,1.58,0,0,0,.16-.55C43,89.64,43.85,79.7,45.09,69.35c.25-3.42-2.08-4.84-5.24-4.47l-28.21,3c-4.92.58-7.36,3.84-3.42,7.78C10,77.44,11.76,79.25,13.56,81L.58,94a2,2,0,0,0,0,2.8L13,109.21a2,2,0,0,0,2.81,0L28.94,96.08Zm65-82.38-.09-.09L88.19,7.94a.86.86,0,0,0-.14-.13c-2.61-2.4-5.24-1.62-6.76,1.44a1.59,1.59,0,0,0-.16.54C79.88,20.14,79,30.08,77.79,40.43c-.25,3.42,2.07,4.84,5.24,4.47l28.21-3c4.92-.58,7.36-3.84,3.42-7.78-1.78-1.77-3.54-3.58-5.34-5.32l13-13a2,2,0,0,0,0-2.8L109.88.58a2,2,0,0,0-2.81,0L93.94,13.7Z"
-						/></svg
-					>
-					Recenter
-				</button>
-			</div>
-		</div>
-		<Preference title="Board Hint" />
+		<TogglePreference title="Board Hint" bind:checked={boardHint} />
+		<ScaleControl
+			on:centerBoard={() => dispatch('centerBoard')}
+			on:scaleUpdate={(event) => (boardScale = event.detail)}
+		/>
 	</div>
 </dialog>
 

diff --git a/src/lib/components/Preference/PreferenceHandler.ts b/src/lib/components/Preference/PreferenceHandler.ts
@@ -1,7 +1,10 @@
 export function centerBoard(element: HTMLElement | null) {
 	if (element == null) return;
+	const transitionBackup = element.style.transition;
+	element.style.transition += 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)';
 	element.style.top = '';
 	element.style.bottom = '';
 	element.style.left = '';
 	element.style.right = '';
+	setTimeout(() => (element.style.transition = transitionBackup), 150);
 }
diff --git a/src/lib/components/Preference/ScaleControl.svelte b/src/lib/components/Preference/ScaleControl.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher<{ scaleUpdate: number; centerBoard: void }>();
+
+	let scale = 5;
+	const scaleMap: Record<number, number> = {
+		1: 0.5,
+		2: 0.6,
+		3: 0.75,
+		4: 0.9,
+		5: 1,
+		6: 1.1,
+		7: 1.2,
+		8: 1.3,
+		9: 1.5
+	};
+
+	$: scale && dispatch('scaleUpdate', scaleMap[scale]);
+</script>
+
+<div class="global-field p-1.5 flex items-center large:flex-row flex-col">
+	Board Scale
+	<div class="flex items-center">
+		<button
+			class="ml-2 px-2 py-1 rounded-lg global-container-bg"
+			on:click={() => (scale = Math.max(scale - 1, 1))}
+		>
+			-
+		</button>
+		<span class="p-4">{scale}</span>
+		<button
+			class="px-2 py-1 rounded-lg global-container-bg"
+			on:click={() => (scale = Math.min(scale + 1, 9))}
+		>
+			+
+		</button>
+		<div class="h-6 w-0.5 global-container-bg ml-2" />
+		<button
+			on:click={() => (scale = 5)}
+			class="ml-2 global-container-bg font-medium rounded-lg text-sm pr-1 py-0.5 text-center inline-flex items-center"
+		>
+			<svg
+				class="p-0.5 h-6 w-6 large:h-8 large:w-8"
+				viewBox="0 0 21 21"
+				xmlns="http://www.w3.org/2000/svg"
+				><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M4 6a8 8 0 1 1-1 5" />
+					<path d="M8 7H4V3" />
+				</g>
+			</svg>
+		</button>
+	</div>
+
+	<div class="large:ml-auto w-fit">
+		<button
+			on:click={() => dispatch('centerBoard')}
+			class="global-container-bg font-medium rounded-lg text-sm pr-1 py-0.5 text-center inline-flex items-center"
+			><svg
+				class="p-0.5 h-6 w-6 large:h-8 large:w-8 fill-current"
+				viewBox="0 0 32 32"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					d="M6 12H4V4h8v2H6v6zM28 12h-2V6h-6V4h8v8zM12 28H4v-8h2v6h6v2zM28 28h-8v-2h6v-6h2v8zM15 10h2v4h-2zM10 15h4v2h-4zM18 15h4v2h-4zM15 18h2v4h-2z"
+				/></svg
+			>Recenter
+		</button>
+	</div>
+</div>
diff --git a/src/lib/components/Preference/TogglePreference.svelte b/src/lib/components/Preference/TogglePreference.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Switch from '../Switch.svelte';
+
+	export let title: string;
+	export let checked: boolean;
+</script>
+
+<div class="global-field p-2 flex items-center justify-between">
+	{title}
+	<Switch bind:checked />
+</div>
diff --git a/src/lib/components/Switch.svelte b/src/lib/components/Switch.svelte
@@ -0,0 +1,37 @@
+<script>
+	export let checked = false;
+</script>
+
+<label class="switch">
+	<input class="opacity-0 w-0 h-0" type="checkbox" bind:checked />
+	<span class="slider" />
+</label>
+
+<style lang="postcss">
+	.switch {
+		@apply relative inline-block;
+		@apply large:h-8 large:w-14 h-6 w-11;
+	}
+
+	.slider {
+		@apply absolute cursor-pointer rounded-3xl;
+		@apply top-0 left-0 right-0 bottom-0;
+		@apply global-container-bg;
+	}
+
+	.slider:before {
+		@apply absolute content-[''];
+		@apply left-0 top-[10%] bottom-[10%];
+		@apply h-5 w-5 large:h-6 large:w-6 rounded-full;
+		@apply bg-rich_black-600 dark:bg-platinum-600;
+		@apply transition-[left,right];
+	}
+
+	input:checked + .slider {
+		@apply bg-glaucous-600;
+	}
+
+	input:checked + .slider:before {
+		@apply right-0 left-[55%];
+	}
+</style>
diff --git a/src/routes/game/+page.svelte b/src/routes/game/+page.svelte
@@ -34,8 +34,7 @@
 		});
 
 	let preferenceDialog: HTMLDialogElement;
-	let boardHint: boolean = true;
-
+	let boardHint: boolean = false;
 	let boardScale = 1;
 
 	onMount(() => {
@@ -88,10 +87,6 @@
 </div>
 
 <div class="interaction-container">
-	<!-- <button class="z-20" on:click={() => (boardScale += 1)}>++++++</button>
-	<button class="z-20" on:click={() => (boardScale -= 1)}>-------</button> -->
-	<!-- TODO Toggle Preference Window -->
-
 	<Interaction
 		{currentPlayer}
 		{playersList}
@@ -102,6 +97,8 @@
 
 <PreferenceDialog
 	bind:dialog={preferenceDialog}
+	bind:boardHint
+	bind:boardScale
 	on:centerBoard={() => {
 		PreferenceHandler.centerBoard(document.getElementById('game-board'));
 	}}
@@ -112,6 +109,7 @@
 		@apply left-0 right-0 top-0 bottom-0;
 		@apply fixed flex items-center justify-center;
 		@apply w-full large:w-3/4 h-4/6 large:h-full;
+		@apply transition-[scale];
 	}
 
 	.interaction-container {