From bd943af5645e6a6fbd366e8e026b11226ad68fa9 Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com>
Date: Thu, 18 Apr 2024 14:39:22 -0400
Subject: [PATCH] - Add reduce motion - Randomize gradient motion

---
 css/style.css       |  2 +-
 features.html       | 10 ++++++++--
 index.html          | 10 ++++++++--
 scripts/gradient.js | 32 ++++++++++++++++++++++----------
 4 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/css/style.css b/css/style.css
index b53cd6e..ff17a2a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -40,7 +40,7 @@ footer {
 }
 
 .my-gradient {
-    background: linear-gradient(45deg, #1a9fff, #946beb);
+    background: linear-gradient(0deg, #1a9fff, #946beb);
 }
 
 .jumbotron h1 {
diff --git a/features.html b/features.html
index e33f2c8..e2ad732 100644
--- a/features.html
+++ b/features.html
@@ -223,11 +223,17 @@
 
     <!-- Footer -->
     <footer class="container-fluid p-2">
-        <div class="row text-center">
-            <div class="col">
+        <div class="row justify-content-betweetn">
+            <div class="col-md">
                 Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam
                     Iannazzone</a> and the RetroDECK team.
             </div>
+            <div class="col-md">
+                <div class="form-check form-switch float-end">
+                    <input class="form-check-input" id="reduce-motion-switch" type="checkbox" role="switch" id="reduceMotionSwitch" onchange="reduceMotion()">
+                    <label class="form-check-label" for="reduceMotionSwitch">Reduce motion</label>
+                </div>
+            </div>
         </div>
     </footer>
     <!-- End Footer -->
diff --git a/index.html b/index.html
index 89bfa36..413ff2c 100644
--- a/index.html
+++ b/index.html
@@ -182,11 +182,17 @@
 
     <!-- Footer -->
     <footer class="container-fluid p-2">
-        <div class="row text-center">
-            <div class="col">
+        <div class="row justify-content-betweetn">
+            <div class="col-md">
                 Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam
                     Iannazzone</a> and the RetroDECK team.
             </div>
+            <div class="col-md">
+                <div class="form-check form-switch float-end">
+                    <input class="form-check-input" id="reduce-motion-switch" type="checkbox" role="switch" id="reduceMotionSwitch" onchange="reduceMotion()">
+                    <label class="form-check-label" for="reduceMotionSwitch">Reduce motion</label>
+                </div>
+            </div>
         </div>
     </footer>
     <!-- End Footer -->
diff --git a/scripts/gradient.js b/scripts/gradient.js
index 1316ad3..b4901d0 100644
--- a/scripts/gradient.js
+++ b/scripts/gradient.js
@@ -1,16 +1,28 @@
-let gradientAngle = 45;
-
 let gradientSpinElems = document.getElementsByClassName('gradient-spin');
-const gradientInterval = setInterval(function() {
-    updateGradientAngle();
-}, 50);
+let gradientAngles = Array.from({ length: gradientSpinElems.length }, () => Math.floor(Math.random() * 361) + 1);
+let gradientInterval;
+
+reduceMotion();
 
 function updateGradientAngle() {
-    gradientAngle += 1
-    if (gradientAngle > 360) {
-        gradientAngle = 0;
+    for (let i = 0; i < gradientSpinElems.length; i++) {
+        gradientAngles[i] += Math.floor(Math.random() * 5) - 5;
+        if (gradientAngles[i] > 360) {
+            gradientAngles[i] = 0;
+        }
+        gradientSpinElems[i].style.background = `linear-gradient(${gradientAngles[i]}deg, #1a9fff, #946beb)`;
     }
-    for (let i=0; i<gradientSpinElems.length; i++) {
-        gradientSpinElems[i].style.background = `linear-gradient(${gradientAngle}deg, #1a9fff, #946beb)`;
+}
+
+function reduceMotion() {
+    let reduceMotionState = document.getElementById('reduce-motion-switch').checked;
+    console.log(reduceMotionState);
+    if (reduceMotionState) {
+        clearInterval(gradientInterval);
+        console.log('stopped');
+    } else {
+        gradientInterval = setInterval(function () {
+            updateGradientAngle();
+        }, 100);
     }
 }
\ No newline at end of file