diff --git a/tictactoe/index.html b/tictactoe/index.html index e69de29..4937be1 100644 --- a/tictactoe/index.html +++ b/tictactoe/index.html @@ -0,0 +1,69 @@ + + + + + + + TicTacToe + + +
+
+

+ Rock, Paper, Scissors! +

+
+
+
+ +
+
+ +
+
+ +
+ +
+
+
+
+

+ SCORE: +

+ + + + + + + + + + + + + + + + + + + +
PlayerWinLossTie
User000
Computer000
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/tictactoe/static/paper.png b/tictactoe/static/paper.png new file mode 100644 index 0000000..c64b630 Binary files /dev/null and b/tictactoe/static/paper.png differ diff --git a/tictactoe/static/rock.png b/tictactoe/static/rock.png new file mode 100644 index 0000000..8520ff9 Binary files /dev/null and b/tictactoe/static/rock.png differ diff --git a/tictactoe/static/scissors.png b/tictactoe/static/scissors.png new file mode 100644 index 0000000..b847f44 Binary files /dev/null and b/tictactoe/static/scissors.png differ diff --git a/tictactoe/style.css b/tictactoe/style.css new file mode 100644 index 0000000..9f484ff --- /dev/null +++ b/tictactoe/style.css @@ -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; +} \ No newline at end of file diff --git a/tictactoe/tictactoe.js b/tictactoe/tictactoe.js index c3f9618..d0c6b32 100644 --- a/tictactoe/tictactoe.js +++ b/tictactoe/tictactoe.js @@ -17,15 +17,19 @@ else if its a tie , it should prompt the user to pick a new answer 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 userChoice = prompt("Rock, Paper, or Scissors? "); - return userChoice.toLocaleLowerCase(); +let playRound = (choice) => { + let uc = choice.target.dataset.item; + cpc = getCPUChoice(); + getResults(uc, cpc); } let getCPUChoice = () => { - // Generate a random number between 0 and 2 + let rpc = ["rock", "paper", "scissors"]; let choice = Math.floor(Math.random() * 3); return rpc[choice]; @@ -33,17 +37,53 @@ let getCPUChoice = () => { function getResults(playerSelection, cpuSelection) { if (playerSelection === cpuSelection) { + updateScore('tie') return "tie"; } else if (playerSelection == "rock" && cpuSelection == "scissors" || playerSelection == "paper" && cpuSelection == "rock" || playerSelection == "scissors" && cpuSelection == "paper") { + updateScore('user'); return `You Win! ${playerSelection} beats ${cpuSelection}`; } else { + updateScore('cpu'); return `You Lose! ${cpuSelection} beats ${playerSelection}`; } } -uc = usersChoice(); -cpc = getCPUChoice(); -console.log(uc, cpc); -console.log(getResults(uc, cpc)); \ No newline at end of file +function updateScore(winner) { + if (winner === 'user') { + userScore[0] += 1; + 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)); \ No newline at end of file