Add nsfw and progression indicators

watsonindustries · Jun 23, 2024 · 1801f2b · 1801f2b
1 parent 4eff95f
commit 1801f2b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/src/lib/components/Stamp.svelte b/src/lib/components/Stamp.svelte
@@ -7,12 +7,13 @@
 	export let name: string;
 	export let collected = false;
 	export let navURL = `/partner/${hash}`;
+	export let nsfw = false;
 
 	const PLACEHOLDER_STAMP_IMG = placeholderImg;
 
 	export let img = PLACEHOLDER_STAMP_IMG;
 
-	export const fadeDuration = 100;
+	export const fadeDuration = 50;
 </script>
 
 <a href={navURL}>
@@ -26,7 +27,16 @@
 				: 'bg-secondary bg-opacity-30'} "
 		>
 			<div class="flex h-24 w-24 items-center justify-center rounded-full">
-				<div class="flex h-24 w-24 items-center justify-center rounded-full bg-white">
+				<div class="relative flex h-24 w-24 items-center justify-center rounded-full bg-white">
+					{#if nsfw}
+						<div
+							class="absolute right-0 top-0 rounded-full px-1 py-0.5 text-xs text-white"
+							class:bg-red-400={!collected}
+							class:bg-red-500={collected}
+						>
+							18+
+						</div>
+					{/if}
 					<img src={img} alt={name} class="h-20 w-20 rounded-full" class:opacity-30={!collected} />
 				</div>
 			</div>

diff --git a/src/lib/components/StampSheet.svelte b/src/lib/components/StampSheet.svelte
@@ -87,7 +87,7 @@
 
 <!-- MARK: Component body -->
 <div
-	class="mx-8 my-4 mb-8 divide-y-2 divide-dashed divide-slate-900 rounded-xl bg-slate-100"
+	class="mx-8 my-4 mb-8 divide-y-2 divide-dashed divide-slate-900 rounded-xl bg-slate-100 bg-gradient-to-b font-geologica"
 >
 	<!-- Stub -->
 	<div
@@ -100,10 +100,13 @@
 		on:touchend={handleTouchEnd}
 		on:touchcancel={handleTouchCancel}
 	>
-		<h1 class="text-center font-geologica text-4xl font-bold text-primary">Stamps</h1>
+		<h1 class="text-center text-4xl font-bold tracking-tight text-primary">Stamps</h1>
+		<h2 class="mx-auto text-xl font-semibold text-secondary">
+			Collected {getCollectedCount()} / {minStampCountRequired}
+		</h2>
 
 		{#if isQuestCompleted}
-			<h2 class="text-center font-geologica text-xl font-semibold text-secondary">
+			<h2 class="text-center text-xl font-semibold text-secondary">
 				Show sheet to staff at the booth!
 			</h2>
 		{:else}
@@ -126,10 +129,13 @@
 					collected={isStampCollected(stamp)}
 					index={i}
 					hash={stamp.hash || ''}
+					nsfw={stamp.nsfw}
 					img={stamp.image_url || undefined}
 				/>
 			{/each}
 		</div>
+
+		<!-- <div id="stamp-sheet-footer"></div> -->
 	{/if}
 </div>
 

diff --git a/src/routes/partner/[hash]/+page.svelte b/src/routes/partner/[hash]/+page.svelte
@@ -6,7 +6,7 @@
 
 	export let data: PageData;
 
-	const { name, description, image_url, external_url, booth_id } = data.stamp;
+	const { name, description, image_url, external_url, booth_id, nsfw } = data.stamp;
 </script>
 
 <a href="/" id="back-button" class="btn-ghost btn mb-4 w-fit justify-start gap-2 rounded-full"
@@ -25,8 +25,15 @@
 		</div>
 	</div>
 
-	<h1 class="break-all text-4xl font-bold text-primary tracking-tighter" id="stamp-name">{name}</h1>
-	<h2 id="booth-id" class="text-2xl text-secondary tracking-wide">{booth_id ?? 'ask for booth number'}</h2>
+	<h1 class="break-all text-4xl font-bold tracking-tighter text-primary" id="stamp-name">
+		{name}
+		{#if nsfw}
+			<span class="rounded-full bg-error px-1 py-0.5 align-middle text-xs text-white"> 18+ </span>
+		{/if}
+	</h1>
+	<h2 id="booth-id" class="text-2xl tracking-wide text-secondary">
+		{booth_id ?? 'ask for booth number'}
+	</h2>
 
 	{#if description}
 		<p class="">