From 93fac66653326e2690e7f76cac039cd4d1c15970 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Mon, 16 Dec 2024 22:30:20 -0500
Subject: [PATCH] [+] Rules line

---
 src/App.svelte | 3 +++
 src/app.sass   | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/src/App.svelte b/src/App.svelte
index a135d39..4e33fb2 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -252,6 +252,9 @@
     <span><a href="https://github.com/hykilpikonna/slither-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?
+  </div>
 
   <div class="puzzle-grid" style={`height: ${rows * cfg.totalW}px; width: ${cols * cfg.totalW}px;`}
        on:click={clickDiv} on:contextmenu={clickDiv} on:keypress={console.log} role="grid" tabindex="0"
diff --git a/src/app.sass b/src/app.sass
index 9d7cdc4..15477fb 100644
--- a/src/app.sass
+++ b/src/app.sass
@@ -87,6 +87,10 @@ main
   img
     height: 1em
 
+.rules
+  max-width: 600px
+  opacity: 0.9
+
 .btn-div
   display: flex
   gap: 1em