178 lines
9.7 KiB
HTML
178 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="js/scene.js"></script>
|
|
<script src="cordova.js"></script>
|
|
<link rel="manifest" href="manifest.json">
|
|
<meta name="theme-color" content="#000000">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<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">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<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" 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" 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" data-i18n="menu.settingsTitle">Parametres</h2>
|
|
</div>
|
|
|
|
<div class="menu-settings-grid">
|
|
<label class="menu-field">
|
|
<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" data-i18n="menu.startTimeHelp">Minutes pour les blancs et les noirs</span>
|
|
</label>
|
|
|
|
<label class="menu-field">
|
|
<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" data-i18n="menu.startMoveHelp">Nombre de coups avant la phase cube</span>
|
|
</label>
|
|
|
|
<label class="menu-field">
|
|
<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" data-i18n="menu.blockTimeHelp">Minutes</span>
|
|
</label>
|
|
|
|
<label class="menu-field">
|
|
<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" data-i18n="menu.maxIncrementHelp">Secondes</span>
|
|
</label>
|
|
|
|
<label class="menu-field menu-field-toggle">
|
|
<span class="menu-label" data-i18n="menu.blockModeLabel">La partie commence avec</span>
|
|
<select id="MenuLastBlock" class="menu-input menu-select">
|
|
<option value="true" data-i18n="menu.blockPlus">Block +</option>
|
|
<option value="false" data-i18n="menu.blockMinus">Block -</option>
|
|
</select>
|
|
<span class="menu-help" data-i18n="menu.blockModeHelp">Choisissez le mode de block utilise au debut de la partie</span>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sceneClock" class="scene scene-clock">
|
|
<div class="clock-shell">
|
|
<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" 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" 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>
|
|
<h1 id="TimeWhite" class="TextClock clock-time">10:00</h1>
|
|
<h1 id="MoveLeftWhite" class="TextClock clock-moves">Coup restant Blanc : 8</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="clock-divider"></div>
|
|
|
|
<section class="player-zone player-zone-black">
|
|
<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>
|
|
<h1 id="TimeBlack" class="TextClock clock-time">10:00</h1>
|
|
<h1 id="MoveLeftBlack" class="TextClock clock-moves">Coup restant Noir : 8</h1>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scene scene-cube" id="sceneCube">
|
|
<div class="cube-shell">
|
|
<div class="cube-topbar">
|
|
<h1 class="TimerText cube-title" data-i18n="cube.title">Phase Cube</h1>
|
|
<h1 class="TimerText" id="BlockTypeTimer">Block -</h1>
|
|
<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" 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" 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" 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" 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>
|