├── .DS_Store ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── images ├── dice1.png ├── dice2.png ├── dice3.png ├── dice4.png ├── dice5.png └── dice6.png ├── mstile-150x150.png ├── apple-touch-icon.png ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── browserconfig.xml ├── site.webmanifest ├── js ├── utilities.js └── app.js ├── safari-pinned-tab.svg ├── index.html └── css └── style.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/.DS_Store -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/favicon.ico -------------------------------------------------------------------------------- /favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/favicon-16x16.png -------------------------------------------------------------------------------- /favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/favicon-32x32.png -------------------------------------------------------------------------------- /images/dice1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/images/dice1.png -------------------------------------------------------------------------------- /images/dice2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/images/dice2.png -------------------------------------------------------------------------------- /images/dice3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/images/dice3.png -------------------------------------------------------------------------------- /images/dice4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/images/dice4.png -------------------------------------------------------------------------------- /images/dice5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/images/dice5.png -------------------------------------------------------------------------------- /images/dice6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/images/dice6.png -------------------------------------------------------------------------------- /mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/mstile-150x150.png -------------------------------------------------------------------------------- /apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/apple-touch-icon.png -------------------------------------------------------------------------------- /android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/android-chrome-192x192.png -------------------------------------------------------------------------------- /android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AhmadrezaMozaffary/Bilingual-dice-game/HEAD/android-chrome-512x512.png -------------------------------------------------------------------------------- /browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /js/utilities.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Fades out an element in after a period of time 3 | * @param {Node} element - The element that will be faded out 4 | * @param {Number} [startFadingOutAfter = 2000] - The time that fading out will be started after 5 | * @param {Number} [speed = 1] - The speed of fading out, speed must be greater than zero. 6 | */ 7 | const fadeOut = function (element, startFadingOutAfter = 2000, speed = 1) { 8 | // speed must be greater than zero 9 | speed = speed <= 0 ? 1 : speed; 10 | 11 | setTimeout(function () { 12 | const timerId = setInterval(function () { 13 | const opacity = element.style.opacity; 14 | if (opacity == 0) { 15 | clearInterval(timerId); 16 | } else { 17 | element.style.opacity = opacity - 0.05; 18 | } 19 | }, 100 / speed); 20 | }, startFadingOutAfter); 21 | 22 | element.style.opacity = 1; 23 | }; 24 | -------------------------------------------------------------------------------- /safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017 9 | 10 | 12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dice Game 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 |
23 |

Player 1

24 |

0

25 |
26 | 27 |
28 |

Current

29 |

0

30 |
31 |
32 | 33 | 34 |
35 |
36 |

Player 2

37 |

0

38 |
39 | 40 |
41 |

Current

42 |

0

43 |
44 |
45 | 46 | 47 |
48 | 49 | 50 | 51 | 52 | 53 | 54 |
55 | 56 | 57 | 58 |
59 |
60 |
61 |

62 |
63 |
64 |
65 |
66 |
67 |
68 |

69 | 1) If your Dice number is equal to "1" before "Hold" it, You will lose 70 | all of your "Current" scores and the game will automatically change 71 | the player, so before that, use Hold button!
72 |
73 | 2) If your total score greater than or equal to "100", We want to say 74 | to you "Congratulations", You just won the game ! 75 |

76 |

77 | ۱) اگر عدد تاس شما برابر عدد یک شود قبل از اینکه روی دکمه نگهداری 78 | بزنید کل امتیاز فعلی شما صفر شده و بازی به صورت خودکار نوبت را به نفر 79 | بعد میدهد پس قبل از آن روی دکمه نگهداری بزنید ! 80 |
81 |
82 | ۲)اگر امتیاز کلی شما بیشتر یا مساوی عدد صد شد ما باید به شما تبریک 83 | بگویییم شما بازی را برده اید ! 84 |

85 |
86 |
87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | const dice = document.querySelector("img"); 2 | const score = [0, 0]; 3 | const player0Title = document.querySelector(".player-title0"); 4 | const player1Title = document.querySelector(".player-title1"); 5 | const currentTitle0 = document.querySelector(".current-title0"); 6 | const currentTitle1 = document.querySelector(".current-title1"); 7 | const player0El = document.querySelector(".player0"); 8 | const player1El = document.querySelector(".player1"); 9 | const currentScore0 = document.querySelector(".current-score0"); 10 | const currentScore1 = document.querySelector(".current-score1"); 11 | const totalScore0El = document.querySelector(".total0"); 12 | const totalScore1El = document.querySelector(".total1"); 13 | const langMessage = document.querySelector(".langmsg"); 14 | 15 | let winMessage = "You win!"; 16 | let isInEnglishLanguage; 17 | const langFA = " 🇮🇷 زبان به فارسی تغییر کرد "; 18 | const langEN = "Language changed to EN 🇺🇸"; 19 | 20 | const btnRoll = document.querySelector(".roll"); 21 | const btnHold = document.querySelector(".hold"); 22 | const btnReset = document.querySelector(".reset"); 23 | const btnLanguage = document.querySelector(".lang"); 24 | const btnHelp = document.querySelector(".help"); 25 | const btnX = document.querySelector(".x-button"); 26 | 27 | const switchPlayer = function () { 28 | player0El.classList.toggle("active-player"); 29 | player1El.classList.toggle("active-player"); 30 | player0El.classList.toggle("deactive-player"); 31 | player1El.classList.toggle("deactive-player"); 32 | }; 33 | 34 | const changeModalDisplay = function (display) { 35 | document.querySelector(".modal-window").style.display = display; 36 | }; 37 | 38 | let play = true; 39 | let currentScore = 0; 40 | let activePlayer = 0; 41 | 42 | btnRoll.addEventListener("click", () => { 43 | if (play) { 44 | const diceNumber = Math.trunc(Math.random() * 6) + 1; 45 | dice.src = `./images/dice${diceNumber}.png`; 46 | dice.classList.remove("hidden"); 47 | if (score[0] <= 100 && score[1] <= 100) { 48 | if (activePlayer === 0) { 49 | currentScore += diceNumber; 50 | currentScore0.textContent = currentScore; 51 | if (diceNumber === 1) { 52 | currentScore = 0; 53 | activePlayer = 1; 54 | currentScore0.textContent = 0; 55 | switchPlayer(); 56 | } 57 | } else { 58 | currentScore += diceNumber; 59 | currentScore1.textContent = currentScore; 60 | if (diceNumber === 1) { 61 | currentScore = 0; 62 | activePlayer = 0; 63 | currentScore1.textContent = 0; 64 | switchPlayer(); 65 | } 66 | } 67 | } else { 68 | play = false; 69 | dice.classList.add("hidden"); 70 | if (score[0] >= 99) { 71 | player0Title.textContent = winMessage; 72 | switchPlayer(); 73 | } else if (score[1] >= 99) { 74 | player1Title.textContent = winMessage; 75 | switchPlayer(); 76 | } 77 | } 78 | } 79 | }); 80 | 81 | btnHold.addEventListener("click", () => { 82 | if (play) { 83 | if (score[0] <= 100 && score[1] <= 100) { 84 | if (activePlayer === 0) { 85 | score[0] += currentScore; 86 | totalScore0El.textContent = score[0]; 87 | activePlayer = 1; 88 | currentScore0.textContent = 0; 89 | currentScore = 0; 90 | switchPlayer(); 91 | } else { 92 | score[1] += currentScore; 93 | totalScore1El.textContent = score[1]; 94 | activePlayer = 0; 95 | currentScore1.textContent = 0; 96 | currentScore = 0; 97 | switchPlayer(); 98 | } 99 | } 100 | } else { 101 | } 102 | }); 103 | 104 | btnReset.addEventListener("click", () => { 105 | play = true; 106 | activePlayer = 0; 107 | currentScore = 0; 108 | score[0] = score[1] = 0; 109 | currentScore0.textContent = 0; 110 | currentScore1.textContent = 0; 111 | totalScore0El.textContent = 0; 112 | totalScore1El.textContent = 0; 113 | player0Title.textContent = isInEnglishLanguage ? "بازیکن ۱" : "Player 1"; 114 | player1Title.textContent = isInEnglishLanguage ? "بازیکن ۲" : "Player 2"; 115 | player0El.classList.add("active-player"); 116 | player0El.classList.remove("deactive-player"); 117 | player1El.classList.add("deactive-player"); 118 | player1El.classList.remove("active-player"); 119 | dice.classList.add("hidden"); 120 | }); 121 | 122 | btnLanguage.addEventListener("click", () => { 123 | isInEnglishLanguage = winMessage === "You win!"; 124 | winMessage = winMessage === "You win!" ? "شما برنده شدید" : "You win!"; 125 | const msg = isInEnglishLanguage ? langFA : langEN; 126 | langMessage.textContent = msg; 127 | player0Title.textContent = isInEnglishLanguage ? "بازیکن ۱" : "Player 1"; 128 | player1Title.textContent = isInEnglishLanguage ? "بازیکن ۲" : "Player 2"; 129 | currentTitle0.textContent = isInEnglishLanguage ? "امتیاز فعلی" : "Current"; 130 | currentTitle1.textContent = isInEnglishLanguage ? "امتیاز فعلی" : "Current"; 131 | btnRoll.textContent = isInEnglishLanguage ? "بریز 🖲" : "Roll 🖲"; 132 | btnHold.textContent = isInEnglishLanguage ? "نگهداری 📥" : "Hold 📥"; 133 | btnReset.textContent = isInEnglishLanguage ? "از اول ♻️" : "Reset ♻️"; 134 | btnLanguage.textContent = isInEnglishLanguage ? "English" : "فارسی"; 135 | btnHelp.textContent = isInEnglishLanguage ? "راهنما" : "Help"; 136 | 137 | fadeOut(langMessage); 138 | }); 139 | 140 | btnHelp.addEventListener("click", () => { 141 | changeModalDisplay("flex"); 142 | if (btnHelp.textContent === "Help") { 143 | document.querySelector(".modal-content-en").style.display = "block"; 144 | document.querySelector(".modal-content-fa").style.display = "none"; 145 | } else { 146 | document.querySelector(".modal-content-en").style.display = "none"; 147 | document.querySelector(".modal-content-fa").style.display = "block"; 148 | } 149 | }); 150 | 151 | btnX.addEventListener("click", () => { 152 | changeModalDisplay("none"); 153 | }); 154 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Arial, Helvetica, sans-serif; 6 | } 7 | 8 | ::selection { 9 | background: #f4f4f4; 10 | color: purple; 11 | } 12 | 13 | body { 14 | width: 100%; 15 | height: 100vh; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | background: linear-gradient( 20 | to right, 21 | rgba(236, 69, 236, 0.4), 22 | rgba(253, 253, 22, 0.4) 23 | ); 24 | } 25 | 26 | img { 27 | display: block; 28 | width: 80px; 29 | } 30 | 31 | h2 { 32 | font-size: 5.5em; 33 | } 34 | 35 | h3 { 36 | font-size: 1.4em; 37 | font-weight: lighter; 38 | margin-bottom: 1em; 39 | } 40 | 41 | h4 { 42 | font-size: 2.1em; 43 | text-align: center; 44 | } 45 | 46 | /* Utility Classes */ 47 | .btn { 48 | display: block; 49 | width: 90px; 50 | padding: 11px 0px; 51 | font-size: 1.1em; 52 | background: transparent; 53 | color: #444; 54 | border: 1px solid #444; 55 | border-radius: 20px; 56 | margin: 3px 0; 57 | color: #444; 58 | } 59 | 60 | .btn:hover { 61 | cursor: pointer; 62 | background: rgba(255, 255, 255, 0.8); 63 | } 64 | 65 | .btn:focus { 66 | box-shadow: inset 0px 7px 5px rgba(68, 68, 68, 0.351), 67 | 0px 5px 5px rgba(68, 68, 68, 0.351); 68 | } 69 | 70 | .hidden { 71 | display: none; 72 | } 73 | 74 | /* Classes */ 75 | .container { 76 | width: 70%; 77 | height: 80vh; 78 | display: flex; 79 | justify-content: center; 80 | align-items: center; 81 | border-radius: 20px; 82 | box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.384); 83 | position: relative; 84 | } 85 | 86 | .player0, 87 | .player1 { 88 | width: 50%; 89 | height: 100%; 90 | display: flex; 91 | flex-direction: column; 92 | justify-content: space-evenly; 93 | align-items: center; 94 | margin: 0 auto; 95 | } 96 | 97 | .player0 { 98 | border-radius: 25px 0 0 25px; 99 | } 100 | 101 | .active-player { 102 | background: rgba(255, 255, 255, 0.5); 103 | } 104 | 105 | .deactive-player { 106 | background: rgba(128, 0, 128, 0.359); 107 | } 108 | 109 | .player1 { 110 | border-radius: 0 25px 25px 0; 111 | } 112 | 113 | .about { 114 | display: flex; 115 | flex-direction: column; 116 | align-items: center; 117 | } 118 | 119 | .current { 120 | width: 180px; 121 | height: 150px; 122 | display: flex; 123 | flex-direction: column; 124 | justify-content: center; 125 | align-items: center; 126 | background: linear-gradient(to bottom, #fff, rgba(0, 0, 255, 0.2)); 127 | box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.384); 128 | border-radius: 15px; 129 | } 130 | 131 | .joystick { 132 | display: flex; 133 | flex-direction: column; 134 | align-items: center; 135 | justify-content: space-evenly; 136 | position: absolute; 137 | background: rgb(238, 237, 237); 138 | width: 200px; 139 | height: 400px; 140 | box-shadow: 10px 10px 30px rgba(128, 128, 128, 0.279), 141 | -10px -10px 30px rgba(128, 128, 128, 0.279); 142 | border-radius: 20px; 143 | } 144 | 145 | .help, 146 | .lang { 147 | border: none; 148 | font-size: 1.1rem; 149 | } 150 | 151 | .lang { 152 | animation: show 0.9s infinite; 153 | } 154 | 155 | .help:hover, 156 | .lang:hover { 157 | background: transparent; 158 | color: red; 159 | } 160 | 161 | .help:focus, 162 | .lang:focus { 163 | box-shadow: none; 164 | } 165 | 166 | .option .btn { 167 | display: inline; 168 | } 169 | 170 | .langmsg { 171 | position: absolute; 172 | top: 0; 173 | margin-top: 1em; 174 | font-weight: bold; 175 | font-size: 1.3rem; 176 | color: black; 177 | text-shadow: 1px 1px 10px rgb(238, 237, 237), 178 | -1px -1px 10px rgb(238, 237, 237); 179 | z-index: 1; 180 | } 181 | 182 | .modal-window { 183 | width: 100vw; 184 | height: 100vh; 185 | display: none; 186 | justify-content: center; 187 | align-items: center; 188 | position: absolute; 189 | background: rgba(0, 0, 0, 0.822); 190 | } 191 | 192 | .modal-message { 193 | width: 60vw; 194 | height: 40vh; 195 | position: relative; 196 | display: flex; 197 | justify-content: center; 198 | align-items: center; 199 | background: linear-gradient(rgb(128, 128, 128), #fff 100%); 200 | border-radius: 10px; 201 | } 202 | 203 | .modal-content-en, 204 | .modal-content-fa { 205 | padding: 1em 2em; 206 | } 207 | 208 | .modal-content-en { 209 | display: block; 210 | } 211 | 212 | .modal-content-fa { 213 | display: none; 214 | } 215 | 216 | .x-button { 217 | width: 35px; 218 | height: 35px; 219 | display: flex; 220 | justify-content: center; 221 | align-items: center; 222 | top: 0; 223 | right: 0; 224 | position: absolute; 225 | margin: 4px 10px 0 0; 226 | } 227 | 228 | .x-button:hover { 229 | cursor: pointer; 230 | } 231 | 232 | .line1, 233 | .line2 { 234 | width: 60%; 235 | height: 4px; 236 | background: #000; 237 | position: absolute; 238 | border-radius: 50px; 239 | } 240 | 241 | .line1 { 242 | transform: rotate(135deg); 243 | } 244 | .line2 { 245 | transform: rotate(-135deg); 246 | } 247 | 248 | @keyframes show { 249 | from { 250 | font-weight: lighter; 251 | } 252 | to { 253 | color: rgb(250, 2, 250); 254 | } 255 | } 256 | 257 | /* Mobile Version */ 258 | @media screen and (max-width: 425px) { 259 | .container { 260 | width: 90%; 261 | flex-direction: column; 262 | box-shadow: none; 263 | } 264 | .player0, 265 | .player1 { 266 | width: 60%; 267 | border-radius: 0; 268 | transform: rotate(90deg); 269 | margin: 0; 270 | } 271 | .joystick { 272 | width: max-content; 273 | height: 55%; 274 | transform: rotate(90deg); 275 | display: flex; 276 | justify-content: center; 277 | } 278 | .dice { 279 | margin-bottom: 5px; 280 | } 281 | .about h2 { 282 | font-size: 4em; 283 | } 284 | .option { 285 | display: flex; 286 | flex-direction: column; 287 | } 288 | .current { 289 | display: flex; 290 | box-shadow: none; 291 | width: 6rem; 292 | height: fit-content; 293 | justify-content: center; 294 | align-items: center; 295 | margin: 0; 296 | padding: 10; 297 | } 298 | .current h3 { 299 | margin: 0; 300 | } 301 | .current h4 { 302 | font-size: 1.8em; 303 | padding: 10px 0; 304 | } 305 | .btn { 306 | padding: 0; 307 | margin: 5px 10px; 308 | } 309 | .btn:focus { 310 | box-shadow: none; 311 | } 312 | .modal-message { 313 | transform: rotate(90deg); 314 | width: 60vh; 315 | } 316 | } 317 | 318 | /* Tablet Version */ 319 | @media screen and (max-width: 768px) and (min-width: 426px) { 320 | .player0, 321 | .player1 { 322 | display: flex; 323 | justify-content: center; 324 | } 325 | 326 | .joystick { 327 | width: max-content; 328 | height: max-content; 329 | background: rgba(228, 222, 222, 0.9); 330 | box-shadow: none; 331 | display: flex; 332 | flex-direction: row; 333 | border-radius: 15px; 334 | bottom: 0; 335 | } 336 | 337 | .dice { 338 | width: 70px; 339 | margin: 5px 0; 340 | padding: 10px; 341 | } 342 | 343 | .about { 344 | margin-bottom: 0.3em; 345 | } 346 | 347 | .about h2 { 348 | font-size: 4.5em; 349 | } 350 | 351 | .about h3 { 352 | margin: 0; 353 | padding: 0; 354 | font-size: 1.2em; 355 | } 356 | 357 | .current { 358 | width: 40%; 359 | height: 7em; 360 | margin-top: 2.5em; 361 | } 362 | 363 | .btn { 364 | width: max-content; 365 | height: max-content; 366 | padding: 5px 10px; 367 | margin-right: 3px; 368 | } 369 | 370 | .btn:focus { 371 | box-shadow: none; 372 | } 373 | } 374 | --------------------------------------------------------------------------------