From 9aecd2347c98a536c7af759b6f00df51b354d7ad Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:05:33 -0500
Subject: [PATCH] [O] Split components

---
 src/App.svelte                  | 13 ++-----------
 {public => src/assets}/vite.svg |  0
 src/lib/Heading.svelte          | 14 ++++++++++++++
 src/lib/PuzzleInfo.svelte       |  4 +++-
 4 files changed, 19 insertions(+), 12 deletions(-)
 rename {public => src/assets}/vite.svg (100%)
 create mode 100644 src/lib/Heading.svelte

diff --git a/src/App.svelte b/src/App.svelte
index f0f855b..b9203e6 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
-  import svelteLogo from './assets/svelte.svg'
-  import viteLogo from '/vite.svg'
   import Number from './lib/Number.svelte'
   import { cfg, eStates, Fmt, JsonTy, Misc, nStates, randInt, range, zero8, type Checkpoint, type MetaCheckpoint } from "./utils";
   import Line from "./lib/Line.svelte";
@@ -9,6 +7,7 @@
   import PuzzleInfo from './lib/PuzzleInfo.svelte';
   import CompletedOverlay from './lib/CompletedOverlay.svelte';
   import UploadOverlay from './lib/UploadOverlay.svelte';
+  import Heading from './lib/Heading.svelte';
 
   const params = new URLSearchParams(location.search)
   const hasTouch = Misc.hasTouch()
@@ -290,15 +289,7 @@
 
 <main class:color-mode={mode === 'color'} class:colorful-cross={colorfulCross} class:mobile={hasTouch} 
   style="--gcw: {cfg.cellW}px; --glw: {cfg.lineW}px; --gtw: {cfg.totalW}px;">
-  <div class="heading">Azalea's Colorful Slither Link</div>
-  <div class="sub-heading">
-    <img src={viteLogo} alt="Logo"/>
-    <span><a href="https://github.com/hykilpikonna/colorful-link">GitHub</a> | <a href="https://aza.moe">Blog</a></span>
-    <img src={svelteLogo} alt="Logo"/>
-  </div>
-  <div class="rules">
-    Welcome to SlitherLink! 🧩 The rules are simple: Draw lines between the dots to create one big loop (no crossings, no branches). The numbers are your hints – they tell you how many lines should surround them. Left-click to draw, right-click to mark with an X. Can you crack the perfect path? <a href="https://www.youtube.com/watch?v=fqwE-CpeGS4&list=PLH_elo2OIwaBk44COgFhnJRt0-8xKMBQn">YouTube Tutorial</a>
-  </div>
+  <Heading/>
 
   {#if statusMsg}
     <div class="status" class:error={!complete}>{statusMsg}</div>
diff --git a/public/vite.svg b/src/assets/vite.svg
similarity index 100%
rename from public/vite.svg
rename to src/assets/vite.svg
diff --git a/src/lib/Heading.svelte b/src/lib/Heading.svelte
new file mode 100644
index 0000000..c93f315
--- /dev/null
+++ b/src/lib/Heading.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import svelteLogo from '../assets/svelte.svg'
+  import viteLogo from '../assets/vite.svg'
+</script>
+
+<div class="heading">Azalea's Colorful Slither Link</div>
+<div class="sub-heading">
+  <img src={viteLogo} alt="Logo"/>
+  <span><a href="https://github.com/hykilpikonna/colorful-link">GitHub</a> | <a href="https://aza.moe">Blog</a></span>
+  <img src={svelteLogo} alt="Logo"/>
+</div>
+<div class="rules">
+  Welcome to SlitherLink! 🧩 The rules are simple: Draw lines between the dots to create one big loop (no crossings, no branches). The numbers are your hints – they tell you how many lines should surround them. Left-click to draw, right-click to mark with an X. Can you crack the perfect path? <a href="https://www.youtube.com/watch?v=fqwE-CpeGS4&list=PLH_elo2OIwaBk44COgFhnJRt0-8xKMBQn">YouTube Tutorial</a>
+</div>
\ No newline at end of file
diff --git a/src/lib/PuzzleInfo.svelte b/src/lib/PuzzleInfo.svelte
index aea9725..a9964ed 100644
--- a/src/lib/PuzzleInfo.svelte
+++ b/src/lib/PuzzleInfo.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-  export let puzzleData = {}
+  import type { MetaCheckpoint } from "../utils";
+
+  export let puzzleData: MetaCheckpoint | null = null
 </script>
 
 <div class="puzzle-desc">