diff --git a/www/css/clock-scene.css b/www/css/clock-scene.css index 46da384..17f4508 100644 --- a/www/css/clock-scene.css +++ b/www/css/clock-scene.css @@ -201,6 +201,34 @@ body { inset 0 1px 0 rgba(255, 255, 255, 0.8); } +.clock-start-button { + appearance: none; + border: 1px solid rgba(107, 69, 35, 0.34); + border-radius: 999px; + padding: 0.7em 1.8em; + min-width: 170px; + background: linear-gradient(180deg, rgba(252, 242, 226, 0.98), rgba(226, 195, 150, 0.96)); + color: #342012; + font-family: "Cinzel", serif; + font-size: clamp(1rem, 1.3vw, 1.35rem); + letter-spacing: 0.08em; + text-transform: uppercase; + cursor: pointer; + box-shadow: + 0 8px 18px rgba(93, 57, 25, 0.14), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease; +} + +.clock-start-button:active { + transform: scale(0.98); + filter: brightness(0.97); +} + +.clock-start-button.is-hidden { + display: none; +} + .clock-time { font-size: clamp(4.8rem, 9vw, 8.4rem); line-height: 0.95; @@ -267,3 +295,71 @@ body::before { min-height: 250px; } } + +@media (max-width: 600px) { + .clock-shell { + padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); + gap: 16px; + } + + .clock-topbar { + gap: 10px; + } + + .clock-status { + font-size: clamp(1.5rem, 7vw, 2.1rem); + } + + .clock-mode { + min-width: 0; + width: min(78vw, 280px); + padding: 0.35em 0.9em; + font-size: clamp(1.4rem, 6vw, 2rem); + } + + .clock-start-button { + min-width: 0; + width: min(72vw, 240px); + padding: 0.75em 1em; + font-size: clamp(0.95rem, 4vw, 1.1rem); + } + + .clock-board { + gap: 14px; + } + + .player-zone { + gap: 10px; + } + + .player-badge { + min-width: 0; + width: min(58vw, 220px); + padding: 0.5em 1em; + font-size: clamp(1.2rem, 5vw, 1.7rem); + } + + .clock-panel { + width: 100%; + min-height: calc((100vh - 210px) / 2); + max-height: 280px; + padding: 18px 16px; + border-radius: 28px; + gap: 10px; + } + + .clock-divider { + width: 68%; + height: 6px; + min-height: 6px; + } + + .clock-time { + font-size: clamp(3.2rem, 17vw, 5.4rem); + } + + .clock-moves { + max-width: 92%; + font-size: clamp(1.5rem, 8vw, 2.5rem); + } +} diff --git a/www/css/cube-scene.css b/www/css/cube-scene.css index 393af9e..70e4a00 100644 --- a/www/css/cube-scene.css +++ b/www/css/cube-scene.css @@ -228,3 +228,69 @@ min-height: 260px; } } + +@media (max-width: 600px) { + .cube-shell { + padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); + gap: 16px; + } + + .cube-topbar { + gap: 10px; + max-width: 100%; + } + + .cube-title { + font-size: clamp(1.6rem, 7vw, 2.4rem); + } + + #BlockTypeTimer { + min-width: 0; + width: min(78vw, 280px); + padding: 0.35em 0.9em; + font-size: clamp(1.3rem, 5.4vw, 1.9rem); + } + + .cube-subtitle { + font-size: clamp(1.05rem, 4.4vw, 1.4rem); + line-height: 1.1; + } + + .cube-board { + gap: 14px; + } + + .cube-lane { + gap: 10px; + } + + .cube-badge { + min-width: 0; + width: min(58vw, 220px); + padding: 0.5em 1em; + font-size: clamp(1.2rem, 5vw, 1.7rem); + } + + .cube-divider { + width: 68%; + min-height: 6px; + } + + .TimerCube { + width: 100%; + min-height: calc((100vh - 240px) / 2); + max-height: 290px; + padding: 18px 16px; + border-radius: 28px; + gap: 10px; + } + + .TimerText { + font-size: clamp(1.6rem, 8vw, 2.6rem); + } + + .cube-hint { + font-size: clamp(1.05rem, 4.8vw, 1.45rem); + line-height: 1.05; + } +} diff --git a/www/css/menu-scene.css b/www/css/menu-scene.css new file mode 100644 index 0000000..f8dfbbd --- /dev/null +++ b/www/css/menu-scene.css @@ -0,0 +1,224 @@ +.scene-menu { + position: relative; + overflow: auto; + min-height: 100vh; + background: + radial-gradient(circle at top center, rgba(255, 232, 192, 0.34), transparent 24%), + linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(70, 42, 20, 0.18)), + repeating-linear-gradient( + 0deg, + #d7b084 0, + #d7b084 2px, + #c69d71 2px, + #c69d71 5px, + #b88760 5px, + #b88760 7px + ); +} + +.menu-shell { + box-sizing: border-box; + min-height: 100vh; + padding: 5vh 5vw 6vh; + display: grid; + grid-template-columns: minmax(280px, 420px) minmax(320px, 1fr); + gap: clamp(20px, 4vw, 48px); + align-items: start; +} + +.menu-hero, +.menu-settings-card { + border-radius: 34px; + box-sizing: border-box; + backdrop-filter: blur(4px); +} + +.menu-hero { + padding: clamp(26px, 5vh, 42px); + background: linear-gradient(180deg, rgba(61, 38, 23, 0.94), rgba(38, 24, 15, 0.98)); + color: #f7ead7; + box-shadow: + 0 18px 32px rgba(38, 23, 12, 0.28), + inset 0 0 0 1px rgba(255, 255, 255, 0.08); +} + +.menu-kicker { + margin: 0 0 8px; + font-family: "Cinzel", serif; + font-size: 0.95rem; + letter-spacing: 0.24em; + text-transform: uppercase; + color: rgba(245, 217, 178, 0.8); +} + +.menu-title { + margin: 0; + font-family: "Cinzel", serif; + font-size: clamp(2rem, 3vw, 3.8rem); + line-height: 0.98; + letter-spacing: 0.03em; +} + +.menu-subtitle { + margin: 18px 0 0; + font-family: "Cormorant Garamond", serif; + font-size: clamp(1.35rem, 1.8vw, 2rem); + line-height: 1.1; + color: rgba(247, 234, 215, 0.86); +} + +.menu-actions { + margin-top: 28px; + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.menu-primary-button, +.menu-link-button { + appearance: none; + border-radius: 999px; + padding: 0.85em 1.45em; + font-family: "Cinzel", serif; + font-size: 1rem; + letter-spacing: 0.08em; + text-transform: uppercase; + text-decoration: none; + text-align: center; + transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease; +} + +.menu-primary-button { + border: 1px solid rgba(243, 210, 160, 0.28); + background: linear-gradient(180deg, rgba(255, 245, 227, 0.98), rgba(235, 205, 168, 0.95)); + color: #342012; + cursor: pointer; + box-shadow: + 0 8px 20px rgba(18, 10, 4, 0.18), + inset 0 1px 0 rgba(255, 255, 255, 0.84); +} + +.menu-link-button { + border: 1px solid rgba(244, 220, 186, 0.22); + background: rgba(255, 255, 255, 0.06); + color: #f7ead7; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.menu-primary-button:active, +.menu-link-button:active { + transform: scale(0.985); + filter: brightness(0.98); +} + +.menu-settings-card { + padding: clamp(24px, 4vh, 38px); + background: linear-gradient(180deg, rgba(255, 247, 233, 0.96), rgba(240, 218, 185, 0.94)); + box-shadow: + 0 18px 30px rgba(85, 52, 23, 0.16), + inset 0 0 0 1px rgba(255, 255, 255, 0.34); +} + +.menu-settings-head { + margin-bottom: 20px; +} + +.menu-section-title { + margin: 0; + font-family: "Cinzel", serif; + font-size: clamp(1.7rem, 2.2vw, 2.8rem); + color: #2f1c12; +} + +.menu-section-copy { + margin: 10px 0 0; + font-family: "Cormorant Garamond", serif; + font-size: clamp(1.2rem, 1.5vw, 1.7rem); + color: rgba(58, 36, 22, 0.8); +} + +.menu-settings-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; +} + +.menu-field { + display: flex; + flex-direction: column; + gap: 8px; +} + +.menu-field-inline { + justify-content: center; +} + +.menu-label { + font-family: "Cinzel", serif; + font-size: 0.92rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #412719; +} + +.menu-input { + box-sizing: border-box; + width: 100%; + border: 1px solid rgba(116, 75, 38, 0.24); + border-radius: 16px; + padding: 0.85em 1em; + background: rgba(255, 252, 245, 0.82); + color: #28180f; + font-family: "Cormorant Garamond", serif; + font-size: 1.35rem; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74); +} + +.menu-select { + appearance: none; +} + +.menu-checkbox { + width: 24px; + height: 24px; + accent-color: #5f3920; +} + +.menu-help { + font-family: "Cormorant Garamond", serif; + font-size: 1.05rem; + color: rgba(66, 42, 26, 0.74); +} + +@media (max-width: 980px) { + .menu-shell { + grid-template-columns: 1fr; + } +} + +@media (max-width: 640px) { + .menu-shell { + padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); + gap: 16px; + } + + .menu-hero, + .menu-settings-card { + border-radius: 26px; + padding: 18px; + } + + .menu-settings-grid { + grid-template-columns: 1fr; + gap: 14px; + } + + .menu-actions { + flex-direction: column; + } + + .menu-primary-button, + .menu-link-button { + width: 100%; + } +} diff --git a/www/index.html b/www/index.html index 2181b19..3930ae0 100644 --- a/www/index.html +++ b/www/index.html @@ -8,6 +8,7 @@ + @@ -19,12 +20,67 @@ +
+
+
+

ChessCubing

+

Configure your match

+

Set the clock, choose the block mode, then launch the game from the same scene system.

+
+ + chesscubing.fr +
+
+ +
+
+

Settings

+
+ +
+ + + + + + + + + +
+
+
+

Temps restant Block : 3:00

Block -

+
@@ -85,9 +141,11 @@
+ + diff --git a/www/js/ClockFrontEnd.js b/www/js/ClockFrontEnd.js index 45ae9f0..be71718 100644 --- a/www/js/ClockFrontEnd.js +++ b/www/js/ClockFrontEnd.js @@ -6,6 +6,7 @@ let black_move_left = document.getElementById("MoveLeftBlack") let white_move_left = document.getElementById("MoveLeftWhite") let BlockType = document.getElementById("BlockType") let BlockTime = document.getElementById("BlockTime") +let start_clock_button = document.getElementById("StartClockButton") let trais = true @@ -55,10 +56,22 @@ function change_time_white(Time){ function change_time_black(Time){ black_time.innerText = msToMinSec(Time) } + +function show_start_clock_button(){ + start_clock_button.classList.remove("is-hidden") +} + +function hide_start_clock_button(){ + start_clock_button.classList.add("is-hidden") +} + +start_clock_button.addEventListener("click", () => { + on_start_clock_button_press() +}); + white.addEventListener("pointerdown", () => { if (!trais) white.classList.add("click"); - if (!has_start) start() - else white_touch() + white_touch() }); white.addEventListener("pointerup", () => { white.classList.remove("click"); diff --git a/www/js/MenuFrontEnd.js b/www/js/MenuFrontEnd.js new file mode 100644 index 0000000..f8a39d4 --- /dev/null +++ b/www/js/MenuFrontEnd.js @@ -0,0 +1,51 @@ +let menu_start_game_button = document.getElementById("StartGameButton") +let menu_start_time = document.getElementById("MenuStartTime") +let menu_start_move_left = document.getElementById("MenuStartMoveLeft") +let menu_block_time = document.getElementById("MenuBlockTime") +let menu_max_increment = document.getElementById("MenuMaxIncrement") +let menu_last_block = document.getElementById("MenuLastBlock") + +function clamp_number(value, fallback = 0) { + const parsed = Number(value) + if (Number.isNaN(parsed) || parsed < 0) return fallback + return parsed +} + +function ms_to_minutes(ms) { + return Math.max(0, Math.round(ms / 60000)) +} + +function seconds_to_ms(seconds) { + return clamp_number(seconds) * 1000 +} + +function minutes_to_ms(minutes) { + return clamp_number(minutes) * 60000 +} + +function sync_menu_with_config() { + menu_start_time.value = ms_to_minutes(config.StartTimeWhite) + menu_start_move_left.value = clamp_number(config.StartMoveLeft) + menu_block_time.value = ms_to_minutes(config.BlockTime) + menu_max_increment.value = Math.round(clamp_number(config.MaxIncrement) / 1000) + menu_last_block.value = String(config.last_block) +} + +function apply_menu_settings_to_config() { + config.StartTimeWhite = minutes_to_ms(menu_start_time.value) + config.StartTimeBlack = minutes_to_ms(menu_start_time.value) + config.StartMoveLeft = clamp_number(menu_start_move_left.value) + config.BlockTime = minutes_to_ms(menu_block_time.value) + config.MaxIncrement = seconds_to_ms(menu_max_increment.value) + config.last_block = menu_last_block.value === "true" +} + +function on_menu_start_game_press() { + apply_menu_settings_to_config() + hide_scene("Menu") + load_Clock_scene() +} + +menu_start_game_button.addEventListener("click", () => { + on_menu_start_game_press() +}) diff --git a/www/js/appload.js b/www/js/appload.js index 7398c33..5eb1303 100644 --- a/www/js/appload.js +++ b/www/js/appload.js @@ -1,3 +1,3 @@ -load_Clock_scene() +load_menu_scene() update() \ No newline at end of file diff --git a/www/js/backend.js b/www/js/backend.js index 05b1224..4a6df1e 100644 --- a/www/js/backend.js +++ b/www/js/backend.js @@ -40,7 +40,8 @@ config = { BlockTime : 180000, last_block : true, trais : false, - MaxIncrement : 120000 + MaxIncrement : 120000, + first_time : true } @@ -49,7 +50,15 @@ function load_Clock_scene(){ hide_scene("Cube") inizalize_clock() show_scene("Clock") - inizalize_clock() +} + +function load_menu_scene(){ + hide_scene("Clock") + hide_scene("Cube") + if (typeof sync_menu_with_config === "function"){ + sync_menu_with_config() + } + show_scene("Menu") } function inizalize_clock(){ @@ -62,6 +71,14 @@ function inizalize_clock(){ Block.Time = config.BlockTime Block.Type = !config.last_block + if (config.first_time) { + config.first_time = false + show_start_clock_button() + }else{ + start() + } + + change_move_left_black(Black.moveLeft) change_move_left_white(White.moveLeft) change_time_black(Black.Time) @@ -130,6 +147,11 @@ function black_timer_release(){ } +function on_start_clock_button_press(){ + start() + hide_start_clock_button() +} + function white_timer_touch(){ if (!Timer.White_Has_started){ Timer.coldown_Start_White = Date.now() @@ -226,11 +248,13 @@ function update() { if (Timer.Black_Has_Finish && Timer.White_Has_Finish){ if (config.last_block){ + if (Timer.Black_time > config.MaxIncrement) Timer.Black_time = config.MaxIncrement config.StartTimeWhite += Timer.Black_time config.StartTimeBlack += Timer.Black_time }else{ + if (Timer.White_time > config.MaxIncrement) Timer.White_time = config.MaxIncrement config.StartTimeWhite -= Timer.White_time - config.StartTimeBlack -= Timer.Black_time + config.StartTimeBlack -= Timer.White_time } load_Clock_scene()