From 52e1c98b850c9b004ac0251166c3812444c1ee5f Mon Sep 17 00:00:00 2001 From: "J. Gerhards" Date: Fri, 2 Feb 2024 16:59:27 +0100 Subject: [PATCH 1/2] fix result unreadable for colourblind --- README.md | 1 - assets/scripts/keyboard.js | 5 ++--- assets/scripts/results.js | 10 ++++------ assets/styles/large_style.css | 19 ++++++++++++++++++- assets/styles/mobile_style.css | 19 ++++++++++++++++++- 5 files changed, 42 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index ff65e46c..2cf69fb7 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,6 @@ I suck at spelling and this project was supposed to help me be better but it actually just made me accept that spelling is very hard. Anyway, here's the website assets including the audio clips. The actual process of generating new audio prompts can be found in a YouTube video I haven't published yet. # Known Issues -* Emoji results are awful for the colourblind * 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 diff --git a/assets/scripts/keyboard.js b/assets/scripts/keyboard.js index c275530b..57377434 100644 --- a/assets/scripts/keyboard.js +++ b/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" } diff --git a/assets/scripts/results.js b/assets/scripts/results.js index 16a2fdf1..af380769 100644 --- a/assets/scripts/results.js +++ b/assets/scripts/results.js @@ -8,7 +8,7 @@ const copyBtn = document.querySelector("#copy-btn") const typos = document.querySelector("#typos") copyBtn.addEventListener("click", (e) => { - shareableResults = `Spellcheck #${puzzleNum}\n${sessionStorage.getItem('emojiResults').replaceAll("\\n", "\n").replaceAll(" ", "")}`; + shareableResults = `Spellcheck #${puzzleNum}\n${sessionStorage.getItem('emojiResults').replaceAll("\\n", "\n")}`; navigator.clipboard.writeText(shareableResults); }) @@ -25,15 +25,13 @@ for (var i=0; iEASY WORDS ` - } - if (i == 5){ + } else if (i == 5){ test+=` MEDIUM WORDS ` - } - if (i == 10){ + } else if (i == 10){ test+=` HARD WORDS @@ -49,5 +47,5 @@ for (var i=0; i') +emojiResults = emojiResults.replaceAll('\\n', '').replaceAll('✅', '').replaceAll('❌', ''); results.innerHTML = `${emojiResults}`; diff --git a/assets/styles/large_style.css b/assets/styles/large_style.css index ff2891c8..16d85184 100644 --- a/assets/styles/large_style.css +++ b/assets/styles/large_style.css @@ -90,6 +90,23 @@ p { } +/* Results Display */ + +#results { + display: grid; + grid-template-rows: repeat(3, 65px); + grid-template-columns: repeat(5, 50px); + place-content: center; + place-items: center; + + .fa-check { + color: #238636; + } + .fa-xmark { + color: #da3633; + } +} + /* TABLE */ table { @@ -248,4 +265,4 @@ a { #end-game-btn { border-radius: 50px; -} \ No newline at end of file +} diff --git a/assets/styles/mobile_style.css b/assets/styles/mobile_style.css index 66343cde..af2375bd 100644 --- a/assets/styles/mobile_style.css +++ b/assets/styles/mobile_style.css @@ -107,6 +107,23 @@ td { } +/* Results Display */ + +#results { + display: grid; + grid-template-rows: repeat(3, 65px); + grid-template-columns: repeat(5, 50px); + place-content: center; + place-items: center; +} + +.fa-check { + color: #238636; +} +.fa-xmark { + color: #da3633; +} + /* TEXT DECORATIION */ .error { @@ -246,4 +263,4 @@ a { flex-direction: row; gap: 20px; margin: 15pt 0 15pt 0; -} \ No newline at end of file +} From 88665d99d7d176360574f0f074892c60c2199e5f Mon Sep 17 00:00:00 2001 From: "J. Gerhards" Date: Fri, 2 Feb 2024 21:53:46 +0100 Subject: [PATCH 2/2] added box around result items --- assets/styles/large_style.css | 16 ++++++++++++---- assets/styles/mobile_style.css | 24 ++++++++++++++++-------- 2 files changed, 28 insertions(+), 12 deletions(-) diff --git a/assets/styles/large_style.css b/assets/styles/large_style.css index 16d85184..4f817f96 100644 --- a/assets/styles/large_style.css +++ b/assets/styles/large_style.css @@ -94,16 +94,24 @@ p { #results { display: grid; - grid-template-rows: repeat(3, 65px); - grid-template-columns: repeat(5, 50px); + 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 { - color: #238636; + background-color: #79b15a; } .fa-xmark { - color: #da3633; + background-color: #d25842; } } diff --git a/assets/styles/mobile_style.css b/assets/styles/mobile_style.css index af2375bd..be3ae189 100644 --- a/assets/styles/mobile_style.css +++ b/assets/styles/mobile_style.css @@ -111,17 +111,25 @@ td { #results { display: grid; - grid-template-rows: repeat(3, 65px); - grid-template-columns: repeat(5, 50px); + grid-template-rows: repeat(3, 52px); + grid-template-columns: repeat(5, 52px); + grid-gap: 5px; place-content: center; place-items: center; -} -.fa-check { - color: #238636; -} -.fa-xmark { - color: #da3633; + i { + width: 100%; + padding: 10px; + box-sizing: border-box; + border-radius: 10px; + } + + .fa-check { + background-color: #79b15a; + } + .fa-xmark { + background-color: #d25842; + } } /* TEXT DECORATIION */