From 43038cc576634bf9561d89be41a81d96d13a604f Mon Sep 17 00:00:00 2001
From: Spencer Flagg <work@spencerflagg.com>
Date: Wed, 24 Jan 2024 23:54:13 +0100
Subject: [PATCH] conditional buttons

---
 src/routes/+page.svelte | 22 +++++++++++++++++-----
 src/styles/app.css      |  2 ++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4394e58..84c98fb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -37,15 +37,27 @@
         // Assuming the items are in the 'items' property of the result
         actions = result.items;
     }
+
+    $: isLastActionAsleep = actions.length > 0 && actions[actions.length - 1].type === 'asleep';
+    $: isLastActionAwake = actions.length > 0 && actions[actions.length - 1].type === 'awake';
+    $: isLastActionDiaper = actions.length > 0 && actions[actions.length - 1].type === 'diaper';
 </script>
 
 {#if $currentUser}
         <aside>
-            <button class="button--awake" on:click={() => recordAction('awake')}>Awake</button>
-            <button class="button--asleep" on:click={() => recordAction('asleep')}>Asleep</button>
-            <button class="button--food" on:click={() => recordAction('food')}>Food</button>
-            <button class="button--diaper" on:click={() => recordAction('diaper')}>Diaper</button>
-            <button class="button--poop" on:click={() => recordAction('poop')}>Poop</button>
+            {#if isLastActionAsleep}
+                <button class="button--awake" on:click={() => recordAction('awake')}>Awake</button>
+            {:else}
+                {#if !isLastActionAwake}
+                    <button class="button--awake" on:click={() => recordAction('awake')}>Awake</button>
+                {/if}
+                <button class="button--asleep" on:click={() => recordAction('asleep')}>Asleep</button>
+                <button class="button--food" on:click={() => recordAction('food')}>Food</button>
+                <button class="button--diaper" on:click={() => recordAction('diaper')}>Diaper</button>
+                {#if isLastActionDiaper}
+                    <button class="button--poop" on:click={() => recordAction('poop')}>Poop</button>
+                {/if}
+            {/if}
         </aside>
 
         <section>
diff --git a/src/styles/app.css b/src/styles/app.css
index 7b3c52b..1634e25 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -63,6 +63,8 @@ section {
 	margin-top: 4rem;
 }
 
+/* https://coolors.co/palette/5f0f40-9a031e-fb8b24-e36414-0f4c5c */
+
 [class*='--food'] {
 	--color: #136f63;
 }