From c2afbacce2c27dde66ed4cc661e82ee7161d0b7f Mon Sep 17 00:00:00 2001
From: gwstaten <grantwstaten@gmail.com>
Date: Thu, 3 Aug 2023 19:33:20 -0600
Subject: [PATCH] add disable animation option

---
 css/styles.css |  1 +
 index.html     | 10 ++++++----
 js/main.js     |  5 ++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 31940ed..47f53dd 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -44,6 +44,7 @@ header {
   display: flex;
   justify-content: center;
 }
+
 .settingDisplay {
   color: gainsboro;
   font-size: 10px;
diff --git a/index.html b/index.html
index 31cf4ba..3c315ab 100644
--- a/index.html
+++ b/index.html
@@ -46,12 +46,14 @@ <h1 class="title" id="title">wordle</h1>
             <input type="checkbox" id="BlindCheck">
             <p class="settingDisplay"> --- Accept any guess: </p>
             <input type="checkbox" id="AnyGuessCheck">
+            <p class="settingDisplay">Disable animation: </p>
+            <input type="checkbox" id="DACheck">
           </div>
           <div class="slidecontainer">
-            <p class="settingDisplay">Animation length per letter: </p>
-            <p id = "animationLength" class="settingDisplay">20</p>
-            <p class="settingDisplay">ms</p>
-            <input type="range" min="0" max="500" value="20" class="slider" id="animationSlider">
+              <p class="settingDisplay">Animation time: </p>
+              <p id = "animationLength" class="settingDisplay">20</p>
+              <p class="settingDisplay">ms</p>
+              <input type="range" min="0" max="500" value="20" class="slider" id="animationSlider">
           </div>
           <div class="slidecontainer">
             <p class="settingDisplay" id="alert"> </p>
diff --git a/js/main.js b/js/main.js
index ad9508a..a4a354c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -410,7 +410,10 @@ document.addEventListener("DOMContentLoaded", () => {
               const tileColor = getTileColor(currentWord, index);
               const letterId = firstLetterId + index;
               const letterEl = document.getElementById(letterId);
-              letterEl.classList.add("animate__flipInX");
+              if(!document.getElementById("DACheck").checked)
+              {
+                letterEl.classList.add("animate__flipInX");
+              }
               letterEl.style = `background-color:${tileColor};border-color:${tileColor}`;
               if(document.getElementById("BlindCheck").checked)
               {