Skip to content

Feature/iteration three #13

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

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

Feature/iteration three #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a941610
Fetch data instead of using words.js
pareesakd1118 Feb 16, 2024
6c56855
Merge pull request #1 from pareesakd1118/feature/iteration-one
pareesakd1118 Feb 16, 2024
1c60cb3
Refactor submitGuess function
pareesakd1118 Feb 16, 2024
846c417
Iteration two - game resets if player loses
pareesakd1118 Feb 17, 2024
43c8d5f
Merge pull request #2 from pareesakd1118/feature/iteration-two
pareesakd1118 Feb 17, 2024
1de8d7a
Iteration three - render stats
pareesakd1118 Feb 17, 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
13 changes: 6 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,11 @@ <h1>turdle</h1>
<th><input maxlength="1" onkeypress="return /[a-z]/i.test(event.key)" type="text" name="" value="" id="cell-5-24"></th>
</tr>
<tr id="row-6">
<th><input maxlength="1" onkeypress="return /[a-z]/i.test(event.key)" type="text" name="" value="" id="cell-5-25"></th>
<th><input maxlength="1" onkeypress="return /[a-z]/i.test(event.key)" type="text" name="" value="" id="cell-5-26"></th>
<th><input maxlength="1" onkeypress="return /[a-z]/i.test(event.key)" type="text" name="" value="" id="cell-5-27"></th>
<th><input maxlength="1" onkeypress="return /[a-z]/i.test(event.key)" type="text" name="" value="" id="cell-5-28"></th>
<th><input maxlength="1" onkeypress="return /[a-z]/i.test(event.key)" type="text" name="" value="" id="cell-5-29"></th>
<th><input maxlength="1" onkeypress="return /[a-z]/i.test(event.key)" type="text" name="" value="" id="cell-6-25"></th>
<th><input maxlength="1" onkeypress="return /[a-z]/i.test(event.key)" type="text" name="" value="" id="cell-6-26"></th>
<th><input maxlength="1" onkeypress="return /[a-z]/i.test(event.key)" type="text" name="" value="" id="cell-6-27"></th>
<th><input maxlength="1" onkeypress="return /[a-z]/i.test(event.key)" type="text" name="" value="" id="cell-6-28"></th>
<th><input maxlength="1" onkeypress="return /[a-z]/i.test(event.key)" type="text" name="" value="" id="cell-6-29"></th>
</tr>
</table>
<div class="inline">
Expand Down Expand Up @@ -155,7 +155,7 @@ <h3>GAME STATS</h3>
<p class="informational-text">On average, it takes you <span id="stats-average-guesses">/some number/</span> guesses to find the correct word.</p>
</section>
<section class="collapsed" id="game-over-section">
<h3 id="game-over-message">Yay!</h1>
<h3 id="game-over-message">Yay! WOOO</h1>
<p class="informational-text">You did it! It took you <span id="game-over-guesses-count">/some number/</span> guess<span id="game-over-guesses-plural">es</span> to find the correct word.</p>
</section>
<nav>
Expand All @@ -164,7 +164,6 @@ <h3 id="game-over-message">Yay!</h1>
<button type="button" name="rules" class="nav-button" id="stats-button">stats</button>
</nav>
</main>
<script src="words.js"></script>
<script src="index.js"></script>
</body>
</html>
85 changes: 67 additions & 18 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ var stats = document.querySelector('#stats-section');
var gameOverBox = document.querySelector('#game-over-section');
var gameOverGuessCount = document.querySelector('#game-over-guesses-count');
var gameOverGuessGrammar = document.querySelector('#game-over-guesses-plural');
var statsSection = document.querySelector("#stats-section")

// Event Listeners
window.addEventListener('load', setGame);
Expand All @@ -42,13 +43,22 @@ viewStatsButton.addEventListener('click', viewStats);
// Functions
function setGame() {
currentRow = 1;
winningWord = getRandomWord();
updateInputPermissions();
fetchData()
.then((data) => {
winningWord = getRandomWord(data);
updateInputPermissions();
})
}

function fetchData() {
return fetch("http://localhost:3001/api/v1/words")
.then(res => res.json())
.catch(err => console.log(err))
}

function getRandomWord() {
function getRandomWord(data) {
var randomIndex = Math.floor(Math.random() * 2500);
return words[randomIndex];
return data[randomIndex];
}

function updateInputPermissions() {
Expand All @@ -65,11 +75,17 @@ function updateInputPermissions() {

function moveToNextInput(e) {
var key = e.keyCode || e.charCode;
var indexOfNext;

if( key !== 8 && key !== 46 ) {
if (key !== 8 && key !== 46) {
var indexOfNext = parseInt(e.target.id.split('-')[2]) + 1;
inputs[indexOfNext].focus();
}

if (indexOfNext === 30) {
indexOfNext = 0;
}

inputs[indexOfNext].focus();
}

function clickLetter(e) {
Expand All @@ -88,20 +104,23 @@ function clickLetter(e) {
}

function submitGuess() {
if (checkIsWord()) {
errorMessage.innerText = '';
compareGuess();
if (checkForWin()) {
setTimeout(declareWinner, 1000);
fetchData()
.then((data) => {
if (checkIsWord(data)) {
errorMessage.innerText = '';
compareGuess();
if (checkForWin() || currentRow === 6) {
setTimeout(declareWinner, 1000);
} else {
changeRow();
}
} else {
changeRow();
errorMessage.innerText = 'Not a valid word. Try again!';
}
} else {
errorMessage.innerText = 'Not a valid word. Try again!';
}
})
}

function checkIsWord() {
function checkIsWord(data) {
guess = '';

for(var i = 0; i < inputs.length; i++) {
Expand All @@ -110,7 +129,7 @@ function checkIsWord() {
}
}

return words.includes(guess);
return data.includes(guess);
}

function compareGuess() {
Expand Down Expand Up @@ -172,8 +191,14 @@ function declareWinner() {
setTimeout(startNewGame, 4000);
}


function recordGameStats() {
gamesPlayed.push({ solved: true, guesses: currentRow });
if (checkForWin()) {
gamesPlayed.push({ solved: true, guesses: currentRow });
}
if (!checkForWin() && currentRow === 6) {
gamesPlayed.push({ solved: false, guesses: currentRow});
}
}

function changeGameOverText() {
Expand Down Expand Up @@ -230,6 +255,7 @@ function viewGame() {
}

function viewStats() {
renderStats();
letterKey.classList.add('hidden');
gameBoard.classList.add('collapsed');
rules.classList.add('collapsed');
Expand All @@ -239,8 +265,31 @@ function viewStats() {
viewStatsButton.classList.add('active');
}

function renderStats() {
const percentRight = gamesPlayed.filter(game => game.solved).length / gamesPlayed.length * 100;
const averageTries = gamesPlayed.filter(game => game.solved).reduce((acc, game) => {
acc += game.guesses
return acc
}, 0) / gamesPlayed.length;

statsSection.innerHTML = `<h3>GAME STATS</h3>
<p class="informational-text">You've played ${gamesPlayed.length} games.</p>
<p class="informational-text">You've guessed the correct word ${percentRight}% of the time.</p>
<p class="informational-text">On average, it takes you ${averageTries} guesses to find the correct word.</p>`;
}



function viewGameOverMessage() {
if (!checkForWin() && currentRow === 6) {
gameOverBox.innerHTML = `<h3 id="game-over-message">BOOOO!</h1>
<p class="informational-text">You suck.</p>`
} else {
gameOverBox.innerHTML = `<h3 id="game-over-message">YAY!</h1>
<p class="informational-text">You did it! It took you ${currentRow} tries to find the correct word.</p>`
}
gameOverBox.classList.remove('collapsed')
letterKey.classList.add('hidden');
gameBoard.classList.add('collapsed');
}

Loading