fix result unreadable for colourblind

README.md

@@ -4,7 +4,8 @@ I suck at spelling and this project was supposed to help me be better but it act
 
 ## Known Issues
 
-* Emoji results are awful for the colourblind
+# Known Issues
+=======
 * Pronunciation goes very rogue at points
   * Examples: very, ascension, porcelain, rosin, reveille, hat, upon, portcullus, innovator, pie, vineyard, concatenate, javas, thrasonical, annual, fribourg, rubric, retrodict, expatiated, hem, hermeneutics, wizard, arsenic, power, expression, longitude, accordance, gonzo, toga, epoch
 * Submit button on mobile is too close to keys - it might be worth just switching to a mobile keyboard

assets/scripts/keyboard.js

@@ -155,12 +155,11 @@ function updateResults(){
         correctSpellingLst.push(player[2])
         submissionLst.push(player[3])
         if (player[0].classList.contains("fa-check")) {
-            results += "🟩"
+            results += '✅'
         } else if (player[0].classList.contains("fa-xmark")) {
-            results += "🟥"
+            results += '❌'
             numWrong += 1;
         }
-        results += " "
     })
     results += "\\n"
 }

assets/scripts/results.js

@@ -9,7 +9,7 @@ const typos = document.querySelector("#typos")
 
 copyBtn.addEventListener("click", async (e) => {
     e.preventDefault();
-    shareableResults = `Spellcheck #${puzzleNum}\n${sessionStorage.getItem('emojiResults').replaceAll("\\n", "\n").replaceAll(" ", "")}`;
+    shareableResults = `Spellcheck #${puzzleNum}\n${sessionStorage.getItem('emojiResults').replaceAll("\\n", "\n")}`;
     await navigator.clipboard.writeText(shareableResults);
 }) 
 
@@ -26,15 +26,13 @@ for (var i=0; i<numRows;i++){
             <td colspan=3 style="text-align: center"><b>EASY WORDS</b></td>
         </tr>
         `
-    }
-    if (i == 5){
+    } else if (i == 5){
         test+=`
         <tr>
             <td colspan=3 style="text-align: center"><b>MEDIUM WORDS</b></td>
         </tr>
         `
-    }
-    if (i == 10){
+    } else if (i == 10){
         test+=`
         <tr>
             <td colspan=3 style="text-align: center"><b>HARD WORDS</b></td>
@@ -50,5 +48,5 @@ for (var i=0; i<numRows;i++){
     `
 }
 typos.innerHTML = test;
-emojiResults = emojiResults.replaceAll('\\n', '<br>')
+emojiResults = emojiResults.replaceAll('\\n', '').replaceAll('✅', '<i class="fa-solid fa-check"></i>').replaceAll('❌', '<i class="fa-solid fa-xmark"></i>');
 results.innerHTML = `${emojiResults}`;

assets/styles/large_style.css

@@ -104,6 +104,31 @@ p {
 
 }
 
+/* Results Display */
+
+#results {
+	display: grid;
+	grid-template-rows: repeat(3, 52px);
+	grid-template-columns: repeat(5, 52px);
+	grid-gap: 5px;
+	place-content: center;
+	place-items: center;
+
+	i {
+		width: 100%;
+		padding: 10px;
+		box-sizing: border-box;
+		border-radius: 10px;
+	}
+
+	.fa-check {
+		background-color: #79b15a;
+	}
+	.fa-xmark {
+		background-color: #d25842;
+	}
+}
+
 /* TABLE */
 
 table {
@@ -270,4 +295,4 @@ transform: translate(-50%, -50%);
 
 #end-game-btn {
     border-radius: 50px;
-}
+}

assets/styles/mobile_style.css

@@ -121,6 +121,31 @@ td {
 
 }
 
+/* Results Display */
+
+#results {
+	display: grid;
+	grid-template-rows: repeat(3, 52px);
+	grid-template-columns: repeat(5, 52px);
+	grid-gap: 5px;
+	place-content: center;
+	place-items: center;
+
+	i {
+		width: 100%;
+		padding: 10px;
+		box-sizing: border-box;
+		border-radius: 10px;
+	}
+
+	.fa-check {
+		background-color: #79b15a;
+	}
+	.fa-xmark {
+		background-color: #d25842;
+	}
+}
+
 /* TEXT DECORATIION */
 
 .error {
@@ -268,4 +293,4 @@ a {
     flex-direction: row;
     gap: 20px;
     margin: 15pt 0 15pt 0;
-}
+}