1227 lines
30 KiB
HTML
1227 lines
30 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
|
||
<meta charset="UTF-8">
|
||
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
|
||
>
|
||
|
||
<meta
|
||
name="theme-color"
|
||
content="#0f172a"
|
||
>
|
||
|
||
<meta
|
||
name="color-scheme"
|
||
content="dark light"
|
||
>
|
||
|
||
<title>Chess Party</title>
|
||
|
||
<meta
|
||
name="description"
|
||
content="Chess Party — шахматы против компьютера или с другом."
|
||
>
|
||
|
||
<!-- =====================================================
|
||
НАСТРОЙКИ РЕПОЗИТОРИЯ
|
||
|
||
Здесь меняешь только эти две строки:
|
||
|
||
1. REPOSITORY_LOGO_URL
|
||
URL логотипа твоего репозитория
|
||
|
||
2. REPOSITORY_URL
|
||
URL самого репозитория
|
||
====================================================== -->
|
||
|
||
<script>
|
||
window.CHESS_PARTY_CONFIG = {
|
||
|
||
REPOSITORY_LOGO_URL:
|
||
"https://example.com/logo.png",
|
||
|
||
REPOSITORY_URL:
|
||
"https://example.com/repository"
|
||
|
||
};
|
||
</script>
|
||
|
||
|
||
<!-- Favicon -->
|
||
|
||
<link
|
||
rel="icon"
|
||
type="image/png"
|
||
href="https://cdn-icons-png.flaticon.com/512/823/823301.png"
|
||
>
|
||
|
||
|
||
<!-- Основные стили -->
|
||
|
||
<link
|
||
rel="stylesheet"
|
||
href="/styles.css"
|
||
>
|
||
|
||
</head>
|
||
|
||
|
||
<body>
|
||
|
||
<div class="page-shell">
|
||
|
||
|
||
<!-- =====================================================
|
||
HEADER
|
||
====================================================== -->
|
||
|
||
<header class="main-header">
|
||
|
||
<h1>
|
||
|
||
<span
|
||
class="chess-icon"
|
||
aria-hidden="true"
|
||
>
|
||
♞
|
||
</span>
|
||
|
||
<span>
|
||
Chess Party
|
||
</span>
|
||
|
||
</h1>
|
||
|
||
</header>
|
||
|
||
|
||
<!-- =====================================================
|
||
MAIN
|
||
====================================================== -->
|
||
|
||
<main class="app-grid">
|
||
|
||
|
||
<!-- =================================================
|
||
BOARD
|
||
================================================== -->
|
||
|
||
<section class="board-panel panel">
|
||
|
||
|
||
<div class="board-toolbar">
|
||
|
||
|
||
<div class="mode-info">
|
||
|
||
<p
|
||
class="label"
|
||
data-i18n="currentMode"
|
||
>
|
||
Текущий режим
|
||
</p>
|
||
|
||
<h2 id="modeBadge">
|
||
AI Арена
|
||
</h2>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="toolbar-actions">
|
||
|
||
|
||
<button
|
||
id="newGameToolbarButton"
|
||
class="secondary-button"
|
||
type="button"
|
||
data-i18n="newGame"
|
||
>
|
||
Новая игра
|
||
</button>
|
||
|
||
|
||
<button
|
||
id="flipBoardButton"
|
||
class="icon-button"
|
||
type="button"
|
||
title="Перевернуть доску"
|
||
aria-label="Перевернуть доску"
|
||
>
|
||
⇅
|
||
</button>
|
||
|
||
|
||
<button
|
||
id="copyInviteButton"
|
||
class="secondary-button hidden"
|
||
type="button"
|
||
data-i18n="invite"
|
||
>
|
||
Инвайт
|
||
</button>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- Chess board -->
|
||
|
||
<div class="board-stage">
|
||
|
||
<div
|
||
id="board"
|
||
class="board"
|
||
aria-label="Шахматная доска"
|
||
></div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- Game status -->
|
||
|
||
<div class="status-strip">
|
||
|
||
|
||
<div class="status-text">
|
||
|
||
<p
|
||
class="label"
|
||
data-i18n="gameStatus"
|
||
>
|
||
Статус игры
|
||
</p>
|
||
|
||
|
||
<p
|
||
id="statusMessage"
|
||
class="status-message"
|
||
>
|
||
Выберите режим и начните игру.
|
||
</p>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="status-meta">
|
||
|
||
|
||
<span
|
||
id="turnBadge"
|
||
class="status-chip turn-white"
|
||
>
|
||
Ход белых
|
||
</span>
|
||
|
||
|
||
<span
|
||
id="connectionBadge"
|
||
class="status-chip connection-solo"
|
||
>
|
||
Соло
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</section>
|
||
|
||
|
||
|
||
<!-- =================================================
|
||
SIDEBAR
|
||
================================================== -->
|
||
|
||
<aside class="sidebar">
|
||
|
||
|
||
<!-- SETTINGS -->
|
||
|
||
<section class="panel">
|
||
|
||
|
||
<div class="panel-head">
|
||
|
||
<p
|
||
class="label"
|
||
data-i18n="settings"
|
||
>
|
||
Настройки
|
||
</p>
|
||
|
||
<h3 data-i18n="chooseMode">
|
||
Выберите режим
|
||
</h3>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- Mode -->
|
||
|
||
<div class="mode-switcher">
|
||
|
||
|
||
<button
|
||
id="modeAiButton"
|
||
class="mode-button active"
|
||
type="button"
|
||
data-i18n="computer"
|
||
>
|
||
С компьютером
|
||
</button>
|
||
|
||
|
||
<button
|
||
id="modePartyButton"
|
||
class="mode-button"
|
||
type="button"
|
||
data-i18n="friend"
|
||
>
|
||
С другом
|
||
</button>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<!-- Player name -->
|
||
|
||
<label class="field">
|
||
|
||
<span data-i18n="yourName">
|
||
Ваше имя
|
||
</span>
|
||
|
||
<input
|
||
id="playerNameInput"
|
||
type="text"
|
||
maxlength="24"
|
||
autocomplete="nickname"
|
||
placeholder="Введите имя..."
|
||
data-i18n-placeholder="namePlaceholder"
|
||
>
|
||
|
||
</label>
|
||
|
||
|
||
<!-- =========================================
|
||
AI CONTROLS
|
||
========================================== -->
|
||
|
||
<div id="aiControls">
|
||
|
||
|
||
<div class="field-grid">
|
||
|
||
|
||
<label class="field">
|
||
|
||
<span data-i18n="difficulty">
|
||
Сложность
|
||
</span>
|
||
|
||
|
||
<select id="aiLevelSelect">
|
||
|
||
<option
|
||
value="easy"
|
||
data-i18n="easy"
|
||
>
|
||
Легкая
|
||
</option>
|
||
|
||
|
||
<option
|
||
value="intermediate"
|
||
selected
|
||
data-i18n="medium"
|
||
>
|
||
Средняя
|
||
</option>
|
||
|
||
|
||
<option
|
||
value="hard"
|
||
data-i18n="hard"
|
||
>
|
||
Сложная
|
||
</option>
|
||
|
||
</select>
|
||
|
||
</label>
|
||
|
||
|
||
<label class="field">
|
||
|
||
<span data-i18n="playAs">
|
||
Играть за
|
||
</span>
|
||
|
||
|
||
<select id="playerColorSelect">
|
||
|
||
<option
|
||
value="w"
|
||
selected
|
||
data-i18n="white"
|
||
>
|
||
Белых
|
||
</option>
|
||
|
||
|
||
<option
|
||
value="b"
|
||
data-i18n="black"
|
||
>
|
||
Черных
|
||
</option>
|
||
|
||
</select>
|
||
|
||
</label>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<!-- AI clock -->
|
||
|
||
<label class="field">
|
||
|
||
<span data-i18n="timeControl">
|
||
Контроль времени
|
||
</span>
|
||
|
||
|
||
<select id="aiClockSelect">
|
||
|
||
<option
|
||
value="none"
|
||
data-i18n="noLimit"
|
||
>
|
||
Без лимита
|
||
</option>
|
||
|
||
|
||
<option value="1+0">
|
||
1 + 0 • Bullet
|
||
</option>
|
||
|
||
|
||
<option value="3+0">
|
||
3 + 0 • Blitz
|
||
</option>
|
||
|
||
|
||
<option value="3+2">
|
||
3 + 2 • Blitz
|
||
</option>
|
||
|
||
|
||
<option value="5+0">
|
||
5 + 0 • Blitz
|
||
</option>
|
||
|
||
|
||
<option value="5+3">
|
||
5 + 3 • Blitz
|
||
</option>
|
||
|
||
|
||
<option
|
||
value="10+0"
|
||
selected
|
||
>
|
||
10 + 0 • Rapid
|
||
</option>
|
||
|
||
|
||
<option value="15+10">
|
||
15 + 10 • Rapid
|
||
</option>
|
||
|
||
|
||
<option value="30+0">
|
||
30 + 0 • Classical
|
||
</option>
|
||
|
||
|
||
<option value="30+20">
|
||
30 + 20 • Classical
|
||
</option>
|
||
|
||
</select>
|
||
|
||
</label>
|
||
|
||
|
||
<button
|
||
id="startAiButton"
|
||
class="primary-button"
|
||
type="button"
|
||
data-i18n="startAi"
|
||
>
|
||
Начать игру с ИИ
|
||
</button>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<!-- =========================================
|
||
PARTY CONTROLS
|
||
========================================== -->
|
||
|
||
<div
|
||
id="partyControls"
|
||
class="hidden"
|
||
>
|
||
|
||
|
||
<button
|
||
id="createPartyButton"
|
||
class="primary-button"
|
||
type="button"
|
||
data-i18n="createRoom"
|
||
>
|
||
Создать комнату
|
||
</button>
|
||
|
||
|
||
<label class="field">
|
||
|
||
<span data-i18n="roomCode">
|
||
Код комнаты
|
||
</span>
|
||
|
||
|
||
<div class="join-row">
|
||
|
||
|
||
<input
|
||
id="partyCodeInput"
|
||
type="text"
|
||
maxlength="6"
|
||
autocomplete="off"
|
||
placeholder="ABC123"
|
||
>
|
||
|
||
|
||
<button
|
||
id="joinPartyButton"
|
||
class="secondary-button"
|
||
type="button"
|
||
data-i18n="join"
|
||
>
|
||
Войти
|
||
</button>
|
||
|
||
|
||
</div>
|
||
|
||
</label>
|
||
|
||
|
||
<label class="field">
|
||
|
||
<span data-i18n="timeControl">
|
||
Контроль времени
|
||
</span>
|
||
|
||
|
||
<select id="partyClockSelect">
|
||
|
||
<option
|
||
value="none"
|
||
data-i18n="noLimit"
|
||
>
|
||
Без лимита
|
||
</option>
|
||
|
||
|
||
<option value="1+0">
|
||
1 + 0 • Bullet
|
||
</option>
|
||
|
||
|
||
<option value="3+0">
|
||
3 + 0 • Blitz
|
||
</option>
|
||
|
||
|
||
<option value="3+2">
|
||
3 + 2 • Blitz
|
||
</option>
|
||
|
||
|
||
<option value="5+0">
|
||
5 + 0 • Blitz
|
||
</option>
|
||
|
||
|
||
<option value="5+3">
|
||
5 + 3 • Blitz
|
||
</option>
|
||
|
||
|
||
<option
|
||
value="10+0"
|
||
selected
|
||
>
|
||
10 + 0 • Rapid
|
||
</option>
|
||
|
||
|
||
<option value="15+10">
|
||
15 + 10 • Rapid
|
||
</option>
|
||
|
||
|
||
<option value="30+0">
|
||
30 + 0 • Classical
|
||
</option>
|
||
|
||
|
||
<option value="30+20">
|
||
30 + 20 • Classical
|
||
</option>
|
||
|
||
</select>
|
||
|
||
</label>
|
||
|
||
|
||
<button
|
||
id="leavePartyButton"
|
||
class="ghost-button hidden"
|
||
type="button"
|
||
data-i18n="leaveRoom"
|
||
>
|
||
Покинуть комнату
|
||
</button>
|
||
|
||
|
||
<p
|
||
id="partySummary"
|
||
class="muted-copy"
|
||
>
|
||
Создайте комнату, чтобы играть белыми.
|
||
</p>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</section>
|
||
|
||
|
||
|
||
<!-- =================================================
|
||
PLAYERS
|
||
================================================== -->
|
||
|
||
<section class="panel">
|
||
|
||
|
||
<div class="panel-head">
|
||
|
||
<p
|
||
class="label"
|
||
data-i18n="players"
|
||
>
|
||
Участники
|
||
</p>
|
||
|
||
<h3 data-i18n="tableAndSpectators">
|
||
Стол и зрители
|
||
</h3>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="roster-grid">
|
||
|
||
|
||
<!-- White -->
|
||
|
||
<div class="roster-card white-player">
|
||
|
||
<div class="roster-info">
|
||
|
||
<span
|
||
class="roster-role"
|
||
data-i18n="white"
|
||
>
|
||
Белые
|
||
</span>
|
||
|
||
|
||
<strong id="whitePlayerLabel">
|
||
Вы
|
||
</strong>
|
||
|
||
</div>
|
||
|
||
|
||
<div
|
||
id="whiteClock"
|
||
class="player-clock"
|
||
>
|
||
10:00
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- Black -->
|
||
|
||
<div class="roster-card black-player">
|
||
|
||
<div class="roster-info">
|
||
|
||
<span
|
||
class="roster-role"
|
||
data-i18n="black"
|
||
>
|
||
Черные
|
||
</span>
|
||
|
||
|
||
<strong id="blackPlayerLabel">
|
||
Компьютер
|
||
</strong>
|
||
|
||
</div>
|
||
|
||
|
||
<div
|
||
id="blackClock"
|
||
class="player-clock"
|
||
>
|
||
10:00
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<!-- Spectators -->
|
||
|
||
<div class="spectator-panel">
|
||
|
||
|
||
<div class="spectator-header">
|
||
|
||
<p
|
||
class="label"
|
||
data-i18n="spectators"
|
||
>
|
||
Зрители
|
||
</p>
|
||
|
||
|
||
<span
|
||
id="spectatorCount"
|
||
class="badge"
|
||
>
|
||
0 / 20
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<ul
|
||
id="spectatorList"
|
||
class="spectator-list"
|
||
>
|
||
|
||
<li class="empty-state">
|
||
Пока никого нет
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</section>
|
||
|
||
|
||
</aside>
|
||
|
||
|
||
</main>
|
||
|
||
|
||
|
||
<!-- =====================================================
|
||
REPOSITORY FOOTER
|
||
|
||
Логотип и ссылка берутся из
|
||
window.CHESS_PARTY_CONFIG
|
||
====================================================== -->
|
||
|
||
<footer class="site-footer">
|
||
|
||
<a
|
||
id="repositoryLink"
|
||
class="repository-link"
|
||
href="#"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
aria-label="Repository"
|
||
>
|
||
|
||
<img
|
||
id="repositoryLogo"
|
||
class="repository-logo"
|
||
src=""
|
||
alt="Repository"
|
||
loading="lazy"
|
||
decoding="async"
|
||
>
|
||
|
||
<span
|
||
class="repository-name"
|
||
data-i18n="repository"
|
||
>
|
||
Репозиторий
|
||
</span>
|
||
|
||
</a>
|
||
|
||
</footer>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- =========================================================
|
||
TOAST
|
||
========================================================= -->
|
||
|
||
<div
|
||
id="toastHost"
|
||
class="toast-host"
|
||
aria-live="polite"
|
||
></div>
|
||
|
||
|
||
|
||
<!-- =========================================================
|
||
PROMOTION
|
||
========================================================= -->
|
||
|
||
<div
|
||
id="promotionDialog"
|
||
class="modal hidden"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="promotionTitle"
|
||
>
|
||
|
||
<div class="modal-card">
|
||
|
||
|
||
<p
|
||
class="label"
|
||
data-i18n="promotion"
|
||
>
|
||
Превращение пешки
|
||
</p>
|
||
|
||
|
||
<h3
|
||
id="promotionTitle"
|
||
data-i18n="choosePiece"
|
||
>
|
||
Выберите фигуру
|
||
</h3>
|
||
|
||
|
||
<div
|
||
id="promotionOptions"
|
||
class="promotion-options"
|
||
></div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- =========================================================
|
||
AUTO LANGUAGE + REPOSITORY
|
||
========================================================= -->
|
||
|
||
<script>
|
||
(function () {
|
||
|
||
"use strict";
|
||
|
||
|
||
/* =====================================================
|
||
TRANSLATIONS
|
||
====================================================== */
|
||
|
||
const translations = {
|
||
|
||
ru: {
|
||
currentMode: "Текущий режим",
|
||
newGame: "Новая игра",
|
||
invite: "Инвайт",
|
||
gameStatus: "Статус игры",
|
||
settings: "Настройки",
|
||
chooseMode: "Выберите режим",
|
||
computer: "С компьютером",
|
||
friend: "С другом",
|
||
yourName: "Ваше имя",
|
||
namePlaceholder: "Введите имя...",
|
||
difficulty: "Сложность",
|
||
easy: "Легкая",
|
||
medium: "Средняя",
|
||
hard: "Сложная",
|
||
playAs: "Играть за",
|
||
white: "Белые",
|
||
black: "Черные",
|
||
timeControl: "Контроль времени",
|
||
noLimit: "Без лимита",
|
||
startAi: "Начать игру с ИИ",
|
||
createRoom: "Создать комнату",
|
||
roomCode: "Код комнаты",
|
||
join: "Войти",
|
||
leaveRoom: "Покинуть комнату",
|
||
players: "Участники",
|
||
tableAndSpectators: "Стол и зрители",
|
||
spectators: "Зрители",
|
||
repository: "Репозиторий",
|
||
promotion: "Превращение пешки",
|
||
choosePiece: "Выберите фигуру"
|
||
},
|
||
|
||
en: {
|
||
currentMode: "Current mode",
|
||
newGame: "New game",
|
||
invite: "Invite",
|
||
gameStatus: "Game status",
|
||
settings: "Settings",
|
||
chooseMode: "Choose mode",
|
||
computer: "Computer",
|
||
friend: "Friend",
|
||
yourName: "Your name",
|
||
namePlaceholder: "Enter your name...",
|
||
difficulty: "Difficulty",
|
||
easy: "Easy",
|
||
medium: "Medium",
|
||
hard: "Hard",
|
||
playAs: "Play as",
|
||
white: "White",
|
||
black: "Black",
|
||
timeControl: "Time control",
|
||
noLimit: "No limit",
|
||
startAi: "Start AI game",
|
||
createRoom: "Create room",
|
||
roomCode: "Room code",
|
||
join: "Join",
|
||
leaveRoom: "Leave room",
|
||
players: "Players",
|
||
tableAndSpectators: "Table & spectators",
|
||
spectators: "Spectators",
|
||
repository: "Repository",
|
||
promotion: "Pawn promotion",
|
||
choosePiece: "Choose a piece"
|
||
},
|
||
|
||
de: {
|
||
currentMode: "Aktueller Modus",
|
||
newGame: "Neues Spiel",
|
||
invite: "Einladen",
|
||
gameStatus: "Spielstatus",
|
||
settings: "Einstellungen",
|
||
chooseMode: "Modus wählen",
|
||
computer: "Computer",
|
||
friend: "Freund",
|
||
yourName: "Dein Name",
|
||
namePlaceholder: "Name eingeben...",
|
||
difficulty: "Schwierigkeit",
|
||
easy: "Leicht",
|
||
medium: "Mittel",
|
||
hard: "Schwer",
|
||
playAs: "Spielen als",
|
||
white: "Weiß",
|
||
black: "Schwarz",
|
||
timeControl: "Zeitkontrolle",
|
||
noLimit: "Keine Begrenzung",
|
||
startAi: "KI-Spiel starten",
|
||
createRoom: "Raum erstellen",
|
||
roomCode: "Raumcode",
|
||
join: "Beitreten",
|
||
leaveRoom: "Raum verlassen",
|
||
players: "Teilnehmer",
|
||
tableAndSpectators: "Tisch & Zuschauer",
|
||
spectators: "Zuschauer",
|
||
repository: "Repository",
|
||
promotion: "Bauernumwandlung",
|
||
choosePiece: "Figur auswählen"
|
||
},
|
||
|
||
zh: {
|
||
currentMode: "当前模式",
|
||
newGame: "新游戏",
|
||
invite: "邀请",
|
||
gameStatus: "游戏状态",
|
||
settings: "设置",
|
||
chooseMode: "选择模式",
|
||
computer: "电脑",
|
||
friend: "好友",
|
||
yourName: "你的名字",
|
||
namePlaceholder: "输入名字...",
|
||
difficulty: "难度",
|
||
easy: "简单",
|
||
medium: "中等",
|
||
hard: "困难",
|
||
playAs: "执棋方",
|
||
white: "白方",
|
||
black: "黑方",
|
||
timeControl: "时间控制",
|
||
noLimit: "不限时",
|
||
startAi: "开始 AI 游戏",
|
||
createRoom: "创建房间",
|
||
roomCode: "房间代码",
|
||
join: "加入",
|
||
leaveRoom: "离开房间",
|
||
players: "玩家",
|
||
tableAndSpectators: "棋桌与观众",
|
||
spectators: "观众",
|
||
repository: "代码仓库",
|
||
promotion: "兵升变",
|
||
choosePiece: "选择棋子"
|
||
},
|
||
|
||
ja: {
|
||
currentMode: "現在のモード",
|
||
newGame: "新しいゲーム",
|
||
invite: "招待",
|
||
gameStatus: "ゲーム状態",
|
||
settings: "設定",
|
||
chooseMode: "モードを選択",
|
||
computer: "コンピューター",
|
||
friend: "友達",
|
||
yourName: "名前",
|
||
namePlaceholder: "名前を入力...",
|
||
difficulty: "難易度",
|
||
easy: "簡単",
|
||
medium: "普通",
|
||
hard: "難しい",
|
||
playAs: "プレイヤー",
|
||
white: "白",
|
||
black: "黒",
|
||
timeControl: "時間設定",
|
||
noLimit: "時間制限なし",
|
||
startAi: "AIゲームを開始",
|
||
createRoom: "ルームを作成",
|
||
roomCode: "ルームコード",
|
||
join: "参加",
|
||
leaveRoom: "ルームを退出",
|
||
players: "プレイヤー",
|
||
tableAndSpectators: "対局者と観戦者",
|
||
spectators: "観戦者",
|
||
repository: "リポジトリ",
|
||
promotion: "昇格",
|
||
choosePiece: "駒を選択"
|
||
}
|
||
|
||
};
|
||
|
||
|
||
/* =====================================================
|
||
LANGUAGE DETECTION
|
||
====================================================== */
|
||
|
||
function detectLanguage() {
|
||
|
||
const language =
|
||
navigator.language ||
|
||
navigator.userLanguage ||
|
||
"en";
|
||
|
||
const normalized =
|
||
language.toLowerCase();
|
||
|
||
|
||
if (normalized.startsWith("ru")) {
|
||
return "ru";
|
||
}
|
||
|
||
if (
|
||
normalized.startsWith("de")
|
||
) {
|
||
return "de";
|
||
}
|
||
|
||
if (
|
||
normalized.startsWith("zh")
|
||
) {
|
||
return "zh";
|
||
}
|
||
|
||
if (
|
||
normalized.startsWith("ja")
|
||
) {
|
||
return "ja";
|
||
}
|
||
|
||
return "en";
|
||
}
|
||
|
||
|
||
const language =
|
||
detectLanguage();
|
||
|
||
|
||
document.documentElement.lang =
|
||
language;
|
||
|
||
|
||
/* =====================================================
|
||
APPLY TRANSLATIONS
|
||
====================================================== */
|
||
|
||
function applyTranslations() {
|
||
|
||
const dictionary =
|
||
translations[language] ||
|
||
translations.en;
|
||
|
||
|
||
document
|
||
.querySelectorAll("[data-i18n]")
|
||
.forEach(function (element) {
|
||
|
||
const key =
|
||
element.dataset.i18n;
|
||
|
||
if (
|
||
dictionary[key]
|
||
) {
|
||
element.textContent =
|
||
dictionary[key];
|
||
}
|
||
|
||
});
|
||
|
||
|
||
document
|
||
.querySelectorAll("[data-i18n-placeholder]")
|
||
.forEach(function (element) {
|
||
|
||
const key =
|
||
element.dataset.i18nPlaceholder;
|
||
|
||
if (
|
||
dictionary[key]
|
||
) {
|
||
element.placeholder =
|
||
dictionary[key];
|
||
}
|
||
|
||
});
|
||
|
||
}
|
||
|
||
|
||
applyTranslations();
|
||
|
||
|
||
/* =====================================================
|
||
REPOSITORY
|
||
====================================================== */
|
||
|
||
const config =
|
||
window.CHESS_PARTY_CONFIG || {};
|
||
|
||
|
||
const repositoryLink =
|
||
document.getElementById(
|
||
"repositoryLink"
|
||
);
|
||
|
||
|
||
const repositoryLogo =
|
||
document.getElementById(
|
||
"repositoryLogo"
|
||
);
|
||
|
||
|
||
if (
|
||
repositoryLink &&
|
||
config.REPOSITORY_URL
|
||
) {
|
||
|
||
repositoryLink.href =
|
||
config.REPOSITORY_URL;
|
||
|
||
}
|
||
|
||
|
||
if (
|
||
repositoryLogo &&
|
||
config.REPOSITORY_LOGO_URL
|
||
) {
|
||
|
||
repositoryLogo.src =
|
||
config.REPOSITORY_LOGO_URL;
|
||
|
||
}
|
||
|
||
|
||
/* =====================================================
|
||
IF LOGO IS NOT CONFIGURED
|
||
====================================================== */
|
||
|
||
if (
|
||
repositoryLogo &&
|
||
!config.REPOSITORY_LOGO_URL
|
||
) {
|
||
|
||
repositoryLogo.style.display =
|
||
"none";
|
||
|
||
}
|
||
|
||
|
||
})();
|
||
</script>
|
||
|
||
|
||
|
||
<!-- =========================================================
|
||
APPLICATION
|
||
========================================================= -->
|
||
|
||
<script
|
||
type="module"
|
||
src="/js/app.js"
|
||
></script>
|
||
|
||
|
||
</body>
|
||
</html>
|