changes to share modal content

ankarhem · Feb 20, 2022 · b937206 · b937206
1 parent 21e2d1b
commit b937206
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 52 deletions.
diff --git a/src/components/CountdownTimer.svelte b/src/components/CountdownTimer.svelte
@@ -32,6 +32,6 @@
 		.padStart(2, '0');
 </script>
 
-<div class="text-3xl font-bold">
-	{`${hoursLeft}:${minutesLeft}:${secondsLeft}`}
+<div class="text-xl font-bold">
+	{`${hoursLeft}h ${minutesLeft}m ${secondsLeft}s`}
 </div>
diff --git a/src/components/Modal/Modal.svelte b/src/components/Modal/Modal.svelte
@@ -29,7 +29,7 @@
 					<Icon src={X} size="24px" />
 				</button>
 			</div>
-			<div class="content p-8">
+			<div class="content p-8 max-h-[80vh] overflow-auto">
 				<slot />
 			</div>
 		</div>

diff --git a/src/components/Modal/ShareModalContent.svelte b/src/components/Modal/ShareModalContent.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { TileState } from '$lib/types';
-	import { Icon, Share } from 'svelte-hero-icons';
+	import { GameState, TileState } from '$lib/types';
+	import { ExternalLink, Icon, Share } from 'svelte-hero-icons';
 	import { getNotificationsContext } from 'svelte-notifications';
 	import { scale } from 'svelte/transition';
 	import CountdownTimer from '../CountdownTimer.svelte';
@@ -34,7 +34,6 @@
 		const message = title + '\n\n' + body;
 		navigator.clipboard.writeText(message);
 
-		// TODO: Fix z-index issue with modal overlay
 		addNotification({
 			type: 'success',
 			text: 'Kopierat till urklipp!',
@@ -43,72 +42,90 @@
 		});
 	};
 
-	const fetchDistribution = async () => {
-		// wait 2000ms
-		// await new Promise((resolve) => setTimeout(resolve, 200));
+	const fetchStatistics = async () => {
 		const response = await fetch(`/api/words/statistics/current.json`);
 
 		const data = await response.json();
-		const total = data.distribution.reduce((acc, item) => acc + item.count, 0);
-		// const counts: [] = data.distribution.map((item) => item.count);
 
-		// const percentile =
-		// 	1 -
-		// 	counts.reduce((acc, curr, index) => {
-		// 		if (index >= $gameState.currentRow) {
-		// 			return acc + curr;
-		// 		}
-		// 		return acc;
-		// 	}, 0) /
-		// 		total;
-		// return {
-		// 	distribution: data.distribution,
-		// 	percentile: percentile
-		// };
-		return {
-			...data,
-			total: total
-		};
+		return data;
 	};
+
+	const stats = fetchStatistics();
 </script>
 
-<div class="flex flex-col items-center gap-4">
-	<figure class="flex flex-col items-center gap-4">
-		<figcaption class="font-bold text-xl max-w-[20ch] text-center">
-			Lösningsdistribution för Swerdle #{wordId}
-		</figcaption>
-		<div class="flex h-32 rounded gap-4 p-4 justify-center items-center">
-			{#await fetchDistribution()}
+<div class="flex flex-col items-center text-primary-500/90 dark:text-primary-500/95">
+	<h3 class="font-bold text-2xl text-center mb-4 text-primary-500 dark:text-primary-400">
+		Utmana dina vänner
+	</h3>
+	<div class="max-w-[20ch] mb-6 text-center">
+		{#if $gameState.state === GameState.Won}
+			Skryt om ditt resultat genom att klicka på dela knappen 👇!
+		{:else}
+			Dela din besvikelse över hur orimligt svårt ordet var med knappen 👇!
+		{/if}
+	</div>
+	<button
+		on:click={handleShare}
+		class="uppercase font-bold bg-green-200 flex gap-4 py-2 px-4 rounded text-green-600 hover:bg-green-300/80 dark:bg-green-600/80 dark:text-green-300 dark:hover:bg-green-600/70"
+	>
+		<Icon src={Share} size="24px" />
+		<span>Dela</span>
+	</button>
+	<span class="text-xs p-1">(Avslöjar ej dina gissningar)</span>
+	<h3
+		class="font-bold text-2xl mt-11 mb-6 max-w-[20ch] text-center text-primary-500 dark:text-primary-400"
+	>
+		Hur har det gått för andra?
+	</h3>
+	{#await stats then data}
+		<div class="max-w-[30ch] text-center">
+			Dagens ord
+			<a
+				class="border border-primary-500 dark:border-primary-400 uppercase rounded p-1 mx-1 bg-transparent hover:bg-primary-300 dark:hover:bg-primary-700 text-primary-500 dark:text-primary-400 flex-inline items-center w-min"
+				href={`https://svenska.se/saol/?q=${data.word}`}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				{data.word}<Icon src={ExternalLink} size="12" class="inline align-baseline ml-1" /></a
+			>
+			har spelats av <span class="font-bold text-primary-500">{data.total.played}</span> personer
+			varav
+			<span class="font-bold text-primary-500">{data.total.won}</span> var har klarat ordet.
+		</div>
+	{/await}
+	<figure class="flex flex-col items-center gap-4 mt-6">
+		<figcaption class="font-bold text-xl max-w-[20ch] text-center" />
+		<div class="flex h-32 rounded gap-4 justify-center items-center">
+			{#await stats}
 				<LoadingSpinner />
 			{:then data}
 				{#if data.total === 0}
 					<p>Ingen har löst dagens problem ännu! 😱</p>
 				{:else}
 					{#each data.distribution as distItem}
 						<div
-							class="self-stretch flex flex-col gap-1 w-8 sm:w-10 items-center rounded justify-end"
+							class="self-stretch flex flex-col gap-1 w-6 sm:w-8 items-center rounded justify-end"
 						>
 							<span
 								in:scale={{ duration: 500 }}
 								class="flex-1 bg-green-200 w-full rounded max-h-[var(--bar-height)]"
-								style="--bar-height: {data.total
-									? Math.max((distItem.count / data.total) * 100, 5)
-									: 100}%"
+								style="--bar-height: {Math.max(
+									(distItem.count / Math.max(...data.distribution.map((item) => item.count))) * 100,
+									5
+								)}%"
 							/>
 							<span class="flex-0">{distItem.rowIndex + 1}</span>
 						</div>
 					{/each}
 				{/if}
 			{/await}
 		</div>
+		<span>Antal gissningar (vunna spel)</span>
 	</figure>
-	<h3 class="font-bold text-xl">Nästa ord kommer om:</h3>
-	<CountdownTimer />
-	<button
-		on:click={handleShare}
-		class="uppercase font-bold bg-green-200 flex gap-4 py-2 px-4 rounded text-green-600 hover:bg-green-300/80 dark:bg-green-600/80 dark:text-green-300 dark:hover:bg-green-600/70"
+	<h3
+		class="font-bold text-2xl mt-11 mb-6 max-w-[20ch] text-center text-primary-500 dark:text-primary-400"
 	>
-		<Icon src={Share} size="24px" />
-		<span>Dela</span>
-	</button>
+		Nästa ord kommer snart!
+	</h3>
+	<CountdownTimer />
 </div>
diff --git a/src/routes/api/words/statistics/current.json.ts b/src/routes/api/words/statistics/current.json.ts
@@ -11,22 +11,35 @@ interface Distribution {
 export async function get() {
 	const currentWord = getCurrentWordRow();
 
-	const distributionArray = db.query<Distribution>(
+	const wonGamesPerRowIndex = db.query<Distribution>(
 		'SELECT rowIndex, count(created_at) AS count FROM tbl_guesses WHERE guessId = wordId AND wordId = ? GROUP BY rowIndex',
 		currentWord.id
 	);
+	const totalWon = wonGamesPerRowIndex.reduce((acc, curr) => {
+		return acc + curr.count;
+	}, 0);
 
-	const fullDistributionArray = Array.from({ length: 6 }, (_, i) => {
+	const startedGames = db.query<Distribution>(
+		'SELECT created_at FROM tbl_guesses WHERE rowIndex = 0 AND wordId = ?',
+		currentWord.id
+	);
+
+	const distribution = Array.from({ length: 6 }, (_, i) => {
 		return { rowIndex: i, count: 0 };
 	});
-	distributionArray.forEach((row) => {
-		fullDistributionArray[row.rowIndex] = row;
+	wonGamesPerRowIndex.forEach((row) => {
+		distribution[row.rowIndex] = row;
 	});
 
 	return {
 		status: 200,
 		body: {
-			distribution: fullDistributionArray
+			word: currentWord.word,
+			distribution: distribution,
+			total: {
+				won: totalWon,
+				played: startedGames.length
+			}
 		}
 	};
 }