More stuff

README.md

@@ -1 +1,7 @@
 Words taken from https://websites.umich.edu/~jlawler/wordlist.html
+
+## TODO
+
+- Add home page
+- Add animations
+- Add multiplayer (....🐸 hopefully)

src/app.css

@@ -11,4 +11,8 @@ body {
 	.global-container-bg {
 		@apply bg-platinum-600 dark:bg-glaucous-100;
 	}
+
+	.global-subcontainer-bg {
+		@apply bg-platinum-800 dark:bg-glaucous-200;
+	}
 }

src/lib/components/Board/Board.svelte

@@ -15,13 +15,14 @@
 	);
 
 	const dispatch = createEventDispatcher<{
-		onPlayerSubmit: {
+		playerSubmit: {
 			nextPlayerId: number;
 			submittedPlayerId: number;
 			boardData: typeof boardData;
 			submitRow: number;
 			submitColumn: number;
 		};
+		gameOver: void;
 	}>();
 
 	function handleKeyPress(keyPress: KeyboardEvent, row: number, column: number) {
@@ -74,13 +75,17 @@
 					boardField.dataset.focused = undefined;
 
 					//Now getPlayerId() != playerId; because an input is disabled
-					dispatch('onPlayerSubmit', {
+					dispatch('playerSubmit', {
 						nextPlayerId: getPlayerId(),
 						boardData: boardData,
 						submittedPlayerId: playerId,
 						submitRow: row,
 						submitColumn: column
 					});
+
+					// All the inputs has been filled
+					if (getFilledBoardFieldLength() == boardSize * boardSize) dispatch('gameOver');
+
 					return true;
 				}
 			}
@@ -89,7 +94,7 @@
 		return false;
 	}
 
-	function getTotalBoardInputsLength(): number {
+	function getFilledBoardFieldLength(): number {
 		// https://stackoverflow.com/a/48469793/16867144
 		// Filter out the empty items by checking if the field is disabled
 		// As the field gets disabled on valid input
@@ -100,7 +105,7 @@
 	}
 
 	function getPlayerId(): number {
-		return getTotalBoardInputsLength() % playerCount;
+		return getFilledBoardFieldLength() % playerCount;
 	}
 
 	function getPlayerColor(playerId: number): string {

src/lib/components/Board/BoardView.svelte

@@ -25,6 +25,8 @@
 					class="input global-container-bg"
 					maxlength="1"
 					type="text"
+					inputmode="none"
+					name="{rowIndex}:{columnIndex}"
 					bind:this={columnField}
 					on:focus={() => dispatch('fieldFocus', { row: rowIndex, column: columnIndex })}
 					on:focusout={() => dispatch('fieldUnfocus')}

src/lib/components/Interaction/Interaction.svelte

@@ -2,51 +2,56 @@
 	import type { Player } from '$lib/data/Player';
 	import type { PlayerScore } from '$lib/data/PlayerScore';
 	import Letter from '../Letter.svelte';
-	import PlayerChip from '../PlayerChip.svelte';
 	import { createEventDispatcher } from 'svelte';
+	import PlayerScoreChip from '../PlayerScoreChip.svelte';
 
 	export let color: string;
 	export let playersList: Player[];
 	export let currentPlayer: Player;
 	export let playerScores: PlayerScore[];
 
-	const dispatcher = createEventDispatcher<{ toggleBoardHint: boolean }>();
+	const dispatch = createEventDispatcher<{
+		showPlayerScoreDetails: { player: Player; score: PlayerScore };
+		preferenceClicked: void;
+	}>();
 
 	let boardHint: boolean = true;
 </script>
 
 <div class="interaction-area global-container-bg">
-	<div>
-		<div class="letters-container">
-			{#each 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('') as value}
-				<Letter {value} {color} />
-			{/each}
-		</div>
-	</div>
-
-	<div>
-		{#each playerScores as score}
-			{JSON.stringify(score)}
+	<div class="letters-container">
+		{#each 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('') as value}
+			<Letter {value} {color} />
 		{/each}
-		<div class="players-container">
-			{#each playersList as player}
-				<PlayerChip
-					{player}
-					myTurn={player == currentPlayer}
-					on:colorChange={(event) => {
-						player.color = event.detail.color;
-						color = currentPlayer.color;
-					}}
+	</div>
+	<div class="gap-0.5 large:gap-2 flex flex-col">
+		<div class="scoreboard-container">
+			{#each playerScores as score}
+				<PlayerScoreChip
+					player={playersList[score.playerId]}
+					myTurn={playersList[score.playerId] == currentPlayer}
+					playerScore={score}
+					on:onPlayerClick={() =>
+						dispatch('showPlayerScoreDetails', {
+							player: playersList[score.playerId],
+							score: score
+						})}
 				/>
 			{/each}
 		</div>
-		<div>
-			Board Hint {boardHint}
-			<input
-				type="checkbox"
-				bind:checked={boardHint}
-				on:change={() => dispatcher('toggleBoardHint', boardHint)}
-			/>
+
+		<div class="flex justify-between">
+			<a
+				href="https://khaled.is-a.dev"
+				target="_blank"
+				title="Visit my portfolio"
+				class="text-platinum-200 dark:text-glaucous-500">© Khaled</a
+			>
+			<button
+				title="Open game preference panel"
+				class="text-platinum-200 dark:text-glaucous-500"
+				on:click={() => dispatch('preferenceClicked')}>Preference</button
+			>
 		</div>
 	</div>
 </div>
@@ -59,12 +64,8 @@
 		@apply border-gray-300 dark:border-gray-700;
 	}
 
-	.letters-container {
+	.letters-container,
+	.scoreboard-container {
 		@apply flex flex-wrap gap-1;
 	}
-
-	.players-container {
-		@apply flex flex-wrap;
-		@apply gap-1;
-	}
 </style>

src/lib/components/Letter.svelte

@@ -11,14 +11,17 @@
 	}
 </script>
 
-<button on:click={dispatchClick} style={`--color:${color}`}>{value}</button>
+<button
+	title={`Insert ${value} on selected field`}
+	on:click={dispatchClick}
+	style={`--color:${color}`}>{value}</button
+>
 
 <style lang="postcss">
 	button {
 		@apply large:p-2 border rounded-lg;
 		@apply w-8 h-8 large:w-12 large:h-12;
 		@apply flex-1 basis-auto text-platinum-800;
-
 		@apply border-gray-300 dark:border-gray-700;
 
 		background-color: var(--color);

src/lib/components/PlayerScoreChip.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Player } from '$lib/data/Player';
+	import type { PlayerScore } from '$lib/data/PlayerScore';
+	import { createEventDispatcher } from 'svelte';
+
+	export let player: Player;
+	export let myTurn: boolean;
+	export let playerScore: PlayerScore;
+
+	const dispatch = createEventDispatcher<{ onPlayerClick: void }>();
+</script>
+
+<button
+	class="container global-subcontainer-bg"
+	title={`Click to show detailed score of ${player.name}`}
+	style="--color:{player.color}"
+	data-active={myTurn}
+	on:click={() => dispatch('onPlayerClick')}
+>
+	<div class="color" />
+	<span class="name">{player.name}</span>
+	<span class="score">{playerScore.score}</span>
+</button>
+
+<style lang="postcss">
+	[data-active='true'] {
+		@apply border-2;
+		border-color: var(--color);
+	}
+
+	.container {
+		@apply flex justify-start items-center gap-1;
+		@apply flex-1  large:basis-full rounded-lg w-fit;
+		@apply cursor-pointer large:p-2 p-0.5;
+	}
+
+	.color {
+		@apply h-4 w-4;
+		@apply rounded-xl;
+		background-color: var(--color);
+	}
+
+	.name {
+		@apply text-sm large:text-base;
+		@apply flex-1 text-start;
+		@apply large:px-2;
+	}
+
+	.score {
+		@apply py-0.5 px-1 rounded;
+		@apply text-sm large:text-base;
+		background-color: var(--color);
+	}
+</style>

src/lib/components/Preference/Preference.svelte

@@ -0,0 +1 @@
+fff

src/lib/components/Preference/PreferenceDialog.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import Preference from './Preference.svelte';
+	export let dialog: HTMLDialogElement;
+
+	const dispatch = createEventDispatcher<{}>();
+</script>
+
+<dialog bind:this={dialog}>
+	<h2>Preference</h2>
+	<Preference />
+</dialog>
+
+<!-- https://svelte.dev/repl/885653f873284f7880490dcdd1200238?version=3.48.0 -->

src/lib/data/GameParameters.ts

@@ -0,0 +1,8 @@
+import type { BoardSize, PlayerCount } from './Board';
+
+export type GameParameter = {
+	board: BoardSize;
+	players: PlayerCount;
+	names?: Array<string>;
+	colors?: Array<string>;
+};

src/lib/utils/isWord.ts

@@ -5,7 +5,7 @@ const wordsTrie = new Trie();
 console.time('wordsLoadInMemory');
 for (const word of Object.values(WordsList)) wordsTrie.insert(word);
 console.timeEnd('wordsLoadInMemory');
-console.log('Loaded', Object.values(WordsList).length, 'words');
+console.info('Loaded', Object.values(WordsList).length, 'words');
 
 export default function isEnglishWord(str: string | null): boolean {
 	if (!str) return false;