Rock Paper Scissors

├── .gitignore ├── README.md ├── images ├── bg-triangle.svg ├── icon-close.svg ├── icon-paper.svg ├── icon-rock.svg ├── icon-scissors.svg └── image-rules.svg ├── index.html ├── scripts.js └── styles ├── mixins.scss ├── reset.css ├── styles.css ├── styles.css.map └── styles.scss /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rock,Paper, Scissors game 2 | Implementation for the popular rock, paper, scissors game. It's basically a challenge from frontendmentor.io website. 3 | 4 | - Check the challenge page [here](https://www.frontendmentor.io/challenges/rock-paper-scissors-game-pTgwgvgH) 5 | - Check the live website [here](https://scissors-paper-rock-game.netlify.app/) 6 | -------------------------------------------------------------------------------- /images/bg-triangle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-paper.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-rock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-scissors.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/image-rules.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rock Paper Scissors 8 | 9 | 10 | 11 | 12 | 13 |

14 | 24 |

25 | 42 |

43 | 44 |

45 | 46 |

You Picked

47 |

The house picked

48 | 49 |

50 |

51 |

52 |

53 |

54 |

55 |

56 |

57 |

58 |

59 |

60 |

61 |

62 |

63 |

64 |

65 |

66 | 67 | computer choice

68 |

69 |

70 |

71 | 76 | You Win 77 | 78 |

79 |

80 |

81 |

82 | Rules 83 |

84 |

85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /scripts.js: -------------------------------------------------------------------------------- 1 | //Variables 2 | const gameChoicesArray = ['Paper', 'Scissors', 'Rock']; 3 | const rulesElement = document.querySelector('.container__rules'); 4 | const scoreNumberElement = document.querySelector('.header__scoreNumber'); 5 | const modalElement = document.querySelector('.modal'); 6 | const modalOverlayElement = document.querySelector('.modal__overlay'); 7 | const closeElement = document.querySelector('.modal__closeIcon'); 8 | const gameContentElement = document.querySelector('.gameContent'); 9 | const gameChoiceElements = document.querySelectorAll('.gameContent__gameChoice'); 10 | const gameChoiceImageElement = document.querySelector('.gameContent__gameChoiceImage'); 11 | const gameChoiceComputerElement = document.querySelector('.gameContent__gameChoice--isComputer'); 12 | const countdownTextElement = document.querySelector('.gameContent__countdownText'); 13 | const resultButtonElement = document.querySelector('.gameContent__resultButton'); 14 | const resultTextElement = document.querySelector('.gameContent__resultText'); 15 | const player = document.querySelector('lottie-player'); //animation 16 | 17 | let countdown = 4; 18 | let randomResult; 19 | 20 | //FUNCTIONS 21 | const rulesModalEvent = () => modalElement.classList.toggle('modal--isActive'); 22 | 23 | const getRandomNumber = () => Math.floor(Math.random() * 3); 24 | 25 | const showResult = (userChoice, computerChoice) => { 26 | const score = parseInt(scoreNumberElement.textContent); 27 | 28 | if (userChoice === computerChoice) { //draw condition 29 | resultTextElement.textContent = 'Draw'; 30 | } 31 | else if ( 32 | (userChoice === gameChoicesArray[0] && computerChoice === gameChoicesArray[1]) || 33 | (userChoice === gameChoicesArray[1] && computerChoice === gameChoicesArray[2]) || 34 | (userChoice === gameChoicesArray[2] && computerChoice === gameChoicesArray[0]) 35 | ) { //lose conditions 36 | resultTextElement.textContent = 'You lose'; 37 | gameContentElement.classList.add('gameContent--isLost'); 38 | 39 | if (score > 0) { 40 | scoreNumberElement.textContent = score - 1; 41 | } 42 | } 43 | else { //win condition 44 | resultTextElement.textContent = 'You win'; 45 | setTimeout(() => player.load('https://assets10.lottiefiles.com/packages/lf20_aEFaHc.json'), 900); 46 | scoreNumberElement.textContent = score + 1; 47 | } 48 | }; 49 | 50 | const startCountdown = () => { 51 | countdownTextElement.textContent = countdown - 1; //add countdown number to the html 52 | countdown -= 1; 53 | 54 | if (countdown) { //start the countdown until we reach 0 55 | setTimeout(() => startCountdown(), 600); 56 | } 57 | else { //select random choice and show it 58 | const selectedGameChoiceElement = document.querySelector('.gameContent__gameChoice--isActive'); 59 | const selectedChoice = selectedGameChoiceElement.dataset.choice; 60 | randomResult = gameChoicesArray[getRandomNumber()]; 61 | 62 | showResult(selectedChoice, randomResult); 63 | setTimeout(() => gameContentElement.classList.add(`gameContent--revealResult`), 500); //delay the final result for half second 64 | 65 | countdownTextElement.textContent = ''; 66 | //set the selected choice style 67 | gameChoiceComputerElement.classList.add(`gameContent__gameChoice--is${randomResult}`); 68 | //set the selected choice image 69 | gameChoiceImageElement.setAttribute('src', `./images/icon-${randomResult.toLowerCase()}.svg`); 70 | countdown = 4; //reset the countdown number 71 | } 72 | }; 73 | 74 | const gameChoiceEvent = (event) => { 75 | gameContentElement.classList.add('gameContent--isActive'); 76 | event.target.classList.add('gameContent__gameChoice--isActive'); 77 | 78 | startCountdown(); 79 | }; 80 | 81 | const playAgainEvent = () => { 82 | const activeChoiceElement = document.querySelector('.gameContent__gameChoice--isActive'); 83 | 84 | gameContentElement.classList.remove(`gameContent--revealResult`); 85 | gameChoiceComputerElement.classList.remove(`gameContent__gameChoice--is${randomResult}`); 86 | gameChoiceImageElement.setAttribute('src', ''); 87 | gameContentElement.classList.remove('gameContent--isActive', 'gameContent--isLost'); 88 | activeChoiceElement.classList.remove('gameContent__gameChoice--isActive'); 89 | }; 90 | 91 | //MODAL EVENTS 92 | rulesElement.addEventListener('click', rulesModalEvent); 93 | closeElement.addEventListener('click', rulesModalEvent); 94 | modalOverlayElement.addEventListener('click', rulesModalEvent); 95 | 96 | //GAME CHOICES EVENTS 97 | gameChoiceElements.forEach(item => item.addEventListener('click', gameChoiceEvent)); 98 | resultButtonElement.addEventListener('click', playAgainEvent); 99 | -------------------------------------------------------------------------------- /styles/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin mobile { 2 | /*target mobile and fablets screens*/ 3 | @media (max-width: 599px) { 4 | @content; 5 | } 6 | } 7 | 8 | @mixin desktop { 9 | /*target tablet and desktop screens*/ 10 | @media (min-width: 600px) { 11 | @content; 12 | } 13 | } 14 | 15 | @mixin hide-tag { 16 | opacity: 0; 17 | visibility: hidden; 18 | } 19 | 20 | @mixin show-tag { 21 | opacity: 1; 22 | visibility: visible; 23 | } 24 | -------------------------------------------------------------------------------- /styles/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0-modified | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | 27 | /* make sure to set some focus styles for accessibility */ 28 | :focus { 29 | outline: 0; 30 | } 31 | 32 | /* HTML5 display-role reset for older browsers */ 33 | article, aside, details, figcaption, figure, 34 | footer, header, hgroup, menu, nav, section { 35 | display: block; 36 | } 37 | 38 | body { 39 | line-height: 1; 40 | } 41 | 42 | ol, ul { 43 | list-style: none; 44 | } 45 | 46 | blockquote, q { 47 | quotes: none; 48 | } 49 | 50 | blockquote:before, blockquote:after, 51 | q:before, q:after { 52 | content: ''; 53 | content: none; 54 | } 55 | 56 | table { 57 | border-collapse: collapse; 58 | border-spacing: 0; 59 | } 60 | 61 | input[type=search]::-webkit-search-cancel-button, 62 | input[type=search]::-webkit-search-decoration, 63 | input[type=search]::-webkit-search-results-button, 64 | input[type=search]::-webkit-search-results-decoration { 65 | -webkit-appearance: none; 66 | -moz-appearance: none; 67 | } 68 | 69 | input[type=search] { 70 | -webkit-appearance: none; 71 | -moz-appearance: none; 72 | -webkit-box-sizing: content-box; 73 | -moz-box-sizing: content-box; 74 | box-sizing: content-box; 75 | } 76 | 77 | textarea { 78 | overflow: auto; 79 | vertical-align: top; 80 | resize: vertical; 81 | } 82 | 83 | /** 84 | * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 85 | */ 86 | 87 | audio, 88 | canvas, 89 | video { 90 | display: inline-block; 91 | *display: inline; 92 | *zoom: 1; 93 | max-width: 100%; 94 | } 95 | 96 | /** 97 | * Prevent modern browsers from displaying `audio` without controls. 98 | * Remove excess height in iOS 5 devices. 99 | */ 100 | 101 | audio:not([controls]) { 102 | display: none; 103 | height: 0; 104 | } 105 | 106 | /** 107 | * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. 108 | * Known issue: no IE 6 support. 109 | */ 110 | 111 | [hidden] { 112 | display: none; 113 | } 114 | 115 | /** 116 | * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using 117 | * `em` units. 118 | * 2. Prevent iOS text size adjust after orientation change, without disabling 119 | * user zoom. 120 | */ 121 | 122 | html { 123 | font-size: 100%; /* 1 */ 124 | -webkit-text-size-adjust: 100%; /* 2 */ 125 | -ms-text-size-adjust: 100%; /* 2 */ 126 | } 127 | 128 | /** 129 | * Address `outline` inconsistency between Chrome and other browsers. 130 | */ 131 | 132 | a:focus { 133 | outline: thin dotted; 134 | } 135 | 136 | /** 137 | * Improve readability when focused and also mouse hovered in all browsers. 138 | */ 139 | 140 | a:active, 141 | a:hover { 142 | outline: 0; 143 | } 144 | 145 | /** 146 | * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. 147 | * 2. Improve image quality when scaled in IE 7. 148 | */ 149 | 150 | img { 151 | border: 0; /* 1 */ 152 | -ms-interpolation-mode: bicubic; /* 2 */ 153 | } 154 | 155 | /** 156 | * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. 157 | */ 158 | 159 | figure { 160 | margin: 0; 161 | } 162 | 163 | /** 164 | * Correct margin displayed oddly in IE 6/7. 165 | */ 166 | 167 | form { 168 | margin: 0; 169 | } 170 | 171 | /** 172 | * Define consistent border, margin, and padding. 173 | */ 174 | 175 | fieldset { 176 | border: 1px solid #c0c0c0; 177 | margin: 0 2px; 178 | padding: 0.35em 0.625em 0.75em; 179 | } 180 | 181 | /** 182 | * 1. Correct color not being inherited in IE 6/7/8/9. 183 | * 2. Correct text not wrapping in Firefox 3. 184 | * 3. Correct alignment displayed oddly in IE 6/7. 185 | */ 186 | 187 | legend { 188 | border: 0; /* 1 */ 189 | padding: 0; 190 | white-space: normal; /* 2 */ 191 | *margin-left: -7px; /* 3 */ 192 | } 193 | 194 | /** 195 | * 1. Correct font size not being inherited in all browsers. 196 | * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, 197 | * and Chrome. 198 | * 3. Improve appearance and consistency in all browsers. 199 | */ 200 | 201 | button, 202 | input, 203 | select, 204 | textarea { 205 | font-size: 100%; /* 1 */ 206 | margin: 0; /* 2 */ 207 | vertical-align: baseline; /* 3 */ 208 | *vertical-align: middle; /* 3 */ 209 | } 210 | 211 | /** 212 | * Address Firefox 3+ setting `line-height` on `input` using `!important` in 213 | * the UA stylesheet. 214 | */ 215 | 216 | button, 217 | input { 218 | line-height: normal; 219 | } 220 | 221 | /** 222 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 223 | * All other form control elements do not inherit `text-transform` values. 224 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. 225 | * Correct `select` style inheritance in Firefox 4+ and Opera. 226 | */ 227 | 228 | button, 229 | select { 230 | text-transform: none; 231 | } 232 | 233 | /** 234 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 235 | * and `video` controls. 236 | * 2. Correct inability to style clickable `input` types in iOS. 237 | * 3. Improve usability and consistency of cursor style between image-type 238 | * `input` and others. 239 | * 4. Remove inner spacing in IE 7 without affecting normal text inputs. 240 | * Known issue: inner spacing remains in IE 6. 241 | */ 242 | 243 | button, 244 | html input[type="button"], /* 1 */ 245 | input[type="reset"], 246 | input[type="submit"] { 247 | -webkit-appearance: button; /* 2 */ 248 | cursor: pointer; /* 3 */ 249 | *overflow: visible; /* 4 */ 250 | } 251 | 252 | /** 253 | * Re-set default cursor for disabled elements. 254 | */ 255 | 256 | button[disabled], 257 | html input[disabled] { 258 | cursor: default; 259 | } 260 | 261 | /** 262 | * 1. Address box sizing set to content-box in IE 8/9. 263 | * 2. Remove excess padding in IE 8/9. 264 | * 3. Remove excess padding in IE 7. 265 | * Known issue: excess padding remains in IE 6. 266 | */ 267 | 268 | input[type="checkbox"], 269 | input[type="radio"] { 270 | box-sizing: border-box; /* 1 */ 271 | padding: 0; /* 2 */ 272 | *height: 13px; /* 3 */ 273 | *width: 13px; /* 3 */ 274 | } 275 | 276 | /** 277 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 278 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 279 | * (include `-moz` to future-proof). 280 | */ 281 | 282 | input[type="search"] { 283 | -webkit-appearance: textfield; /* 1 */ 284 | -moz-box-sizing: content-box; 285 | -webkit-box-sizing: content-box; /* 2 */ 286 | box-sizing: content-box; 287 | } 288 | 289 | /** 290 | * Remove inner padding and search cancel button in Safari 5 and Chrome 291 | * on OS X. 292 | */ 293 | 294 | input[type="search"]::-webkit-search-cancel-button, 295 | input[type="search"]::-webkit-search-decoration { 296 | -webkit-appearance: none; 297 | } 298 | 299 | /** 300 | * Remove inner padding and border in Firefox 3+. 301 | */ 302 | 303 | button::-moz-focus-inner, 304 | input::-moz-focus-inner { 305 | border: 0; 306 | padding: 0; 307 | } 308 | 309 | /** 310 | * 1. Remove default vertical scrollbar in IE 6/7/8/9. 311 | * 2. Improve readability and alignment in all browsers. 312 | */ 313 | 314 | textarea { 315 | overflow: auto; /* 1 */ 316 | vertical-align: top; /* 2 */ 317 | } 318 | 319 | /** 320 | * Remove most spacing between table cells. 321 | */ 322 | 323 | table { 324 | border-collapse: collapse; 325 | border-spacing: 0; 326 | } 327 | 328 | html, 329 | button, 330 | input, 331 | select, 332 | textarea { 333 | color: #222; 334 | } 335 | 336 | 337 | ::-moz-selection { 338 | background: #b3d4fc; 339 | text-shadow: none; 340 | } 341 | 342 | ::selection { 343 | background: #b3d4fc; 344 | text-shadow: none; 345 | } 346 | 347 | img { 348 | vertical-align: middle; 349 | } 350 | 351 | fieldset { 352 | border: 0; 353 | margin: 0; 354 | padding: 0; 355 | } 356 | 357 | textarea { 358 | resize: vertical; 359 | } 360 | 361 | .chromeframe { 362 | margin: 0.2em 0; 363 | background: #ccc; 364 | color: #000; 365 | padding: 0.2em 0; 366 | } 367 | 368 | -------------------------------------------------------------------------------- /styles/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap"); 2 | :root { 3 | --default-padding: 20px; 4 | --default-border-radius: 10px; 5 | --font-family: 'Barlow Semi Condensed', sans-serif; 6 | --font-size-normal: 14px; 7 | --font-size-medium: 18px; 8 | --font-size-large: 24px; 9 | --font-size-xLarge: 32px; 10 | --font-size-2xLarge: 48px; 11 | --font-weight-semi-bold: 600; 12 | --font-weight-bold: 700; 13 | --color-dark-text: hsl(229, 25%, 31%); 14 | --color-score-text: hsl(229, 64%, 46%); 15 | --color-header-outline: hsl(217, 16%, 45%); 16 | --max-width: 600px; 17 | --game-content-height: 350px; 18 | --timing-animation: .3s; 19 | --game-choice-ratio: 160px; 20 | --game-choice-x-position: 105px; 21 | --game-choice-text-x-position: 160px; 22 | --animation-ratio: 1; 23 | --game-choice-active-scale: 1.5; 24 | --game-choice-text-ratio: 1; 25 | } 26 | 27 | * { 28 | -webkit-box-sizing: border-box; 29 | box-sizing: border-box; 30 | } 31 | 32 | img[src=''] { 33 | display: none; 34 | } 35 | 36 | .container { 37 | display: -webkit-box; 38 | display: -ms-flexbox; 39 | display: flex; 40 | -webkit-box-orient: vertical; 41 | -webkit-box-direction: normal; 42 | -ms-flex-direction: column; 43 | flex-direction: column; 44 | -webkit-box-align: center; 45 | -ms-flex-align: center; 46 | align-items: center; 47 | font-family: var(--font-family); 48 | padding: var(--default-padding); 49 | background: -webkit-gradient(linear, left top, left bottom, from(#1f3756), to(#141539)); 50 | background: linear-gradient(#1f3756, #141539); 51 | min-height: 100vh; 52 | color: white; 53 | overflow: hidden; 54 | } 55 | 56 | .container__content { 57 | display: -webkit-box; 58 | display: -ms-flexbox; 59 | display: flex; 60 | -webkit-box-align: center; 61 | -ms-flex-align: center; 62 | align-items: center; 63 | -webkit-box-flex: 1; 64 | -ms-flex: 1; 65 | flex: 1; 66 | -webkit-box-orient: vertical; 67 | -webkit-box-direction: normal; 68 | -ms-flex-direction: column; 69 | flex-direction: column; 70 | max-width: var(--max-width); 71 | width: 100%; 72 | } 73 | 74 | .container__rules { 75 | font-size: var(--font-size-medium); 76 | letter-spacing: 2px; 77 | text-transform: uppercase; 78 | margin-left: auto; 79 | padding: var(--default-padding) calc(var(--default-padding) * 2); 80 | border: 2px solid var(--color-header-outline); 81 | border-radius: var(--default-border-radius); 82 | cursor: pointer; 83 | /*target mobile and fablets screens*/ 84 | } 85 | 86 | @media (max-width: 599px) { 87 | .container__rules { 88 | margin: auto; 89 | } 90 | } 91 | 92 | .header { 93 | display: -webkit-box; 94 | display: -ms-flexbox; 95 | display: flex; 96 | width: 100%; 97 | border: 2px solid var(--color-header-outline); 98 | border-radius: var(--default-border-radius); 99 | padding: var(--default-padding); 100 | -webkit-box-pack: justify; 101 | -ms-flex-pack: justify; 102 | justify-content: space-between; 103 | -webkit-box-align: center; 104 | -ms-flex-align: center; 105 | align-items: center; 106 | margin-bottom: calc(var(--default-border-radius) * 2); 107 | } 108 | 109 | .header__logo { 110 | display: -webkit-box; 111 | display: -ms-flexbox; 112 | display: flex; 113 | -webkit-box-orient: vertical; 114 | -webkit-box-direction: normal; 115 | -ms-flex-direction: column; 116 | flex-direction: column; 117 | font-size: var(--font-size-xLarge); 118 | font-weight: var(--font-weight-bold); 119 | line-height: 26px; 120 | text-transform: uppercase; 121 | text-shadow: 0 3px 5px black; 122 | } 123 | 124 | .header__scoreContent { 125 | text-align: center; 126 | background-color: white; 127 | border-radius: calc(var(--default-border-radius) / 1); 128 | color: black; 129 | padding: calc(var(--default-padding) / 2) calc(var(--default-padding) * 1.5); 130 | font-weight: var(--font-weight-semi-bold); 131 | } 132 | 133 | .header__scoreText { 134 | font-size: var(--font-size-normal); 135 | color: var(--color-score-text); 136 | text-transform: uppercase; 137 | letter-spacing: 2px; 138 | } 139 | 140 | .header__scoreNumber { 141 | color: var(--color-dark-text); 142 | font-size: var(--font-size-2xLarge); 143 | font-weight: var(--font-weight-bold); 144 | } 145 | 146 | .modal { 147 | position: fixed; 148 | top: 0; 149 | bottom: 0; 150 | left: 0; 151 | right: 0; 152 | display: -webkit-box; 153 | display: -ms-flexbox; 154 | display: flex; 155 | -webkit-box-align: center; 156 | -ms-flex-align: center; 157 | align-items: center; 158 | -webkit-box-pack: center; 159 | -ms-flex-pack: center; 160 | justify-content: center; 161 | z-index: 1; 162 | -webkit-transition: all var(--timing-animation); 163 | transition: all var(--timing-animation); 164 | opacity: 0; 165 | visibility: hidden; 166 | } 167 | 168 | .modal--isActive { 169 | opacity: 1; 170 | visibility: visible; 171 | } 172 | 173 | .modal__overlay { 174 | content: ''; 175 | position: absolute; 176 | width: 100%; 177 | height: 100%; 178 | background-color: rgba(0, 0, 0, 0.4); 179 | } 180 | 181 | .modal__content { 182 | display: -webkit-box; 183 | display: -ms-flexbox; 184 | display: flex; 185 | -webkit-box-orient: vertical; 186 | -webkit-box-direction: normal; 187 | -ms-flex-direction: column; 188 | flex-direction: column; 189 | margin: var(--default-padding); 190 | border-radius: var(--default-border-radius); 191 | padding: var(--default-padding); 192 | background-color: white; 193 | z-index: 1; 194 | } 195 | 196 | .modal__text { 197 | text-transform: uppercase; 198 | font-size: var(--font-size-medium); 199 | font-weight: var(--font-weight-semi-bold); 200 | color: var(--color-dark-text); 201 | } 202 | 203 | .modal__header { 204 | display: -webkit-box; 205 | display: -ms-flexbox; 206 | display: flex; 207 | -webkit-box-flex: 1; 208 | -ms-flex: 1; 209 | flex: 1; 210 | -webkit-box-align: center; 211 | -ms-flex-align: center; 212 | align-items: center; 213 | -webkit-box-pack: justify; 214 | -ms-flex-pack: justify; 215 | justify-content: space-between; 216 | margin-bottom: var(--default-padding); 217 | cursor: pointer; 218 | } 219 | 220 | .modal__image { 221 | width: 100%; 222 | } 223 | 224 | .gameContent { 225 | position: relative; 226 | display: -webkit-box; 227 | display: -ms-flexbox; 228 | display: flex; 229 | margin: auto 0; 230 | width: 100%; 231 | height: var(--game-content-height); 232 | -webkit-box-pack: space-evenly; 233 | -ms-flex-pack: space-evenly; 234 | justify-content: space-evenly; 235 | -webkit-transition: all var(--timing-animation); 236 | transition: all var(--timing-animation); 237 | /*target mobile and fablets screens*/ 238 | } 239 | 240 | @media (max-width: 599px) { 241 | .gameContent { 242 | --game-choice-active-scale: 1.2; 243 | --game-choice-text-ratio: .8; 244 | margin-top: 0; 245 | -webkit-transform: scale(0.9); 246 | transform: scale(0.9); 247 | } 248 | } 249 | 250 | .gameContent--isActive .gameContent__gameChoice, 251 | .gameContent--isActive .gameContent__bg { 252 | opacity: 0; 253 | visibility: hidden; 254 | } 255 | 256 | .gameContent--isActive .gameContent__text, 257 | .gameContent--isActive .gameContent__gameChoice--isComputer { 258 | opacity: 1; 259 | visibility: visible; 260 | } 261 | 262 | .gameContent--revealResult { 263 | --animation-ratio: 1.6; 264 | --game-choice-text-ratio: 1.6; 265 | /*target mobile and fablets screens*/ 266 | } 267 | 268 | @media (max-width: 599px) { 269 | .gameContent--revealResult { 270 | --animation-ratio: 1; 271 | --game-choice-text-ratio: .8; 272 | } 273 | } 274 | 275 | .gameContent--revealResult .gameContent__result { 276 | opacity: 1; 277 | visibility: visible; 278 | -webkit-transform: scale(1); 279 | transform: scale(1); 280 | /*target mobile and fablets screens*/ 281 | } 282 | 283 | @media (max-width: 599px) { 284 | .gameContent--revealResult .gameContent__result { 285 | margin-bottom: -80px; 286 | -webkit-box-pack: end; 287 | -ms-flex-pack: end; 288 | justify-content: flex-end; 289 | } 290 | } 291 | 292 | .gameContent--isLost { 293 | -webkit-transition-delay: calc(var(--timing-animation) * 2); 294 | transition-delay: calc(var(--timing-animation) * 2); 295 | -webkit-filter: grayscale(1) opacity(0.7); 296 | filter: grayscale(1) opacity(0.7); 297 | } 298 | 299 | .gameContent__bg { 300 | position: absolute; 301 | width: 100%; 302 | height: 100%; 303 | background: url("../images/bg-triangle.svg") center no-repeat; 304 | } 305 | 306 | .gameContent__text { 307 | position: absolute; 308 | text-transform: uppercase; 309 | font-size: var(--font-size-large); 310 | font-weight: var(--font-weight-semi-bold); 311 | -webkit-transition: all var(--timing-animation); 312 | transition: all var(--timing-animation); 313 | opacity: 0; 314 | visibility: hidden; 315 | } 316 | 317 | .gameContent__text--isYou { 318 | -webkit-transform: translate(calc(var(--game-choice-ratio) * var(--game-choice-text-ratio) * -1), 0); 319 | transform: translate(calc(var(--game-choice-ratio) * var(--game-choice-text-ratio) * -1), 0); 320 | } 321 | 322 | .gameContent__text--isComputer { 323 | -webkit-transform: translate(calc(var(--game-choice-ratio) * var(--game-choice-text-ratio))); 324 | transform: translate(calc(var(--game-choice-ratio) * var(--game-choice-text-ratio))); 325 | } 326 | 327 | .gameContent__countdownText { 328 | font-size: var(--font-size-2xLarge); 329 | color: var(--color-dark-text); 330 | } 331 | 332 | .gameContent__gameChoice { 333 | position: absolute; 334 | display: -webkit-box; 335 | display: -ms-flexbox; 336 | display: flex; 337 | -webkit-box-align: center; 338 | -ms-flex-align: center; 339 | align-items: center; 340 | -webkit-box-pack: center; 341 | -ms-flex-pack: center; 342 | justify-content: center; 343 | background-color: white; 344 | border-radius: 50%; 345 | overflow: hidden; 346 | width: var(--game-choice-ratio); 347 | height: var(--game-choice-ratio); 348 | padding: 20px; 349 | cursor: pointer; 350 | -webkit-transition: all var(--timing-animation); 351 | transition: all var(--timing-animation); 352 | } 353 | 354 | .gameContent__gameChoice:before { 355 | content: ''; 356 | position: absolute; 357 | left: 0; 358 | right: 0; 359 | top: 0; 360 | bottom: 0; 361 | } 362 | 363 | .gameContent__gameChoice:after { 364 | content: ''; 365 | position: absolute; 366 | left: 0; 367 | right: 0; 368 | top: 0; 369 | bottom: 0; 370 | border-radius: 50%; 371 | } 372 | 373 | .gameContent__gameChoice:active .container__gameChoiceImage::before { 374 | opacity: 0; 375 | visibility: hidden; 376 | } 377 | 378 | .gameContent__gameChoice:active::after { 379 | opacity: 0; 380 | visibility: hidden; 381 | } 382 | 383 | .gameContent__gameChoice--isPaper { 384 | -webkit-transform: translate(-120px); 385 | transform: translate(-120px); 386 | } 387 | 388 | .gameContent__gameChoice--isPaper:before { 389 | background: -webkit-gradient(linear, left top, left bottom, from(#4865f4), to(#5671f5)); 390 | background: linear-gradient(#4865f4, #5671f5); 391 | } 392 | 393 | .gameContent__gameChoice--isPaper:after { 394 | border-bottom: 6px solid #4154b4; 395 | } 396 | 397 | .gameContent__gameChoice--isRock { 398 | -webkit-transform: translate(0, var(--game-choice-ratio)); 399 | transform: translate(0, var(--game-choice-ratio)); 400 | } 401 | 402 | .gameContent__gameChoice--isRock:before { 403 | background: -webkit-gradient(linear, left top, left bottom, from(#dc2e4e), to(#dd405d)); 404 | background: linear-gradient(#dc2e4e, #dd405d); 405 | } 406 | 407 | .gameContent__gameChoice--isRock:after { 408 | border-bottom: 6px solid #841f32; 409 | } 410 | 411 | .gameContent__gameChoice--isScissors { 412 | -webkit-transform: translate(120px); 413 | transform: translate(120px); 414 | } 415 | 416 | .gameContent__gameChoice--isScissors:before { 417 | background: -webkit-gradient(linear, left top, left bottom, from(#ec9e0e), to(#eca922)); 418 | background: linear-gradient(#ec9e0e, #eca922); 419 | } 420 | 421 | .gameContent__gameChoice--isScissors:after { 422 | border-bottom: 6px solid #bc861a; 423 | } 424 | 425 | .gameContent__gameChoice--isComputer { 426 | opacity: 0; 427 | visibility: hidden; 428 | -webkit-transform: scale(var(--game-choice-active-scale)) translate(calc(var(--game-choice-x-position) * var(--animation-ratio)), 75px); 429 | transform: scale(var(--game-choice-active-scale)) translate(calc(var(--game-choice-x-position) * var(--animation-ratio)), 75px); 430 | -webkit-transition: all var(--timing-animation); 431 | transition: all var(--timing-animation); 432 | pointer-events: none; 433 | } 434 | 435 | .gameContent__gameChoice--isActive { 436 | opacity: 1 !important; 437 | visibility: visible !important; 438 | -webkit-transform: scale(var(--game-choice-active-scale)) rotate(360deg) translate(calc(var(--game-choice-x-position) * var(--animation-ratio) * -1), 75px); 439 | transform: scale(var(--game-choice-active-scale)) rotate(360deg) translate(calc(var(--game-choice-x-position) * var(--animation-ratio) * -1), 75px); 440 | pointer-events: none; 441 | } 442 | 443 | .gameContent__image { 444 | display: -webkit-box; 445 | display: -ms-flexbox; 446 | display: flex; 447 | -webkit-box-align: center; 448 | -ms-flex-align: center; 449 | align-items: center; 450 | -webkit-box-pack: center; 451 | -ms-flex-pack: center; 452 | justify-content: center; 453 | border-radius: 50%; 454 | -webkit-box-flex: 1; 455 | -ms-flex: 1; 456 | flex: 1; 457 | height: 100%; 458 | position: relative; 459 | background-color: white; 460 | pointer-events: none; 461 | } 462 | 463 | .gameContent__image:before { 464 | content: ''; 465 | position: absolute; 466 | left: 0; 467 | right: 0; 468 | top: 0; 469 | bottom: 0; 470 | border-radius: 50%; 471 | border-top: 6px solid rgba(0, 0, 0, 0.1); 472 | } 473 | 474 | .gameContent__result { 475 | display: -webkit-box; 476 | display: -ms-flexbox; 477 | display: flex; 478 | -webkit-box-orient: vertical; 479 | -webkit-box-direction: normal; 480 | -ms-flex-direction: column; 481 | flex-direction: column; 482 | -webkit-box-align: center; 483 | -ms-flex-align: center; 484 | align-items: center; 485 | text-transform: uppercase; 486 | -webkit-box-pack: center; 487 | -ms-flex-pack: center; 488 | justify-content: center; 489 | -webkit-transform: scale(0.5); 490 | transform: scale(0.5); 491 | -webkit-transition: all var(--timing-animation); 492 | transition: all var(--timing-animation); 493 | opacity: 0; 494 | visibility: hidden; 495 | } 496 | 497 | .gameContent__resultText { 498 | font-size: var(--font-size-2xLarge); 499 | margin-bottom: var(--default-border-radius); 500 | } 501 | 502 | .gameContent__resultButton { 503 | border: none; 504 | background-color: white; 505 | border-radius: var(--default-border-radius); 506 | padding: calc(var(--default-border-radius) * 2) calc(var(--default-border-radius) * 6); 507 | color: var(--color-dark-text); 508 | font-weight: var(--font-weight-bold); 509 | font-size: var(--font-size-normal); 510 | text-transform: uppercase; 511 | letter-spacing: 2px; 512 | z-index: 1; 513 | } 514 | /*# sourceMappingURL=styles.css.map */ -------------------------------------------------------------------------------- /styles/styles.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "styles.scss", 6 | "mixins.scss" 7 | ], 8 | "names": [], 9 | "file": "styles.css" 10 | } -------------------------------------------------------------------------------- /styles/styles.scss: -------------------------------------------------------------------------------- 1 | @import './mixins.scss'; 2 | @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap'); 3 | 4 | :root { 5 | --default-padding: 20px; 6 | --default-border-radius: 10px; 7 | --font-family: 'Barlow Semi Condensed', sans-serif; 8 | --font-size-normal: 14px; 9 | --font-size-medium: 18px; 10 | --font-size-large: 24px; 11 | --font-size-xLarge: 32px; 12 | --font-size-2xLarge: 48px; 13 | --font-weight-semi-bold: 600; 14 | --font-weight-bold: 700; 15 | --color-dark-text: hsl(229, 25%, 31%); 16 | --color-score-text: hsl(229, 64%, 46%); 17 | --color-header-outline: hsl(217, 16%, 45%); 18 | --max-width: 600px; 19 | --game-content-height: 350px; 20 | --timing-animation: .3s; 21 | --game-choice-ratio: 160px; 22 | --game-choice-x-position: 105px; 23 | --game-choice-text-x-position: 160px; 24 | --animation-ratio: 1; 25 | --game-choice-active-scale: 1.5; 26 | --game-choice-text-ratio: 1; 27 | } 28 | 29 | * { 30 | box-sizing: border-box; 31 | } 32 | 33 | img[src=''] { 34 | display: none; 35 | } 36 | 37 | .container { 38 | display: flex; 39 | flex-direction: column; 40 | align-items: center; 41 | font-family: var(--font-family); 42 | padding: var(--default-padding); 43 | background: linear-gradient(hsl(214, 47%, 23%), hsl(237, 49%, 15%)); 44 | min-height: 100vh; 45 | color: white; 46 | overflow: hidden; 47 | 48 | &__content { 49 | display: flex; 50 | align-items: center; 51 | flex: 1; 52 | flex-direction: column; 53 | max-width: var(--max-width); 54 | width: 100%; 55 | } 56 | 57 | &__rules { 58 | font-size: var(--font-size-medium); 59 | letter-spacing: 2px; 60 | text-transform: uppercase; 61 | margin-left: auto; 62 | padding: var(--default-padding) calc(var(--default-padding) * 2); 63 | border: 2px solid var(--color-header-outline); 64 | border-radius: var(--default-border-radius); 65 | cursor: pointer; 66 | 67 | @include mobile { 68 | margin: auto; 69 | } 70 | } 71 | } 72 | 73 | .header { 74 | display: flex; 75 | width: 100%; 76 | border: 2px solid var(--color-header-outline); 77 | border-radius: var(--default-border-radius); 78 | padding: var(--default-padding); 79 | justify-content: space-between; 80 | align-items: center; 81 | margin-bottom: calc(var(--default-border-radius) * 2); 82 | 83 | &__logo { 84 | display: flex; 85 | flex-direction: column; 86 | font-size: var(--font-size-xLarge); 87 | font-weight: var(--font-weight-bold); 88 | line-height: 26px; 89 | text-transform: uppercase; 90 | text-shadow: 0 3px 5px rgba(0, 0, 0, 1); 91 | } 92 | 93 | &__scoreContent { 94 | text-align: center; 95 | background-color: white; 96 | border-radius: calc(var(--default-border-radius) / 1); 97 | color: black; 98 | padding: calc(var(--default-padding) / 2) calc(var(--default-padding) * 1.5); 99 | font-weight: var(--font-weight-semi-bold); 100 | } 101 | 102 | &__scoreText { 103 | font-size: var(--font-size-normal); 104 | color: var(--color-score-text); 105 | text-transform: uppercase; 106 | letter-spacing: 2px; 107 | } 108 | 109 | &__scoreNumber { 110 | color: var(--color-dark-text); 111 | font-size: var(--font-size-2xLarge); 112 | font-weight: var(--font-weight-bold); 113 | } 114 | } 115 | 116 | .modal { 117 | position: fixed; 118 | top: 0; 119 | bottom: 0; 120 | left: 0; 121 | right: 0; 122 | display: flex; 123 | align-items: center; 124 | justify-content: center; 125 | z-index: 1; 126 | transition: all var(--timing-animation); //animation 127 | @include hide-tag; 128 | 129 | &--isActive { 130 | @include show-tag; 131 | } 132 | 133 | &__overlay { 134 | content: ''; 135 | position: absolute; 136 | width: 100%; 137 | height: 100%; 138 | background-color: rgba(0, 0, 0, .4); 139 | } 140 | 141 | &__content { 142 | display: flex; 143 | flex-direction: column; 144 | margin: var(--default-padding); 145 | border-radius: var(--default-border-radius); 146 | padding: var(--default-padding); 147 | background-color: white; 148 | z-index: 1; 149 | } 150 | 151 | &__text { 152 | text-transform: uppercase; 153 | font-size: var(--font-size-medium); 154 | font-weight: var(--font-weight-semi-bold); 155 | color: var(--color-dark-text); 156 | } 157 | 158 | &__header { 159 | display: flex; 160 | flex: 1; 161 | align-items: center; 162 | justify-content: space-between; 163 | margin-bottom: var(--default-padding); 164 | cursor: pointer; 165 | } 166 | 167 | &__image { 168 | width: 100%; 169 | } 170 | } 171 | 172 | .gameContent { 173 | position: relative; 174 | display: flex; 175 | margin: auto 0; 176 | width: 100%; 177 | height: var(--game-content-height); 178 | justify-content: space-evenly; 179 | transition: all var(--timing-animation);//animation 180 | 181 | @include mobile { 182 | --game-choice-active-scale: 1.2; 183 | --game-choice-text-ratio: .8; 184 | margin-top: 0; 185 | transform: scale(.9); 186 | } 187 | 188 | &--isActive { 189 | .gameContent__gameChoice, 190 | .gameContent__bg { 191 | @include hide-tag; 192 | } 193 | 194 | .gameContent__text, 195 | .gameContent__gameChoice--isComputer { 196 | @include show-tag; 197 | } 198 | } 199 | 200 | &--revealResult { 201 | --animation-ratio: 1.6; 202 | --game-choice-text-ratio: 1.6; 203 | 204 | @include mobile { 205 | --animation-ratio: 1; 206 | --game-choice-text-ratio: .8; 207 | } 208 | 209 | .gameContent__result { 210 | @include show-tag; 211 | transform: scale(1); 212 | 213 | @include mobile { 214 | margin-bottom: -80px; 215 | justify-content: flex-end; 216 | } 217 | } 218 | } 219 | 220 | &--isLost { 221 | transition-delay: calc(var(--timing-animation) * 2); //animation 222 | filter: grayscale(1) opacity(.7); 223 | } 224 | 225 | &__bg { 226 | position: absolute; 227 | width: 100%; 228 | height: 100%; 229 | background: url('../images/bg-triangle.svg') center no-repeat; 230 | } 231 | 232 | &__text { 233 | position: absolute; 234 | text-transform: uppercase; 235 | font-size: var(--font-size-large); 236 | font-weight: var(--font-weight-semi-bold); 237 | transition: all var(--timing-animation);//animation 238 | @include hide-tag; 239 | 240 | &--isYou { 241 | transform: translate(calc(var(--game-choice-ratio) * var(--game-choice-text-ratio) * -1), 0); 242 | } 243 | 244 | &--isComputer { 245 | transform: translate(calc(var(--game-choice-ratio) * var(--game-choice-text-ratio))); 246 | } 247 | } 248 | 249 | &__countdownText { 250 | font-size: var(--font-size-2xLarge); 251 | color: var(--color-dark-text) 252 | } 253 | 254 | &__gameChoice { 255 | position: absolute; 256 | display: flex; 257 | align-items: center; 258 | justify-content: center; 259 | background-color: white; 260 | border-radius: 50%; 261 | overflow: hidden; 262 | width: var(--game-choice-ratio); 263 | height: var(--game-choice-ratio); 264 | padding: 20px; 265 | cursor: pointer; 266 | transition: all var(--timing-animation); //animation 267 | 268 | &:before { 269 | content: ''; 270 | position: absolute; 271 | left: 0; 272 | right: 0; 273 | top: 0; 274 | bottom: 0; 275 | } 276 | 277 | &:after { 278 | content: ''; 279 | position: absolute; 280 | left: 0; 281 | right: 0; 282 | top: 0; 283 | bottom: 0; 284 | border-radius: 50%; 285 | } 286 | 287 | &:active { 288 | .container__gameChoiceImage { 289 | &::before { 290 | @include hide-tag; 291 | } 292 | } 293 | 294 | &::after { 295 | @include hide-tag; 296 | } 297 | } 298 | 299 | &--isPaper { 300 | transform: translate(-120px); 301 | 302 | &:before { 303 | background: linear-gradient(hsl(230, 89%, 62%), hsl(230, 89%, 65%)); 304 | } 305 | 306 | &:after { 307 | border-bottom: 6px solid hsl(230, 47%, 48%); 308 | } 309 | } 310 | 311 | &--isRock { 312 | transform: translate(0, var(--game-choice-ratio)); 313 | 314 | &:before { 315 | background: linear-gradient(hsl(349, 71%, 52%), hsl(349, 70%, 56%)); 316 | } 317 | 318 | &:after { 319 | border-bottom: 6px solid hsl(349, 62%, 32%); 320 | } 321 | } 322 | 323 | &--isScissors { 324 | transform: translate(120px); 325 | 326 | &:before { 327 | background: linear-gradient(hsl(39, 89%, 49%), hsl(40, 84%, 53%)); 328 | } 329 | 330 | &:after { 331 | border-bottom: 6px solid hsl(40, 76%, 42%); 332 | } 333 | } 334 | 335 | &--isComputer { 336 | @include hide-tag; 337 | transform: scale(var(--game-choice-active-scale)) translate(calc(var(--game-choice-x-position) * var(--animation-ratio)), 75px); 338 | transition: all var(--timing-animation); //animation 339 | pointer-events: none; 340 | } 341 | 342 | &--isActive { 343 | opacity: 1 !important; 344 | visibility: visible !important; 345 | transform: scale(var(--game-choice-active-scale)) rotate(360deg) translate(calc(var(--game-choice-x-position) * var(--animation-ratio) * -1), 75px); 346 | pointer-events: none; 347 | } 348 | } 349 | 350 | &__image { 351 | display: flex; 352 | align-items: center; 353 | justify-content: center; 354 | border-radius: 50%; 355 | flex: 1; 356 | height: 100%; 357 | position: relative; 358 | background-color: white; 359 | pointer-events: none; 360 | 361 | &:before { 362 | content: ''; 363 | position: absolute; 364 | left: 0; 365 | right: 0; 366 | top: 0; 367 | bottom: 0; 368 | border-radius: 50%; 369 | border-top: 6px solid rgba(0, 0, 0, .1); 370 | } 371 | } 372 | 373 | &__result { 374 | display: flex; 375 | flex-direction: column; 376 | align-items: center; 377 | text-transform: uppercase; 378 | justify-content: center; 379 | transform: scale(.5); 380 | transition: all var(--timing-animation); //animation 381 | @include hide-tag; 382 | } 383 | 384 | &__resultText { 385 | font-size: var(--font-size-2xLarge); 386 | margin-bottom: var(--default-border-radius); 387 | } 388 | 389 | &__resultButton { 390 | border: none; 391 | background-color: white; 392 | border-radius: var(--default-border-radius); 393 | padding: calc(var(--default-border-radius) * 2) calc(var(--default-border-radius) * 6); 394 | color: var(--color-dark-text); 395 | font-weight: var(--font-weight-bold); 396 | font-size: var(--font-size-normal); 397 | text-transform: uppercase; 398 | letter-spacing: 2px; 399 | z-index: 1; 400 | } 401 | } 402 | --------------------------------------------------------------------------------