From d5c84e9b6347db6e0f90e0b1125a1b197d4e1f0e Mon Sep 17 00:00:00 2001
From: Jakob Ankarhem <jakob.ankarhem@jetshop.se>
Date: Sat, 26 Mar 2022 10:59:07 +0100
Subject: [PATCH] feat: Add suspend with loading indicator

Fixes an issue where bad internet connection could
introduce faulty gamestates due to race-condition
---
 src/components/Board.svelte             | 13 ++++-
 src/components/Keyboard/Key.svelte      |  4 +-
 src/components/Keyboard/Keyboard.svelte |  9 ++-
 src/components/LoadingSpinner.svelte    | 76 ++++++++++++++-----------
 src/components/store.ts                 |  2 +
 5 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/src/components/Board.svelte b/src/components/Board.svelte
index 37a0b5f..fa0fbac 100644
--- a/src/components/Board.svelte
+++ b/src/components/Board.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { GameState } from '$lib/types';
+	import { fade } from 'svelte/transition';
+	import LoadingSpinner from './LoadingSpinner.svelte';
 	import Modal from './Modal/Modal.svelte';
 	import ShareModalContent from './Modal/ShareModalContent.svelte';
 	import { gameState } from './store';
@@ -23,8 +25,17 @@
 	<ShareModalContent {wordId} />
 </Modal>
 <div
-	class="text-[11vw] sm:text-5xl flex flex-1 items-center py-2 standalone:text-5xl lg:flex-grow-0 lg:py-6"
+	class="text-[11vw] sm:text-5xl flex flex-1 items-center my-2 standalone:text-5xl lg:flex-grow-0 lg:my-6 relative"
 >
+	{#if $gameState.loading}
+		<div
+			class="absolute w-full h-full bg-black/10 rounded dark:text-primary-400"
+			in:fade={{ delay: 300, duration: 150 }}
+			out:fade={{ duration: 150 }}
+		>
+			<LoadingSpinner />
+		</div>
+	{/if}
 	<div class="grid gap-[0.08em] grid-cols-1">
 		{#each $gameState.grid as row, i (`row-${i}`)}
 			{#if $gameState.invalidWord && i === currentRow}
diff --git a/src/components/Keyboard/Key.svelte b/src/components/Keyboard/Key.svelte
index 9fb44ef..ecf2394 100644
--- a/src/components/Keyboard/Key.svelte
+++ b/src/components/Keyboard/Key.svelte
@@ -7,6 +7,7 @@
 
 	export let key: string;
 	export let specialKey: boolean = false;
+	export let disabled: boolean = false;
 
 	const dispatch = createEventDispatcher();
 
@@ -37,11 +38,12 @@
 
 <div class={`grid ${specialKey === false ? '' : 'col-span-2'}`}>
 	<button
+		{disabled}
 		style="transition-delay: {animationDelay}ms"
 		class={`${stateStyle} ${
 			// to override the lesser border in stateStyles used on the tiles
 			state === TileState.Unknown ? 'border-primary-500' : ''
-		} col-start-1 row-start-1 border text-lg flex transition-colors items-center justify-center h-14 sm:h-16 rounded uppercase font-bold select-none`}
+		} col-start-1 row-start-1 border text-lg flex transition-colors items-center justify-center h-14 sm:h-16 rounded uppercase font-bold select-none disabled:cursor-not-allowed`}
 		on:click={handleClick}
 	>
 		<slot>
diff --git a/src/components/Keyboard/Keyboard.svelte b/src/components/Keyboard/Keyboard.svelte
index 73234d5..a69c375 100644
--- a/src/components/Keyboard/Keyboard.svelte
+++ b/src/components/Keyboard/Keyboard.svelte
@@ -25,6 +25,7 @@
 
 	const handleKey = (key: string) => {
 		if ($gameState.state !== GameState.Playing) return;
+		if ($gameState.loading) return;
 
 		switch (key) {
 			case 'Backspace':
@@ -54,12 +55,14 @@
 	const handleSubmit = async () => {
 		if (currentGuess.length !== 5) return;
 
+		$gameState.loading = true;
 		const response = await fetch(`/api/words/validate.json`, {
 			method: 'POST',
 			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ word: currentGuess, rowIndex: $gameState.currentRow })
+			body: JSON.stringify({ word: currentGuess, rowIndex: currentRow })
 		});
 		const data = await response.json();
+		$gameState.loading = false;
 		if (!response.ok) {
 			if (response.status === 404) {
 				addNotification({
@@ -109,11 +112,11 @@
 		{#each middleRow as char}
 			<Key key={char} on:click={handleClick} />
 		{/each}
-		<Key specialKey key="Enter" on:click={handleClick}>⏎</Key>
+		<Key specialKey key="Enter" on:click={handleClick} disabled={$gameState.loading}>⏎</Key>
 		{#each bottomRow as char}
 			<Key key={char} on:click={handleClick} />
 		{/each}
-		<Key specialKey key="Backspace" on:click={handleClick}>
+		<Key specialKey key="Backspace" on:click={handleClick} disabled={$gameState.loading}>
 			<Icon src={Backspace} size="24px" />
 		</Key>
 	</div>
diff --git a/src/components/LoadingSpinner.svelte b/src/components/LoadingSpinner.svelte
index de5ce32..a364185 100644
--- a/src/components/LoadingSpinner.svelte
+++ b/src/components/LoadingSpinner.svelte
@@ -1,48 +1,58 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
+	export let radius: string | number = 30;
 </script>
 
-<div class="lds-ring" in:fade={{ delay: 200 }}>
-	<div />
-	<div />
-	<div />
-	<div />
+<div
+	class="absolute top-0 left-0 right-0 bottom-0 flex min-h-[50px] animate-fade-in items-center justify-center"
+>
+	<div class="h-5 w-5">
+		<svg
+			class="spinner"
+			viewBox="0 0 66 66"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-live="polite"
+			aria-label={'Var god vänta...'}
+		>
+			<circle class="path" fill="none" cx="33" cy="33" r={radius} />
+		</svg>
+	</div>
 </div>
 
 <style>
-	.lds-ring {
-		display: inline-block;
-		position: relative;
-		width: 80px;
-		height: 80px;
+	.spinner {
+		animation: rotator 1.4s linear infinite;
 	}
-	.lds-ring div {
-		box-sizing: border-box;
-		display: block;
-		position: absolute;
-		width: 64px;
-		height: 64px;
-		margin: 8px;
-		border: 8px solid #fff;
-		border-radius: 50%;
-		animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-		border-color: #fff transparent transparent transparent;
-	}
-	.lds-ring div:nth-child(1) {
-		animation-delay: -0.45s;
-	}
-	.lds-ring div:nth-child(2) {
-		animation-delay: -0.3s;
-	}
-	.lds-ring div:nth-child(3) {
-		animation-delay: -0.15s;
+
+	.path {
+		stroke-dasharray: 187;
+		stroke-dashoffset: 0;
+		transform-origin: center;
+		stroke: currentColor;
+		stroke-width: 6;
+		stroke-linecap: round;
+		animation: dash 1.4s ease-in-out infinite;
 	}
-	@keyframes lds-ring {
+
+	@keyframes rotator {
 		0% {
 			transform: rotate(0deg);
 		}
 		100% {
-			transform: rotate(360deg);
+			transform: rotate(270deg);
+		}
+	}
+
+	@keyframes dash {
+		0% {
+			stroke-dashoffset: 187;
+		}
+		50% {
+			stroke-dashoffset: 46.75;
+			transform: rotate(135deg);
+		}
+		100% {
+			stroke-dashoffset: 187;
+			transform: rotate(450deg);
 		}
 	}
 </style>
diff --git a/src/components/store.ts b/src/components/store.ts
index ae72ce4..a6bc359 100644
--- a/src/components/store.ts
+++ b/src/components/store.ts
@@ -13,6 +13,7 @@ const createEmptyGrid = (): TileType[][] => {
 
 export const createInitialGameState = (wordId?: number): GameData => {
 	const gameState: GameData = {
+		loading: false,
 		grid: createEmptyGrid(),
 		currentRow: 0,
 		state: GameState.Playing,
@@ -24,6 +25,7 @@ export const createInitialGameState = (wordId?: number): GameData => {
 };
 
 interface GameData {
+	loading: boolean;
 	grid: TileType[][];
 	currentRow: number;
 	state: GameState;