Added spelloff mode

assets/scripts/spelloff.js

@@ -0,0 +1,293 @@
+/* https://www.freecodecamp.org/news/build-a-wordle-clone-in-javascript/ */
+const KEYBOARD_EL = document.querySelector("#keyboard")
+const attempt = document.querySelector("#attempt-box")
+var publicCount = document.querySelector('#count')
+
+var wordOne = document.querySelector("#word-one")
+var wordOnePlayer = document.querySelector("#word-one-player")
+
+var lastActiveWord = null;
+
+var wordCounter = 0;
+var numCorrect = 0;
+var attemptStr = '';
+var activeWord = null;
+var activePlayer = null;
+var wordLst;
+var levelPath;
+
+var results = '';
+var submissionLst = [];
+var correctSpellingLst = [];
+var wrongSubmission = '';
+var playerLst = [[wordOne, wordOnePlayer]];
+
+KEYBOARD_EL.innerHTML = `<div id="keyboard-cont">
+    <div class="first-row">
+        <button class="keyboard-button boxed" id="q">Q</button>
+        <button class="keyboard-button boxed" id="q">W</button>
+        <button class="keyboard-button boxed" id="e">E</button>
+        <button class="keyboard-button boxed" id="r">R</button>
+        <button class="keyboard-button boxed" id="t">T</button>
+        <button class="keyboard-button boxed" id="y">Y</button>
+        <button class="keyboard-button boxed" id="u">U</button>
+        <button class="keyboard-button boxed" id="i">I</button>
+        <button class="keyboard-button boxed" id="o">O</button>
+        <button class="keyboard-button boxed" id="p" >P</button>
+    </div>
+    <div class="second-row">
+        <button class="keyboard-button boxed" id="a">A</button>
+        <button class="keyboard-button boxed" id="s">S</button>
+        <button class="keyboard-button boxed" id="d">D</button>
+        <button class="keyboard-button boxed" id="f">F</button>
+        <button class="keyboard-button boxed" id="g">G</button>
+        <button class="keyboard-button boxed" id="h">H</button>
+        <button class="keyboard-button boxed" id="j">J</button>
+        <button class="keyboard-button boxed" id="k">K</button>
+        <button class="keyboard-button boxed" id="l">L</button>
+    </div>
+    <div class="third-row">
+        <button class="keyboard-button boxed" id="z">Z</button>
+        <button class="keyboard-button boxed" id="x">X</button>
+        <button class="keyboard-button boxed" id="c">C</button>
+        <button class="keyboard-button boxed" id="v">V</button>
+        <button class="keyboard-button boxed" id="b">B</button>
+        <button class="keyboard-button boxed" id="n">N</button>
+        <button class="keyboard-button boxed" id="m">M</button>
+        <button class="keyboard-button boxed fa fa-delete-left" style="line-height:1.5" id="Backspace"></button>
+    </div>
+    <div class="fourthsrow">
+        <button class="keyboard-button boxed" id="Enter">submit</button>
+    </div>
+</div>`
+
+// CHECK LEVEL 
+function checkLevel(level){
+    resetPlayer(playerLst);
+    attempt.value=attemptStr;
+    updateWord();
+}
+
+var wordLst = genSpellOffWordLst()
+console.log(wordLst)
+
+
+function updateWord(){
+    levelPath = "levelThreeNEW"
+    path = `assets/audio/${levelPath}`;
+    resetPlayer(playerLst);
+    activeWord = wordLst[wordCounter];
+    wordOnePlayer.src = `${path}/${wordLst[wordCounter]}.mp3`
+    //console.log(`levelPath: ${levelPath}\nWord Counter: ${wordCounter}.\nActive Word: ${activeWord}`)
+
+    publicCount.textContent = `Words Remaining: ${25 - wordCounter}`
+}
+
+function endGame(){
+    sessionStorage.setItem("submissionLst", submissionLst)
+    sessionStorage.setItem("correctSpellingLst",correctSpellingLst)
+    sessionStorage.setItem("numCorrect", numCorrect);
+    window.location.replace("spelloff_results.html");
+}
+
+// STOP PLAYING SOUND
+function stopSound(soundObj) {
+    soundObj.pause();
+    soundObj.currentTime = 0;
+}
+
+// UPDATE ATTEMPT STR UPON KEYPRESS
+function insertLetter(pressedKey) {
+    pressedKey = pressedKey.toUpperCase()
+    attemptStr = attemptStr + pressedKey;
+    attempt.focus();
+    attempt.value = attemptStr;
+    attempt.scrollLeft = attempt.scrollWidth;
+}
+
+// DELETE A LETER
+function deleteLetter () {
+    if (attemptStr.length > 0) {
+        attemptStr = attemptStr.slice(0,-1);
+    }
+    attempt.value = attemptStr;
+}
+
+function guessPreprocess() {
+    if ((lastActiveWord != null) & (activeWord==null)) {
+        activeWord = lastActiveWord;
+        checkGuess()
+        return;
+    } else if (activeWord == null) {
+        console.log("Attempted guess without word selected.");
+        attemptStr = '';
+        attempt.value = attemptStr;
+        return;
+    } else if (attemptStr == '') {
+        console.log("Empty string submitted as guess. Ignoring that.");
+        return;
+    } else {
+        checkGuess();
+    }
+}
+
+// CHECK IF GUESS IS CORRECT
+function checkGuess() {
+    correctSpellingLst.push(`<td>${activeWord}</td>`)
+    if (attemptStr.toLowerCase() == activeWord.toLowerCase()) {
+        submissionLst.push(`<td>${attemptStr}</td>`)
+        wordCounter += 1;
+        numCorrect += 1;
+
+        stopSound(activePlayer[1]);
+
+        updatePlayer(playerLst, activePlayer)
+
+        // DEACTIVATE WORD
+        activeWord = null;
+        activePlayer = null;
+
+
+        // RECURSIVE CALL FOR NEW WORD
+        updateWord();
+    } else {
+        submissionLst.push(`<td class="error">${attemptStr}</td>`)
+        wordCounter += 1;
+
+        stopSound(activePlayer[1]);
+
+        updatePlayer(playerLst, activePlayer)
+
+        // DEACTIVATE WORD
+        activeWord = null;
+        activePlayer = null;
+
+        // RECURSIVE CALL FOR NEW WORD
+        updateWord();
+    }
+
+    if (wordCounter == 25){
+        endGame();
+    }
+    attemptStr = '';
+    attempt.value = attemptStr; 
+    return
+}
+
+// update players to reflect their current status
+function updatePlayer(playerLst, activePlayer) {
+    if (activePlayer[0].classList.contains("clicked")) {
+        stopSound(activePlayer[1]);
+        activePlayer[0].classList.remove("clicked","fa-circle-stop");
+        activePlayer[0].classList.add("fa-play-circle");
+
+        lastActiveWord = activeWord;
+
+        // DEACTIVATE WORD
+        activeWord = null;
+        activePlayer = null;
+        return;
+    }
+
+    playerLst.forEach((player) => {
+        if ((!player[0].classList.contains("submitted")) & player[0] != activePlayer[0]) {
+            player[0].classList.remove("clicked", "fa-circle-stop");
+            stopSound(player[1]);
+        } else if ((!player[0].classList.contains("submitted")) & player[0] == activePlayer[0]) {
+            activePlayer[0].classList.add("clicked","fa-circle-stop");
+            activePlayer[1].play();
+        }
+    })
+    return;
+}
+
+function resetPlayer(playerLst) {
+    playerLst.forEach((player) => {
+        player[0].style.backgroundColor = null;
+        player[0].classList.remove("clicked", "fa-xmark","fa-check", "fa-circle-stop", "submitted")
+        player[0].classList.add("fa-play-circle")
+    })
+}
+// PROMPT MANAGEMENT
+
+wordOne.addEventListener("click", (e) => {
+    activePlayer = [wordOne, wordOnePlayer];
+    updatePlayer(playerLst, activePlayer)
+})
+
+
+// LINK ONSCREEN KEYBOARD FUNCTIONALITY TO KEYPRESSS
+document.getElementById("keyboard-cont").addEventListener("click", (e) => {
+    const target = e.target
+
+    if (!target.classList.contains("keyboard-button")) {
+        return
+    }
+
+    let key = target.textContent
+
+    if (target.classList.contains("fa-delete-left")){
+        deleteLetter();
+        return
+        //key = "Backspace"
+    }
+
+    if (key==="submit"){
+        guessPreprocess();
+        return
+        //key = "Enter"
+    }
+
+    let pressedKey = target.innerText;
+    let found = pressedKey.match(/[a-z]/gi)
+
+    if (!found || found.length > 1) {
+        return
+    } else {
+        insertLetter(pressedKey)
+        document.querySelector(`#${pressedKey.toLowerCase()}`).classList.add("clicked")
+        setTimeout(() => {
+            setTimeout(document.querySelector(`#${pressedKey.toLowerCase()}`).classList.remove("clicked"));
+            }, 50);
+        return;
+    }
+    //document.dispatchEvent(new KeyboardEvent("keyup", {'key': key}))
+})
+
+// KEYPRESS TYPING LISTENER
+document.addEventListener("keyup", (e) => {
+
+   let pressedKey = String(e.key)
+   let found = pressedKey.match(/[a-z]/gi)
+
+    if (pressedKey === "Enter") {
+        document.querySelector(`#${pressedKey}`).classList.add("clicked")
+        setTimeout(() => {
+            setTimeout(document.querySelector(`#${pressedKey}`).classList.remove("clicked"));
+          }, 50);
+        guessPreprocess()
+        return;
+    }
+
+    if (pressedKey === "Backspace" & attemptStr.length != 0) {
+        document.querySelector(`#${pressedKey}`).classList.add("clicked")
+        setTimeout(() => {
+            setTimeout(document.querySelector(`#${pressedKey}`).classList.remove("clicked"));
+          }, 50);
+        deleteLetter()
+        return;
+    }
+
+    if (!found || found.length > 1) {
+        return
+    } else {
+        insertLetter(pressedKey)
+        document.querySelector(`#${pressedKey.toLowerCase()}`).classList.add("clicked")
+        setTimeout(() => {
+            setTimeout(document.querySelector(`#${pressedKey.toLowerCase()}`).classList.remove("clicked"));
+            }, 50);
+        return;
+    }
+})
+
+checkLevel("youtube")

assets/scripts/spelloff_results.js

@@ -0,0 +1,20 @@
+var submissionLst = sessionStorage.getItem("submissionLst").split(",")
+var typos = document.querySelector("#typos")
+var numCorrect = sessionStorage.getItem('numCorrect')
+var correctSpellingLst = sessionStorage.getItem("correctSpellingLst").split(",")
+var summary = document.querySelector("#summary")
+
+innerStr = ''
+
+for (var i = 0; i<submissionLst.length; i++){
+    innerStr += `
+    <tr>
+        <td>${i+1}</td>
+        ${correctSpellingLst[i]}
+        ${submissionLst[i]}
+    </tr>
+    `
+}
+
+typos.innerHTML = innerStr;
+summary.innerText = `You spelled ${numCorrect} words correctly.`

spelloff.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0">
+    <title>Spellcheck - A Word Game | Spell Off</title>
+    <link rel="stylesheet" href="assets/styles/large_style.css" media="(min-width: 800px)">
+    <link rel="stylesheet" href="assets/styles/mobile_style.css" media="(max-width: 800px)">
+    <link rel="stylesheet" href="assets/styles/no_scroll.css" media="(max-width: 800px)">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
+    <link rel="icon" type="image/x-icon" href="assets/icons/spellcheck.png">
+
+</head>
+<body>
+    <div class="header">
+        <div id="header-with-menu">
+            <a href="mode_select.html" class="boxed btn" id="header-menu"><i class="fa fa-arrow-left" style="font-size:30pt; padding:0%"></i></a>
+            <div></div>
+            <h1 class="boxed" id="header-title"><span class="">Spell Off</span></h1>
+        </div>
+    </div>
+    <div class="content">
+        <div id="top-banner">
+            <h2 class="boxed-black" id="count"></h2>
+        </div>
+        <div id="practice-prompt">
+            <div id="word-one" class="prompt boxed btn fa fa-play-circle" style="font-size: 24pt;">
+                <audio id="word-one-player" src="" loop></audio>
+            </div>
+            <input id="attempt-box" type="text" placeholder="start typing..." readonly>
+        </div>
+        <div id="keyboard"></div>
+    </div>
+
+    <div class="footer">
+        <div><p>an answer in progress <span class="error">prject</span></p></div>
+        <div id="social-icons-flexbox">
+            <a href="https://www.youtube.com/answerinprogress" target="_blank" class="social-icon"><i class="fa-brands fa-youtube"></i></a>
+            <a href="https://www.instagram.com/answerinprogress" target="_blank" class="social-icon"><i class="fa-brands fa-instagram"></i></a>
+            <a href="https://www.patreon.com/answerinprogress" target="_blank" class="social-icon"><i class="fa-brands fa-patreon"></i></a>
+            <a href="https://answerinprogress.substack.com/" target="_black" class="social-icon"><i class="fa-regular fa-envelope"></i></a>
+        </div>
+    </div> 
+</body>
+<script src="assets/scripts/wordLstGenerator.js"></script>
+<script src="assets/scripts/spelloff.js"></script> 
+</html>