add win/draw menu , and add english

www/js/ClockFrontEnd.js

@@ -7,6 +7,9 @@ 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 clock_white_win_button = document.getElementById("ClockWhiteWinButton")
+let clock_black_win_button = document.getElementById("ClockBlackWinButton")
+let clock_draw_button = document.getElementById("ClockDrawButton")
 let trais = true
 
 
@@ -28,15 +31,15 @@ function toggle_trais(){
 }
 
 function change_move_left_white(number){
-    white_move_left.innerText = `Coup restant Blanc : ${number}`
+    white_move_left.innerText = get_app_translation("clock.movesWhite", { number })
 }
 
 function change_move_left_black(number){
-    black_move_left.innerText = `Coup restant Noir : ${number}`
+    black_move_left.innerText = get_app_translation("clock.movesBlack", { number })
 }
 
 function change_time_block(Time){
-    BlockTime.innerText = `Temps restant Block : ${msToMinSec(Time)}`
+    BlockTime.innerText = get_app_translation("clock.blockTime", { time: msToMinSec(Time) })
 }
 
 function set_block_type(type){
@@ -57,6 +60,12 @@ function change_time_black(Time){
     black_time.innerText = msToMinSec(Time)
 }
 
+function refresh_clock_scene_translations(){
+    change_move_left_white(White.moveLeft)
+    change_move_left_black(Black.moveLeft)
+    change_time_block(Block.Time)
+}
+
 function show_start_clock_button(){
     start_clock_button.classList.remove("is-hidden")
 }
@@ -65,10 +74,37 @@ function hide_start_clock_button(){
     start_clock_button.classList.add("is-hidden")
 }
 
+function on_clock_white_win_button_press(){
+    change_winner(true)
+    load_endgame_scene()
+}
+
+function on_clock_black_win_button_press(){
+    change_winner(false)
+    load_endgame_scene()
+}
+
+function on_clock_draw_button_press(){
+    Draw()
+    load_endgame_scene()
+}
+
 start_clock_button.addEventListener("click", () => {
     on_start_clock_button_press()
 });
 
+clock_white_win_button.addEventListener("click", () => {
+    on_clock_white_win_button_press()
+});
+
+clock_black_win_button.addEventListener("click", () => {
+    on_clock_black_win_button_press()
+});
+
+clock_draw_button.addEventListener("click", () => {
+    on_clock_draw_button_press()
+});
+
 white.addEventListener("pointerdown", () => {
     if (!trais) white.classList.add("click");
     white_touch()

www/js/EndGameFrontEnd.js

@@ -0,0 +1,25 @@
+let Text_endgame = document.getElementById("whoWon")
+let endgame_menu_button = document.getElementById("EndGameMenuButton")
+let current_endgame_result_key = "endgame.whiteWon"
+
+function change_winner(who){
+    current_endgame_result_key = who ? "endgame.whiteWon" : "endgame.blackWon"
+    Text_endgame.innerText = get_app_translation(current_endgame_result_key)
+}
+
+function Draw(){
+    current_endgame_result_key = "endgame.draw"
+    Text_endgame.innerText = get_app_translation(current_endgame_result_key)
+}
+
+function refresh_endgame_scene_translations(){
+    Text_endgame.innerText = get_app_translation(current_endgame_result_key)
+}
+
+function on_endgame_menu_button_press(){
+    load_menu_scene()
+}
+
+endgame_menu_button.addEventListener("click", () => {
+    on_endgame_menu_button_press()
+})

www/js/EndGameScreen.js

@@ -0,0 +1,12 @@
+
+
+let Text_endgame = document.getElementById("whoWon")
+
+function change_winner(who){
+    if (who) Text_endgame.innerText = "Les Blancs ont gagné"
+    if (!who) Text_endgame.innerText = "Les Noirs ont gagné"
+}
+
+function Draw(){
+    Text_endgame.innerText = "Match nulle"
+}

www/js/I18nFrontEnd.js

@@ -0,0 +1,133 @@
+const app_translations = {
+    fr: {
+        "menu.languageLabel": "Langue",
+        "menu.title": "Configurez votre partie",
+        "menu.subtitle": "Reglez l'horloge, choisissez le mode de block, puis lancez la partie depuis le meme systeme de scenes.",
+        "menu.startGame": "Lancer la partie",
+        "menu.settingsTitle": "Parametres",
+        "menu.startTimeLabel": "Temps initial",
+        "menu.startTimeHelp": "Minutes pour les blancs et les noirs",
+        "menu.startMoveLabel": "Coups avant cube",
+        "menu.startMoveHelp": "Nombre de coups avant la phase cube",
+        "menu.blockTimeLabel": "Temps du block",
+        "menu.blockTimeHelp": "Minutes",
+        "menu.maxIncrementLabel": "Increment maximal",
+        "menu.maxIncrementHelp": "Secondes",
+        "menu.blockModeLabel": "La partie commence avec",
+        "menu.blockModeHelp": "Choisissez le mode de block utilise au debut de la partie",
+        "menu.blockPlus": "Block +",
+        "menu.blockMinus": "Block -",
+        "clock.start": "Start",
+        "clock.whiteWins": "Blanc gagne",
+        "clock.blackWins": "Noir gagne",
+        "clock.draw": "Nulle",
+        "clock.blockTime": "Temps restant Block : {time}",
+        "clock.movesWhite": "Coup restant Blanc : {number}",
+        "clock.movesBlack": "Coup restant Noir : {number}",
+        "cube.title": "Phase Cube",
+        "cube.subtitle": "Maintiens 2 secondes pour lancer le timer, puis touche de nouveau quand le cube est termine.",
+        "cube.hintStart": "Appui long pour demarrer",
+        "cube.hintFinish": "Touchez quand le cube est fini",
+        "cube.timeWhite": "Temps au cube Blanc : {time}",
+        "cube.timeBlack": "Temps au cube Noir : {time}",
+        "endgame.kicker": "Partie terminee",
+        "endgame.subtitle": "Le resultat final est valide. Vous pouvez revenir au menu pour preparer une nouvelle partie.",
+        "endgame.backToMenu": "Retour au menu",
+        "endgame.whiteWon": "Les Blancs ont gagne",
+        "endgame.blackWon": "Les Noirs ont gagne",
+        "endgame.draw": "Match nul",
+        "common.whiteUpper": "BLANC",
+        "common.blackUpper": "NOIR"
+    },
+    en: {
+        "menu.languageLabel": "Language",
+        "menu.title": "Configure your match",
+        "menu.subtitle": "Set the clock, choose the block mode, then launch the game from the same scene system.",
+        "menu.startGame": "Start Game",
+        "menu.settingsTitle": "Settings",
+        "menu.startTimeLabel": "Start Time",
+        "menu.startTimeHelp": "Minutes for both white and black",
+        "menu.startMoveLabel": "Moves Before Cube",
+        "menu.startMoveHelp": "Number of moves before the cube phase",
+        "menu.blockTimeLabel": "Block Time",
+        "menu.blockTimeHelp": "Minutes",
+        "menu.maxIncrementLabel": "Max Increment",
+        "menu.maxIncrementHelp": "Seconds",
+        "menu.blockModeLabel": "Game Starts With",
+        "menu.blockModeHelp": "Choose the block mode used when the game begins",
+        "menu.blockPlus": "Block +",
+        "menu.blockMinus": "Block -",
+        "clock.start": "Start",
+        "clock.whiteWins": "White wins",
+        "clock.blackWins": "Black wins",
+        "clock.draw": "Draw",
+        "clock.blockTime": "Block time left: {time}",
+        "clock.movesWhite": "White moves left: {number}",
+        "clock.movesBlack": "Black moves left: {number}",
+        "cube.title": "Cube Phase",
+        "cube.subtitle": "Hold for 2 seconds to start the timer, then tap again when the cube is finished.",
+        "cube.hintStart": "Long press to start",
+        "cube.hintFinish": "Tap when the cube is finished",
+        "cube.timeWhite": "White cube time: {time}",
+        "cube.timeBlack": "Black cube time: {time}",
+        "endgame.kicker": "Game Over",
+        "endgame.subtitle": "The final result is confirmed. You can return to the menu to set up a new game.",
+        "endgame.backToMenu": "Back to menu",
+        "endgame.whiteWon": "White wins",
+        "endgame.blackWon": "Black wins",
+        "endgame.draw": "Draw",
+        "common.whiteUpper": "WHITE",
+        "common.blackUpper": "BLACK"
+    }
+}
+
+let app_language = localStorage.getItem("menu_language") || "fr"
+
+function get_app_translation(key, params = {}) {
+    const dictionary = app_translations[app_language] || app_translations.fr
+    const fallback_dictionary = app_translations.fr
+    let text = dictionary[key] || fallback_dictionary[key] || key
+
+    Object.keys(params).forEach((param_key) => {
+        text = text.replaceAll(`{${param_key}}`, params[param_key])
+    })
+
+    return text
+}
+
+function apply_static_translations() {
+    document.querySelectorAll("[data-i18n]").forEach((element) => {
+        const translated_text = get_app_translation(element.dataset.i18n)
+
+        if (element.tagName === "INPUT") {
+            element.value = translated_text
+        } else {
+            element.textContent = translated_text
+        }
+    })
+}
+
+function apply_app_language(language) {
+    app_language = app_translations[language] ? language : "fr"
+    localStorage.setItem("menu_language", app_language)
+    document.documentElement.lang = app_language
+
+    const language_select = document.getElementById("MenuLanguage")
+    if (language_select) {
+        language_select.value = app_language
+    }
+
+    apply_static_translations()
+
+    if (typeof refresh_clock_scene_translations === "function") {
+        refresh_clock_scene_translations()
+    }
+
+    if (typeof refresh_cube_scene_translations === "function") {
+        refresh_cube_scene_translations()
+    }
+
+    if (typeof refresh_endgame_scene_translations === "function") {
+        refresh_endgame_scene_translations()
+    }
+}

www/js/MenuFrontEnd.js

@@ -1,4 +1,5 @@
 let menu_start_game_button = document.getElementById("StartGameButton")
+let menu_language = document.getElementById("MenuLanguage")
 let menu_start_time = document.getElementById("MenuStartTime")
 let menu_start_move_left = document.getElementById("MenuStartMoveLeft")
 let menu_block_time = document.getElementById("MenuBlockTime")
@@ -49,3 +50,10 @@ function on_menu_start_game_press() {
 menu_start_game_button.addEventListener("click", () => {
     on_menu_start_game_press()
 })
+
+menu_language.addEventListener("change", () => {
+    apply_app_language(menu_language.value)
+})
+
+menu_language.value = localStorage.getItem("menu_language") || "fr"
+apply_app_language(menu_language.value)

www/js/TimerFrontEnd.js

@@ -13,11 +13,16 @@ function Set_block_type_Timer(type){
 }
 
 function Set_White_Time_Cube(Time){
-    white_Time_Timer.innerText = `Temps au cube Blanc : ${msToMinSec(Time)}`
+    white_Time_Timer.innerText = get_app_translation("cube.timeWhite", { time: msToMinSec(Time) })
 }
 
 function Set_Black_Time_Cube(Time){
-    black_Time_Timer.innerText = `Temps au cube Noir : ${msToMinSec(Time)}`
+    black_Time_Timer.innerText = get_app_translation("cube.timeBlack", { time: msToMinSec(Time) })
+}
+
+function refresh_cube_scene_translations(){
+    Set_White_Time_Cube(Timer.White_time)
+    Set_Black_Time_Cube(Timer.Black_time)
 }
 
 white_Timer.addEventListener("pointerdown", () => {

www/js/backend.js

@@ -45,14 +45,24 @@ config = {
 }
 
 
+function load_endgame_scene(){
+    hide_scene("Menu")
+    hide_scene("Clock")
+    hide_scene("Cube")
+    show_scene("EndGame")
+}
+
 function load_Clock_scene(){
     has_start = false
+    hide_scene("Menu")
+    hide_scene("EndGame")
     hide_scene("Cube")
     inizalize_clock()
     show_scene("Clock")
 }
 
 function load_menu_scene(){
+    hide_scene("EndGame")
     hide_scene("Clock")
     hide_scene("Cube")
     if (typeof sync_menu_with_config === "function"){
@@ -201,9 +211,17 @@ function update() {
         if (!trais) {// trais au blanc
             White.Time -= (Date.now() - White.TimeStartMove)
             White.TimeStartMove = Date.now()
+            if (White.Time < 0){
+                change_winner(false)
+                load_endgame_scene()
+            }
         }else{
             Black.Time -= (Date.now() - Black.TimeStartMove)
             Black.TimeStartMove = Date.now()
+            if(Black.Time < 0){
+                change_winner(true)
+                load_endgame_scene()
+            }
         }
         Block.Time -= (Date.now() - Block.last_time)
         Block.last_time = Date.now()