From bbffd79d2b7893774648fb82a79053d2b0a034b8 Mon Sep 17 00:00:00 2001 From: gnanariddhika r Date: Sun, 26 May 2024 19:09:50 +0530 Subject: [PATCH] Issue:#155_Completed_Commit --- index.html | 23 ++++++++- script.js | 112 ++++++++++++++++++++++++++---------------- style.css | 141 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 232 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index 6e10f65..2ae0208 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,6 @@ - -
@@ -109,6 +107,27 @@

+ + +
+
+ +
+
+ +
+
+ +     
diff --git a/script.js b/script.js index f122628..29bb295 100644 --- 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 = [ '
', @@ -3674,6 +3660,7 @@ const Icons = new IconsConverter( { viewbox: '0 0 448 512', content: '', }, + }, 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 index 661f98b..ed6a873 100644 --- 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;