Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix keyboard issues #37

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix keyboard issues #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9e01928
fixed keyboard handling in keyboard.js
jasger9000 Feb 3, 2024
a7a71e8
moved duplicated code to central js file
jasger9000 Feb 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
223 changes: 18 additions & 205 deletions assets/scripts/keyboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
/* https://www.freecodecamp.org/news/build-a-wordle-clone-in-javascript/ */
const KEYBOARD_EL = document.querySelector("#keyboard")
const attempt = document.querySelector("#attempt-box")
var level = document.querySelector("#level")

var wordOne = document.querySelector("#word-one")
Expand Down Expand Up @@ -35,62 +32,20 @@ var playerLst = [
[wordFive, wordFivePlayer, wordFiveSpelling, wordFiveSubmission]
];

var lastActiveWord = null;
var attemptStr = '';
var activeWord = null;
var activePlayer = null;
var results = '';
var numSubmitted;
var numWrong = 0;
var correctSpellingLst = [];
var submissionLst = [];

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="fourth-row">
<button class="keyboard-button boxed" id="Enter">submit</button>
</div>
</div>`


var dictValue;
// CHECK LEVEL
function checkLevel(level){
resetPlayer(playerLst);

attempt.value=attemptStr;
if (level.textContent == "Level One: Easy"){
if (level.textContent == "Level One: Easy") {
assignSound("levelOneNEW", chooseWords(easyWords))
dictValue = "levelOne"
} else if (level.textContent == "Level Two: Medium"){
Expand All @@ -103,26 +58,26 @@ function checkLevel(level){

} else {
window.location.replace("ahshit.html");
}
}
}

// POPULATE PAGE WITH LEVEL APPROPRIATE WORDS
function assignSound(levelPath, words){
path = `assets/audio/${levelPath}`;
try{
// setting neutral values
wordLst = words;
numSubmitted = 0;
activeWord = null;
activePlayer = null;
wordOnePlayer.src = `${path}/${words[0]}.mp3`
wordTwoPlayer.src = `${path}/${words[1]}.mp3`
wordThreePlayer.src = `${path}/${words[2]}.mp3`
wordFourPlayer.src = `${path}/${words[3]}.mp3`
wordFivePlayer.src = `${path}/${words[4]}.mp3`
} catch(error) {
console.log(error)
}
let path = `assets/audio/${levelPath}`;
try {
// setting neutral values
wordLst = words;
numSubmitted = 0;
activeWord = null;
activePlayer = null;
wordOnePlayer.src = `${path}/${words[0]}.mp3`
wordTwoPlayer.src = `${path}/${words[1]}.mp3`
wordThreePlayer.src = `${path}/${words[2]}.mp3`
wordFourPlayer.src = `${path}/${words[3]}.mp3`
wordFivePlayer.src = `${path}/${words[4]}.mp3`
} catch(error) {
console.log(error)
}
}

// MOVE TO NEXT ROUND
Expand Down Expand Up @@ -165,49 +120,6 @@ function updateResults(){
results += "\\n"
}

// 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;
}

// CHECK IF GUESS IS CORRECT

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();
}
}

function checkGuess() {
//correctSpellingLst.push(`<td>${activeWord}</td>`);
activePlayer[2] = `<td>${activeWord}</td>`
Expand Down Expand Up @@ -278,41 +190,6 @@ nextRoundBtn.addEventListener("click", (e) =>{

})

// 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

Expand Down Expand Up @@ -347,68 +224,4 @@ wordFive.addEventListener("click", (e) => {
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;
insertLetter(pressedKey)
//document.querySelector(`#${pressedKey.toLowerCase()}`).classList.add("clicked")
//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(level)
Loading