From fd6c56ff1ab9e06edf85cdb6b5fd6bb8e48ed709 Mon Sep 17 00:00:00 2001
From: William Faircloth <willuhmjs@gmail.com>
Date: Thu, 18 Jul 2024 18:07:43 -0400
Subject: [PATCH] feat: lifelines!

---
 src/lib/Hints.svelte         | 24 +++++++++++++++++++++++-
 src/routes/menu/+page.svelte |  1 -
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/lib/Hints.svelte b/src/lib/Hints.svelte
index 712b569..2ae14b8 100644
--- a/src/lib/Hints.svelte
+++ b/src/lib/Hints.svelte
@@ -10,6 +10,7 @@
 		type IconDefinition
 	} from '@fortawesome/free-regular-svg-icons';
 	import Fa from 'svelte-fa';
+	import { faLifeRing } from '@fortawesome/free-solid-svg-icons';
 	export let data: Word;
 	const { word, hintDb } = data;
 
@@ -67,7 +68,15 @@
 		<p class="hinttext">I am "<b>{word}</b>." <a href="/menu">Play again?</a></p>
 	</div>
 {/if}
-
+{#if $usedLifeline}
+<div class="hintbox lifeline">
+	<div class="hinttext">
+		<p class="icon">
+			<Fa icon={faLifeRing} fw="true"/>
+		</p>
+		<p>I start with "{word[0]}" and am {word.length} letters long.</p></div>
+</div>
+{/if}
 {#if hints.length > 0}
 	{#each hints as hint}
 		<div class="hintbox">
@@ -105,6 +114,19 @@
 		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
 	}
 
+	.lifeline {
+		background-color: var(--hard)!important;
+	}
+
+	.lifeline .hinttext {
+		display: flex;
+		gap: 0.8rem;
+		align-items: center;
+	}
+
+	.lifeline .hinttext .icon {
+		font-size: 1.5rem;
+	}
 	#hintbutton:hover:enabled {
 		cursor: pointer;
 		filter: brightness(95%);
diff --git a/src/routes/menu/+page.svelte b/src/routes/menu/+page.svelte
index 696c309..abb96d5 100644
--- a/src/routes/menu/+page.svelte
+++ b/src/routes/menu/+page.svelte
@@ -71,7 +71,6 @@
 	.wrapper {
 		max-width: 480px;
 		margin: auto;
-		/* padding 1 everywhere except top */
 		padding: 0 1rem 1rem 1rem;
 		margin: 2rem auto;
 	}