From 96d051ace5ef520f2c50dba86732eb35f357c7ad Mon Sep 17 00:00:00 2001
From: Kenny <101839505+khui0@users.noreply.github.com>
Date: Sun, 9 Jun 2024 18:24:04 -0400
Subject: [PATCH] feat: add streak indicator for lightning

---
 src/lib/components/Header.svelte          |  3 +++
 src/lib/components/LightningStreak.svelte | 12 ++++++++++++
 2 files changed, 15 insertions(+)
 create mode 100644 src/lib/components/LightningStreak.svelte

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 54ee506..e8dde34 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -4,6 +4,7 @@
 
   import Streak from "./Streak.svelte";
   import DailyStreak from "./DailyStreak.svelte";
+  import LightningStreak from "./LightningStreak.svelte";
   import GameModes from "./GameModes.svelte";
 
   import BiGearFill from "~icons/bi/gear-fill";
@@ -15,6 +16,8 @@
       <Streak></Streak>
     {:else if $page.url.pathname === base + "/daily"}
       <DailyStreak></DailyStreak>
+    {:else if $page.url.pathname === base + "/lightning"}
+      <LightningStreak></LightningStreak>
     {/if}
     <slot></slot>
   </div>
diff --git a/src/lib/components/LightningStreak.svelte b/src/lib/components/LightningStreak.svelte
new file mode 100644
index 0000000..aeed196
--- /dev/null
+++ b/src/lib/components/LightningStreak.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { db } from "$lib/db";
+  import { liveQuery } from "dexie";
+
+  const streak = liveQuery(() => db.stats.get("lightning-streak"));
+</script>
+
+{#if $streak?.value || 0 > 0}
+  <div class="bg-base-300 px-3 self-stretch rounded-btn flex items-center">
+    <p class="font-bold">{$streak?.value} 🔥</p>
+  </div>
+{/if}