From fce88175411ff990a247bc82674554db798d0d5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Wed, 13 Sep 2023 17:24:50 +0200
Subject: [PATCH] feat: opacity show

---
 src/lib/components/Chapter.svelte |  2 +-
 src/lib/components/Puzzle.svelte  | 87 ++++++++++++++++++++-----------
 2 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/Chapter.svelte b/src/lib/components/Chapter.svelte
index d6f1afe..2f3e839 100644
--- a/src/lib/components/Chapter.svelte
+++ b/src/lib/components/Chapter.svelte
@@ -11,8 +11,8 @@
 	class={cn(
 		'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 ',
 		{
-			'cursor-not-allowed': !chapter.show,
 			'hover:bg-primary-600': chapter.show,
+			'opacity-50': !chapter.show,
 		}
 	)}
 >
diff --git a/src/lib/components/Puzzle.svelte b/src/lib/components/Puzzle.svelte
index 926c7a5..3acf636 100644
--- a/src/lib/components/Puzzle.svelte
+++ b/src/lib/components/Puzzle.svelte
@@ -13,43 +13,70 @@
 
 <li
 	class={cn(
-		'font-code group relative flex h-full w-full rounded-md border-2 bg-primary-700 transition-colors duration-150 hover:bg-primary-600',
+		'font-code group relative flex h-full w-full rounded-md border-2 bg-primary-700 transition-colors duration-150',
 		{
 			'border-green-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'easy'),
 			'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'),
 			'border-red-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'hard'),
-			'border-highlight-primary': !puzzle.tags?.length
-			// 'cursor-not-allowed': !isStarted(chapter)
+			'border-highlight-primary': !puzzle.tags?.length,
+			'hover:bg-primary-600': puzzle.show,
+			'opacity-50': !puzzle.show
 		}
 	)}
 >
-	<a
-		class="flex h-full w-full items-center gap-4 p-4"
-		href="/dashboard/chapters/{chapterId}/puzzle/{puzzle.id}"
-	>
-		<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
-			<h2 class="text-base font-semibold">
-				{puzzle.name}
-				<span class="text-sm text-highlight-secondary">
-					({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
-				</span>
-			</h2>
-			<div class="flex items-center gap-x-6">
-				{#if puzzle.tags?.length}
-					<div class="flex gap-x-2 text-sm">
-						{#each puzzle.tags as tag}
-							<span
-								class="inline-block rounded-md bg-primary-800 px-2 py-1 text-highlight-secondary"
-							>
-								{tag.name}
-							</span>
-						{/each}
-					</div>
-				{/if}
+	{#if puzzle.show}
+		<a
+			class="flex h-full w-full items-center gap-4 p-4"
+			href="/dashboard/chapters/{chapterId}/puzzle/{puzzle.id}"
+		>
+			<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
+				<h2 class="text-base font-semibold">
+					{puzzle.name}
+					<span class="text-sm text-highlight-secondary">
+						({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
+					</span>
+				</h2>
+				<div class="flex items-center gap-x-6">
+					{#if puzzle.tags?.length}
+						<div class="flex gap-x-2 text-sm">
+							{#each puzzle.tags as tag}
+								<span
+									class="inline-block rounded-md bg-primary-800 px-2 py-1 text-highlight-secondary"
+								>
+									{tag.name}
+								</span>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			</div>
+			<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
+				<ChevronRight />
+			</span>
+		</a>
+	{:else}
+		<span class="flex h-full w-full items-center gap-4 p-4">
+			<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
+				<h2 class="text-base font-semibold">
+					{puzzle.name}
+					<span class="text-sm text-highlight-secondary">
+						({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
+					</span>
+				</h2>
+				<div class="flex items-center gap-x-6">
+					{#if puzzle.tags?.length}
+						<div class="flex gap-x-2 text-sm">
+							{#each puzzle.tags as tag}
+								<span
+									class="inline-block rounded-md bg-primary-800 px-2 py-1 text-highlight-secondary"
+								>
+									{tag.name}
+								</span>
+							{/each}
+						</div>
+					{/if}
+				</div>
 			</div>
-		</div>
-		<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
-			<ChevronRight />
 		</span>
-	</a>
+	{/if}
 </li>