├── README.md ├── images ├── background.jpg ├── cracked-wood-with-dark-background.jpg ├── paper.png ├── robot.png ├── rock.png ├── scissors.png └── user.png ├── index.html ├── main.js ├── sounds ├── Cheering-SoundBible.com-1115515042.wav ├── Sad-SoundBible.com-759843766.wav └── zapsplat_multimedia_button_click_005_53866.mp3 └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # rock-paper-scissors 2 | A simple game of rock paper scissors, built with JavaScript. 3 | 4 | [The Odin Project - Foundations Course](https://www.theodinproject.com/courses/foundations) 5 | 6 | [The Odin Project - Foundations Course - Rock Paper Scissors](https://www.theodinproject.com/courses/foundations/lessons/rock-paper-scissors) 7 | -------------------------------------------------------------------------------- /images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tmcerlean/rock-paper-scissors/446ee0836941d2d90a87b880969f8b8afaa7bb2e/images/background.jpg -------------------------------------------------------------------------------- /images/cracked-wood-with-dark-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tmcerlean/rock-paper-scissors/446ee0836941d2d90a87b880969f8b8afaa7bb2e/images/cracked-wood-with-dark-background.jpg -------------------------------------------------------------------------------- /images/paper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tmcerlean/rock-paper-scissors/446ee0836941d2d90a87b880969f8b8afaa7bb2e/images/paper.png -------------------------------------------------------------------------------- /images/robot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tmcerlean/rock-paper-scissors/446ee0836941d2d90a87b880969f8b8afaa7bb2e/images/robot.png -------------------------------------------------------------------------------- /images/rock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tmcerlean/rock-paper-scissors/446ee0836941d2d90a87b880969f8b8afaa7bb2e/images/rock.png -------------------------------------------------------------------------------- /images/scissors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tmcerlean/rock-paper-scissors/446ee0836941d2d90a87b880969f8b8afaa7bb2e/images/scissors.png -------------------------------------------------------------------------------- /images/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tmcerlean/rock-paper-scissors/446ee0836941d2d90a87b880969f8b8afaa7bb2e/images/user.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rock, Paper, Scissors! 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | 23 |
24 |
25 |

26 |
27 |
28 |
29 |

Player

30 |
31 | 34 |
35 |

Score: 0

36 |
37 |
38 |
39 |
40 |

Rock

41 | 42 |
43 |
44 |

Paper

45 | 46 |
47 |
48 |

Scissors

49 | 50 |
51 |
52 |
53 |
54 |

Computer

55 |
56 | 59 |
60 |

Score: 0

61 |
62 |
63 |
64 |
65 |

Rock

66 | 67 |
68 |
69 |

Paper

70 | 71 |
72 |
73 |

Scissors

74 | 75 |
76 |
77 |
78 |
79 |
80 |
81 | 82 | 83 |
84 |

85 | Play Again? 86 |
87 |
88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // Function to write text before game starts 2 | let i = 0; 3 | let txt = 'Rock, Paper, Scissors?'; 4 | let speed = 50; 5 | 6 | function typeWriter() { 7 | if (i < txt.length) { 8 | document.getElementById("gameh1").innerHTML += txt.charAt(i); 9 | i++; 10 | setTimeout(typeWriter, speed); 11 | } 12 | } 13 | 14 | 15 | // Function to play main button audio on click 16 | function playSound() { 17 | const buttonPress = document.querySelector("#startbuttonsound"); 18 | buttonPress.play(); 19 | } 20 | mainButton = document.querySelector("#startbutton").addEventListener("click", playSound); 21 | 22 | 23 | // Function to play winner audio on win 24 | function playWinSound() { 25 | const winSound = document.getElementById("winnersound"); 26 | winSound.play(); 27 | } 28 | 29 | // Function to play loser audio on loss 30 | function playLoseSound() { 31 | const loseSound = document.getElementById("losersound"); 32 | loseSound.play(); 33 | } 34 | 35 | // Function to hide start div and show end div 36 | let startContainer = document.getElementById('startcontainer'); 37 | let btn = document.querySelector("#startbutton"); 38 | 39 | btn.addEventListener('click', function(){ 40 | startContainer.style.opacity = 0; 41 | startContainer.style.transform = 'scale(0)'; 42 | // Add timeout with length matching animation-duration 43 | window.setTimeout(function(){ 44 | startContainer.style.display = 'none'; 45 | },700); 46 | setTimeout(() => { typeWriter(); }, 1000); 47 | // Add event listener to all of the game buttons 48 | gameButtons = document.querySelectorAll(".gameselection").forEach(item => { 49 | item.addEventListener("click", playSound); 50 | }) 51 | }); 52 | 53 | 54 | // Function to hide end div and show winner div & logos 55 | function hideEndContainerShowWinner() { 56 | let gameContainer = document.querySelector('.gamecontainer'); 57 | let bottomContainer = document.getElementById('bottomcontainer'); 58 | gameContainer.style.opacity = 0; 59 | gameContainer.style.transform = 'scale(0)'; 60 | // Add timeout with length matching animation-duration 61 | gameContainer.style.display = 'none'; 62 | bottomContainer.style.display = 'block'; 63 | } 64 | 65 | btn.addEventListener('click', function(){ 66 | startContainer.style.opacity = 0; 67 | startContainer.style.transform = 'scale(0)'; 68 | // Add timeout with length matching animation-duration 69 | window.setTimeout(function(){ 70 | startContainer.style.display = 'none'; 71 | },700); 72 | setTimeout(() => { typeWriter(); }, 1000); 73 | // Add event listener to all of the game buttons 74 | gameButtons = document.querySelectorAll(".gameselection").forEach(item => { 75 | item.addEventListener("click", playSound); 76 | }) 77 | }); 78 | 79 | 80 | // Global variables 81 | // Initialise player score to zero 82 | let playerScore = 0; 83 | // Initialise computer score to zero 84 | let computerScore = 0; 85 | // Initialise games played to zero 86 | let gamesPlayed = 0; 87 | 88 | 89 | // Event listener for click 90 | document.addEventListener("click", gameSelectionListener); 91 | // See if the click was on a game selection button (can't apply directly on button as div initially hidden) 92 | function gameSelectionListener(event) { 93 | let element = event.target; 94 | console.log(event.target); 95 | let rock = "rock"; 96 | let paper = "paper"; 97 | let scissors = "scissors"; 98 | if (element.classList.contains("gameselection") && element.id === ("rockdiv")) { 99 | playRound(rock); 100 | console.log("submitted rock") 101 | } 102 | else if (element.classList.contains("selection") && element.id === ("rockimg")) { 103 | playRound(rock); 104 | console.log("submitted rock") 105 | } 106 | else if (element.classList.contains("gameselectiontext") && element.id === ("rockselection")) { 107 | playRound(rock); 108 | console.log("submitted rock") 109 | } 110 | else if (element.classList.contains("gameselection") && element.id === ("paperdiv")) { 111 | playRound(paper); 112 | console.log("submitted paper") 113 | } 114 | else if (element.classList.contains("selection") && element.id === ("paperimg")) { 115 | playRound(paper); 116 | console.log("submitted paper") 117 | } 118 | else if (element.classList.contains("gameselectiontext") && element.id === ("paperselection")) { 119 | playRound(paper); 120 | console.log("submitted paper") 121 | } 122 | else if (element.classList.contains("gameselection") && element.id === ("scissorsdiv")) { 123 | playRound(scissors); 124 | console.log("submitted scissors") 125 | } 126 | else if (element.classList.contains("selection") && element.id === ("scissorsimg")) { 127 | playRound(scissors); 128 | console.log("submitted scissors") 129 | } 130 | else if (element.classList.contains("gameselectiontext") && element.id === ("scissorsselection")) { 131 | playRound(scissors); 132 | console.log("submitted scissors") 133 | } 134 | } 135 | 136 | 137 | // Function to randomly generate computer game entries 138 | function computerPlay() { 139 | randomGameValue = Math.floor(Math.random() * 3); 140 | if (randomGameValue == "0") { 141 | return "rock"; 142 | } 143 | else if (randomGameValue == "1") { 144 | return "paper"; 145 | } 146 | else { 147 | return "scissors"; 148 | } 149 | } 150 | 151 | // Main game function 152 | function playRound(playerSelection) { 153 | console.log(playerSelection); 154 | // Generate computer selection 155 | const computerSelection = computerPlay(); 156 | // Set variable for the player's rock div 157 | const rockSelected = document.querySelector("#rockdiv"); 158 | // Set variable for the player's paper div 159 | const paperSelected = document.querySelector("#paperdiv"); 160 | // Set variable for the player's scissors div 161 | const scissorsSelected = document.querySelector("#scissorsdiv"); 162 | // Set variable for the computer's rock div 163 | const computerRockSelected = document.querySelector("#computerrockdiv"); 164 | // Set variable for the computer's paper div 165 | const computerPaperSelected = document.querySelector("#computerpaperdiv"); 166 | // Set variable for the computer's scissors div 167 | const computerScissorsSelected = document.querySelector("#computerscissorsdiv"); 168 | // Loop through computer options 169 | if (computerSelection == "rock") { 170 | // Change the background color of the rock div 171 | computerRockSelected.style.backgroundColor = "#7987e9"; 172 | // Change the background color of the other divs 173 | computerPaperSelected.style.backgroundColor = "white"; 174 | computerScissorsSelected.style.backgroundColor = "white"; 175 | } 176 | else if (computerSelection == "paper") { 177 | // Change the background color of the paper div 178 | computerPaperSelected.style.backgroundColor = "#7987e9"; 179 | // Change the background color of the other divs 180 | computerRockSelected.style.backgroundColor = "white"; 181 | computerScissorsSelected.style.backgroundColor = "white"; 182 | } 183 | else if (computerSelection == "scissors") { 184 | // Change the background color of the rock div 185 | computerScissorsSelected.style.backgroundColor = "#7987e9"; 186 | // Change the background color of the other divs 187 | computerRockSelected.style.backgroundColor = "white"; 188 | computerPaperSelected.style.backgroundColor = "white"; 189 | } 190 | // Convert player entry to string 191 | let playerSelectionString = String(playerSelection); 192 | // Convert player selection to all lowercase 193 | let playerSelectionLowercase = playerSelectionString.toLowerCase(); 194 | // If player selection is rock 195 | if (playerSelectionLowercase === "rock") { 196 | // Change the background color of the rock div 197 | rockSelected.style.backgroundColor = "#fc5868"; 198 | // Change the background color of the other divs 199 | paperSelected.style.backgroundColor = "white"; 200 | scissorsSelected.style.backgroundColor = "white"; 201 | // If computer selection is rock then draw 202 | if (computerSelection === "rock") { 203 | console.log("Draw!"); 204 | playerScore++; 205 | computerScore++; 206 | // Set the score in the player HTML element 207 | const currentPlayerScore = document.querySelector("#playerscore").innerHTML = `Score: ${playerScore}`; 208 | // Set the score in the computer HTML element 209 | const currentComputerScore = document.querySelector("#computerscore").innerHTML = `Score: ${computerScore}`; 210 | game(playerScore, computerScore); 211 | return "draw"; 212 | } 213 | // If computer selection is paper then lose as paper beats rock 214 | else if (computerSelection === "paper") { 215 | console.log("You lose - paper beats rock!"); 216 | computerScore++; 217 | // Set the score in the computer HTML element 218 | const currentComputerScore = document.querySelector("#computerscore").innerHTML = `Score: ${computerScore}`; 219 | game(playerScore, computerScore); 220 | return "lose"; 221 | } 222 | // If computer selection is scissors then win as scissors beats paper 223 | else { 224 | console.log ("You win - scissors beats paper!"); 225 | playerScore++; 226 | // Set the score in the player HTML element 227 | const currentPlayerScore = document.querySelector("#playerscore").innerHTML = `Score: ${playerScore}`; 228 | game(playerScore, computerScore); 229 | return "win"; 230 | } 231 | } 232 | // Else if player selection is paper 233 | else if (playerSelectionLowercase === "paper") { 234 | // Change the background color of the paper div 235 | paperSelected.style.backgroundColor = "#fc5868"; 236 | // Change the background color of the other divs 237 | rockSelected.style.backgroundColor = "white"; 238 | scissorsSelected.style.backgroundColor = "white"; 239 | // If computer selection is rock then win as paper beats rock 240 | if (computerSelection === "rock") { 241 | console.log("You win - paper beats rock!"); 242 | playerScore++; 243 | // Set the score in the player HTML element 244 | const currentPlayerScore = document.querySelector("#playerscore").innerHTML = `Score: ${playerScore}`; 245 | game(playerScore, computerScore); 246 | return "win"; 247 | } 248 | // If computer selection is paper then draw 249 | else if (computerSelection === "paper") { 250 | console.log("Draw!"); 251 | playerScore++; 252 | computerScore++; 253 | // Set the score in the player HTML element 254 | const currentPlayerScore = document.querySelector("#playerscore").innerHTML = `Score: ${playerScore}`; 255 | // Set the score in the computer HTML element 256 | const currentComputerScore = document.querySelector("#computerscore").innerHTML = `Score: ${computerScore}`; 257 | game(playerScore, computerScore); 258 | return "draw"; 259 | } 260 | // If computer selection is scissors then lose as scissors beats paper 261 | else { 262 | console.log("You lose - scissors beats paper!") 263 | computerScore++; 264 | // Set the score in the computer HTML element 265 | const currentComputerScore = document.querySelector("#computerscore").innerHTML = `Score: ${computerScore}`; 266 | game(playerScore, computerScore); 267 | return "lose"; 268 | } 269 | } 270 | // Else (player selected scissors) 271 | else if (playerSelectionLowercase === "scissors") { 272 | // Change the background color of the scissors div 273 | scissorsSelected.style.backgroundColor = "#fc5868"; 274 | // Change the background color of the other divs 275 | rockSelected.style.backgroundColor = "white"; 276 | paperSelected.style.backgroundColor = "white"; 277 | // If computer selection is rock then lose as rock beats scissors 278 | if (computerSelection === "rock") { 279 | console.log("You lose - rock beats scissors!") 280 | computerScore++; 281 | // Set the score in the computer HTML element 282 | const currentComputerScore = document.querySelector("#computerscore").innerHTML = `Score: ${computerScore}`; 283 | game(playerScore, computerScore); 284 | return "lose"; 285 | } 286 | // If computer selection is paper then win as scissors beats paper 287 | else if (computerSelection === "paper") { 288 | console.log("You win - scissors beats paper!"); 289 | playerScore++; 290 | // Set the score in the player HTML element 291 | const currentPlayerScore = document.querySelector("#playerscore").innerHTML = `Score: ${playerScore}`; 292 | game(playerScore, computerScore); 293 | return "win"; 294 | } 295 | // If computer selection is scissors then draw 296 | else { 297 | console.log("Draw!"); 298 | playerScore++; 299 | computerScore++; 300 | // Set the score in the player HTML element 301 | const currentPlayerScore = document.querySelector("#playerscore").innerHTML = `Score: ${playerScore}`; 302 | // Set the score in the computer HTML element 303 | const currentComputerScore = document.querySelector("#computerscore").innerHTML = `Score: ${computerScore}`; 304 | game(playerScore, computerScore); 305 | return "draw"; 306 | } 307 | } 308 | else { 309 | console.log("Invalid entry, please try again."); 310 | game(playerScore, computerScore); 311 | return null; 312 | } 313 | } 314 | 315 | 316 | // Score tracker 317 | function game(playerScore, computerScore) { 318 | // Set variable for the game update paragraph tag 319 | const gameUpdates = document.querySelector(".gameupdates"); 320 | // Set variables for the user and robot win logos 321 | let userWinLogo = document.getElementById('userwinslogo'); 322 | let robotWinLogo = document.getElementById('robotwinslogo'); 323 | if (playerScore == 5 || computerScore == 5) { 324 | if (playerScore > computerScore) { 325 | let text = document.createTextNode(`YOU WIN ${playerScore}:${computerScore}!`); 326 | gameUpdates.appendChild(text); 327 | hideEndContainerShowWinner(); 328 | playWinSound(); 329 | userWinLogo.style.display = 'block'; 330 | } 331 | else if (computerScore > playerScore) { 332 | let text = document.createTextNode(`COMPUTER WINS ${computerScore}:${playerScore}!`); 333 | gameUpdates.appendChild(text); 334 | hideEndContainerShowWinner(); 335 | playLoseSound(); 336 | robotWinLogo.style.display = 'block'; 337 | } 338 | else { 339 | let text = document.createTextNode(`IT WAS A DRAW!`); 340 | gameUpdates.appendChild(text); 341 | hideEndContainerShowWinner(); 342 | userWinLogo.style.display = 'block'; 343 | robotWinLogo.style.display = 'block'; 344 | } 345 | } 346 | } 347 | -------------------------------------------------------------------------------- /sounds/Cheering-SoundBible.com-1115515042.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tmcerlean/rock-paper-scissors/446ee0836941d2d90a87b880969f8b8afaa7bb2e/sounds/Cheering-SoundBible.com-1115515042.wav -------------------------------------------------------------------------------- /sounds/Sad-SoundBible.com-759843766.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tmcerlean/rock-paper-scissors/446ee0836941d2d90a87b880969f8b8afaa7bb2e/sounds/Sad-SoundBible.com-759843766.wav -------------------------------------------------------------------------------- /sounds/zapsplat_multimedia_button_click_005_53866.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tmcerlean/rock-paper-scissors/446ee0836941d2d90a87b880969f8b8afaa7bb2e/sounds/zapsplat_multimedia_button_click_005_53866.mp3 -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | /* Main background image with styling */ 3 | background-image: url("images/background.jpg"); 4 | height: 100%; 5 | font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 6 | } 7 | 8 | html,body{ 9 | height:100%; 10 | padding:0; 11 | margin:0; 12 | overflow: hidden; 13 | } 14 | 15 | #startbutton { 16 | min-width:100px; 17 | height:50px; 18 | margin-bottom: 150px; 19 | text-transform: uppercase; 20 | padding: 15px; 21 | border: none; 22 | outline: none; 23 | font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 24 | font-weight: 400px; 25 | font-size: 20px; 26 | border-radius: 3px; 27 | box-shadow: 4px 5px 0px; 28 | border-bottom: 2px solid; 29 | border-right: 1px solid; 30 | margin: 0; 31 | position: absolute; 32 | top: 45%; 33 | transform: translate(-1%, -3%); 34 | } 35 | 36 | #startbutton:hover { 37 | background-color: lightgrey; 38 | box-shadow: 3px 3px 1px; 39 | border-bottom: 2px solid; 40 | transform: translate(-1%, -1%); 41 | transition: all 0.1s ease-in; 42 | } 43 | 44 | #startbutton:active { 45 | box-shadow: none; 46 | border-bottom-width: 2px; 47 | transform: translate(3px, 4px); 48 | } 49 | 50 | #endbutton { 51 | min-width:100px; 52 | height:50px; 53 | margin-bottom: 150px; 54 | text-transform: uppercase; 55 | padding: 15px; 56 | border: none; 57 | outline: none; 58 | font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 59 | font-weight: 400px; 60 | font-size: 20px; 61 | border-radius: 3px; 62 | box-shadow: 4px 5px 0px; 63 | border-bottom: 2px solid; 64 | border-right: 1px solid; 65 | margin: 0; 66 | position: relative; 67 | top: 45%; 68 | transform: translate(-1%, -3%); 69 | } 70 | 71 | #endbutton:link { 72 | text-decoration: none; 73 | color: black; 74 | background-color: white; 75 | box-shadow: 4px 5px 0px black; 76 | } 77 | 78 | #endbutton:visited { 79 | color: black; 80 | text-decoration: none; 81 | } 82 | 83 | #endbutton:hover { 84 | color: black; 85 | background-color: lightgrey; 86 | box-shadow: 3px 3px 1px black; 87 | border-bottom: 2px solid; 88 | transform: translate(-1%, -1%); 89 | transition: all 0.1s ease-in; 90 | } 91 | 92 | #endbutton:active { 93 | box-shadow: none; 94 | border-bottom-width: 2px; 95 | transform: translate(3px, 4px); 96 | } 97 | 98 | .container { 99 | width: 100%; 100 | height: 100%; 101 | display: flex; 102 | justify-content: center; 103 | } 104 | 105 | #endcontainer { 106 | display: flex; 107 | flex-direction: column; 108 | justify-content: center; 109 | align-items: center; 110 | 111 | } 112 | 113 | .gamecontainer { 114 | display: flex; 115 | flex-direction: row; 116 | flex-wrap: wrap; 117 | width: 100%; 118 | justify-content: center; 119 | } 120 | 121 | .topcontainer { 122 | color: white; 123 | font-size: xx-large; 124 | } 125 | 126 | .bottomcontainer { 127 | display: none; 128 | color: white; 129 | width: 100%; 130 | text-align: center; 131 | } 132 | 133 | .playercontainer { 134 | background-color: rgb(70, 70, 70); 135 | border-radius: 10px; 136 | text-transform: uppercase; 137 | font-weight: bold; 138 | margin: 20px; 139 | width: 400px; 140 | height: 320px; 141 | } 142 | 143 | .playerinformation { 144 | display: flex; 145 | justify-content: center; 146 | align-items: center; 147 | } 148 | 149 | .playerlogo { 150 | margin-right: 1vw; 151 | } 152 | 153 | .playerh1 { 154 | text-align: center; 155 | color: white; 156 | } 157 | 158 | .logo { 159 | height: 50px; 160 | width: 50px; 161 | } 162 | 163 | .winninglogo { 164 | display: none; 165 | text-align: center; 166 | height: 100px; 167 | width: 100px; 168 | margin-top: 50px; 169 | margin-left: auto; 170 | margin-right: auto; 171 | } 172 | 173 | .playerscore { 174 | color: white; 175 | } 176 | 177 | .gameselections { 178 | display: flex; 179 | justify-content: center; 180 | } 181 | 182 | .gameselection { 183 | display: flex; 184 | flex-direction: column; 185 | align-items: center; 186 | background-color: white; 187 | border-radius: 10px; 188 | width: 120px; 189 | height: 120px; 190 | margin: 15px; 191 | border-radius: 3px; 192 | box-shadow: 4px 5px 0px black; 193 | border-bottom: 2px solid; 194 | border-right: 1px solid; 195 | transform: translate(-1%, -3%); 196 | } 197 | 198 | .gameselection:hover { 199 | background-color: lightgrey; 200 | box-shadow: 3px 3px 1px; 201 | border-bottom: 2px solid; 202 | transform: translate(1%, -1%); 203 | transition: all 0.1s ease-in; 204 | } 205 | 206 | .gameselection:active { 207 | box-shadow: none; 208 | transform: translate(3px, 4px); 209 | } 210 | 211 | .selection { 212 | height: 50px; 213 | width: 50px; 214 | } 215 | 216 | .gameselectiontext { 217 | text-transform: uppercase; 218 | font-weight: bold; 219 | } 220 | 221 | .winninglogodiv { 222 | display: flex; 223 | flex-direction: row; 224 | flex-wrap: wrap; 225 | } 226 | 227 | /* Extra small devices (phones, 600px and down) */ 228 | @media only screen and (max-width: 600px) { 229 | .container { 230 | width: 100%; 231 | height: 100%; 232 | display: flex; 233 | justify-content: center; 234 | } 235 | 236 | #endcontainer { 237 | display: flex; 238 | text-align: center; 239 | flex-direction: column; 240 | justify-content: center; 241 | align-items: center; 242 | 243 | } 244 | 245 | .gamecontainer { 246 | display: flex; 247 | flex-direction: row; 248 | flex-wrap: wrap; 249 | width: 100%; 250 | justify-content: center; 251 | } 252 | 253 | .topcontainer { 254 | color: white; 255 | font-size: medium; 256 | } 257 | 258 | .bottomcontainer { 259 | display: none; 260 | color: white; 261 | width: 100%; 262 | text-align: center; 263 | } 264 | 265 | .playercontainer { 266 | background-color: rgb(70, 70, 70); 267 | border-radius: 10px; 268 | text-transform: uppercase; 269 | font-weight: bold; 270 | margin: 10px; 271 | width: 300px; 272 | height: 250px; 273 | } 274 | 275 | .playerinformation { 276 | display: flex; 277 | justify-content: center; 278 | align-items: center; 279 | } 280 | 281 | .playerlogo { 282 | margin-right: 1vw; 283 | } 284 | 285 | .playerh1 { 286 | text-align: center; 287 | color: white; 288 | } 289 | 290 | .logo { 291 | height: 50px; 292 | width: 50px; 293 | } 294 | 295 | .winninglogo { 296 | display: none; 297 | text-align: center; 298 | height: 100px; 299 | width: 100px; 300 | margin-top: 50px; 301 | margin-left: auto; 302 | margin-right: auto; 303 | } 304 | 305 | .playerscore { 306 | color: white; 307 | } 308 | 309 | .gameselections { 310 | display: flex; 311 | justify-content: center; 312 | } 313 | 314 | .gameselection { 315 | display: flex; 316 | flex-direction: column; 317 | align-items: center; 318 | background-color: white; 319 | border-radius: 10px; 320 | width: 100px; 321 | height: 100px; 322 | margin: 5px; 323 | border-radius: 3px; 324 | box-shadow: 4px 5px 0px black; 325 | border-bottom: 2px solid; 326 | border-right: 1px solid; 327 | transform: translate(-1%, -3%); 328 | } 329 | 330 | .gameselection:hover { 331 | background-color: lightgrey; 332 | box-shadow: 3px 3px 1px; 333 | border-bottom: 2px solid; 334 | transform: translate(1%, -1%); 335 | transition: all 0.1s ease-in; 336 | } 337 | 338 | .gameselection:active { 339 | box-shadow: none; 340 | transform: translate(3px, 4px); 341 | } 342 | 343 | .selection { 344 | height: 25px; 345 | width: 25px; 346 | } 347 | 348 | .gameselectiontext { 349 | text-transform: uppercase; 350 | font-weight: bold; 351 | } 352 | 353 | .winninglogodiv { 354 | display: flex; 355 | flex-direction: row; 356 | flex-wrap: wrap; 357 | } 358 | } --------------------------------------------------------------------------------