pig game completed

prashantsingh181 · Oct 4, 2024 · 90c45d5 · 90c45d5
commit 90c45d5
Show file tree

Hide file tree

Showing 11 changed files with 368 additions and 0 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}
diff --git a/dice-1.png b/dice-1.png
diff --git a/dice-2.png b/dice-2.png
diff --git a/dice-3.png b/dice-3.png
diff --git a/dice-4.png b/dice-4.png
diff --git a/dice-5.png b/dice-5.png
diff --git a/dice-6.png b/dice-6.png
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Pig Game</title>
+  </head>
+  <body>
+    <main>
+      <section class="player player--0 player--active">
+        <h2 class="name" id="name--0">Player 1</h2>
+        <p class="score" id="score--0">43</p>
+        <div class="current">
+          <p class="current-label">Current</p>
+          <p class="current-score" id="current--0">0</p>
+        </div>
+      </section>
+      <section class="player player--1">
+        <h2 class="name" id="name--1">Player 2</h2>
+        <p class="score" id="score--1">24</p>
+        <div class="current">
+          <p class="current-label">Current</p>
+          <p class="current-score" id="current--1">0</p>
+        </div>
+      </section>
+
+      <div class="dice">
+        <img src="dice-5.png" alt="Playing dice" class="dice-image" />
+      </div>
+      <button class="btn btn--new">🔄 New game</button>
+      <button class="btn btn--roll">🎲 Roll dice</button>
+      <button class="btn btn--hold">📥 Hold</button>
+    </main>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/pig-game-flowchart.png b/pig-game-flowchart.png
diff --git a/script.js b/script.js
@@ -0,0 +1,92 @@
+'use strict';
+const WINNING_SCORE = 20;
+const RESET_SCORE = [1, 6];
+
+let currentScore;
+let score = [0, 0];
+let isFirstPlayerPlaying = true;
+let activePlayer = 0;
+
+const dice = document.querySelector('.dice-image');
+const player0Section = document.querySelector('.player--0');
+const player1Section = document.querySelector('.player--1');
+const diceRollButton = document.querySelector('.btn--roll');
+const holdButton = document.querySelector('.btn--hold');
+
+function init() {
+  score = [0, 0];
+  currentScore = 0;
+  document
+    .querySelectorAll('.score')
+    .forEach((scoreEl, index) => (scoreEl.textContent = score[index]));
+  document
+    .querySelectorAll('.current-score')
+    .forEach(currentScoreEl => (currentScoreEl.textContent = currentScore));
+  player1Section.classList.remove('player--active');
+  player1Section.classList.remove('player--winner');
+  player0Section.classList.add('player--active');
+  player0Section.classList.remove('player--winner');
+  activePlayer = 0;
+  dice.classList.add('hidden');
+}
+
+function changeTurn() {
+  currentScore = 0;
+  document
+    .querySelectorAll('.player')
+    .forEach(player => player.classList.toggle('player--active'));
+  document.getElementById(`current--${activePlayer}`).textContent =
+    currentScore;
+  activePlayer = activePlayer === 0 ? 1 : 0;
+}
+
+function handleDiceRoll() {
+  diceRollButton.disabled = true;
+  dice.classList.remove('hidden');
+  dice.classList.add('spin');
+  const randomNumber = Math.floor(Math.random() * 6) + 1;
+
+  setTimeout(() => {
+    dice.src = `dice-${randomNumber}.png`;
+  }, 500);
+
+  setTimeout(() => {
+    if (RESET_SCORE.includes(randomNumber)) {
+      changeTurn();
+      dice.classList.remove('spin');
+      dice.classList.add('hidden');
+      diceRollButton.disabled = false;
+      return;
+    }
+    currentScore += randomNumber;
+    document.getElementById(`current--${activePlayer}`).textContent =
+      currentScore;
+
+    dice.classList.remove('spin');
+    dice.classList.add('hidden');
+    diceRollButton.disabled = false;
+  }, 2000);
+}
+
+function handleHold() {
+  score[activePlayer] += currentScore;
+  document.getElementById(`score--${activePlayer}`).textContent =
+    score[activePlayer];
+  if (score[activePlayer] >= WINNING_SCORE) {
+    document
+      .querySelector(`.player--${activePlayer}`)
+      .classList.add('player--winner');
+    document.getElementById(`current--${activePlayer}`).textContent = 0;
+    diceRollButton.classList.add('hidden');
+    holdButton.classList.add('hidden');
+  } else {
+    changeTurn();
+  }
+}
+
+diceRollButton.addEventListener('click', handleDiceRoll);
+holdButton.addEventListener('click', handleHold);
+document.querySelector('.btn--new').addEventListener('click', init);
+
+// initializing the game
+init();
diff --git a/style.css b/style.css
@@ -0,0 +1,234 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Nunito', sans-serif;
+  font-weight: 400;
+  min-height: 100vh;
+  color: #333;
+  background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  overflow: auto;
+}
+
+/* LAYOUT */
+main {
+  position: relative;
+  min-height: 95%;
+  backdrop-filter: blur(200px);
+  filter: blur();
+  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
+  border-radius: 9px;
+  display: flex;
+}
+
+.player {
+  background-color: rgba(255, 255, 255, 0.3);
+  flex: 50%;
+  padding: 11rem 13rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: all 0.75s;
+}
+
+/* ELEMENTS */
+.name {
+  position: relative;
+  font-size: 4rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  word-spacing: 2px;
+  font-weight: 300;
+  margin-bottom: 1rem;
+  white-space: nowrap;
+}
+
+.score {
+  font-size: 8rem;
+  font-weight: 300;
+  color: #c7365f;
+  margin-bottom: auto;
+}
+
+.player--active {
+  background-color: rgba(255, 255, 255, 0.65);
+}
+.player--active .name {
+  font-weight: 700;
+}
+.player--active .score {
+  font-weight: 400;
+}
+
+.player--active .current {
+  opacity: 1;
+}
+
+.current {
+  background-color: #c7365f;
+  opacity: 0.8;
+  border-radius: 9px;
+  color: #fff;
+  margin-top: 2rem;
+  padding: 2rem 3rem;
+  text-align: center;
+  transition: all 0.75s;
+}
+
+.current-label {
+  text-transform: uppercase;
+  margin-bottom: 1rem;
+  font-size: 1.7rem;
+  color: #ddd;
+}
+
+.current-score {
+  font-size: 3.5rem;
+}
+
+/* ABSOLUTE POSITIONED ELEMENTS */
+.btn {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #444;
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-size: 1.8rem;
+  text-transform: uppercase;
+  cursor: pointer;
+  font-weight: 400;
+  transition: all 0.2s;
+  z-index: 50;
+
+  background-color: white;
+  background-color: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(10px);
+
+  padding: 0.7rem 2.5rem;
+  border-radius: 50rem;
+  box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
+}
+.btn:disabled {
+  background: rgba(140, 140, 139, 0.6);
+}
+
+.btn::first-letter {
+  font-size: 2.4rem;
+  display: inline-block;
+  margin-right: 0.7rem;
+}
+
+.btn--new {
+  top: 3rem;
+}
+.btn--roll {
+  bottom: 9rem;
+}
+.btn--hold {
+  bottom: 3rem;
+}
+
+.btn:active {
+  transform: translate(-50%, 3px);
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
+}
+
+.btn:focus {
+  outline: none;
+}
+
+.dice {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: center;
+  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
+  z-index: 60;
+}
+.dice-image {
+  height: 10rem;
+}
+
+.player--winner {
+  background-color: #2f2f2f;
+}
+
+.player--winner .name {
+  font-weight: 700;
+  color: #c7365f;
+}
+
+.hidden {
+  display: none;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spin {
+  animation: spin 0.5s linear;
+}
+
+@media (max-width: 992px) {
+  :root {
+    font-size: 45%;
+  }
+}
+
+@media (max-width: 768px) {
+  :root {
+    font-size: 40%;
+  }
+  body {
+    align-items: stretch;
+  }
+  main {
+    width: 100%;
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+  .player {
+    padding: 15rem 10rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(calc(-50% - 2rem), calc(-50% - 2rem));
+    box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
+    border-radius: 1rem;
+    z-index: 20;
+    background: #dcb7c5;
+  }
+  .player:not(.player--active) {
+    top: 50%;
+    left: 50%;
+    transform: translate(calc(-50% + 2rem), calc(-50% + 2rem));
+    z-index: 10;
+  }
+  .dice {
+    top: 50%;
+    transform: translate(calc(-50% - 2rem), calc(-50% - 2rem));
+  }
+}