add changelog feature

muckelba · Nov 30, 2023 · 16b186d · 16b186d
1 parent a16ec94
commit 16b186d
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 6 deletions.
diff --git a/src/lib/changelog.json 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 />