Refactor game UI and add restart button

MA-Abahmane · Mar 14, 2024 · 4c19d81 · 4c19d81
1 parent e7d4a86
commit 4c19d81
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -9,13 +9,21 @@
 </head>
 <body>
 
-	<section class="game_section">
-		<div class="preloader">
-		<div class="loader"></div>
-		<h2 style="color: white;">LOADING...</h3>
-		</div>
-
-		<h3> THIMBLES! </h3>
+    <div class="outer">
+        <div class="inner">
+            <div class="board">
+                <h2><span class="scoreNm">0</span>&#9828;</h2>
+                <button onclick="init()">Restart</button>
+            </div>
+        </div>
+    </div>
+    <section class="game_section">
+        <div class="preloader">
+            <div class="loader"></div>
+            <h2 style="color: white;">LOADING...</h3>
+            </div>
+
+            <h3> THIMBLES! </h3>
         <div id="countdown">05:00</div>
         <div class="score">Balance: <span class="scoreNm">200</span>&#9828;</div>
         <div class="shop">

diff --git a/script.js b/script.js
@@ -1,3 +1,8 @@
+let points = document.getElementsByClassName("scoreNm")[1];
+const countdownEl = document.getElementById('countdown');
+let board = document.querySelector(".outer");
+
+
 //pre-loader
 window.addEventListener("load", () => {
     const preloader = document.querySelector(".preloader");
@@ -10,9 +15,8 @@ let onTable = 0
 
 //this function triggers when you click play
 function StartGame() {
-    let points = document.querySelector(".scoreNm");
     if (parseInt(points.innerHTML) <= 0) {
-        alert("Game Over");
+        board.style.display = "flex";
         clearInterval(idItr);
     } else if (onTable == 0) {
         alert("Please place a bet");
@@ -34,9 +38,8 @@ function thimbledown(x) {
 }
 
 //this function selects one thimble at random and positions the ball under it and lifts it at the beginning
-let timeLeft = 5 * 60; // 5 minutes in seconds
+let timeLeft = 1 * 60; // 5 minutes in seconds
 let idItr
-const countdownEl = document.getElementById('countdown');
 function Showball() {
     document.getElementById("Playbutton").style.pointerEvents = "none";
     let rand = getRandNum();
@@ -61,8 +64,9 @@ function Showball() {
     // Start Timer
     if (countdownEl.innerHTML == '05:00') {
         idItr = setInterval(() => {
-            if(timeLeft <= 0) {
-                clearInterval(timeLeft = 0);
+
+            if (timeLeft <= 0) {
+                clearInterval(idItr);
                 alert("Time's up! You Won " + points.innerHTML + " spades!!");
             }
 
@@ -163,7 +167,6 @@ function selectthimble(x) {
     selectedthimble.classList.add("thimbleup"); //lift the selected thimble up
 
     setTimeout(function () {
-        let points = document.querySelector(".scoreNm");
 
         if (winningthimble != selectedthimble) {
             setTimeout(function () {
@@ -179,6 +182,11 @@ function selectthimble(x) {
 
             // subtract points
             points.innerHTML = parseInt(points.innerHTML) - onTable;
+            points.style.color = "crimson";
+            setTimeout(function () {
+                points.style.color = "white";
+            }, 1000)
+
             onTable = 0;
             let sum = document.querySelector(".sumNm");
             sum.innerHTML = 0
@@ -188,8 +196,13 @@ function selectthimble(x) {
 
             // add points
             points.innerHTML = parseInt(points.innerHTML) + onTable;
+            points.style.color = "#63d673";
+            setTimeout(function () {
+                points.style.color = "white";
+            }, 1000)
+
             if (points.innerHTML <= 0) {
-                alert("Game Over");
+                board.style.display = "flex";
                 clearInterval(idItr);
             }
             onTable = 0;
@@ -223,14 +236,22 @@ function setBall(id) {
 }
 
 function setOnTable(prst) {
-    let points = document.querySelector(".scoreNm");
 
     if (parseInt(points.innerHTML) > 0) {
         let sum = document.querySelector(".sumNm");
         onTable = Math.round(points.innerHTML * prst);
         sum.innerHTML = onTable;
     } else {
-        alert("Game Over");
+        board.style.display = "flex";
         clearInterval(idItr);
     }
+}
+
+function init() {
+    setCup(9);
+    setBall(1);
+    setOnTable(0);
+    points.innerHTML = 200;
+    board.style.display = "none";
+    countdownEl.innerHTML = '05:00'
 }
diff --git a/styles.css b/styles.css
@@ -454,8 +454,79 @@ top: 13.5em;
     border-radius: 0.4em;
     cursor: pointer;
     text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
-    transition: all 0.5s ease-in-out;
+    transition: all 0.3s ease-in-out;
 } .table div[class^='p']:hover {
     box-shadow: 0em 0.1em 0.425em #000000bd;
     transform: scale(1.07);
+}
+
+.scoreNm {
+    transition: all 0.4s ease-in-out;
+}
+
+.outer {
+    position: absolute;
+    width: 112em;
+    height: 60em;
+    top: -1em;
+    left: -1em;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    justify-content: center;
+    box-shadow: 0em 0.1em 0.625em #000000bd;
+    backdrop-filter: blur(.2em);
+    background: transparent;
+    transition: all 0.5s ease-in-out;
+    z-index: 11;
+    display: none;
+}
+
+.inner, .board {
+    width: 30em;
+    height: 13em;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    box-shadow: 0em 0.1em 0.625em #000000bd;
+    background: rgba(255, 255, 255, 0.615);
+    border-radius: 1em;
+    transition: all 0.5s ease-in-out;
+    z-index: 12;
+}
+.board {
+    width: 28em;
+    height: 11em;
+    flex-direction: column;
+    align-content: space-evenly;
+    justify-content: space-evenly;
+    box-shadow: 0em 0.1em 0.425em #000000bd;
+    text-align: center;
+    left: 150%;
+    background: transparent;
+    backdrop-filter: blur(1em);
+    transition: all 0.2s ease-in-out;
+} .board:hover {
+    box-shadow: 0em 0.1em 0.625em #000000bd;
+}
+
+.board button {
+    width: 90%;
+    height: 50px;
+    text-align: center;
+    background: transparent;
+    backdrop-filter: blur(1em);
+    font-size: 1.2em;
+    border: none;
+    box-shadow: 0em 0.1em 0.325em #000000bd;
+    border-radius: 50em;
+    cursor: pointer;
+    color: #fff;
+    transition: all 0.3s ease-in-out;
+    text-shadow: 2px 0 0 #000000, -2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000, 1px 1px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
+} .board button:hover {
+    box-shadow: 0em 0.1em 0.425em #000000bd;
+    transform: scale(1.05);
 }