add win/draw menu , and add english
This commit is contained in:
102
www/css/GameEnd-scene.css
Normal file
102
www/css/GameEnd-scene.css
Normal file
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
<p class="menu-subtitle">Set the clock, choose the block mode, then launch the game from the same scene system.</p>
|
||||
<h1 class="menu-title" data-i18n="menu.title">Configurez votre partie</h1>
|
||||
<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="false">Block -</option>
|
||||
<option value="true" data-i18n="menu.blockPlus">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>
|
||||
|
||||
@@ -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()
|
||||
|
||||
25
www/js/EndGameFrontEnd.js
Normal file
25
www/js/EndGameFrontEnd.js
Normal file
@@ -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()
|
||||
})
|
||||
12
www/js/EndGameScreen.js
Normal file
12
www/js/EndGameScreen.js
Normal file
@@ -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"
|
||||
}
|
||||
133
www/js/I18nFrontEnd.js
Normal file
133
www/js/I18nFrontEnd.js
Normal file
@@ -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()
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
|
||||
@@ -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", () => {
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user