add main menu

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");

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()
+})

www/js/appload.js

@@ -1,3 +1,3 @@
 
-load_Clock_scene()
+load_menu_scene()
 update()

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()