Skip to content

Commit

Permalink
Applied Prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@ExtF8
ExtF8 committed Jan 23, 2024
1 parent 97c8047 commit 7619797
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 135 deletions.
101 changes: 52 additions & 49 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<section id="page-wrapper">
<h1>Rock Paper Scissors</h1>
<p>First to 5 points wins</p>
<div class="round">
<h3>Round:</h3>
<p class="round-number">1</p>
</div>
<div id="game-wrapper">
<div class="player-container">
<div class="user-container">
<h2>Human</h2>
<div class="score">
<h3>Score:</h3>
<p class="user-score">0</p>
</div>
</div>
<div class="user-buttons">
<button class="rock" data-selection="rock">Rock</button>
<button class="paper" data-selection="paper">Paper</button>
<button class="scissors" data-selection="scissors">Scissors</button>
</div>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<section id="page-wrapper">
<h1>Rock Paper Scissors</h1>
<p>First to 5 points wins</p>
<div class="round">
<h3>Round:</h3>
<p class="round-number">1</p>
</div>
<div class="player-container">
<div class="user-container">
<h2>Computer</h2>
<div class="score">
<h3>Score:</h3>
<p class="computer-score">0</p>
<div id="game-wrapper">
<div class="player-container">
<div class="user-container">
<h2>Human</h2>
<div class="score">
<h3>Score:</h3>
<p class="user-score">0</p>
</div>
</div>
<div class="user-buttons">
<button class="rock" data-selection="rock">Rock</button>
<button class="paper" data-selection="paper">
Paper
</button>
<button class="scissors" data-selection="scissors">
Scissors
</button>
</div>
</div>
<div class="user-buttons">
<button class="computer-rock">Rock</button>
<button class="computer-paper">Paper</button>
<button class="computer-scissors">Scissors</button>
<div class="player-container">
<div class="user-container">
<h2>Computer</h2>
<div class="score">
<h3>Score:</h3>
<p class="computer-score">0</p>
</div>
</div>
<div class="user-buttons">
<button class="computer-rock">Rock</button>
<button class="computer-paper">Paper</button>
<button class="computer-scissors">Scissors</button>
</div>
</div>
</div>
</div>
<div class="result-content">
<h2 class="result"></h2>
</div>
</section>
</body>

</html>
</div>
<div class="result-content">
<h2 class="result"></h2>
</div>
</section>
</body>
</html>
170 changes: 84 additions & 86 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,124 +20,122 @@ const computerPaper = document.querySelector('.computer-paper');
const computerScissors = document.querySelector('.computer-scissors');

function refreshHover() {
newGame.classList.add('userHover');
newGame.classList.add('userHover');
}

function removeClick() {
this.classList.remove('userClick');
this.classList.remove('userHover');
this.classList.remove('userClick');
this.classList.remove('userHover');
}

function removeHover() {
this.classList.remove('userHover');
this.classList.remove('userHover');
}

function refreshPage() {
window.location.reload(true);
window.location.reload(true);
}

function userHover() {
if (playerScore <= 4 && computerScore <= 4) {
this.classList.add('userHover');
}
if (playerScore <= 4 && computerScore <= 4) {
this.classList.add('userHover');
}
}

function removeUserColor() {
rockButton.classList.remove('userClick');
rockButton.classList.remove('userClick');
paperButton.classList.remove('userClick');
scissorsButton.classList.remove('userClick');
}

function disableButtons() {
btns.forEach(elem => {
elem.disabled = true
})
btns.forEach((elem) => {
elem.disabled = true;
});
}

[...btns].forEach(btn => {
let choice = btn.getAttribute('data-selection');
btn.addEventListener('click', () => {
playRound(choice);
btn.classList.add('userClick');
})
})
[...btns].forEach((btn) => {
let choice = btn.getAttribute('data-selection');
btn.addEventListener('click', () => {
playRound(choice);
btn.classList.add('userClick');
});
});

function computerPlay() {
let result = 'scissors';
const number = Math.floor(Math.random() * 999);

if (number % 3 === 0) {
result = 'rock';
}
if (number % 3 === 1) {
result = 'paper';
}

return result;

let result = 'scissors';
const number = Math.floor(Math.random() * 999);

if (number % 3 === 0) {
result = 'rock';
}
if (number % 3 === 1) {
result = 'paper';
}

return result;
}

function playRound(playerSelection) {
computer = computerPlay();
player = playerSelection;
removeUserColor();
computerColor(computer);

if (
(player == 'rock' && computer == 'scissors') ||
(player == 'paper' && computer == 'rock') ||
(player == 'scissors' && computer == 'paper')
) {
playerScore++;
userScore.textContent = `${playerScore}`;
result.textContent = `You won round #${roundCount}`;

if (playerScore == 5) {
result.textContent = `You WON! You got 5 points in ${roundCount} rounds!`;
resultContent.insertAdjacentElement('afterend', newGame);
disableButtons();
}
roundCount++;
roundNum.textContent = `${roundCount}`;
} else if (player == computer) {
roundCount++;
roundNum.textContent = `${roundCount}`;
result.textContent = `This round is draw. You both choose same.`;
} else {
computerScore++;
compScore.textContent = `${computerScore}`;
result.textContent = `You lost round #${roundCount}`;

if (computerScore == 5) {
result.textContent = `You suck! You lost to a Computer in ${roundCount} rounds! Go and do something useful!`;
resultContent.insertAdjacentElement('afterend', newGame);
disableButtons();
}

roundCount++;
roundNum.textContent = `${roundCount}`;
}
computer = computerPlay();
player = playerSelection;
removeUserColor();
computerColor(computer);

if (
(player == 'rock' && computer == 'scissors') ||
(player == 'paper' && computer == 'rock') ||
(player == 'scissors' && computer == 'paper')
) {
playerScore++;
userScore.textContent = `${playerScore}`;
result.textContent = `You won round #${roundCount}`;

if (playerScore == 5) {
result.textContent = `You WON! You got 5 points in ${roundCount} rounds!`;
resultContent.insertAdjacentElement('afterend', newGame);
disableButtons();
}

roundCount++;
roundNum.textContent = `${roundCount}`;
} else if (player == computer) {
roundCount++;
roundNum.textContent = `${roundCount}`;
result.textContent = `This round is draw. You both choose same.`;
} else {
computerScore++;
compScore.textContent = `${computerScore}`;
result.textContent = `You lost round #${roundCount}`;

if (computerScore == 5) {
result.textContent = `You suck! You lost to a Computer in ${roundCount} rounds! Go and do something useful!`;
resultContent.insertAdjacentElement('afterend', newGame);
disableButtons();
}

roundCount++;
roundNum.textContent = `${roundCount}`;
}
}

function computerColor(computer) {
if (computer === 'rock') {
removeColor();
computerRock.classList.add('computerPick');

} else if (computer === 'paper') {
removeColor();
computerPaper.classList.add('computerPick');
} else {
removeColor();
computerScissors.classList.add('computerPick');
}
if (computer === 'rock') {
removeColor();
computerRock.classList.add('computerPick');
} else if (computer === 'paper') {
removeColor();
computerPaper.classList.add('computerPick');
} else {
removeColor();
computerScissors.classList.add('computerPick');
}
}

function removeColor() {
computerRock.classList.remove('computerPick');
computerPaper.classList.remove('computerPick');
computerScissors.classList.remove('computerPick');
computerRock.classList.remove('computerPick');
computerPaper.classList.remove('computerPick');
computerScissors.classList.remove('computerPick');
}

computerRock.addEventListener('transitionend', removeColor);
Expand All @@ -163,4 +161,4 @@ newGame.classList.add('button', 'refresh');
newGame.addEventListener('mouseover', refreshHover);
newGame.addEventListener('mouseleave', removeHover);
newGame.addEventListener('click', refreshHover);
newGame.addEventListener('click', refreshPage);
newGame.addEventListener('click', refreshPage);

0 comments on commit 7619797

Please sign in to comment.