From bcc1caa2c86086a980c833e5871f623da8f8a1bd Mon Sep 17 00:00:00 2001 From: Voyager162 Date: Thu, 9 Jan 2025 14:59:50 -0800 Subject: [PATCH 01/13] fixed not updating score --- navigation/BinaryLearningGame/BinaryLearningGameJS.js | 1 + 1 file changed, 1 insertion(+) diff --git a/navigation/BinaryLearningGame/BinaryLearningGameJS.js b/navigation/BinaryLearningGame/BinaryLearningGameJS.js index fe10167..a9ed69a 100644 --- a/navigation/BinaryLearningGame/BinaryLearningGameJS.js +++ b/navigation/BinaryLearningGame/BinaryLearningGameJS.js @@ -107,6 +107,7 @@ function checkAnswer() { if (userAnswer === currentQuestion.correctAnswer) { correctCounts++; + totalScoreDisplay.textContent = calculateScore(); // Update score display if (correctCounts > highScore) { highScore = correctCounts; From 6d0b5ddc9ad5ab4cea54f497f6e885e11e64511a Mon Sep 17 00:00:00 2001 From: Voyager162 Date: Thu, 9 Jan 2025 15:14:46 -0800 Subject: [PATCH 02/13] formatting and console.logging the data when gettting --- .../BinaryLearningGameJS.js | 44 ++++++++++++++++--- 1 file changed, 37 insertions(+), 7 deletions(-) diff --git a/navigation/BinaryLearningGame/BinaryLearningGameJS.js b/navigation/BinaryLearningGame/BinaryLearningGameJS.js index a9ed69a..f96b862 100644 --- a/navigation/BinaryLearningGame/BinaryLearningGameJS.js +++ b/navigation/BinaryLearningGame/BinaryLearningGameJS.js @@ -10,11 +10,12 @@ let currentLevel = "play"; let previousLevel = "play"; let correctCounts = 0; let lives = 3; -window.highScore = 0; let currentQuestion; let userName; let isSubmitMode = true; +window.highScore = 0; + import { pythonURI, javaURI, fetchOptions, login } from '../../assets/js/api/config.js'; const questionText = document.getElementById("question-text"); @@ -46,6 +47,7 @@ function calculateScore() { } function generateQuestion() { + const range = levels[currentLevel].range; const formats = levels[currentLevel].formats; const number = getRandomNumber(range); @@ -55,39 +57,53 @@ function generateQuestion() { if (currentLevel === "easy" || currentLevel === "medium") { [inputFormat, outputFormat] = ["decimal", "binary"]; if (Math.random() > 0.5) [inputFormat, outputFormat] = [outputFormat, inputFormat]; - } else { + } + + else { inputFormat = "hexadecimal"; outputFormat = Math.random() > 0.5 ? "binary" : "decimal"; } if (inputFormat === "decimal") { questionValue = number.toString(10); - } else if (inputFormat === "binary") { + } + + else if (inputFormat === "binary") { questionValue = number.toString(2); - } else { + } + + else { questionValue = number.toString(16).toUpperCase(); } if (outputFormat === "decimal") { correctAnswer = parseInt(number, 10).toString(10); - } else if (outputFormat === "binary") { + } + + else if (outputFormat === "binary") { correctAnswer = parseInt(number, 10).toString(2); - } else { + } + + else { correctAnswer = parseInt(number, 10).toString(16).toUpperCase(); } + currentQuestion = { questionValue, inputFormat, outputFormat, correctAnswer }; questionText.textContent = questionValue; convertFromFormat.textContent = inputFormat.charAt(0).toUpperCase() + inputFormat.slice(1); convertToFormat.textContent = outputFormat.charAt(0).toUpperCase() + outputFormat.slice(1); message.textContent = ""; answerInput.value = ""; + } function updateButtonMode() { if (isSubmitMode) { submitButton.textContent = "Submit"; - } else { + } + + else { submitButton.textContent = "Next"; } } @@ -137,6 +153,8 @@ function checkAnswer() { updateButtonMode(); } + + submitButton.addEventListener("click", () => { if (currentLevel === "play" && isSubmitMode) return; // Prevent submission in "play" mode on game load if (isSubmitMode) { @@ -146,6 +164,7 @@ submitButton.addEventListener("click", () => { } }); + document.addEventListener("keydown", (event) => { if (event.key === "Enter") { if (currentLevel === "play" && isSubmitMode) return; // Prevent submission in "play" mode on game load @@ -257,11 +276,22 @@ async function getHighestScoreForLevel(currentLevel) { if (!scoresResponse.ok) throw new Error('Failed to fetch scores'); const scores = await scoresResponse.json(); + console.log("total data", scores); + const userScores = scores.filter((entry) => String(entry.username) === String(userName)); + + console.log("data filtered for user", userScores); + const levelScores = userScores.filter((entry) => entry.user_difficulty === currentLevel); + + console.log("data filtered for user and level: ", levelScores); + const highestScore = levelScores.length > 0 ? Math.max(...levelScores.map((entry) => entry.user_score)) : 0; + console.log("data filtered for user, level, and the highest score: ", highestScore); + highScore = highestScore; + updateHighScoreDisplay(); } catch (error) { console.error('Error fetching scores:', error); From 0834a9ffd4cc3247a99808e326504cd153ec6fee Mon Sep 17 00:00:00 2001 From: Voyager162 Date: Tue, 21 Jan 2025 15:20:46 -0800 Subject: [PATCH 03/13] made the create and get functions --- .../BinaryLearningGameJS.js | 44 +++++++++---------- 1 file changed, 21 insertions(+), 23 deletions(-) diff --git a/navigation/BinaryLearningGame/BinaryLearningGameJS.js b/navigation/BinaryLearningGame/BinaryLearningGameJS.js index f96b862..3ed525d 100644 --- a/navigation/BinaryLearningGame/BinaryLearningGameJS.js +++ b/navigation/BinaryLearningGame/BinaryLearningGameJS.js @@ -139,7 +139,7 @@ function checkAnswer() { updateHearts(); if (lives === 0) { - setHighestScoreForLevel(); + createScores(userName, highScore, currentLevel); gameOver(); return; } @@ -258,14 +258,25 @@ function updateHearts() { document.querySelectorAll(".level-button").forEach((button) => { button.addEventListener("click", async (event) => { const level = event.target.dataset.level; - await getHighestScoreForLevel(level); + const scores = await getScores(level); + + const userScores = scores.filter((entry) => String(entry.username) === String(userName)); + + const levelScores = userScores.filter((entry) => entry.user_difficulty === currentLevel); + + highScore = levelScores.length > 0 ? Math.max(...levelScores.map((entry) => entry.user_score)) : 0; + + updateHighScoreDisplay(); + }); }); const currentUserApi = `${pythonURI}/api/id`; const scoresApi = `${pythonURI}/api/binaryLearningGameScores`; -async function getHighestScoreForLevel(currentLevel) { + + +async function getScores(currentLevel) { try { const currentUserResponse = await fetch(currentUserApi, fetchOptions); if (!currentUserResponse.ok) throw new Error('Failed to fetch current user'); @@ -276,34 +287,21 @@ async function getHighestScoreForLevel(currentLevel) { if (!scoresResponse.ok) throw new Error('Failed to fetch scores'); const scores = await scoresResponse.json(); - console.log("total data", scores); - - const userScores = scores.filter((entry) => String(entry.username) === String(userName)); - - console.log("data filtered for user", userScores); - - const levelScores = userScores.filter((entry) => entry.user_difficulty === currentLevel); - - console.log("data filtered for user and level: ", levelScores); - - const highestScore = levelScores.length > 0 ? Math.max(...levelScores.map((entry) => entry.user_score)) : 0; + return(scores); - console.log("data filtered for user, level, and the highest score: ", highestScore); - - highScore = highestScore; - - updateHighScoreDisplay(); } catch (error) { console.error('Error fetching scores:', error); return null; } } -async function setHighestScoreForLevel() { + +async function createScores(inputName, inputScore, inputDifficulty) { + const scoreData = { - username: userName, - score: highScore, - difficulty: currentLevel, + username: inputName, + score: inputScore, + difficulty: inputDifficulty, }; try { From 144c775eb98e03bf6b8e03690d4b97e5ee64d7e5 Mon Sep 17 00:00:00 2001 From: Voyager162 Date: Tue, 21 Jan 2025 15:21:25 -0800 Subject: [PATCH 04/13] renamed getScores to readScores to comply with CRUD naming stuff --- navigation/BinaryLearningGame/BinaryLearningGameJS.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/navigation/BinaryLearningGame/BinaryLearningGameJS.js b/navigation/BinaryLearningGame/BinaryLearningGameJS.js index 3ed525d..2fdc5c6 100644 --- a/navigation/BinaryLearningGame/BinaryLearningGameJS.js +++ b/navigation/BinaryLearningGame/BinaryLearningGameJS.js @@ -258,7 +258,7 @@ function updateHearts() { document.querySelectorAll(".level-button").forEach((button) => { button.addEventListener("click", async (event) => { const level = event.target.dataset.level; - const scores = await getScores(level); + const scores = await readScores(level); const userScores = scores.filter((entry) => String(entry.username) === String(userName)); @@ -276,7 +276,7 @@ const scoresApi = `${pythonURI}/api/binaryLearningGameScores`; -async function getScores(currentLevel) { +async function readScores(currentLevel) { try { const currentUserResponse = await fetch(currentUserApi, fetchOptions); if (!currentUserResponse.ok) throw new Error('Failed to fetch current user'); @@ -297,7 +297,7 @@ async function getScores(currentLevel) { async function createScores(inputName, inputScore, inputDifficulty) { - + const scoreData = { username: inputName, score: inputScore, From ed93627178fbfef4a110359840b79bf05647d301 Mon Sep 17 00:00:00 2001 From: Voyager162 Date: Tue, 21 Jan 2025 15:30:15 -0800 Subject: [PATCH 05/13] created the delete and update functions, not being used --- .../BinaryLearningGameJS.js | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/navigation/BinaryLearningGame/BinaryLearningGameJS.js b/navigation/BinaryLearningGame/BinaryLearningGameJS.js index 2fdc5c6..79c9549 100644 --- a/navigation/BinaryLearningGame/BinaryLearningGameJS.js +++ b/navigation/BinaryLearningGame/BinaryLearningGameJS.js @@ -323,6 +323,61 @@ async function createScores(inputName, inputScore, inputDifficulty) { } } + +async function deleteScores(inputId) { + + const scoreData = { + id: inputId + } + + try { + const response = await fetch(`${pythonURI}/api/binaryLearningGameScores`, { + ...fetchOptions, + method: 'DELETE', + body: JSON.stringify(scoreData), + }); + + if (!response.ok) { + throw new Error(`Failed to delete score: ${response.statusText}`); + } + } + + catch (error) { + console.error('Error deleting score:', error); + alert('Error deleting score: ' + error.message); + } +} + +async function updateScores(inputId, inputScore, inputDifficulty) { + const scoreData = { + id: inputId, + user_score: inputScore, + user_difficulty: inputDifficulty + } + + try { + const response = await fetch(`${pythonURI}/api/binaryLearningGameScores`, { + ...fetchOptions, + method: 'PUT', + body: JSON.stringify(scoreData), + }); + + if (!response.ok) { + throw new Error(`Failed to update score: ${response.statusText}`); + } + } + + catch (error) { + if (error = "Forbidden") { + alert("You do not have access to perform that function"); + } + else { + console.error('Error updating score:', error); + alert('Error updating score: ' + error.message); + } + } +} + // Close rules popup rulesButton.addEventListener("click", function () { rulesPopup.classList.add("visible"); From 7fe5964f40f913ce6dacd93e41358c0f529adeae Mon Sep 17 00:00:00 2001 From: Voyager162 Date: Tue, 21 Jan 2025 16:20:11 -0800 Subject: [PATCH 06/13] got score updating and deleting functions --- .../BinaryLearningGame/BinaryLearningGame.md | 21 ++++- .../BinaryLearningGameJS.js | 79 ++++++++++++++++++- 2 files changed, 97 insertions(+), 3 deletions(-) diff --git a/navigation/BinaryLearningGame/BinaryLearningGame.md b/navigation/BinaryLearningGame/BinaryLearningGame.md index dd34114..7709857 100644 --- a/navigation/BinaryLearningGame/BinaryLearningGame.md +++ b/navigation/BinaryLearningGame/BinaryLearningGame.md @@ -64,6 +64,25 @@ permalink: /binaryGame

+ + + diff --git a/navigation/BinaryLearningGame/BinaryLearningGameJS.js b/navigation/BinaryLearningGame/BinaryLearningGameJS.js index 79c9549..487148b 100644 --- a/navigation/BinaryLearningGame/BinaryLearningGameJS.js +++ b/navigation/BinaryLearningGame/BinaryLearningGameJS.js @@ -30,10 +30,15 @@ const submitButton = document.getElementById("submit-answer"); const chimeSound = document.getElementById("chime-sound"); const alarmSound = document.getElementById("alarm-sound"); const gameOverSound = document.getElementById("gameOver-sound"); + const rulesButton = document.getElementById("rules-btn"); const rulesPopup = document.getElementById("rules-popup"); const closeButton = rulesPopup.querySelector("button"); +const scoresButton = document.getElementById("scores-btn"); +const scoresPopup = document.getElementById("scores-popup"); +const closeScoresButton = scoresPopup.querySelector("button"); + function updateHighScoreDisplay() { totalHighScoreDisplay.textContent = highScore; } @@ -257,8 +262,7 @@ function updateHearts() { document.querySelectorAll(".level-button").forEach((button) => { button.addEventListener("click", async (event) => { - const level = event.target.dataset.level; - const scores = await readScores(level); + const scores = await readScores(); const userScores = scores.filter((entry) => String(entry.username) === String(userName)); @@ -387,3 +391,74 @@ closeButton.addEventListener("click", function () { rulesPopup.classList.remove("visible"); }); + +scoresButton.addEventListener("click", function () { + getScoreTableData(); + scoresPopup.classList.add("visible"); +}); + +closeScoresButton.addEventListener("click", function () { + scoresPopup.classList.remove("visible"); +}); + +async function getScoreTableData() { + + const scores = await readScores(); + + const userScores = scores.filter((entry) => String(entry.username) === String(userName)); + + const table = document.getElementById("table"); + + // Clear the table before adding new rows + while (table.firstChild) { + table.removeChild(table.firstChild); + } + +userScores.forEach(score => { + // build a row for each user + const tr = document.createElement("tr"); + + // td's to build out each column of data + const scores = document.createElement("td"); + const difficulty = document.createElement("td"); + const action = document.createElement("td"); + + // add content from user data + scores.innerHTML = score.user_score; + difficulty.innerHTML = score.user_difficulty; + + // add action for update button + var updateBtn = document.createElement('input'); + updateBtn.type = "button"; + updateBtn.className = "button"; + updateBtn.value = "Update"; + updateBtn.style = "margin-right:16px"; + updateBtn.onclick = function () { + const updatedScore = prompt("Updated score"); + const updatedDifficulty = prompt("Updated difficulty"); + updateScores(score.id, updatedScore, updatedDifficulty); + getScoreTableData(); + }; + action.appendChild(updateBtn); + + // add action for delete button + var deleteBtn = document.createElement('input'); + deleteBtn.type = "button"; + deleteBtn.className = "button"; + deleteBtn.value = "Delete"; + deleteBtn.style = "margin-right:16px" + deleteBtn.onclick = function () { + deleteScores(score.id); + getScoreTableData(); + }; + action.appendChild(deleteBtn); + + // add data to row + tr.appendChild(scores); + tr.appendChild(difficulty); + tr.appendChild(action); + + // add row to table + table.appendChild(tr); + }); +} \ No newline at end of file From b7e6e63f6f30267705b2f97c5415b4fa01447c31 Mon Sep 17 00:00:00 2001 From: Voyager162 Date: Tue, 21 Jan 2025 21:07:08 -0800 Subject: [PATCH 07/13] got the score table all working --- .../BinaryLearningGame/BinaryLearningGame.md | 19 +++ .../BinaryLearningGameJS.js | 117 +++++++++++++++--- 2 files changed, 118 insertions(+), 18 deletions(-) diff --git a/navigation/BinaryLearningGame/BinaryLearningGame.md b/navigation/BinaryLearningGame/BinaryLearningGame.md index 7709857..a2e62ee 100644 --- a/navigation/BinaryLearningGame/BinaryLearningGame.md +++ b/navigation/BinaryLearningGame/BinaryLearningGame.md @@ -84,6 +84,25 @@ permalink: /binaryGame + +