add win/draw menu , and add english

www/css/GameEnd-scene.css

@@ -0,0 +1,102 @@
+.scene-endgame {
+    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
+        );
+}
+
+.endgame-shell {
+    box-sizing: border-box;
+    min-height: 100vh;
+    padding: 5vh 5vw 6vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.endgame-card {
+    width: min(720px, 100%);
+    padding: clamp(26px, 5vh, 44px);
+    border-radius: 34px;
+    box-sizing: border-box;
+    text-align: center;
+    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);
+}
+
+.endgame-kicker {
+    margin: 0 0 12px;
+    font-family: "Cinzel", serif;
+    font-size: 0.95rem;
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
+    color: rgba(245, 217, 178, 0.8);
+}
+
+#whoWon {
+    margin: 0;
+    font-family: "Cinzel", serif;
+    font-size: clamp(2rem, 3vw, 3.8rem);
+    line-height: 1.02;
+    letter-spacing: 0.03em;
+}
+
+.endgame-subtitle {
+    margin: 18px auto 0;
+    max-width: 560px;
+    font-family: "Cormorant Garamond", serif;
+    font-size: clamp(1.35rem, 1.8vw, 2rem);
+    line-height: 1.1;
+    color: rgba(247, 234, 215, 0.86);
+}
+
+.endgame-menu-button {
+    appearance: none;
+    margin-top: 28px;
+    border: 1px solid rgba(243, 210, 160, 0.28);
+    border-radius: 999px;
+    padding: 0.85em 1.45em;
+    background: linear-gradient(180deg, rgba(255, 245, 227, 0.98), rgba(235, 205, 168, 0.95));
+    color: #342012;
+    font-family: "Cinzel", serif;
+    font-size: 1rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    cursor: pointer;
+    box-shadow:
+        0 8px 20px rgba(18, 10, 4, 0.18),
+        inset 0 1px 0 rgba(255, 255, 255, 0.84);
+    transition: transform 0.16s ease, filter 0.16s ease;
+}
+
+.endgame-menu-button:active {
+    transform: scale(0.985);
+    filter: brightness(0.98);
+}
+
+@media (max-width: 640px) {
+    .endgame-shell {
+        padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
+    }
+
+    .endgame-card {
+        border-radius: 26px;
+        padding: 20px;
+    }
+
+    .endgame-menu-button {
+        width: 100%;
+    }
+}

www/css/clock-scene.css

@@ -229,6 +229,41 @@ body {
     display: none;
 }
 
+.clock-result-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+}
+
+.clock-result-button {
+    appearance: none;
+    border: 1px solid rgba(104, 67, 35, 0.26);
+    border-radius: 999px;
+    padding: 0.65em 1.2em;
+    background: linear-gradient(180deg, rgba(252, 243, 228, 0.98), rgba(230, 202, 164, 0.95));
+    color: #342012;
+    font-family: "Cinzel", serif;
+    font-size: clamp(0.92rem, 1.1vw, 1.08rem);
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    box-shadow:
+        0 8px 18px rgba(93, 57, 25, 0.12),
+        inset 0 1px 0 rgba(255, 255, 255, 0.84);
+    transition: transform 0.16s ease, filter 0.16s ease;
+}
+
+.clock-result-button-dark {
+    background: linear-gradient(180deg, rgba(73, 48, 31, 0.98), rgba(42, 26, 17, 0.98));
+    border-color: rgba(46, 28, 20, 0.82);
+    color: #f5e8d7;
+}
+
+.clock-result-button:active {
+    transform: scale(0.98);
+    filter: brightness(0.98);
+}
+
 .clock-time {
     font-size: clamp(4.8rem, 9vw, 8.4rem);
     line-height: 0.95;
@@ -324,6 +359,15 @@ body::before {
         font-size: clamp(0.95rem, 4vw, 1.1rem);
     }
 
+    .clock-result-actions {
+        gap: 8px;
+    }
+
+    .clock-result-button {
+        width: min(72vw, 240px);
+        font-size: clamp(0.88rem, 3.8vw, 1rem);
+    }
+
     .clock-board {
         gap: 14px;
     }

www/css/menu-scene.css

@@ -42,6 +42,34 @@
         inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 
+.menu-language-bar {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+.menu-language-label {
+    font-family: "Cinzel", serif;
+    font-size: 0.88rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: rgba(245, 217, 178, 0.8);
+}
+
+.menu-language-select {
+    appearance: none;
+    border: 1px solid rgba(244, 220, 186, 0.22);
+    border-radius: 999px;
+    padding: 0.55em 1em;
+    background: rgba(255, 255, 255, 0.08);
+    color: #f7ead7;
+    font-family: "Cormorant Garamond", serif;
+    font-size: 1.1rem;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
 .menu-kicker {
     margin: 0 0 8px;
     font-family: "Cinzel", serif;
@@ -54,8 +82,8 @@
 .menu-title {
     margin: 0;
     font-family: "Cinzel", serif;
-    font-size: clamp(2rem, 3vw, 3.8rem);
+    font-size: clamp(1.7rem, 2.45vw, 3.05rem);
-    line-height: 0.98;
+    line-height: 1.04;
     letter-spacing: 0.03em;
 }
 
@@ -221,4 +249,13 @@
     .menu-link-button {
         width: 100%;
     }
+
+    .menu-language-bar {
+        justify-content: flex-start;
+    }
+
+    .menu-language-select {
+        width: 100%;
+        max-width: 180px;
+    }
 }

www/index.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="css/menu-scene.css">
     <link rel="stylesheet" href="css/clock-scene.css">
     <link rel="stylesheet" href="css/cube-scene.css">
+    <link rel="stylesheet" href="css/GameEnd-scene.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Cinzel:wght@400;500;600&display=swap" rel="stylesheet">
@@ -23,52 +24,59 @@
     <div id="sceneMenu" class="scene scene-menu">
         <div class="menu-shell">
             <section class="menu-hero">
+                <div class="menu-language-bar">
+                    <label class="menu-language-label" for="MenuLanguage" data-i18n="menu.languageLabel">Langue</label>
+                    <select id="MenuLanguage" class="menu-language-select">
+                        <option value="fr">Francais</option>
+                        <option value="en">English</option>
+                    </select>
+                </div>
                 <p class="menu-kicker">ChessCubing</p>
-                <h1 class="menu-title">Configure your match</h1>
+                <h1 class="menu-title" data-i18n="menu.title">Configurez votre partie</h1>
-                <p class="menu-subtitle">Set the clock, choose the block mode, then launch the game from the same scene system.</p>
+                <p class="menu-subtitle" data-i18n="menu.subtitle">Reglez l'horloge, choisissez le mode de block, puis lancez la partie depuis le meme systeme de scenes.</p>
                 <div class="menu-actions">
-                    <button id="StartGameButton" class="menu-primary-button" type="button">Start Game</button>
+                    <button id="StartGameButton" class="menu-primary-button" type="button" data-i18n="menu.startGame">Lancer la partie</button>
                     <a class="menu-link-button" href="https://www.chesscubing.fr/" target="_blank" rel="noopener noreferrer">chesscubing.fr</a>
                 </div>
             </section>
 
             <section class="menu-settings-card">
                 <div class="menu-settings-head">
-                    <h2 class="menu-section-title">Settings</h2>
+                    <h2 class="menu-section-title" data-i18n="menu.settingsTitle">Parametres</h2>
                 </div>
 
                 <div class="menu-settings-grid">
                     <label class="menu-field">
-                        <span class="menu-label">Start Time</span>
+                        <span class="menu-label" data-i18n="menu.startTimeLabel">Temps initial</span>
                         <input id="MenuStartTime" class="menu-input" type="number" min="0" step="1">
-                        <span class="menu-help">Minutes for both white and black</span>
+                        <span class="menu-help" data-i18n="menu.startTimeHelp">Minutes pour les blancs et les noirs</span>
                     </label>
 
                     <label class="menu-field">
-                        <span class="menu-label">Start Move Left</span>
+                        <span class="menu-label" data-i18n="menu.startMoveLabel">Coups avant cube</span>
                         <input id="MenuStartMoveLeft" class="menu-input" type="number" min="0" step="1">
-                        <span class="menu-help">Moves before cube phase</span>
+                        <span class="menu-help" data-i18n="menu.startMoveHelp">Nombre de coups avant la phase cube</span>
                     </label>
 
                     <label class="menu-field">
-                        <span class="menu-label">Block Time</span>
+                        <span class="menu-label" data-i18n="menu.blockTimeLabel">Temps du block</span>
                         <input id="MenuBlockTime" class="menu-input" type="number" min="0" step="1">
-                        <span class="menu-help">Minutes</span>
+                        <span class="menu-help" data-i18n="menu.blockTimeHelp">Minutes</span>
                     </label>
 
                     <label class="menu-field">
-                        <span class="menu-label">Max Increment</span>
+                        <span class="menu-label" data-i18n="menu.maxIncrementLabel">Increment maximal</span>
                         <input id="MenuMaxIncrement" class="menu-input" type="number" min="0" step="1">
-                        <span class="menu-help">Seconds</span>
+                        <span class="menu-help" data-i18n="menu.maxIncrementHelp">Secondes</span>
                     </label>
 
                     <label class="menu-field menu-field-toggle">
-                        <span class="menu-label">Game Start With Block</span>
+                        <span class="menu-label" data-i18n="menu.blockModeLabel">La partie commence avec</span>
                         <select id="MenuLastBlock" class="menu-input menu-select">
-                            <option value="true">Block +</option>
+                            <option value="true" data-i18n="menu.blockPlus">Block +</option>
-                            <option value="false">Block -</option>
+                            <option value="false" data-i18n="menu.blockMinus">Block -</option>
                         </select>
-                        <span class="menu-help">Choose the block mode used when the game begins</span>
+                        <span class="menu-help" data-i18n="menu.blockModeHelp">Choisissez le mode de block utilise au debut de la partie</span>
                     </label>
                 </div>
             </section>
@@ -80,12 +88,17 @@
             <div class="clock-topbar">
                 <h1 id="BlockTime" class="TextClock clock-status">Temps restant Block : 3:00</h1>
                 <h1 id="BlockType" class="TextClock clock-mode">Block -</h1>
-                <button id="StartClockButton" class="clock-start-button is-hidden" type="button">Start</button>
+                <button id="StartClockButton" class="clock-start-button is-hidden" type="button" data-i18n="clock.start">Start</button>
+                <div class="clock-result-actions">
+                    <button id="ClockWhiteWinButton" class="clock-result-button" type="button" data-i18n="clock.whiteWins">Blanc gagne</button>
+                    <button id="ClockDrawButton" class="clock-result-button" type="button" data-i18n="clock.draw">Nulle</button>
+                    <button id="ClockBlackWinButton" class="clock-result-button clock-result-button-dark" type="button" data-i18n="clock.blackWins">Noir gagne</button>
+                </div>
             </div>
 
             <div class="clock-board">
                 <section class="player-zone player-zone-white">
-                    <div class="player-badge">BLANC</div>
+                    <div class="player-badge" data-i18n="common.whiteUpper">BLANC</div>
                     <div class="clock-panel clock-panel-white">
                         <div class="button" id="white_button" aria-label="White clock button"></div>
                         <div class="panel-light"></div>
@@ -97,7 +110,7 @@
                 <div class="clock-divider"></div>
 
                 <section class="player-zone player-zone-black">
-                    <div class="player-badge player-badge-dark">NOIR</div>
+                    <div class="player-badge player-badge-dark" data-i18n="common.blackUpper">NOIR</div>
                     <div class="clock-panel clock-panel-black">
                         <div class="button" id="black_button" aria-label="Black clock button"></div>
                         <div class="panel-light"></div>
@@ -112,40 +125,53 @@
     <div class="scene scene-cube" id="sceneCube">
         <div class="cube-shell">
             <div class="cube-topbar">
-                <h1 class="TimerText cube-title">Phase Cube</h1>
+                <h1 class="TimerText cube-title" data-i18n="cube.title">Phase Cube</h1>
                 <h1 class="TimerText" id="BlockTypeTimer">Block -</h1>
-                <p class="cube-subtitle">Maintiens 2 secondes pour lancer le timer, puis touche de nouveau quand le cube est termine.</p>
+                <p class="cube-subtitle" data-i18n="cube.subtitle">Maintiens 2 secondes pour lancer le timer, puis touche de nouveau quand le cube est termine.</p>
             </div>
 
             <div class="cube-board">
                 <section class="cube-lane cube-lane-white">
-                    <div class="cube-badge">BLANC</div>
+                    <div class="cube-badge" data-i18n="common.whiteUpper">BLANC</div>
                     <div class="TimerCube cube-pad" id="TimerWhite">
                         <div class="cube-grid"></div>
                         <h1 class="TimerText" id="TextWhite">Temps au cube Blanc : 0:00</h1>
-                        <p class="cube-hint">Appui long pour demarrer</p>
+                        <p class="cube-hint" id="CubeHintWhite" data-i18n="cube.hintStart">Appui long pour demarrer</p>
                     </div>
                 </section>
 
                 <div class="cube-divider"></div>
 
                 <section class="cube-lane cube-lane-black">
-                    <div class="cube-badge cube-badge-dark">NOIR</div>
+                    <div class="cube-badge cube-badge-dark" data-i18n="common.blackUpper">NOIR</div>
                     <div class="TimerCube cube-pad cube-pad-dark" id="TimerBlack">
                         <div class="cube-grid"></div>
                         <h1 class="TimerText" id="TextBlack">Temps au cube Noir : 0:00</h1>
-                        <p class="cube-hint">Touchez quand le cube est fini</p>
+                        <p class="cube-hint" id="CubeHintBlack" data-i18n="cube.hintFinish">Touchez quand le cube est fini</p>
                     </div>
                 </section>
             </div>
         </div>
     </div>
 
+    <div class="scene scene-endgame" id="sceneEndGame">
+        <div class="endgame-shell">
+            <div class="endgame-card">
+                <p class="endgame-kicker" data-i18n="endgame.kicker">Partie terminee</p>
+                <h1 id="whoWon">Les Blancs ont gagne</h1>
+                <p class="endgame-subtitle" data-i18n="endgame.subtitle">Le resultat final est valide. Vous pouvez revenir au menu pour preparer une nouvelle partie.</p>
+                <button id="EndGameMenuButton" class="endgame-menu-button" type="button" data-i18n="endgame.backToMenu">Retour au menu</button>
+            </div>
+        </div>
+    </div>
+
     <div class="scene" id="MainMenu"></div>
+    <script src="js/I18nFrontEnd.js"></script>
     <script src="js/ClockFrontEnd.js"></script>
     <script src="js/TimerFrontEnd.js"></script>
     <script src="js/backend.js"></script>
     <script src="js/MenuFrontEnd.js"></script>
+    <script src="js/EndGameFrontEnd.js"></script>
     <script src="js/appload.js"></script>
 </body>
 </html>

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