From 16b186d5fdea224fc68668ae6440b04b3869bf12 Mon Sep 17 00:00:00 2001
From: muckelba <34460584+muckelba@users.noreply.github.com>
Date: Fri, 1 Dec 2023 00:28:25 +0100
Subject: [PATCH] add changelog feature

---
 src/lib/changelog.json                    | 36 +++++++++++++++++++++
 src/lib/components/Changelog.svelte       | 38 +++++++++++++++++++++++
 src/lib/components/Footer.svelte          |  9 ++++++
 src/lib/stores.js                         |  1 +
 src/lib/util.js                           |  7 ++++-
 src/routes/superglidetrainer/+page.svelte |  9 +++---
 6 files changed, 94 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/changelog.json
 create mode 100644 src/lib/components/Changelog.svelte

diff --git a/src/lib/changelog.json b/src/lib/changelog.json
new file mode 100644
index 0000000..e51c643
--- /dev/null
+++ b/src/lib/changelog.json
@@ -0,0 +1,36 @@
+{
+  "changelog": [
+    {
+      "date": "25.03.2023",
+      "note": "Release"
+    },
+    {
+      "date": "06.05.2023",
+      "note": "Warning for browsers with slow scanrate"
+    },
+    {
+      "date": "26.06.2023",
+      "note": "Controller Support, new FAQ entries"
+    },
+    {
+      "date": "14.08.2023",
+      "note": "New FAQ entries"
+    },
+    {
+      "date": "09.11.2023",
+      "note": "Revised text and added more info all over the site. Especially in the FAQ and helpful tips. New button linking to Mokeys big Superglide-Guide. Hid analytics when first opening the site, automatically expands when starting the training"
+    },
+    {
+      "date": "15.11.2023",
+      "note": "Holding shift no longer prevents other inputs"
+    },
+    {
+      "date": "16.11.2023",
+      "note": "Fixed ctrl and shift binds"
+    },
+    {
+      "date": "24.11.2023",
+      "note": "Fixed scrollwheel binds"
+    }
+  ]
+}
diff --git a/src/lib/components/Changelog.svelte b/src/lib/components/Changelog.svelte
new file mode 100644
index 0000000..a951a59
--- /dev/null
+++ b/src/lib/components/Changelog.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { changelogModalActive } from "$lib/stores";
+  import { toggleChgangelogModal } from "$lib/util";
+  import { changelog } from "../changelog.json";
+</script>
+
+<div class:is-active={$changelogModalActive} class="modal">
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div class="modal-background" on:click={toggleChgangelogModal} />
+  <div class="modal-content">
+    <div class="box">
+      <p class="title has-text-centered">Changelog</p>
+      <div class="content">
+        <table class="table is-narrow">
+          <tbody>
+            {#each changelog as log}
+              <tr>
+                <th>
+                  <div class="icon-text is-flex-wrap-nowrap">
+                    <span class="icon has-text-info">
+                      <i class="far fa-calendar-alt" />
+                    </span>
+                    <span>{log.date}</span>
+                  </div>
+                </th>
+                <td>{log.note}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+      <footer>
+        <button class="button" on:click={toggleChgangelogModal}>Close</button>
+      </footer>
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 73a7484..8148be1 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,3 +1,7 @@
+<script>
+  import { toggleChgangelogModal } from "$lib/util";
+</script>
+
 <footer class="footer">
   <div class="content has-text-centered">
     <p>
@@ -13,6 +17,11 @@
       .
     </p>
     <p>
+      <span class="icon"> <i class="fas fa-scroll" /></span>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a on:click={toggleChgangelogModal}> Changelog </a>
       <span class="icon"> <i class="fab fa-github" /></span>
       <a href="https://github.com/muckelba/superglidetrainer"> Sourcecode </a>
       <span class="icon"> <i class="fab fa-reddit" /></span>
diff --git a/src/lib/stores.js b/src/lib/stores.js
index 6a36c98..3a45d73 100644
--- a/src/lib/stores.js
+++ b/src/lib/stores.js
@@ -25,6 +25,7 @@ export let history = writable([]);
 export let chartHistory = writable([]);
 export let trainingActive = writable(false);
 export let sharingModalActive = writable(false);
+export let changelogModalActive = writable(false);
 
 // Controller stuff
 export let isController = writable(false);
diff --git a/src/lib/util.js b/src/lib/util.js
index 4293ee3..b456cec 100644
--- a/src/lib/util.js
+++ b/src/lib/util.js
@@ -1,5 +1,5 @@
-import { history, chartHistory, trainingActive, sharingModalActive, gradientArray, analyticsHidden } from "$lib/stores";
 import { colorScheme } from "$lib/config";
+import { analyticsHidden, changelogModalActive, chartHistory, gradientArray, history, sharingModalActive, trainingActive } from "$lib/stores";
 
 export function percentageColor(value) {
   if (value >= 75) {
@@ -33,6 +33,11 @@ export function toggleSharingModal() {
   sharingModalActive.update((value) => !value);
 }
 
+export function toggleChgangelogModal() {
+  trainingActive.set(false);
+  changelogModalActive.update((value) => !value);
+}
+
 export function toggleAnalytics(state) {
   analyticsHidden.update(() => state);
 }
diff --git a/src/routes/superglidetrainer/+page.svelte b/src/routes/superglidetrainer/+page.svelte
index 239bf8b..99311fd 100644
--- a/src/routes/superglidetrainer/+page.svelte
+++ b/src/routes/superglidetrainer/+page.svelte
@@ -21,6 +21,7 @@
   import Footer from "../../lib/components/Footer.svelte";
   import Tips from "../../lib/components/Tips.svelte";
   import Analytics from "../../lib/components/Analytics.svelte";
+  import Changelog from "../../lib/components/Changelog.svelte";
 
   // Misc
   let isTabActive = true;
@@ -576,11 +577,8 @@
 <section class="section background-image" style={randomImage ? `background-image: url('${randomImage}');` : ""}>
   <div class="columns is-vcentered">
     <div class="column is-narrow">
-      <a class="button" href="/">
-        <span class="icon">
-          <i class="fa fa-arrow-left" />
-        </span>
-        <span>Home</span>
+      <a class="icon is-medium" href="/" title="Home">
+        <i class="fa fa-home fa-lg" />
       </a>
     </div>
     <div class="column">
@@ -745,3 +743,4 @@
   <Faq />
 </section>
 <Footer />
+<Changelog />