Enhanced a Timer feature in the game

index.html

@@ -320,6 +320,31 @@ <h1> TIME START NOW</h1>
     <button id="b5" class="btn btn--br btn--reset">
       <icon reset></icon>
     </button>
+
+    <!-- <div class="buttons">
+    <button class="btn btn--tc btn--button1" >
+     Play
+    </button><p></p>
+    <button class="btn btn--tc btn--button2" >
+      Pause
+    </button><p></p>
+    <button class="btn btn--tc btn--button3" >
+      Restart
+    </button></div> -->
+    <div class="main_B">
+      <div class="sub-main">
+        <button class="btn btn--tc btn--button1">Pause</button>
+      </div>
+      <div class="sub-main">
+        <button class="btn btn--tc btn--button2"></button>
+      </div>
+      <div class="sub-main">
+        <button class="btn btn--tc btn--button3">Restart</button>
+      </div>
+
+    <a href="./AboutUs/About.html"><button class="btn btn--in fa-solid fa-circle-info"></button></a>
+
+
 <div class="main_B">
   <div class="sub_main">
       <button class="btn btn--tc btn--button3">Restart</button>

script.js

@@ -2386,6 +2386,16 @@ class Transition {
 }
 
 class Timer extends Animation {
+  constructor(game) {
+    super(false);
+    this.game = game;
+    this.reset();
+  }
+
+  start(continueGame = false) {
+    this.startTime = continueGame ? Date.now() - this.deltaTime : Date.now();
+    this.isRunning = true;
+
 
   constructor(game) {
 
@@ -2405,11 +2415,9 @@ class Timer extends Animation {
     this.deltaTime = 0;
     this.converted = this.convert();
     super.start();
-
   }
 
   reset() {
-
     this.startTime = 0;
     this.currentTime = 0;
     this.deltaTime = 0;
@@ -2427,25 +2435,33 @@ class Timer extends Animation {
       super.stop();
     }
   }
+
+  resume() {
+    if (!this.isRunning) {
+      this.start(true);
+    }
+  }
 
   update() {
-
     const old = this.converted;
-
     this.currentTime = Date.now();
     this.deltaTime = this.currentTime - this.startTime;
     this.convert();
 
+    if (this.converted !== old) {
+
     if (this.converted != old) {
 
       localStorage.setItem('theCube_time', this.deltaTime);
       this.setText();
-
     }
-
   }
 
   convert() {
+    const seconds = parseInt((this.deltaTime / 1000) % 60);
+    const minutes = parseInt(this.deltaTime / (1000 * 60));
+    this.converted = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+
 
     const seconds = parseInt((this.deltaTime / 1000) % 60);
     const minutes = parseInt(this.deltaTime / (1000 * 60));
@@ -2454,13 +2470,11 @@ class Timer extends Animation {
   }
 
   setText() {
-
     this.game.dom.texts.timer.innerHTML = this.converted;
-
   }
-
 }
 
+
 const RangeHTML = [
 
   '<div class="range">',
@@ -3706,6 +3720,7 @@ const Icons = new IconsConverter({
       viewbox: '0 0 448 512',
       content: '<path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z" />',
     },
+
   },
 
   convert: true,
@@ -3724,6 +3739,9 @@ const STATE = {
 const BUTTONS = {
 
   Menu: [ 'stats', 'prefs' ],
+
+  Playing: [ 'back' ,"button1",'button3'],
+
   Playing: [ 'back','button3' ],
 
   Complete: [],
@@ -3760,6 +3778,9 @@ class Game {
 
         prefs: document.querySelector( '.btn--prefs' ),
         back: document.querySelector( '.btn--back' ),
+        button1: document.querySelector( '.btn--button1' ),
+        button3: document.querySelector( '.btn--button3' ),
+
         button3: document.querySelector('.btn--button3'),
         stats: document.querySelector( '.btn--stats' ),
         reset: document.querySelector( '.btn--reset' ),
@@ -3851,6 +3872,24 @@ class Game {
       }
 
     };
+    this.dom.buttons.button1.onclick = event => {
+      // Handle button1 click event
+      if (this.timer.isRunning) {
+        this.timer.stop();
+        event.target.innerText = 'Play';
+      } else {
+        this.timer.resume();
+        event.target.innerText = 'Pause';
+      }
+    };
+
+    this.dom.buttons.button3.onclick = event => {
+      // Handle button3 click event
+      this.timer.stop(); 
+      this.timer.reset();
+      this.timer.start();
+      this.dom.buttons.button1.innerText = 'Pause';
+    };
 
     this.dom.buttons.button3.onclick = event => {
       // Handle button3 click event
@@ -3918,6 +3957,10 @@ class Game {
         // Show additional buttons
         this.showPlayingButtons();
 
+        this.transition.buttons(BUTTONS.None, BUTTONS.Playing.concat(BUTTONS.Menu));
+
+        // Show additional buttons
+        this.showPlayingButtons();
       }
 
       const duration = this.saved ? 0 :
@@ -3951,6 +3994,10 @@ class Game {
 
       this.transition.buttons(BUTTONS.Menu, BUTTONS.Playing);
 
+      this.transition.zoom( STATE.Menu, 0 );
+      this.hidePlayingButtons();
+
+
       this.transition.zoom(STATE.Menu, 0);
 
       this.hidePlayingButtons();
@@ -4131,6 +4178,22 @@ class Game {
     }
 
   }
+
+  showPlayingButtons() {
+    if (this.state === STATE.Playing) {
+      // Show the additional buttons only if the game is in the Playing state
+      this.dom.buttons.button1.style.display = 'block';
+      this.dom.buttons.button2.style.display = 'block';
+      this.dom.buttons.button3.style.display = 'block';
+    }
+  }
+
+  hidePlayingButtons() {
+    // Hide the additional buttons
+    this.dom.buttons.button1.style.display = 'none';
+    this.dom.buttons.button2.style.display = 'none';
+    this.dom.buttons.button3.style.display = 'none';
+  }
 
   showPlayingButtons() {
     if (this.state === STATE.Playing) {

style.css

@@ -720,6 +720,7 @@ body {
 }
 
 .text--timer {
+
   bottom: 78%;
   font-size: 3.5em;
   line-height: 1;
@@ -862,6 +863,32 @@ body {
   display: none !important;
 }
 
+/*3 buttons*/
+/* .buttons {
+  position: relative;
+  top: 5%; 
+  left: 50%; 
+}
+
+.btn.btn--tc {
+  margin: 10px;
+  padding: 10px 20px; 
+  font-size: 1.2em;
+  background-color: #41aac8; 
+  color: white; 
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.btn.btn--tc:hover {
+  background-color: #2c7a97; 
+}  */
+.main_B{
+  padding-left: 35%;
+
+}
+
 .main_B{
   padding-left: 35%;
 }
@@ -872,11 +899,89 @@ body {
   float: left;
 }
 
+.btn1, .btn2 , .btn3 {
+
 .btn3 {
   text-align: center;
   cursor: pointer;
   font-size:24px;
   padding: 10px;
+
+}
+
+
+/* 
+/Button One/ */
+.btn1  {
+  padding:20px 60px;
+  outline: none;
+  background-color: #27ae60;
+  border: none;
+  border-radius:5px;
+  box-shadow: 0 9px #95a5a6;
+}
+
+.btn1 :hover{
+  background-color: #2ecc71;
+}
+
+.btn1 :active {
+  background-color: #2ecc71;
+  box-shadow: 0 5px #95a5a6;
+  transform: translateY(4px);
+}
+
+/* 
+/Button Two/ */
+.btn2 {
+  border-radius: 4px;
+  background-color:#ede9e7;
+  border: none;
+  padding: 20px;
+  width: 200px;
+  transition: all 0.5s;
+}
+
+
+.btn2  span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+}
+
+.btn2  span:after {
+  content: '»';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+.btn2 :hover span {
+  padding-right: 25px;
+}
+
+.btn2:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+
+
+/* /Button Three/ */
+.btn3  {
+    position: relative;
+    background-color: #ebe7e0;
+    border: none;
+    padding: 20px;
+    width: 200px;
+    text-align: center;
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+    text-decoration: none;
+    overflow: hidden;
+
   position: relative;
   background-color: #ebe7e0;
   border: none;
@@ -914,6 +1019,9 @@ body {
     opacity: 1;
     transition: 0s
 }
+/*  */
+/***/
+
 
 .ui {
   pointer-events: none;