Fixed Scale Controls

khaled-0 · Mar 5, 2024 · 80450cd · 80450cd
1 parent be40b03
commit 80450cd
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 27 deletions.
diff --git a/src/lib/components/AlertBoard.svelte b/src/lib/components/AlertBoard.svelte
@@ -13,8 +13,10 @@
 		<div class="flex items-center mx-0.5 large:mx-1">
 			<span class="color" style="--color:{alert.color}"></span>
 			<div class="ms-2 flex gap-2">
-				<div class="text-sm font-semibold text-gray-900 dark:text-white">{alert.title}</div>
-				<div class="text-sm font-normal">{alert.message}</div>
+				<div class="text-sm large:text-xl font-semibold text-gray-900 dark:text-white">
+					{alert.title}
+				</div>
+				<div class="text-sm large:text-lg font-normal">{alert.message}</div>
 			</div>
 		</div>
 		<template slot="close-button"> {addToDismissQueue(alert)}</template>

diff --git a/src/lib/components/Preference/PreferenceDialog.svelte b/src/lib/components/Preference/PreferenceDialog.svelte
@@ -10,16 +10,12 @@
 
 	const dispatch = createEventDispatcher<{
 		centerBoard: void;
-		scaleUpdate: number;
 	}>();
 </script>
 
 <Modal class="divide-none" size="sm" bind:open title="Preference">
 	<div>
 		<TogglePreference title="Board Hint" bind:checked={boardHint} />
-		<ScaleControl
-			on:centerBoard={() => dispatch('centerBoard')}
-			on:scaleUpdate={(event) => (boardScale = event.detail)}
-		/>
+		<ScaleControl bind:scale={boardScale} on:centerBoard={() => dispatch('centerBoard')} />
 	</div>
 </Modal>
diff --git a/src/lib/components/Preference/ScaleControl.svelte b/src/lib/components/Preference/ScaleControl.svelte
@@ -3,27 +3,17 @@
 	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]);
+	export let scale: number;
 </script>
 
 <div class="global-field p-1.5 flex items-center large:flex-row flex-col">
 	<P>Board Scale</P>
 	<div class="flex items-center">
-		<Button outline class="ml-2 p-0.5" on:click={() => (scale = Math.max(scale - 1, 1))}>
+		<Button
+			outline
+			class="ml-2 p-0.5"
+			on:click={() => (scale = Number(Math.max(scale - 0.1, 0.7).toFixed(1)))}
+		>
 			<svg
 				class="w-6 h-6"
 				aria-hidden="true"
@@ -41,7 +31,11 @@
 			</svg>
 		</Button>
 		<span class="p-4">{scale}</span>
-		<Button outline class="p-0.5" on:click={() => (scale = Math.min(scale + 1, 9))}>
+		<Button
+			outline
+			class="p-0.5"
+			on:click={() => (scale = Number(Math.min(scale + 0.1, 1.5).toFixed(1)))}
+		>
 			<svg
 				class="w-6 h-6"
 				aria-hidden="true"
@@ -61,7 +55,7 @@
 
 		<div class="h-6 w-0.5 ml-2 bg-gray-300 dark:bg-slate-700" />
 
-		<Button outline on:click={() => (scale = 5)} class="ml-2 p-1">
+		<Button outline on:click={() => (scale = 1)} class="ml-2 p-1">
 			<svg
 				class="w-6 h-6"
 				aria-hidden="true"

diff --git a/src/lib/components/RangeSlider.svelte b/src/lib/components/RangeSlider.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Range, Label, Button, Card, Spinner } from 'flowbite-svelte';
+	export let size: 'sm' | 'lg' | 'md' | undefined, min: number, max: number, value: number;
+</script>
+
+<div class="flex w-full items-center gap-2">
+	<Button outline class="ml-2 p-0.5" on:click={() => (value = Math.max(value - 1, min))}>
+		<svg
+			class="w-6 h-6"
+			aria-hidden="true"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+		>
+			<path
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M5 12h14"
+			/>
+		</svg>
+	</Button>
+	<Range {size} {min} {max} bind:value />
+	<Button outline class="p-0.5" on:click={() => (value = Math.min(value + 1, max))}>
+		<svg
+			class="w-6 h-6"
+			aria-hidden="true"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+		>
+			<path
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M5 12h14m-7 7V5"
+			/>
+		</svg>
+	</Button>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import PlayerSelection from '$lib/components/Player/PlayerSelection.svelte';
+	import RangeSlider from '$lib/components/RangeSlider.svelte';
 	import type { GameParameter } from '$lib/data/GameParameters';
 	import { PlayersList } from '$lib/data/Player';
 	import { Range, Label, Button, Card, Spinner } from 'flowbite-svelte';
@@ -29,6 +30,7 @@
 		if (gameParams.colors?.length) gameUrl += `&colors=${gameParams.colors.join(',')}`;
 
 		window.location.href = gameUrl;
+		loadingState = false;
 	}
 </script>
 
@@ -40,13 +42,14 @@
 		<Label defaultClass="w-full mb-1"
 			>Board Size<span class="float-end">{gameParams.board}</span></Label
 		>
-		<Range size="lg" min="6" max="16" bind:value={gameParams.board} />
+		<RangeSlider size="lg" min={6} max={16} bind:value={gameParams.board} />
 		<div class="mb-4" />
 
 		<Label defaultClass="w-full mb-1"
 			>Players<span class="float-end">{gameParams.players}</span></Label
 		>
-		<Range size="lg" min="2" max="6" bind:value={gameParams.players} />
+		<RangeSlider size="lg" min={2} max={6} bind:value={gameParams.players} />
+
 		<div class="mb-4" />
 
 		<div class="flex flex-wrap w-full gap-1 justify-center">