From 2fbb5ebba03257d36913a46987fc283b4561200a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20L=C3=B6hnertz?= <mail@jakob.codes>
Date: Thu, 6 Jun 2024 23:33:29 +0200
Subject: [PATCH] Fix a few small issues and add doc strings to the JS code

---
 index.html |  2 +-
 script.js  | 33 ++++++++++++++++++++++++++++++++-
 styles.css | 28 ++++++++++++++++------------
 3 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 59291d7..db7767d 100644
--- a/index.html
+++ b/index.html
@@ -52,7 +52,7 @@ <h1 class="title is-1 has-text-centered">🍵<br>Gong Fu Tea Timer</h1>
                     </div>
                 </div>
             </div>
-            <div class="field">
+            <div class="field" id="confirm-button">
                 <div class="control">
                     <button @click="confirmSettings" class="button is-primary is-fullwidth">Confirm</button>
                 </div>
diff --git a/script.js b/script.js
index bc6f3ec..15fb1c2 100644
--- a/script.js
+++ b/script.js
@@ -55,9 +55,15 @@ new Vue({
         }
     },
     methods: {
+        /**
+         * Updates the document title to display the time remaining.
+         */
         updateDisplay() {
             document.title = `🍵 ${Math.round(this.timeRemaining)} - Gong Fu Tea Timer`;
         },
+        /**
+         * Resets the timer, clearing any intervals and setting timeRemaining to nextInfusionTime.
+         */
         resetTimer() {
             clearInterval(this.timerInterval);
             clearInterval(this.tabTitleInterval);
@@ -65,6 +71,9 @@ new Vue({
             this.timerRunning = false;
             this.updateDisplay();
         },
+        /**
+         * Toggles the timer between start and stop states.
+         */
         toggleStartStop() {
             if (this.timerRunning) {
                 this.resetTimer();
@@ -72,6 +81,9 @@ new Vue({
                 this.startTimer();
             }
         },
+        /**
+         * Starts the timer, decrementing timeRemaining at regular intervals.
+         */
         startTimer() {
             this.timerRunning = true;
 
@@ -101,6 +113,9 @@ new Vue({
                 this.updateDisplay();
             }, 1000);
         },
+        /**
+         * Moves to the previous infusion if possible and resets the timer.
+         */
         previousInfusion() {
             if (this.infusionCount > 1) {
                 this.infusionCount--;
@@ -108,11 +123,17 @@ new Vue({
                 this.resetTimer();
             }
         },
+        /**
+         * Skips to the next infusion and resets the timer.
+         */
         skipInfusion() {
             this.infusionCount++;
             localStorage.setItem('infusionCount', this.infusionCount);
             this.resetTimer();
         },
+        /**
+         * Confirms the current settings and resets the session.
+         */
         confirmSettings() {
             const customSettings = {
                 initialTime: this.initialTime,
@@ -124,6 +145,9 @@ new Vue({
             localStorage.setItem('infusionCount', this.infusionCount);
             this.resetTimer();
         },
+        /**
+         * Returns to settings, discarding the current session.
+         */
         backToSettings() {
             if (confirm('Are you sure you want to discard the current session and return to settings?')) {
                 clearInterval(this.timerInterval);
@@ -134,13 +158,20 @@ new Vue({
                 document.title = "🍵 Gong Fu Tea Timer";
             }
         },
+        /**
+         * Adjusts the offset time by a given percentage.
+         * @param {number} percentage - The percentage to adjust the offset time by.
+         */
         adjustOffsetByPercentage(percentage) {
             if (!this.timerRunning) {
                 this.offsetTime = (this.incrementTime * percentage) / 100;
-                this.timeRemaining = parseFloat((this.nextInfusionTime + this.offsetTime).toFixed(1)); // Update current infusion time
+                this.timeRemaining = parseFloat((this.nextInfusionTime).toFixed(1));
                 this.updateDisplay();
             }
         },
+        /**
+         * Loads the session data from localStorage and initializes the timer.
+         */
         loadSession() {
             const storedInfusionCount = localStorage.getItem('infusionCount');
             const storedSettings = JSON.parse(localStorage.getItem('customSettings'));
diff --git a/styles.css b/styles.css
index c692665..fe2bcbb 100644
--- a/styles.css
+++ b/styles.css
@@ -25,6 +25,20 @@ body {
     margin-bottom: 10px;
 }
 
+.buttons.are-small .button {
+    font-size: 0.75rem;
+    padding: 0.5rem;
+    margin: 5px;
+}
+
+.mt-4 {
+    margin-top: 1.5rem;
+}
+
+.mt-5 {
+    margin-top: 2rem;
+}
+
 #timer-box {
     text-align: center;
 }
@@ -39,18 +53,8 @@ body {
     font-weight: bold;
 }
 
-.buttons.are-small .button {
-    font-size: 0.75rem;
-    padding: 0.5rem;
-    margin: 5px;
-}
-
-.mt-4 {
-    margin-top: 1.5rem;
-}
-
-.mt-5 {
-    margin-top: 2rem;
+#confirm-button {
+    margin-top: 2.5rem;
 }
 
 @media (max-width: 768px) {