From 3bdb9759d30793f98a06932338bf2f94d55fdc35 Mon Sep 17 00:00:00 2001
From: Arnaud Scheffler <arnaud.scheffler@protonmail.com>
Date: Fri, 14 Mar 2025 17:30:29 +0100
Subject: [PATCH] feat: add annotation mode

---
 src/lib/Board.svelte         |  31 ++++-
 src/lib/Cell.svelte          |  35 ++++-
 src/lib/Switch.svelte        | 263 +++++++++++++++++++++++++++++++++++
 src/lib/ValueSelector.svelte |   4 +-
 src/lib/core/board.ts        |   6 +-
 src/routes/+page.svelte      |   4 +-
 6 files changed, 327 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/Switch.svelte

diff --git a/src/lib/Board.svelte b/src/lib/Board.svelte
index f64ab48..a9e8fe9 100644
--- a/src/lib/Board.svelte
+++ b/src/lib/Board.svelte
@@ -6,10 +6,12 @@
 	import { onMount } from 'svelte';
 	import GameCommands from './GameCommands.svelte';
 	import SumIndicator from './SumIndicator.svelte';
+	import Switch from './Switch.svelte';
 
 	let selectedI: number | undefined = undefined;
 	let selectedJ: number | undefined = undefined;
 	let status: 'incomplete' | 'error' | 'won' = 'incomplete';
+	let valueMode: 'Write' | 'Annotation' = 'Write';
 
 	const onSelect = (i: number, j: number) => () => {
 		if (i === selectedI && j === selectedJ) {
@@ -23,14 +25,24 @@
 
 	const onSetValue = (number: number) => {
 		if (selectedI !== undefined && selectedJ !== undefined) {
-			board.grid[selectedI][selectedJ] = number;
-			if (board.isComplete()) {
-				status = board.isValid() ? 'won' : 'error';
-				if (status === 'won') {
-					jsConfetti.addConfetti();
-					selectedI = undefined;
-					selectedJ = undefined;
+			if (valueMode === 'Write') {
+				board.grid[selectedI][selectedJ] = number;
+				if (board.isComplete()) {
+					status = board.isValid() ? 'won' : 'error';
+					if (status === 'won') {
+						jsConfetti.addConfetti();
+						selectedI = undefined;
+						selectedJ = undefined;
+					}
 				}
+			} else {
+				if (number) {
+					const cell = board.annotations[selectedI][selectedJ];
+					if (!cell.includes(number)) board.annotations[selectedI][selectedJ] = [...cell, number];
+				} else {
+					board.annotations[selectedI][selectedJ] = [];
+				}
+				console.log(board);
 			}
 		}
 	};
@@ -38,6 +50,7 @@
 	const onGameCommand = (mode: string) => {
 		if (mode === 'reset') {
 			board.reset();
+			board.grid = board.grid; // to trigger reload
 		} else {
 			board = new Board();
 			if (mode === 'easy') board.prepare(Difficulty.Easy);
@@ -64,6 +77,7 @@
 		{#each row as cell, j}
 			<Cell
 				value={cell}
+				annotations={board.annotations[i][j]}
 				onclick={onSelect(i, j)}
 				selected={selectedI === i && selectedJ === j}
 				disabled={!board.lockedCells[i][j]}
@@ -76,4 +90,7 @@
 	{/each}
 </div>
 
+<div class="flex justify-center py-8">
+	<Switch bind:value={valueMode} design="multi" options={['Annotation', 'Write']} />
+</div>
 <ValueSelector onclick={onSetValue} used={board.getPlacedNumbers()} />
diff --git a/src/lib/Cell.svelte b/src/lib/Cell.svelte
index 4903467..61a73bf 100644
--- a/src/lib/Cell.svelte
+++ b/src/lib/Cell.svelte
@@ -1,14 +1,41 @@
 <script lang="ts">
-	let { value, selected, disabled, onclick } = $props();
+	let {
+		value,
+		annotations,
+		selected,
+		disabled,
+		onclick
+	}: {
+		value: number;
+		annotations: number[];
+		selected: boolean;
+		disabled: boolean;
+		onclick: () => void;
+	} = $props();
 </script>
 
 <button
-	class="aspect-square rounded-4xl border"
-	class:bg-amber-600={selected}
+	class="aspect-square rounded-4xl border border-gray-200"
+	class:bg-cyan-500={selected}
 	class:bg-gray-200={disabled}
 	class:cursor-pointer={!disabled}
 	{onclick}
 	{disabled}
 >
-	{value || '-'}
+	<div class="flex items-center justify-center">
+		{#if value}
+			<div>{value || ' '}</div>
+		{:else}
+			<div class="flex flex-wrap justify-center space-y-2 space-x-2 md:flex-col">
+				{#each annotations as nb (nb)}
+					<div
+						class="flex h-9 w-9 items-center justify-center rounded-full bg-emerald-300 p-1"
+						class:bg-white={selected}
+					>
+						{nb}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
 </button>
diff --git a/src/lib/Switch.svelte b/src/lib/Switch.svelte
new file mode 100644
index 0000000..c5da96d
--- /dev/null
+++ b/src/lib/Switch.svelte
@@ -0,0 +1,263 @@
+<script lang="ts">
+	// copy from https://svelte.dev/playground/d65a4e9f0ae74d1eb1b08d13e428af32?version=5.23.0
+
+	// based on suggestions from:
+	// Inclusive Components by Heydon Pickering https://inclusive-components.design/toggle-button/
+	// On Designing and Building Toggle Switches by Sara Soueidan https://www.sarasoueidan.com/blog/toggle-switch-design/
+	// and this example by Scott O'hara https://codepen.io/scottohara/pen/zLZwNv
+
+	export let label = '';
+	export let design = 'inner label';
+	export let options: string[] = [];
+	export let fontSize = 16;
+	export let value = 'on';
+
+	let checked = true;
+
+	const uniqueID = Math.floor(Math.random() * 100);
+
+	function handleClick(event) {
+		const target = event.target;
+
+		const state = target.getAttribute('aria-checked');
+
+		checked = state === 'true' ? false : true;
+
+		value = checked === true ? 'on' : 'off';
+	}
+</script>
+
+{#if design == 'inner'}
+	<div class="s s--inner">
+		<span id={`switch-${uniqueID}`}>{label}</span>
+		<button
+			role="switch"
+			aria-checked={checked}
+			aria-labelledby={`switch-${uniqueID}`}
+			on:click={handleClick}
+		>
+			<span>on</span>
+			<span>off</span>
+		</button>
+	</div>
+{:else if design == 'slider'}
+	<div class="s s--slider" style="font-size:{fontSize}px">
+		<span id={`switch-${uniqueID}`}>{label}</span>
+		<button
+			role="switch"
+			aria-checked={checked}
+			aria-labelledby={`switch-${uniqueID}`}
+			on:click={handleClick}
+		>
+		</button>
+	</div>
+{:else}
+	<div class="s s--multi">
+		<div
+			role="radiogroup"
+			class="group-container"
+			aria-labelledby={`label-${uniqueID}`}
+			style="font-size:{fontSize}px"
+			id={`group-${uniqueID}`}
+		>
+			<div class="legend" id={`label-${uniqueID}`}>{label}</div>
+			{#each options as option}
+				<input type="radio" id={`${option}-${uniqueID}`} value={option} bind:group={value} />
+				<label for={`${option}-${uniqueID}`}>
+					{option}
+				</label>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<style lang="postcss">
+	@reference "tailwindcss";
+
+	:root {
+		--accent-color: theme(colors.emerald.400);
+		--gray: #ccc;
+	}
+	/* Inner Design Option */
+	.s--inner button {
+		padding: 0.5em;
+		background-color: #fff;
+		border: 1px solid var(--gray);
+	}
+	[role='switch'][aria-checked='true'] :first-child,
+	[role='switch'][aria-checked='false'] :last-child {
+		display: none;
+		color: #fff;
+	}
+
+	.s--inner button span {
+		user-select: none;
+		pointer-events: none;
+		padding: 0.25em;
+	}
+
+	.s--inner button:focus {
+		outline: var(--accent-color) solid 1px;
+	}
+
+	/* Slider Design Option */
+
+	.s--slider {
+		display: flex;
+		align-items: center;
+	}
+
+	.s--slider button {
+		width: 3em;
+		height: 1.6em;
+		position: relative;
+		margin: 0 0 0 0.5em;
+		background: var(--gray);
+		border: none;
+	}
+
+	.s--slider button::before {
+		content: '';
+		position: absolute;
+		width: 1.3em;
+		height: 1.3em;
+		background: #fff;
+		top: 0.13em;
+		right: 1.5em;
+		transition: transform 0.3s;
+	}
+
+	.s--slider button[aria-checked='true'] {
+		background-color: var(--accent-color);
+	}
+
+	.s--slider button[aria-checked='true']::before {
+		transform: translateX(1.3em);
+		transition: transform 0.3s;
+	}
+
+	.s--slider button:focus {
+		box-shadow: 0 0px 0px 1px var(--accent-color);
+	}
+
+	/* Multi Design Option */
+
+	/* Based on suggestions from Sara Soueidan https://www.sarasoueidan.com/blog/toggle-switch-design/
+    and this example from Scott O'hara https://codepen.io/scottohara/pen/zLZwNv */
+
+	.s--multi .group-container {
+		border: none;
+		padding: 0;
+		white-space: nowrap;
+	}
+
+	/* .s--multi legend {
+    font-size: 2px;
+    opacity: 0;
+    position: absolute;
+    } */
+
+	.s--multi label {
+		display: inline-block;
+		line-height: 1.6;
+		position: relative;
+		z-index: 2;
+	}
+
+	.s--multi input {
+		opacity: 0;
+		position: absolute;
+	}
+
+	.s--multi label:first-of-type {
+		padding-right: 5em;
+	}
+
+	.s--multi label:last-child {
+		margin-left: -5em;
+		padding-left: 5em;
+	}
+
+	.s--multi:focus-within label:first-of-type:after {
+		box-shadow: 0 0px 8px var(--accent-color);
+		border-radius: 1.5em;
+	}
+
+	/* making the switch UI.  */
+	.s--multi label:first-of-type:before,
+	.s--multi label:first-of-type:after {
+		content: '';
+		height: 1.25em;
+		overflow: hidden;
+		pointer-events: none;
+		position: absolute;
+		vertical-align: middle;
+	}
+
+	.s--multi label:first-of-type:before {
+		border-radius: 100%;
+		z-index: 2;
+		position: absolute;
+		width: 1.2em;
+		height: 1.2em;
+		background: #fff;
+		top: 0.2em;
+		right: 1.2em;
+		transition: transform 0.3s;
+	}
+
+	.s--multi label:first-of-type:after {
+		background: var(--accent-color);
+		border-radius: 1em;
+		margin: 0 1em;
+		transition: background 0.2s ease-in-out;
+		width: 3em;
+		height: 1.6em;
+	}
+
+	.s--multi input:first-of-type:checked ~ label:first-of-type:after {
+		background: var(--gray);
+	}
+
+	.s--multi input:first-of-type:checked ~ label:first-of-type:before {
+		transform: translateX(-1.4em);
+	}
+
+	.s--multi input:last-of-type:checked ~ label:last-of-type {
+		z-index: 1;
+	}
+
+	.s--multi input:focus {
+		box-shadow: 0 0px 8px var(--accent-color);
+		border-radius: 1.5em;
+	}
+
+	/* gravy */
+
+	/* Inner Design Option */
+	[role='switch'][aria-checked='true'] :first-child,
+	[role='switch'][aria-checked='false'] :last-child {
+		border-radius: 0.25em;
+		background: var(--accent-color);
+		display: inline-block;
+	}
+
+	.s--inner button:focus {
+		box-shadow: 0 0px 8px var(--accent-color);
+		border-radius: 0.1em;
+	}
+
+	/* Slider Design Option */
+	.s--slider button {
+		border-radius: 1.5em;
+	}
+
+	.s--slider button::before {
+		border-radius: 100%;
+	}
+
+	.s--slider button:focus {
+		box-shadow: 0 0px 8px var(--accent-color);
+		border-radius: 1.5em;
+	}
+</style>
diff --git a/src/lib/ValueSelector.svelte b/src/lib/ValueSelector.svelte
index 6584f21..ac10999 100644
--- a/src/lib/ValueSelector.svelte
+++ b/src/lib/ValueSelector.svelte
@@ -4,7 +4,7 @@
 	const numbers = Array.from({ length: 9 }, (_, i) => i + 1);
 </script>
 
-<div class="flex flex-wrap justify-center space-x-2 py-8">
+<div class="flex flex-wrap justify-center space-x-2">
 	{#each numbers as number (number)}
 		<button
 			class="mr-1 cursor-pointer rounded-full bg-emerald-300 px-4 py-2 disabled:bg-gray-200"
@@ -18,6 +18,6 @@
 		class="mr-1 cursor-pointer rounded-full bg-emerald-300 px-4 py-2 disabled:bg-gray-200"
 		onclick={() => onclick()}
 	>
-		sup
+		🗑️
 	</button>
 </div>
diff --git a/src/lib/core/board.ts b/src/lib/core/board.ts
index 0a2261c..710f66a 100644
--- a/src/lib/core/board.ts
+++ b/src/lib/core/board.ts
@@ -17,7 +17,6 @@ function shuffleArray<T>(array: Array<T>): void {
 
 function getNumberToKeepFromDifficulty(difficulty: Difficulty) {
 	const rules = {
-		// 0: 8,
 		0: 3,
 		1: 2,
 		2: 1,
@@ -29,6 +28,7 @@ function getNumberToKeepFromDifficulty(difficulty: Difficulty) {
 
 export class Board {
 	grid: Case[][];
+	annotations: number[][][];
 	verticalSum: number[];
 	horizontalSum: number[];
 	lockedCells: boolean[][];
@@ -38,6 +38,7 @@ export class Board {
 		shuffleArray(numbers);
 
 		this.grid = [];
+		this.annotations = [];
 		this.verticalSum = new Array(3).fill(0);
 		this.horizontalSum = [];
 		this.lockedCells = [];
@@ -49,6 +50,7 @@ export class Board {
 				this.verticalSum[j] += row[j];
 			}
 			this.grid.push(row);
+			this.annotations.push([[], [], []]);
 			this.horizontalSum[i] = row.reduce((partialSum, a) => partialSum + a, 0);
 
 			this.lockedCells[i] = [false, false, false];
@@ -100,10 +102,10 @@ export class Board {
 	}
 
 	reset() {
-		console.log('ici');
 		for (let i = 0; i < 3; i++) {
 			for (let j = 0; j < 3; j++) {
 				if (this.lockedCells[i][j]) this.grid[i][j] = undefined;
+				this.annotations[i][j] = [];
 			}
 		}
 	}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5bf5167..1fbd321 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,4 +4,6 @@
 
 <h1 class="mb-5 text-center text-6xl font-medium">Fubuki</h1>
 
-<Board />
+<div class="mx-2">
+	<Board />
+</div>