yyppsk · yyppsk · Jul 6, 2023 · Jul 5, 2023 · Jul 5, 2023 · Jul 5, 2023
diff --git a/07-Pig-Game/starter/index.html b/07-Pig-Game/starter/index.html
@@ -23,6 +23,14 @@
     <title>Pig Game</title>
   </head>
   <body>
+    <div class="modal hidden">
+      <button class="close-modal">×</button>
+      <h1>Press Esc to Exit</h1>
+      <h2 id="pig">Dear User You are a Pig!</h2>
+      <h2 id="pig">Try one more time!!</h2>
+      <img src="pig.png" style="width: 70%" />
+    </div>
+    <div class="overlay hidden"></div>
     <main>
       <section class="player player--0 player--active">
         <h2 class="name" id="name--0">Player 1</h2>

diff --git a/07-Pig-Game/starter/pig.png b/07-Pig-Game/starter/pig.png
diff --git a/07-Pig-Game/starter/script.js b/07-Pig-Game/starter/script.js
@@ -6,15 +6,30 @@ const current0El = document.getElementById('current--0');
 const current1El = document.getElementById('current--1');
 const player0El = document.querySelector('.player--0');
 const player1El = document.querySelector('.player--1');
-
+const btnCloseModal = document.querySelector('.close-modal');
 //Elements in use
 const diceEl = document.querySelector('.dice');
 const btnNew = document.querySelector('.btn--new');
 const btnRoll = document.querySelector('.btn--roll');
 const btnHold = document.querySelector('.btn--hold');
+const pig = document.getElementById('pig');
+
+//Modal Stuff
+
+const modal = document.querySelector('.modal');
+const overlay = document.querySelector('.overlay');
+
 let currentScore, activePlayer, playing, scores;
 let player1Name = prompt('Enter Player 1 Name');
 let player2Name = prompt('Enter Player 2 Name');
+const openModal = function () {
+  modal.classList.remove('hidden');
+  overlay.classList.remove('hidden');
+};
+const closeModal = function () {
+  modal.classList.add('hidden');
+  overlay.classList.add('hidden');
+};
 const init = function () {
   scores = [0, 0];
   currentScore = 0;
@@ -76,9 +91,21 @@ btnHold.addEventListener('click', function () {
       document
         .querySelector(`.player--${activePlayer}`)
         .classList.add('player--winner');
+
       document.getElementById(`name--${activePlayer}`).textContent = `${
         activePlayer == 0 ? player1Name : player2Name
       } Wins!🥇`;
+      document.getElementById(`pig`).textContent = `Dear ${
+        activePlayer == 1 ? player1Name : player2Name
+      }! You are a pig!!!`;
+      console.log('User Won, Now calling -> ', openModal());
+      btnCloseModal.addEventListener('click', closeModal);
+      overlay.addEventListener('click', closeModal);
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
+          closeModal();
+        }
+      });
       document
         .querySelector(`.player--${activePlayer}`)
         .classList.remove('player--active');

diff --git a/07-Pig-Game/starter/style.css b/07-Pig-Game/starter/style.css
@@ -4,6 +4,7 @@
   margin: 0;
   padding: 0;
   box-sizing: inherit;
+  overflow: hidden;
 }
 
 html {
@@ -169,3 +170,62 @@ main {
 .hidden {
   display: none;
 }
+.show-modal {
+  color: #fff;
+  font-size: 2rem;
+  font-weight: 600;
+  padding: 1.75rem 3.5rem;
+  margin: 5rem 2rem;
+  border: none;
+  background-color: #fff;
+  color: #444;
+  border-radius: 10rem;
+  cursor: pointer;
+}
+
+.close-modal {
+  position: absolute;
+  top: 1.2rem;
+  right: 2rem;
+  font-size: 5rem;
+  color: #333;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+/* CLASSES TO MAKE MODAL WORK */
+.hidden {
+  display: none;
+}
+
+.modal {
+  position: absolute;
+  color: #fff;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 70%;
+  text-align: center;
+  background-color: rgba(255, 255, 255, 0.25);
+  padding: 6rem;
+  border-radius: 5px;
+  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
+  z-index: 10;
+  height: 100%;
+}
+
+.overlay {
+  color: #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(3px);
+  z-index: 5;
+}
+h2 {
+  color: #fff;
+  font-size: 4rem;
+}