From 4c19d816dc64bd847d27335faacd4555fdc4889e Mon Sep 17 00:00:00 2001 From: Mohamed Amine Date: Thu, 14 Mar 2024 01:09:12 +0000 Subject: [PATCH] Refactor game UI and add restart button --- index.html | 22 ++++++++++------ script.js | 41 ++++++++++++++++++++++-------- styles.css | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 118 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 32898a7..97e749f 100644 --- a/index.html +++ b/index.html @@ -9,13 +9,21 @@ -
-
-
-

LOADING...

-
- -

THIMBLES!

+
+
+
+

0♤

+ +
+
+
+
+
+
+

LOADING...

+
+ +

THIMBLES!

05:00
Balance: 200♤
diff --git a/script.js b/script.js index b1ab1c7..a7e5e3e 100644 --- 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' } \ No newline at end of file diff --git a/styles.css b/styles.css index 67af9bc..fa2e03c 100644 --- 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); } \ No newline at end of file