diff --git a/www/css/GameEnd-scene.css b/www/css/GameEnd-scene.css new file mode 100644 index 0000000..322d7ec --- /dev/null +++ b/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%; + } +} diff --git a/www/css/clock-scene.css b/www/css/clock-scene.css index 17f4508..4b2f1cc 100644 --- a/www/css/clock-scene.css +++ b/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; } diff --git a/www/css/menu-scene.css b/www/css/menu-scene.css index f8dfbbd..b7fdac5 100644 --- a/www/css/menu-scene.css +++ b/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); - line-height: 0.98; + font-size: clamp(1.7rem, 2.45vw, 3.05rem); + 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; + } } diff --git a/www/index.html b/www/index.html index 3930ae0..6d1b806 100644 --- a/www/index.html +++ b/www/index.html @@ -11,6 +11,7 @@ + @@ -23,52 +24,59 @@
+
+ + +

ChessCubing

-

Configure your match

-

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

+

Configurez votre partie

+

Reglez l'horloge, choisissez le mode de block, puis lancez la partie depuis le meme systeme de scenes.

- + chesscubing.fr
-

Settings

+

Parametres

@@ -80,12 +88,17 @@

Temps restant Block : 3:00

Block -

- + +
+ + + +
-
BLANC
+
BLANC
@@ -97,7 +110,7 @@
-
NOIR
+
NOIR
@@ -112,40 +125,53 @@
-

Phase Cube

+

Phase Cube

Block -

-

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

+

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

-
BLANC
+
BLANC

Temps au cube Blanc : 0:00

-

Appui long pour demarrer

+

Appui long pour demarrer

-
NOIR
+
NOIR

Temps au cube Noir : 0:00

-

Touchez quand le cube est fini

+

Touchez quand le cube est fini

+
+
+
+

Partie terminee

+

Les Blancs ont gagne

+

Le resultat final est valide. Vous pouvez revenir au menu pour preparer une nouvelle partie.

+ +
+
+
+ + + diff --git a/www/js/ClockFrontEnd.js b/www/js/ClockFrontEnd.js index be71718..0859684 100644 --- a/www/js/ClockFrontEnd.js +++ b/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() diff --git a/www/js/EndGameFrontEnd.js b/www/js/EndGameFrontEnd.js new file mode 100644 index 0000000..8aad4c2 --- /dev/null +++ b/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() +}) diff --git a/www/js/EndGameScreen.js b/www/js/EndGameScreen.js new file mode 100644 index 0000000..cb4f571 --- /dev/null +++ b/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" +} diff --git a/www/js/I18nFrontEnd.js b/www/js/I18nFrontEnd.js new file mode 100644 index 0000000..5533a04 --- /dev/null +++ b/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() + } +} diff --git a/www/js/MenuFrontEnd.js b/www/js/MenuFrontEnd.js index f8a39d4..3f8b2f2 100644 --- a/www/js/MenuFrontEnd.js +++ b/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) diff --git a/www/js/TimerFrontEnd.js b/www/js/TimerFrontEnd.js index 223cb3e..c3c366f 100644 --- a/www/js/TimerFrontEnd.js +++ b/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", () => { diff --git a/www/js/backend.js b/www/js/backend.js index 4a6df1e..6076a39 100644 --- a/www/js/backend.js +++ b/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()