Added Restart button

index.html

@@ -264,6 +264,32 @@ <h1> TIME START NOW</h1>
       <!-- Your Rubik's Cube game code -->
     </div>
 
+
+  <div class="ui__buttons">
+    <button class="btn btn--bl btn--stats">
+      <icon trophy></icon>
+    </button>
+    <button class="btn btn--br btn--prefs">
+      <icon settings></icon>
+    </button>
+    <button class="btn btn--tl btn--back">
+      <icon back></icon>
+    </button>
+    <button class="btn btn--br btn--theme">
+      <icon theme></icon>
+    </button>
+    <button class="btn btn--br btn--reset">
+      <icon reset></icon>
+    </button>
+<div class="main_B">
+  <div class="sub_main">
+      <button class="btn btn--tc btn--button3">Restart</button>
+      <button class="btn btn--tr fa-solid fa-volume-high" id="play-btn"></button>
+  </div>
+</div>
+
+
+
     <!-- the data client id is the goggle o-auth secret client id. -->
     <!-- g_id_signin is for rendering the Google Sign-In button. -->
 

script.js

@@ -2396,12 +2396,14 @@ class Timer extends Animation {
 
   }
 
-  start(continueGame) {
 
-    this.startTime = continueGame ? (Date.now() - this.deltaTime) : Date.now();
+  start( continueGame = false) {
+
+    this.startTime = continueGame ? ( Date.now() - this.deltaTime ) : Date.now();
+    this.isRunning = true;
+
     this.deltaTime = 0;
     this.converted = this.convert();
-
     super.start();
 
   }
@@ -2412,19 +2414,18 @@ class Timer extends Animation {
     this.currentTime = 0;
     this.deltaTime = 0;
     this.converted = '0:00';
-
+    this.isRunning = false;
+    this.setText();
   }
 
   stop() {
-
-    this.currentTime = Date.now();
-    this.deltaTime = this.currentTime - this.startTime;
-    this.convert();
-
-    super.stop();
-
-    return { time: this.converted, millis: this.deltaTime };
-
+    if (this.isRunning) {
+      this.currentTime = Date.now();
+      this.deltaTime = this.currentTime - this.startTime;
+      this.convert();
+      this.isRunning = false;
+      super.stop();
+    }
   }
 
   update() {
@@ -2447,9 +2448,8 @@ class Timer extends Animation {
   convert() {
 
     const seconds = parseInt((this.deltaTime / 1000) % 60);
-    const minutes = parseInt((this.deltaTime / (1000 * 60)));
-
-    this.converted = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
+    const minutes = parseInt(this.deltaTime / (1000 * 60));
+    this.converted = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
 
   }
 
@@ -3722,8 +3722,10 @@ const STATE = {
 };
 
 const BUTTONS = {
-  Menu: ['stats', 'prefs'],
-  Playing: ['back'],
+
+  Menu: [ 'stats', 'prefs' ],
+  Playing: [ 'back','button3' ],
+
   Complete: [],
   Stats: ['back'],
   Prefs: ['back', 'theme'],
@@ -3755,11 +3757,14 @@ class Game {
         theme: document.querySelector('.text--theme'),
       },
       buttons: {
-        prefs: document.querySelector('.btn--prefs'),
-        back: document.querySelector('.btn--back'),
-        stats: document.querySelector('.btn--stats'),
-        reset: document.querySelector('.btn--reset'),
-        theme: document.querySelector('.btn--theme'),
+
+        prefs: document.querySelector( '.btn--prefs' ),
+        back: document.querySelector( '.btn--back' ),
+        button3: document.querySelector('.btn--button3'),
+        stats: document.querySelector( '.btn--stats' ),
+        reset: document.querySelector( '.btn--reset' ),
+        theme: document.querySelector( '.btn--theme' ),
+
       },
     };
 
@@ -3847,6 +3852,14 @@ class Game {
 
     };
 
+    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.back.onclick = event => {
 
       if (this.transition.activeTransitions > 0) return;
@@ -3900,6 +3913,10 @@ class Game {
         this.scrambler.scramble();
         this.controls.scrambleCube();
         this.newGame = true;
+        this.transition.buttons(BUTTONS.None, BUTTONS.Playing.concat(BUTTONS.Menu));
+
+        // Show additional buttons
+        this.showPlayingButtons();
 
       }
 
@@ -3936,6 +3953,8 @@ class Game {
 
       this.transition.zoom(STATE.Menu, 0);
 
+      this.hidePlayingButtons();
+
       this.controls.disable();
       if (!this.newGame) this.timer.stop();
       this.transition.timer(HIDE);
@@ -4113,6 +4132,16 @@ class Game {
 
   }
 
+  showPlayingButtons() {
+    if (this.state === STATE.Playing) {
+      this.dom.buttons.button3.style.display = 'block';
+    }
+  }
+
+  hidePlayingButtons() {
+    this.dom.buttons.button3.style.display = 'none';
+  }
+
 }
 // Volume button functionality
 const musicButton = document.getElementById('play-btn');

style.css

@@ -506,6 +506,59 @@ body {
   display: none !important;
 }
 
+.main_B{
+  padding-left: 35%;
+}
+
+.sub-main{
+  width: 80px;
+  margin:2px;
+  float: left;
+}
+
+.btn3 {
+  text-align: center;
+  cursor: pointer;
+  font-size:24px;
+  padding: 10px;
+  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;
+}
+
+.btn3 :hover{
+   background:#fff;
+   box-shadow:0px 2px 10px 5px #97B1BF;
+   color:#000;
+}
+
+.btn3 :after {
+    content: "";
+    background: #f1c40f;
+    display: block;
+    position: absolute;
+    padding-top: 300%;
+    padding-left: 350%;
+    margin-left: -20px !important;
+    margin-top: -120%;
+    opacity: 0;
+    transition: all 0.8s
+}
+
+.btn3 :active:after {
+    padding: 0;
+    margin: 0;
+    opacity: 1;
+    transition: 0s
+}
+
 .ui {
   pointer-events: none;
   color: #070d15;