smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-26 14:20:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: tictactoe finished

Browse source
This commit is contained in:
Smig Tech 2023-09-27 20:00:38 -04:00
parent a01c1a8e87
commit c8ce75acd1
6 changed files with 157 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
tictactoe/index.html
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>TicTacToe</title>
</head>
<body>
<div class="container">
<div class="title">
<h1 class="title-text">
Rock, Paper, Scissors!
</h1>
</div>
<div class="row">
<div class="item">
<button class="card-title">
<img src="static/rock.png" alt="" class="card-image" data-item="rock">
</button>
</div>
<div class="item">
<button class="card-title">
<img src="static/paper.png" alt="" class="card-image" data-item="rock">
</button>
</div>
<div class="item">
<button class="card-title">
<img src="static/scissors.png" alt="" class="card-image" data-item="rock">
</button>
</div>
</div>
<div class="row">
<div class="results">
<div class="score">
<h1 class="title-text">
SCORE:
</h1>
<table class="scoreboard">
<tr>
<th>Player</th>
<th>Win</th>
<th>Loss</th>
<th>Tie</th>
</tr>
<tr class="user-row">
<td>User</td>
<td class="user-win">0</td>
<td class="user-loss">0</td>
<td class="user-tie">0</td>
</tr>
<tr class="cpu-row">
<td>Computer</td>
<td class="cpu-win">0</td>
<td class="cpu-loss">0</td>
<td class="cpu-tie">0</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script src="tictactoe.js"></script>
</body>
</html>

BIN
tictactoe/static/paper.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
tictactoe/static/rock.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 207 KiB

BIN
tictactoe/static/scissors.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.2 KiB

39
tictactoe/style.css Normal file
View file

@ -0,0 +1,39 @@
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.title {
margin-bottom: 30px;
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
min-height: 250px;
min-width: 250px;
padding: 20px;
gap: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.card-image {
height: 200px;
width: 200px;
}
body {
text-align: center;
}
button {
cursor: pointer;
}

58
tictactoe/tictactoe.js
View file

@ -17,15 +17,19 @@ else if its a tie , it should prompt the user to pick a new answer
until a winner is picked until a winner is picked
*/ */
let rpc = ["rock", "paper", "scissors"] // index 0 = wins, index 1 = loss
// index 2 = ties
let CPUScore = [0,0,0];
let userScore = [0,0,0];
let usersChoice = () => { let playRound = (choice) => {
let userChoice = prompt("Rock, Paper, or Scissors? "); let uc = choice.target.dataset.item;
return userChoice.toLocaleLowerCase(); cpc = getCPUChoice();
getResults(uc, cpc);
} }
let getCPUChoice = () => { let getCPUChoice = () => {
// Generate a random number between 0 and 2 let rpc = ["rock", "paper", "scissors"];
let choice = Math.floor(Math.random() * 3); let choice = Math.floor(Math.random() * 3);
return rpc[choice]; return rpc[choice];
@ -33,17 +37,53 @@ let getCPUChoice = () => {
function getResults(playerSelection, cpuSelection) { function getResults(playerSelection, cpuSelection) {
if (playerSelection === cpuSelection) { if (playerSelection === cpuSelection) {
updateScore('tie')
return "tie"; return "tie";
} else if (playerSelection == "rock" && cpuSelection == "scissors" || } else if (playerSelection == "rock" && cpuSelection == "scissors" ||
playerSelection == "paper" && cpuSelection == "rock" || playerSelection == "paper" && cpuSelection == "rock" ||
playerSelection == "scissors" && cpuSelection == "paper") { playerSelection == "scissors" && cpuSelection == "paper") {
updateScore('user');
return `You Win! ${playerSelection} beats ${cpuSelection}`; return `You Win! ${playerSelection} beats ${cpuSelection}`;
} else { } else {
updateScore('cpu');
return `You Lose! ${cpuSelection} beats ${playerSelection}`; return `You Lose! ${cpuSelection} beats ${playerSelection}`;
} }
} }
uc = usersChoice(); function updateScore(winner) {
cpc = getCPUChoice(); if (winner === 'user') {
console.log(uc, cpc); userScore[0] += 1;
console.log(getResults(uc, cpc)); CPUScore[1] += 1;
} else if (winner === 'cpu') {
CPUScore[0] += 1;
userScore[1] += 1;
} else {
CPUScore[2] += 1;
userScore[2] += 1;
}
// Need a better way to target multiple elements, but this works for now
let userScoreDiv = document.querySelector('.user-row');
let cpuScoreDiv = document.querySelector('.cpu-row');
userScoreDiv.querySelector('.user-win').textContent = userScore[0];
userScoreDiv.querySelector('.user-loss').textContent = userScore[1];
userScoreDiv.lastElementChild.textContent = userScore[2];
cpuScoreDiv.querySelector('.cpu-win').textContent = CPUScore[0];
cpuScoreDiv.querySelector('.cpu-loss').textContent = CPUScore[1];
cpuScoreDiv.lastElementChild.textContent = CPUScore[2];
if (userScore[0] === 5 || CPUScore === 5) {
let showWinner = document.querySelector('.score .title-text');
if(userScore[0] === 5){
showWinner.textContent = `YOU WON!`;
} else if(CPUScore[0] === 5) {
showWinner.textContent = `YOU LOST!`;
}
console.log('Game Over');
}
// userScoreDiv.textContent = userScore; //`Your Score: ${userScore} | CPU Score: ${CPUScore}`;
// console.log(userScore, CPUScore);
}
let choice = document.querySelectorAll('button');
choice.forEach( (c) => c.addEventListener('click', playRound));