208 lines
9.8 KiB
HTML
208 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chess Game</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="outer-container">
|
|
<div class="container">
|
|
<main>
|
|
<div class="game-area">
|
|
<div class="board-container">
|
|
<div class="board-wrapper">
|
|
<div class="coordinates top">
|
|
<span>a</span><span>b</span><span>c</span><span>d</span>
|
|
<span>e</span><span>f</span><span>g</span><span>h</span>
|
|
</div>
|
|
<div class="coordinates left">
|
|
<span>8</span><span>7</span><span>6</span><span>5</span>
|
|
<span>4</span><span>3</span><span>2</span><span>1</span>
|
|
</div>
|
|
<div id="board"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="info-panel">
|
|
<div class="status-indicators">
|
|
<div class="indicator" id="server-indicator" data-tooltip="Server">
|
|
<span class="light" data-status="unknown">●</span>
|
|
</div>
|
|
<div class="indicator" id="storage-indicator" data-tooltip="Storage">
|
|
<span class="light" data-status="unknown">●</span>
|
|
</div>
|
|
<div class="indicator" id="turn-indicator" data-tooltip="Turn">
|
|
<span class="light turn-light" data-status="white">●</span>
|
|
</div>
|
|
<div class="indicator auth-indicator" id="auth-indicator" data-tooltip="Auth">
|
|
<span class="light" data-status="anonymous">●</span>
|
|
</div>
|
|
<div class="error-flash-overlay" id="error-flash-overlay">
|
|
<div class="error-flash-message" id="error-flash-message"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button id="new-game-btn" class="btn btn-primary">New</button>
|
|
<button id="undo-btn" class="btn btn-secondary" disabled>Undo</button>
|
|
<button id="draw-btn" class="btn btn-secondary" title="Offer a draw" disabled>Draw</button>
|
|
<button id="resign-btn" class="btn btn-secondary" title="Resign this game" disabled>Resign</button>
|
|
</div>
|
|
|
|
<div class="move-history-container">
|
|
<button class="copy-btn" id="copy-history" title="Copy PGN">
|
|
<svg viewBox="0 0 24 24" width="16" height="16">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
</button>
|
|
<div id="move-history" class="move-history">
|
|
<div class="move-grid" id="move-grid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Auth Modal -->
|
|
<div id="auth-modal-overlay" class="modal-overlay">
|
|
<div class="modal auth-modal">
|
|
<div class="auth-tabs">
|
|
<button class="auth-tab active" data-tab="login">Login</button>
|
|
<button class="auth-tab" data-tab="register">Register</button>
|
|
</div>
|
|
|
|
<div id="auth-modal-message" class="modal-message"></div>
|
|
|
|
<!-- Login Form -->
|
|
<div id="login-form" class="auth-form">
|
|
<div class="form-group">
|
|
<label for="login-identifier">Username or Email</label>
|
|
<input type="text" id="login-identifier" autocomplete="username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="login-password">Password</label>
|
|
<input type="password" id="login-password" autocomplete="current-password">
|
|
</div>
|
|
<div class="modal-buttons">
|
|
<button id="login-submit-btn" class="btn btn-primary">Login</button>
|
|
<button id="auth-cancel-btn" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Register Form -->
|
|
<div id="register-form" class="auth-form" style="display: none;">
|
|
<div class="form-group">
|
|
<label for="register-username">Username</label>
|
|
<input type="text" id="register-username" autocomplete="username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="register-email">Email (optional)</label>
|
|
<input type="email" id="register-email" autocomplete="email">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="register-password">Password (min 8 chars)</label>
|
|
<input type="password" id="register-password" autocomplete="new-password">
|
|
</div>
|
|
<div class="modal-buttons">
|
|
<button id="register-submit-btn" class="btn btn-primary">Register</button>
|
|
<button id="auth-cancel-btn-2" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Modal: shown instead of the login modal while signed in -->
|
|
<div id="account-overlay" class="modal-overlay">
|
|
<div class="modal account-modal" role="dialog" aria-modal="true" aria-labelledby="account-title">
|
|
<h2 id="account-title">Account</h2>
|
|
<div id="account-modal-message" class="modal-message" role="status" aria-live="polite"></div>
|
|
<p class="account-name">Signed in as <strong id="account-username"></strong></p>
|
|
<div class="modal-buttons">
|
|
<button id="logout-btn" class="btn btn-primary">Log out</button>
|
|
<button id="account-cancel-btn" class="btn btn-secondary">Close</button>
|
|
</div>
|
|
<details class="danger-zone" id="delete-account">
|
|
<summary>Delete account</summary>
|
|
<p>Deletes the account and signs you out. Your name and claim are removed
|
|
from every stored game; games nobody else plays are deleted 24 hours
|
|
after their last move. This cannot be undone.</p>
|
|
<div class="form-group account-form">
|
|
<label for="delete-password">Password</label>
|
|
<input type="password" id="delete-password" autocomplete="current-password">
|
|
</div>
|
|
<div class="modal-buttons">
|
|
<button id="delete-account-btn" class="btn btn-danger">Delete account</button>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overlay Modal -->
|
|
<div id="modal-overlay" class="modal-overlay">
|
|
<div class="modal">
|
|
<h2>New Game</h2>
|
|
<div id="new-game-modal-message" class="modal-message" role="status" aria-live="polite"></div>
|
|
<div class="form-group form-row">
|
|
<span class="group-label" id="player-color-label">Your Color</span>
|
|
<div class="radio-group" role="radiogroup" aria-labelledby="player-color-label">
|
|
<label><input type="radio" name="player-color" value="white" checked><span>White</span></label>
|
|
<label><input type="radio" name="player-color" value="black"><span>Black</span></label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="computer-level">Computer Level: <span id="level-value">10</span></label>
|
|
<input type="range" id="computer-level" min="0" max="20" value="10">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="search-time">Search Time (ms): <span id="time-value">1000</span></label>
|
|
<input type="range" id="search-time" min="100" max="10000" step="100" value="1000">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="starting-fen">Starting Position (FEN)</label>
|
|
<textarea id="starting-fen" class="fen-input" rows="2"
|
|
placeholder="Enter FEN notation">rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1</textarea>
|
|
</div>
|
|
<div class="modal-buttons">
|
|
<button id="start-game-btn" class="btn btn-primary">Start Game</button>
|
|
<button id="cancel-btn" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resign Confirmation -->
|
|
<div id="resign-overlay" class="modal-overlay">
|
|
<div class="modal confirm-modal" role="dialog" aria-modal="true" aria-labelledby="resign-title">
|
|
<h2 id="resign-title">Resign this game?</h2>
|
|
<div class="modal-buttons">
|
|
<button id="resign-confirm-btn" class="btn btn-primary">Resign</button>
|
|
<button id="resign-cancel-btn" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Promotion Modal -->
|
|
<div id="promotion-overlay" class="modal-overlay">
|
|
<div class="modal promotion-modal" role="dialog" aria-modal="true" aria-labelledby="promotion-title">
|
|
<h2 id="promotion-title">Promote to</h2>
|
|
<div class="promotion-choices">
|
|
<button class="promotion-choice" data-piece="q" title="Queen (Q)" aria-label="Queen">♛</button>
|
|
<button class="promotion-choice" data-piece="r" title="Rook (R)" aria-label="Rook">♜</button>
|
|
<button class="promotion-choice" data-piece="b" title="Bishop (B)" aria-label="Bishop">♝</button>
|
|
<button class="promotion-choice" data-piece="n" title="Knight (N)" aria-label="Knight">♞</button>
|
|
</div>
|
|
<div class="modal-buttons">
|
|
<button id="promotion-cancel-btn" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|