From cb4343e20e99e5c847bc325c43618bafc14e1f85 Mon Sep 17 00:00:00 2001 From: scratcheurs25 Date: Mon, 13 Apr 2026 21:21:18 +0200 Subject: [PATCH] add cube scene Add the cube scene --- www/css/cube-scene.css | 230 ++++++++++++++++++++++++++++++++++++++++ www/index.html | 36 ++++++- www/js/TimerFrontEnd.js | 35 ++++++ www/js/appload.js | 4 +- www/js/backend.js | 195 +++++++++++++++++++++++++++++----- 5 files changed, 469 insertions(+), 31 deletions(-) create mode 100644 www/css/cube-scene.css create mode 100644 www/js/TimerFrontEnd.js diff --git a/www/css/cube-scene.css b/www/css/cube-scene.css new file mode 100644 index 0000000..393af9e --- /dev/null +++ b/www/css/cube-scene.css @@ -0,0 +1,230 @@ +.scene-cube { + position: relative; + overflow: hidden; + min-height: 100vh; + background: + radial-gradient(circle at 50% 18%, rgba(255, 236, 196, 0.28), transparent 26%), + linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(41, 28, 18, 0.16)), + repeating-linear-gradient( + 0deg, + #d3ae84 0, + #d3ae84 2px, + #c39a70 2px, + #c39a70 5px, + #b78760 5px, + #b78760 7px + ); +} + +.cube-shell { + position: relative; + z-index: 1; + box-sizing: border-box; + min-height: 100vh; + padding: 4vh 5vw 6vh; + display: flex; + flex-direction: column; + align-items: center; + gap: 4vh; +} + +.cube-topbar { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.4vh; + max-width: 720px; + text-align: center; +} + +.cube-title { + position: relative; + margin: 0; + color: #2f1d13; + font-family: "Cinzel", serif; + font-size: clamp(2.1rem, 2.6vw, 3.6rem); + letter-spacing: 0.06em; + text-transform: uppercase; +} + +#BlockTypeTimer { + position: relative; + margin: 0; + min-width: 220px; + padding: 0.3em 1.2em; + border-radius: 999px; + border: 1px solid rgba(105, 70, 35, 0.28); + background: linear-gradient(180deg, rgba(251, 242, 228, 0.97), rgba(230, 205, 174, 0.92)); + color: #372315; + text-align: center; + box-shadow: + 0 6px 18px rgba(93, 57, 25, 0.14), + inset 0 1px 0 rgba(255, 255, 255, 0.8); +} + +.cube-subtitle { + margin: 0; + color: rgba(60, 37, 24, 0.86); + font-family: "Cormorant Garamond", serif; + font-size: clamp(1.3rem, 1.7vw, 2rem); +} + +.cube-board { + width: min(1120px, 100%); + display: grid; + grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); + align-items: stretch; + gap: clamp(18px, 3vw, 42px); +} + +.cube-lane { + display: flex; + flex-direction: column; + align-items: center; + gap: 2.2vh; +} + +.cube-badge { + min-width: 190px; + padding: 0.45em 1.4em; + border-radius: 18px; + border: 1px solid rgba(110, 72, 34, 0.22); + background: linear-gradient(180deg, rgba(255, 246, 231, 0.96), rgba(232, 207, 171, 0.92)); + color: #352112; + text-align: center; + font-family: "Cinzel", serif; + font-size: clamp(1.6rem, 2vw, 2.4rem); + letter-spacing: 0.05em; + box-shadow: + 0 4px 14px rgba(80, 43, 8, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.8); +} + +.cube-badge-dark { + border-color: rgba(42, 24, 14, 0.5); + background: linear-gradient(180deg, rgba(63, 39, 22, 0.96), rgba(37, 22, 13, 0.98)); + color: #f6ead7; +} + +.cube-divider { + width: 100%; + border-radius: 999px; + background: linear-gradient(180deg, rgba(183, 131, 68, 0), rgba(183, 131, 68, 0.9), rgba(183, 131, 68, 0)); + box-shadow: 0 0 22px rgba(255, 211, 119, 0.55); +} + +.TimerCube { + position: relative; + width: min(100%, 470px); + min-height: clamp(320px, 52vh, 470px); + box-sizing: border-box; + padding: clamp(24px, 4vh, 38px); + border-radius: 40px; + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2.6vh; + cursor: pointer; + transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; + -webkit-tap-highlight-color: transparent; +} + +.cube-pad { + background: linear-gradient(180deg, rgba(248, 233, 207, 0.98), rgba(223, 190, 149, 0.98)); + border: 2px solid rgba(235, 202, 120, 0.72); + color: #2a1b12; + box-shadow: + 0 18px 28px rgba(88, 52, 21, 0.16), + inset 0 0 0 1px rgba(255, 255, 255, 0.24); +} + +.cube-pad-dark { + background: linear-gradient(180deg, rgba(86, 58, 39, 0.98), rgba(53, 35, 24, 0.98)); + border: 2px solid rgba(74, 47, 30, 0.96); + color: #f3e4d2; + box-shadow: + 0 18px 30px rgba(29, 18, 11, 0.3), + inset 0 0 0 1px rgba(255, 255, 255, 0.06); +} + +.cube-grid { + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px); + background-size: 33.333% 33.333%; + opacity: 0.15; + pointer-events: none; +} + +.cube-pad-dark .cube-grid { + opacity: 0.08; +} + +.TimerText { + position: relative; + margin: 0; + z-index: 1; + font-family: "Cormorant Garamond", serif; + font-size: clamp(2rem, 3vw, 3.5rem); + text-align: center; +} + +#TextWhite, +#TextBlack { + color: inherit; +} + +.cube-hint { + position: relative; + z-index: 1; + margin: 0; + font-family: "Cormorant Garamond", serif; + font-size: clamp(1.3rem, 1.8vw, 2rem); + letter-spacing: 0.03em; + opacity: 0.84; +} + +.TimerCube.RedClick { + background: linear-gradient(180deg, rgba(237, 92, 81, 0.98), rgba(148, 26, 23, 0.98)); + border-color: rgba(122, 12, 12, 0.85); + color: #fff1ec; + box-shadow: + 0 0 0 2px rgba(255, 133, 116, 0.32), + 0 22px 34px rgba(111, 21, 16, 0.3); +} + +.TimerCube.GreenClick { + background: linear-gradient(180deg, rgba(124, 223, 87, 0.98), rgba(38, 121, 40, 0.98)); + border-color: rgba(39, 96, 41, 0.88); + color: #effde9; + box-shadow: + 0 0 0 2px rgba(151, 255, 134, 0.28), + 0 22px 34px rgba(25, 84, 28, 0.28); +} + +.TimerCube:active { + transform: scale(0.988); +} + +@media (max-width: 900px) { + .cube-shell { + padding: 3vh 4vw 5vh; + } + + .cube-board { + grid-template-columns: 1fr; + } + + .cube-divider { + width: 72%; + min-height: 8px; + } + + .TimerCube { + min-height: 260px; + } +} diff --git a/www/index.html b/www/index.html index b5c3ed2..04adc6a 100644 --- a/www/index.html +++ b/www/index.html @@ -9,6 +9,7 @@ + @@ -50,8 +51,41 @@ +
+
+
+

Phase Cube

+

Block -

+

Maintiens 2 secondes pour lancer le timer, puis touche de nouveau quand le cube est termine.

+
+ +
+
+
BLANC
+
+
+

Temps au cube Blanc : 0:00

+

Appui long pour demarrer

+
+
+ +
+ +
+
NOIR
+
+
+

Temps au cube Noir : 0:00

+

Touchez quand le cube est fini

+
+
+
+
+
+ - + + diff --git a/www/js/TimerFrontEnd.js b/www/js/TimerFrontEnd.js new file mode 100644 index 0000000..223cb3e --- /dev/null +++ b/www/js/TimerFrontEnd.js @@ -0,0 +1,35 @@ +let white_Timer = document.getElementById("TimerWhite") +let black_Timer = document.getElementById("TimerBlack") +let white_Time_Timer = document.getElementById("TextWhite") +let black_Time_Timer = document.getElementById("TextBlack") +let TimerBlockType = document.getElementById("BlockTypeTimer") + +function Set_block_type_Timer(type){ + if (type){ + TimerBlockType.innerText = "Block +" + }else{ + TimerBlockType.innerText = "Block -" + } +} + +function Set_White_Time_Cube(Time){ + white_Time_Timer.innerText = `Temps au cube Blanc : ${msToMinSec(Time)}` +} + +function Set_Black_Time_Cube(Time){ + black_Time_Timer.innerText = `Temps au cube Noir : ${msToMinSec(Time)}` +} + +white_Timer.addEventListener("pointerdown", () => { + white_timer_touch(); +}); +white_Timer.addEventListener("pointerup", () => { + white_timer_release(); +}); + +black_Timer.addEventListener("pointerdown", () => { + black_timer_touch(); +}); +black_Timer.addEventListener("pointerup", () => { + black_timer_release(); +}); diff --git a/www/js/appload.js b/www/js/appload.js index ce306c5..7398c33 100644 --- a/www/js/appload.js +++ b/www/js/appload.js @@ -1 +1,3 @@ -show_scene("Clock"); \ No newline at end of file + +load_Clock_scene() +update() \ No newline at end of file diff --git a/www/js/backend.js b/www/js/backend.js index 6a2922d..be89a51 100644 --- a/www/js/backend.js +++ b/www/js/backend.js @@ -18,20 +18,46 @@ Block = { last_time : 0 } -config = { - StartTime : 600000, - StartMoveLeft : 8, - BlockTime : 180000, - last_block : true +Timer = { + White_Has_started : false, + Black_Has_started : false, + Black_time : 0, + White_time : 0, + White_start_time : 0, + Black_start_time : 0, + coldown_White : 0, + coldown_Black : 0, + coldown_Start_White : 0, + coldown_Start_Black : 0, + White_Has_Finish : false, + Black_Has_Finish : false } -inizalize_clock() +config = { + StartTimeWhite : 600000, + StartTimeBlack:600000, + StartMoveLeft : 8, + BlockTime : 180000, + last_block : true, + trais : false, + MaxIncrement : 120000 +} + + +function load_Clock_scene(){ + has_start = false + hide_scene("Cube") + inizalize_clock() + show_scene("Clock") + inizalize_clock() +} function inizalize_clock(){ + trais = !config.trais toggle_trais() - White.Time = config.StartTime + White.Time = config.StartTimeWhite White.moveLeft = config.StartMoveLeft - Black.Time = config.StartTime + Black.Time = config.StartTimeBlack Black.moveLeft = config.StartMoveLeft Block.Time = config.BlockTime Block.Type = !config.last_block @@ -41,23 +67,88 @@ function inizalize_clock(){ change_time_black(Black.Time) change_time_white(White.Time) change_time_block(Block.Time) + set_block_type(Block.Type) } function start(){ White.TimeStartMove = Date.now() Black.TimeStartMove = Date.now() Block.last_time = Date.now() - update() has_start = true } function load_cube_scene(){ + has_start = false + + config.StartTimeWhite = White.Time + config.StartTimeBlack = Black.Time + config.last_block = Block.Type + + Timer = { + White_Has_started : false, + Black_Has_started : false, + Black_time : 0, + White_time : 0, + White_start_time : 0, + Black_start_time : 0, + coldown_White : 0, + coldown_Black : 0, + coldown_Start_White : 0, + coldown_Start_Black : 0, + White_Has_Finish : false, + Black_Has_Finish : false +} + Set_block_type_Timer(config.last_block) + Set_White_Time_Cube(0) + Set_Black_Time_Cube(0) hide_scene("Clock") hideGlow() show_scene("Cube") } +function black_timer_touch(){ + if (!Timer.Black_Has_started){ + Timer.coldown_Start_Black = Date.now() + black_Timer.classList.add("RedClick") + }else if(!Timer.Black_Has_Finish){ + Timer.Black_Has_Finish = true + black_Timer.classList.add("GreenClick") + } +} + +function black_timer_release(){ + if (Timer.coldown_Black > 2000) { + Timer.Black_Has_started = true + Timer.Black_start_time = Date.now() + black_Timer.classList.remove("GreenClick") + }else{ + black_Timer.classList.remove("RedClick") + Timer.coldown_Start_Black = 0; + } +} + + +function white_timer_touch(){ + if (!Timer.White_Has_started){ + Timer.coldown_Start_White = Date.now() + white_Timer.classList.add("RedClick") + }else if(!Timer.White_Has_Finish){ + Timer.White_Has_Finish = true + white_Timer.classList.add("GreenClick") + } +} + +function white_timer_release(){ + if (Timer.coldown_White > 2000) { + Timer.White_Has_started = true + Timer.White_start_time = Date.now() + white_Timer.classList.remove("GreenClick") + }else{ + white_Timer.classList.remove("RedClick") + Timer.coldown_Start_White = 0; + } +} function white_touch(){ @@ -72,31 +163,77 @@ function white_touch(){ function black_touch(){ if (!trais) return null if (!has_start) return null - toggle_trais() - White.TimeStartMove = Date.now() Black.moveLeft -= 1 - change_move_left_black(Black.moveLeft) if (Black.moveLeft == 0){ load_cube_scene() + }else{ + toggle_trais() + White.TimeStartMove = Date.now() + change_move_left_black(Black.moveLeft) } } function update() { - - if (!trais) {// trais au blanc - White.Time -= (Date.now() - White.TimeStartMove) - White.TimeStartMove = Date.now() - }else{ - Black.Time -= (Date.now() - Black.TimeStartMove) - Black.TimeStartMove = Date.now() - } - Block.Time -= (Date.now() - Block.last_time) - Block.last_time = Date.now() - if (Block.Time <= 0){ - load_cube_scene() - } + if (last_scene == "Clock" && has_start){ + if (!trais) {// trais au blanc + White.Time -= (Date.now() - White.TimeStartMove) + White.TimeStartMove = Date.now() + }else{ + Black.Time -= (Date.now() - Black.TimeStartMove) + Black.TimeStartMove = Date.now() + } + Block.Time -= (Date.now() - Block.last_time) + Block.last_time = Date.now() + if (Block.Time <= 0){ + load_cube_scene() + } - change_time_white(White.Time) - change_time_black(Black.Time) - change_time_block(Block.Time) - requestAnimationFrame(update); + change_time_white(White.Time) + change_time_black(Black.Time) + change_time_block(Block.Time) + }else if(last_scene == "Cube"){ + if (!Timer.Black_Has_started){ // noire a pas commencer le cube + if (Timer.coldown_Start_Black != 0){ // coldown lancer + Timer.coldown_Black = Date.now() - Timer.coldown_Start_Black + if (Timer.coldown_Black > 2000){ + black_Timer.classList.remove("RedClick") + black_Timer.classList.add("GreenClick") + } + } + }else if(!Timer.Black_Has_Finish){ + + Timer.Black_time = Date.now() - Timer.Black_start_time + Set_Black_Time_Cube(Timer.Black_time) + + } + + if (!Timer.White_Has_started){ // blanc a pas commencer le cube + if (Timer.coldown_Start_White != 0){ // coldown lancer + Timer.coldown_White = Date.now() - Timer.coldown_Start_White + if (Timer.coldown_White > 2000){ + white_Timer.classList.remove("RedClick") + white_Timer.classList.add("GreenClick") + } + } + }else if (!Timer.White_Has_Finish){ + + Timer.White_time = Date.now() - Timer.White_start_time + Set_White_Time_Cube(Timer.White_time) + + } + + + if (Timer.Black_Has_Finish && Timer.White_Has_Finish){ + if (config.last_block){ + config.StartTimeWhite += Timer.Black_time + config.StartTimeBlack += Timer.Black_time + }else{ + config.StartTimeWhite -= Timer.White_time + config.StartTimeBlack -= Timer.Black_time + } + + load_Clock_scene() + } + + } + requestAnimationFrame(update); }