fb96963b48
Some checks failed
This commit fixes two bugs: 1. Issue #7: Missing status message DOM element - Added #status-message div to index.html - Added CSS styling with type-based classes (info, success, error) - Enhanced showMessage() to apply type classes for visual styling - Messages auto-hide after 3 seconds with fade-in animation 2. Column resizing visual bug: - Changed grid-template-columns from flexible (1fr 3fr 1fr) - To fixed minimum widths: minmax(200px, 250px) minmax(600px, 3fr) minmax(200px, 250px) - Prevents columns from resizing when content changes (captured pieces, move history) - Maintains stable layout throughout gameplay Tests: - Added status-message.test.js with 10 test cases - Added column-resize.test.js with 8 test cases - Tests verify DOM element existence, CSS styling, auto-hide behavior, and layout stability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
96 lines
3.6 KiB
HTML
96 lines
3.6 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 - HTML5 Chess Application</title>
|
|
|
|
<!-- CSS Files -->
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/board.css">
|
|
<link rel="stylesheet" href="css/pieces.css">
|
|
<link rel="stylesheet" href="css/game-controls.css">
|
|
|
|
<!-- Main Application -->
|
|
<script type="module" src="js/main.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="chess-app">
|
|
<header class="app-header">
|
|
<h1>Chess Game</h1>
|
|
<div class="game-status">
|
|
<span id="current-turn">White's Turn</span>
|
|
<span id="game-state">Active</span>
|
|
<div id="status-message" class="status-message"></div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="game-container">
|
|
<!-- Left Sidebar: Captured Pieces -->
|
|
<aside class="captured-pieces captured-white">
|
|
<h3>Captured by Black</h3>
|
|
<div id="captured-white-pieces" class="captured-list"></div>
|
|
</aside>
|
|
|
|
<!-- Chess Board -->
|
|
<section class="board-section">
|
|
<div id="chess-board" class="chess-board"></div>
|
|
</section>
|
|
|
|
<!-- Right Sidebar: Move History & Controls -->
|
|
<aside class="game-sidebar">
|
|
<div class="move-history-section">
|
|
<h3>Move History</h3>
|
|
<div id="move-history" class="move-history"></div>
|
|
</div>
|
|
|
|
<div class="game-controls">
|
|
<button id="btn-new-game" class="btn btn-primary">New Game</button>
|
|
<button id="btn-undo" class="btn btn-secondary">Undo</button>
|
|
<button id="btn-redo" class="btn btn-secondary">Redo</button>
|
|
<button id="btn-resign" class="btn btn-danger">Resign</button>
|
|
</div>
|
|
|
|
<div class="captured-pieces captured-black">
|
|
<h3>Captured by White</h3>
|
|
<div id="captured-black-pieces" class="captured-list"></div>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
|
|
<!-- Promotion Dialog -->
|
|
<dialog id="promotion-dialog" class="promotion-dialog">
|
|
<h2>Promote Pawn</h2>
|
|
<div class="promotion-choices">
|
|
<button data-piece="queen" class="promotion-piece">
|
|
<span class="piece-icon">♛</span>
|
|
<span>Queen</span>
|
|
</button>
|
|
<button data-piece="rook" class="promotion-piece">
|
|
<span class="piece-icon">♜</span>
|
|
<span>Rook</span>
|
|
</button>
|
|
<button data-piece="bishop" class="promotion-piece">
|
|
<span class="piece-icon">♝</span>
|
|
<span>Bishop</span>
|
|
</button>
|
|
<button data-piece="knight" class="promotion-piece">
|
|
<span class="piece-icon">♞</span>
|
|
<span>Knight</span>
|
|
</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<!-- Game Over Modal -->
|
|
<dialog id="game-over-dialog" class="game-over-dialog">
|
|
<h2 id="game-over-title">Game Over</h2>
|
|
<p id="game-over-message"></p>
|
|
<div class="dialog-actions">
|
|
<button id="btn-dialog-new-game" class="btn btn-primary">New Game</button>
|
|
<button id="btn-dialog-close" class="btn btn-secondary">Close</button>
|
|
</div>
|
|
</dialog>
|
|
</div>
|
|
</body>
|
|
</html>
|