Issue:#155_Completed_Commit

Dev-tanay · May 26, 2024 · bbffd79 · bbffd79
1 parent 111bd9b
commit bbffd79
Show file tree

Hide file tree

Showing 3 changed files with 232 additions and 44 deletions.
diff --git a/index.html b/index.html
@@ -18,8 +18,6 @@
 </div>
 <!-- the data client id is the goggle o-auth secret client id. -->
 <!-- g_id_signin is for rendering the Google Sign-In button. -->
-
-<!-- commit -->
 
 <div class="g_id_signin" data-type="standard"></div>
 
@@ -109,6 +107,27 @@ <h1 class="text text--title">
     <button 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>
   </div>
 
 </div>

diff --git a/script.js b/script.js
@@ -2354,81 +2354,67 @@ class Transition {
 }
 
 class Timer extends Animation {
-
-  constructor( game ) {
-
-    super( false );
-
+  constructor(game) {
+    super(false);
     this.game = game;
     this.reset();
-
   }
 
-  start( continueGame ) {
-
-    this.startTime = continueGame ? ( Date.now() - this.deltaTime ) : Date.now();
-    this.deltaTime = 0;
-    this.converted = this.convert();
-
+  start(continueGame = false) {
+    this.startTime = continueGame ? Date.now() - this.deltaTime : Date.now();
+    this.isRunning = true;
     super.start();
-
   }
 
   reset() {
-
     this.startTime = 0;
     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();
+    }
+  }
+
+  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 ) {
-
-      localStorage.setItem( 'theCube_time', this.deltaTime );
+    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));
+    this.converted = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
   }
 
   setText() {
-
     this.game.dom.texts.timer.innerHTML = this.converted;
-
   }
-
 }
 
+
 const RangeHTML = [
 
   '<div class="range">',
@@ -3674,6 +3660,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,
@@ -3691,7 +3678,7 @@ const STATE = {
 
 const BUTTONS = {
   Menu: [ 'stats', 'prefs' ],
-  Playing: [ 'back' ],
+  Playing: [ 'back' ,"button1",'button3'],
   Complete: [],
   Stats: [ 'back' ],
   Prefs: [ 'back', 'theme' ],
@@ -3724,6 +3711,8 @@ class Game {
       buttons: {
         prefs: document.querySelector( '.btn--prefs' ),
         back: document.querySelector( '.btn--back' ),
+        button1: document.querySelector( '.btn--button1' ),
+        button3: document.querySelector( '.btn--button3' ),
         stats: document.querySelector( '.btn--stats' ),
         reset: document.querySelector( '.btn--reset' ),
         theme: document.querySelector( '.btn--theme' ),
@@ -3813,6 +3802,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.back.onclick = event => {
 
@@ -3868,6 +3875,10 @@ class Game {
         this.controls.scrambleCube();
         this.newGame = true;
 
+        this.transition.buttons(BUTTONS.None, BUTTONS.Playing.concat(BUTTONS.Menu));
+
+        // Show additional buttons
+        this.showPlayingButtons();
       }
 
       const duration = this.saved ? 0 :
@@ -3902,7 +3913,8 @@ class Game {
       this.transition.buttons( BUTTONS.Menu, BUTTONS.Playing );
 
       this.transition.zoom( STATE.Menu, 0 );
-
+      this.hidePlayingButtons();
+
       this.controls.disable();
       if ( ! this.newGame ) this.timer.stop();
       this.transition.timer( HIDE );
@@ -4078,6 +4090,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';
+  }
 
 }
 

diff --git a/style.css b/style.css
@@ -238,6 +238,7 @@ body {
   font-size: 1em;
 }
 .text--timer {
+
   bottom: 78%;
   font-size: 3.5em;
   line-height: 1;
@@ -300,6 +301,146 @@ 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%;
+
+}
+.sub-main{
+  width: 80px;
+  margin:2px;
+  float: left;
+}
+
+.btn1, .btn2 , .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;
+}
+
+.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;