Update chess/public/index.html
This commit is contained in:
+161
-704
@@ -1,784 +1,241 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Chess Party | Играть в шахматы онлайн</title>
|
||||||
|
<meta name="description" content="Играйте в красивые шахматы против компьютера или с друзьями в приватных комнатах." />
|
||||||
|
|
||||||
<meta
|
<!-- Bunny Fonts -->
|
||||||
name="viewport"
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||||
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
|
<link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800&display=swap" rel="stylesheet" />
|
||||||
>
|
|
||||||
|
|
||||||
<meta
|
<link rel="stylesheet" href="/styles.css" />
|
||||||
name="theme-color"
|
|
||||||
content="#111318"
|
|
||||||
>
|
|
||||||
|
|
||||||
<title>Chess Party</title>
|
|
||||||
|
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="Chess Party — AI, multiplayer, spectators, chat and chess clocks."
|
|
||||||
>
|
|
||||||
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="/styles.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=Inter:wght@400;500;600;700;800&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="app">
|
|
||||||
|
|
||||||
<header class="topbar">
|
|
||||||
|
|
||||||
<div class="brand">
|
|
||||||
|
|
||||||
<div class="brand-icon">
|
|
||||||
♟
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<strong>
|
|
||||||
Chess Party
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
Play. Think. Win.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="top-status">
|
|
||||||
|
|
||||||
<span
|
|
||||||
id="modeBadge"
|
|
||||||
class="badge"
|
|
||||||
>
|
|
||||||
AI Arena
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span
|
|
||||||
id="connectionBadge"
|
|
||||||
class="badge muted"
|
|
||||||
>
|
|
||||||
Solo
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<link rel="icon" type="image/png" href="https://cdn-icons-png.flaticon.com/512/823/823301.png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-shell">
|
||||||
|
<header class="main-header">
|
||||||
|
<h1><span class="chess-icon">♞</span> Chess Party</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<main class="app-grid">
|
||||||
<main class="layout">
|
<!-- Левая часть: Игровая доска -->
|
||||||
|
<section class="board-panel panel">
|
||||||
<section class="game-area">
|
<div class="board-toolbar">
|
||||||
|
<div class="mode-info">
|
||||||
<div class="players-row">
|
<p class="label">Текущий режим</p>
|
||||||
|
<h2 id="modeBadge">AI Арена</h2>
|
||||||
<div class="player-card">
|
|
||||||
|
|
||||||
<div class="avatar black">
|
|
||||||
♟
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="toolbar-actions">
|
||||||
<div class="player-info">
|
<button id="newGameToolbarButton" class="secondary-button" type="button">Новая игра</button>
|
||||||
|
<button id="flipBoardButton" class="icon-button" type="button" title="Перевернуть доску">
|
||||||
<span class="player-side">
|
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><path d="M7 16V4m0 0L3 8m4-4l4 4m6 4v12m0 0l4-4m-4 4l-4-4"/></svg>
|
||||||
BLACK
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<strong id="blackPlayerLabel">
|
|
||||||
Computer
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
id="blackClock"
|
|
||||||
class="clock"
|
|
||||||
>
|
|
||||||
00:00
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="vs">
|
|
||||||
VS
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="player-card">
|
|
||||||
|
|
||||||
<div class="avatar white">
|
|
||||||
♙
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="player-info">
|
|
||||||
|
|
||||||
<span class="player-side">
|
|
||||||
WHITE
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<strong id="whitePlayerLabel">
|
|
||||||
You
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
id="whiteClock"
|
|
||||||
class="clock active"
|
|
||||||
>
|
|
||||||
00:00
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="board-wrapper">
|
|
||||||
|
|
||||||
<div
|
|
||||||
id="board"
|
|
||||||
class="board"
|
|
||||||
aria-label="Chess board"
|
|
||||||
></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="game-status panel">
|
|
||||||
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<span class="small-label">
|
|
||||||
STATUS
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<strong id="statusMessage">
|
|
||||||
White to move
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span
|
|
||||||
id="turnBadge"
|
|
||||||
class="turn-badge"
|
|
||||||
>
|
|
||||||
White to move
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="game-actions">
|
|
||||||
|
|
||||||
<button
|
|
||||||
id="resignButton"
|
|
||||||
class="action-button danger"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
🏳
|
|
||||||
<span>
|
|
||||||
Сдаться
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
|
<button id="copyInviteButton" class="secondary-button hidden" type="button">Инвайт</button>
|
||||||
<button
|
</div>
|
||||||
id="drawButton"
|
|
||||||
class="action-button draw"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
🤝
|
|
||||||
<span>
|
|
||||||
Предложить ничью
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
id="rematchButton"
|
|
||||||
class="action-button"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
🔄
|
|
||||||
<span>
|
|
||||||
Реванш
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
id="flipBoardButton"
|
|
||||||
class="action-button"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
↻
|
|
||||||
<span>
|
|
||||||
Перевернуть
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="board-stage">
|
||||||
<div
|
<div id="board" class="board" aria-label="Шахматная доска"></div>
|
||||||
id="drawRequest"
|
|
||||||
class="draw-request hidden"
|
|
||||||
>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<strong>
|
|
||||||
Предложена ничья
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
<span id="drawRequestName">
|
|
||||||
Player предлагает ничью
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="draw-buttons">
|
<div class="status-strip">
|
||||||
|
<div class="status-text">
|
||||||
<button
|
<p class="label">Статус игры</p>
|
||||||
id="acceptDrawButton"
|
<p id="statusMessage" class="status-message">Загрузка доски...</p>
|
||||||
class="primary-button"
|
</div>
|
||||||
type="button"
|
<div class="status-meta">
|
||||||
>
|
<span id="turnBadge" class="status-chip turn-white">Ход белых</span>
|
||||||
Принять
|
<span id="connectionBadge" class="status-chip connection-solo">Соло</span>
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
id="declineDrawButton"
|
|
||||||
class="secondary-button"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Отклонить
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Правая часть: Управление -->
|
||||||
<aside class="sidebar">
|
<aside class="sidebar">
|
||||||
|
|
||||||
|
|
||||||
<section class="panel">
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
<div class="section-title">
|
<p class="label">Настройки</p>
|
||||||
|
<h3>Выберите режим</h3>
|
||||||
<span class="eyebrow">
|
|
||||||
GAME MODE
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<h2>
|
|
||||||
Choose your game
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="mode-switcher">
|
||||||
<div class="mode-buttons">
|
<button id="modeAiButton" class="mode-button active" type="button">С Компьютером</button>
|
||||||
|
<button id="modePartyButton" class="mode-button" type="button">С Другом</button>
|
||||||
<button
|
|
||||||
id="modeAiButton"
|
|
||||||
class="mode-button active"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span class="mode-icon">
|
|
||||||
🤖
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
<strong>
|
|
||||||
AI
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
<small>
|
|
||||||
Play computer
|
|
||||||
</small>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|
|
||||||
<button
|
|
||||||
id="modePartyButton"
|
|
||||||
class="mode-button"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span class="mode-icon">
|
|
||||||
👥
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
<strong>
|
|
||||||
Party
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
<small>
|
|
||||||
Play with people
|
|
||||||
</small>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<label class="field">
|
<label class="field">
|
||||||
|
<span>Ваше имя</span>
|
||||||
<span>
|
<input id="playerNameInput" type="text" maxlength="24" placeholder="Введите имя..." />
|
||||||
Your name
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="playerNameInput"
|
|
||||||
maxlength="24"
|
|
||||||
placeholder="Enter your name"
|
|
||||||
>
|
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
<!-- Контролы для игры с ИИ -->
|
||||||
<div
|
<div id="aiControls" class="control-stack">
|
||||||
id="aiControls"
|
|
||||||
class="controls"
|
|
||||||
>
|
|
||||||
|
|
||||||
<div class="field-grid">
|
<div class="field-grid">
|
||||||
|
|
||||||
<label class="field">
|
<label class="field">
|
||||||
|
<span>Сложность</span>
|
||||||
<span>
|
|
||||||
AI level
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<select id="aiLevelSelect">
|
<select id="aiLevelSelect">
|
||||||
|
<option value="easy">Легкая</option>
|
||||||
<option value="easy">
|
<option value="intermediate" selected>Средняя</option>
|
||||||
Easy
|
<option value="hard">Сложная</option>
|
||||||
</option>
|
|
||||||
|
|
||||||
<option
|
|
||||||
value="intermediate"
|
|
||||||
selected
|
|
||||||
>
|
|
||||||
Intermediate
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="hard">
|
|
||||||
Hard
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="expert">
|
|
||||||
Expert
|
|
||||||
</option>
|
|
||||||
|
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
|
||||||
<label class="field">
|
<label class="field">
|
||||||
|
<span>Играть за</span>
|
||||||
<span>
|
|
||||||
Play as
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<select id="playerColorSelect">
|
<select id="playerColorSelect">
|
||||||
|
<option value="w" selected>Белых</option>
|
||||||
<option value="w">
|
<option value="b">Черных</option>
|
||||||
White
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="b">
|
|
||||||
Black
|
|
||||||
</option>
|
|
||||||
|
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Выбор контроля времени (AI) -->
|
||||||
<label class="field">
|
<label class="field">
|
||||||
|
<span>Контроль времени</span>
|
||||||
<span>
|
|
||||||
Time control
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<select id="aiClockSelect">
|
<select id="aiClockSelect">
|
||||||
|
<option value="none">Без лимита</option>
|
||||||
<option value="1+0">
|
<option value="1+0">1 + 0 • Bullet</option>
|
||||||
Bullet · 1+0
|
<option value="3+0">3 + 0 • Blitz</option>
|
||||||
</option>
|
<option value="3+2">3 + 2 • Blitz</option>
|
||||||
|
<option value="5+0">5 + 0 • Blitz</option>
|
||||||
<option value="3+2">
|
<option value="5+3">5 + 3 • Blitz</option>
|
||||||
Blitz · 3+2
|
<option value="10+0" selected>10 + 0 • Rapid</option>
|
||||||
</option>
|
<option value="15+10">15 + 10 • Rapid</option>
|
||||||
|
<option value="30+0">30 + 0 • Classical</option>
|
||||||
<option value="5+3">
|
<option value="30+20">30 + 20 • Classical</option>
|
||||||
Blitz · 5+3
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option
|
|
||||||
value="10+0"
|
|
||||||
selected
|
|
||||||
>
|
|
||||||
Rapid · 10+0
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="15+10">
|
|
||||||
Rapid · 15+10
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="30+20">
|
|
||||||
Classical · 30+20
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="none">
|
|
||||||
Без часов
|
|
||||||
</option>
|
|
||||||
|
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
<button id="startAiButton" class="primary-button" type="button">Начать игру с ИИ</button>
|
||||||
<button
|
|
||||||
id="startAiButton"
|
|
||||||
class="primary-button large"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
New AI Game
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Контролы для игры с другом -->
|
||||||
<div
|
<div id="partyControls" class="control-stack hidden">
|
||||||
id="partyControls"
|
<div class="field-grid">
|
||||||
class="controls hidden"
|
<button id="createPartyButton" class="primary-button" type="button">Создать комнату</button>
|
||||||
>
|
<button id="newPartyGameButton" class="secondary-button hidden" type="button">Новая игра</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<label class="field">
|
<label class="field">
|
||||||
|
<span>Код комнаты</span>
|
||||||
<span>
|
<div class="join-row">
|
||||||
Time control
|
<input id="partyCodeInput" type="text" maxlength="6" placeholder="ABC123" />
|
||||||
</span>
|
<button id="joinPartyButton" class="secondary-button" type="button">Войти</button>
|
||||||
|
</div>
|
||||||
<select id="partyClockSelect">
|
|
||||||
|
|
||||||
<option value="1+0">
|
|
||||||
Bullet · 1+0
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="3+2">
|
|
||||||
Blitz · 3+2
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="5+3">
|
|
||||||
Blitz · 5+3
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option
|
|
||||||
value="10+0"
|
|
||||||
selected
|
|
||||||
>
|
|
||||||
Rapid · 10+0
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="15+10">
|
|
||||||
Rapid · 15+10
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="30+20">
|
|
||||||
Classical · 30+20
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="none">
|
|
||||||
Без часов
|
|
||||||
</option>
|
|
||||||
|
|
||||||
</select>
|
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
<!-- Выбор контроля времени (Мультиплеер) -->
|
||||||
|
<label class="field" id="partyClockContainer">
|
||||||
|
<span>Контроль времени (при создании)</span>
|
||||||
|
<select id="partyClockSelect">
|
||||||
|
<option value="none">Без лимита</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
|
<button id="leavePartyButton" class="ghost-button hidden" type="button">Покинуть комнату</button>
|
||||||
id="createPartyButton"
|
<p id="partySummary" class="muted-copy">
|
||||||
class="primary-button large"
|
Создайте комнату, чтобы играть белыми. Следующий игрок присоединится за черных.
|
||||||
type="button"
|
</p>
|
||||||
>
|
|
||||||
Create Party
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="join-box">
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="partyCodeInput"
|
|
||||||
maxlength="6"
|
|
||||||
placeholder="PARTY CODE"
|
|
||||||
>
|
|
||||||
|
|
||||||
<button
|
|
||||||
id="joinPartyButton"
|
|
||||||
class="secondary-button"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Join
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<button
|
|
||||||
id="copyInviteButton"
|
|
||||||
class="secondary-button hidden full"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
🔗 Copy Invite
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|
|
||||||
<button
|
|
||||||
id="leavePartyButton"
|
|
||||||
class="ghost-button hidden"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Leave Party
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
id="partySummary"
|
|
||||||
class="party-summary"
|
|
||||||
>
|
|
||||||
Create a party to play with another person.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<section class="panel">
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
<div class="section-title">
|
<p class="label">Участники</p>
|
||||||
|
<h3>Стол и зрители</h3>
|
||||||
<span class="eyebrow">
|
|
||||||
PARTY
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<h2>
|
|
||||||
Players & spectators
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="roster-grid">
|
||||||
<div class="roster">
|
<!-- Белые -->
|
||||||
|
<div class="roster-card white-player">
|
||||||
<div class="roster-item">
|
<div class="roster-info">
|
||||||
|
<span class="roster-role">Белые</span>
|
||||||
<span class="piece-dot white-dot">
|
<strong id="whitePlayerLabel">Свободно</strong>
|
||||||
♙
|
</div>
|
||||||
</span>
|
<!-- Часы белых -->
|
||||||
|
<div id="whiteClock" class="player-clock">10:00</div>
|
||||||
<div>
|
|
||||||
|
|
||||||
<small>
|
|
||||||
WHITE
|
|
||||||
</small>
|
|
||||||
|
|
||||||
<strong id="rosterWhite">
|
|
||||||
You
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Черные -->
|
||||||
|
<div class="roster-card black-player">
|
||||||
|
<div class="roster-info">
|
||||||
|
<span class="roster-role">Черные</span>
|
||||||
|
<strong id="blackPlayerLabel">Компьютер</strong>
|
||||||
|
</div>
|
||||||
|
<!-- Часы черных -->
|
||||||
|
<div id="blackClock" class="player-clock">10:00</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="spectator-panel">
|
||||||
<div class="roster-item">
|
|
||||||
|
|
||||||
<span class="piece-dot black-dot">
|
|
||||||
♟
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<small>
|
|
||||||
BLACK
|
|
||||||
</small>
|
|
||||||
|
|
||||||
<strong id="rosterBlack">
|
|
||||||
Computer
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="spectator-header">
|
<div class="spectator-header">
|
||||||
|
<p class="label">Зрители</p>
|
||||||
<span>
|
<span id="spectatorCount" class="badge">0 / 20</span>
|
||||||
👁 Spectators
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<strong id="spectatorCount">
|
|
||||||
0 / 20
|
|
||||||
</strong>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<ul id="spectatorList" class="spectator-list">
|
||||||
|
<li class="empty-state">Пока никого нет</li>
|
||||||
<ul
|
|
||||||
id="spectatorList"
|
|
||||||
class="spectator-list"
|
|
||||||
>
|
|
||||||
<li>
|
|
||||||
No spectators yet
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
<section
|
<div class="panel-head">
|
||||||
id="chatPanel"
|
<p class="label">Взятые фигуры</p>
|
||||||
class="panel chat-panel"
|
<h3>Материал</h3>
|
||||||
>
|
|
||||||
|
|
||||||
<div class="section-title">
|
|
||||||
|
|
||||||
<span class="eyebrow">
|
|
||||||
LIVE CHAT
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<h2>
|
|
||||||
💬 Room chat
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="captured-grid">
|
||||||
|
<div class="captured-box">
|
||||||
<div
|
<p class="captured-label">Белые забрали</p>
|
||||||
id="chatMessages"
|
<div id="capturedByWhite" class="captured-row"></div>
|
||||||
class="chat-messages"
|
</div>
|
||||||
>
|
<div class="captured-box">
|
||||||
|
<p class="captured-label">Черные забрали</p>
|
||||||
<div class="chat-empty">
|
<div id="capturedByBlack" class="captured-row"></div>
|
||||||
Chat becomes available in Party mode.
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<form
|
|
||||||
id="chatForm"
|
|
||||||
class="chat-form"
|
|
||||||
>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="chatInput"
|
|
||||||
maxlength="300"
|
|
||||||
autocomplete="off"
|
|
||||||
placeholder="Write a message..."
|
|
||||||
>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="send-button"
|
|
||||||
>
|
|
||||||
→
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<p class="label">История ходов</p>
|
||||||
|
<h3>Запись партии</h3>
|
||||||
|
</div>
|
||||||
|
<ol id="moveHistory" class="move-history"></ol>
|
||||||
|
</section>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
|
<a href="https://github.com/ВАШ_НИК" target="_blank" rel="noopener noreferrer" class="github-link">
|
||||||
<span>
|
<img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub" class="github-icon">
|
||||||
♟ Chess Party
|
</a>
|
||||||
</span>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
AI · Multiplayer · Chat · Chess Clock
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
id="promotionDialog"
|
|
||||||
class="modal hidden"
|
|
||||||
>
|
|
||||||
|
|
||||||
<div class="modal-card">
|
|
||||||
|
|
||||||
<span class="eyebrow">
|
|
||||||
PROMOTION
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<h2>
|
|
||||||
Choose a piece
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div
|
|
||||||
id="promotionOptions"
|
|
||||||
class="promotion-options"
|
|
||||||
></div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<!-- UI Уведомления и Модальные окна -->
|
||||||
|
<div id="toastHost" class="toast-host" aria-live="polite" aria-atomic="true"></div>
|
||||||
|
|
||||||
|
<div id="promotionDialog" class="modal hidden" role="dialog" aria-modal="true">
|
||||||
|
<div class="modal-card">
|
||||||
|
<p class="label">Превращение</p>
|
||||||
|
<h3>Выберите фигуру</h3>
|
||||||
|
<div id="promotionOptions" class="promotion-options"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<script type="module" src="/js/app.js"></script>
|
||||||
id="toastHost"
|
</body>
|
||||||
class="toast-host"
|
|
||||||
></div>
|
|
||||||
|
|
||||||
|
|
||||||
<script
|
|
||||||
type="module"
|
|
||||||
src="/js/app.js"
|
|
||||||
></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user