119 lines
4.6 KiB
Plaintext
119 lines
4.6 KiB
Plaintext
@page
|
|
@model JoshHeaps.Net.Pages.ChessModel
|
|
@{
|
|
Layout = "_Layout";
|
|
ViewData["Title"] = "Chess";
|
|
}
|
|
|
|
<div id="chessContainer">
|
|
<section id="boardArea">
|
|
<div class="playerBar" id="topPlayerBar">
|
|
<span class="playerDot black"></span>
|
|
<span class="playerName">Opponent</span>
|
|
<div class="capturedTray" id="captured-top"></div>
|
|
<span class="advantage" id="advantage-top"></span>
|
|
</div>
|
|
|
|
<div id="chessBoard">
|
|
<!-- Placeholder squares -->
|
|
@for (int i = 0; i < 64; i++)
|
|
{
|
|
<div id="square-@i" class="chessSquare @( (i + i / 8) % 2 == 0 ? "light" : "dark" )"></div>
|
|
}
|
|
</div>
|
|
|
|
<div class="playerBar" id="bottomPlayerBar">
|
|
<span class="playerDot white"></span>
|
|
<span class="playerName">You</span>
|
|
<div class="capturedTray" id="captured-bottom"></div>
|
|
<span class="advantage" id="advantage-bottom"></span>
|
|
</div>
|
|
</section>
|
|
|
|
<aside id="gamePanel">
|
|
<header class="panelHeader">
|
|
<span class="panelLogo">♞</span>
|
|
<h1>Chess</h1>
|
|
<button id="menuClose" class="iconBtn" aria-label="Close menu" onclick="closeMenu()">×</button>
|
|
</header>
|
|
|
|
<div id="moveList">
|
|
<p class="movePlaceholder">Moves will appear here once a game begins.</p>
|
|
</div>
|
|
|
|
<div id="statusLine">Start a game to play.</div>
|
|
|
|
<div id="panelButtons">
|
|
<button id="startGameBtn" class="btn btn-primary" onclick="startNewGame()">New Game</button>
|
|
<button id="startCPUGame" class="btn btn-secondary" onclick="startCPUGame()">Play vs CPU</button>
|
|
<button id="copyPgnBtn" class="btn btn-ghost" onclick="copyPgn()" style="display: none">Copy PGN</button>
|
|
<a id="watchLink" href="/watch">Watch other games →</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<div id="menuBackdrop" onclick="closeMenu()"></div>
|
|
|
|
<div id="mobileBar">
|
|
<span id="mobileStatus">Start a game to play.</span>
|
|
<button id="menuToggle" class="btn btn-primary" onclick="toggleMenu()">Menu</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="promotionModal" style="display: none;">
|
|
<p>Promote your pawn to:</p>
|
|
<div id="promotionBtnContainer">
|
|
<button onclick="selectPromotion(4)">
|
|
<img src="/images/Chess Images/WhiteQueen.svg" alt="Queen" />
|
|
</button>
|
|
<button onclick="selectPromotion(1)">
|
|
<img src="/images/Chess Images/WhiteRook.svg" alt="Rook" />
|
|
</button>
|
|
<button onclick="selectPromotion(3)">
|
|
<img src="/images/Chess Images/WhiteBishop.svg" alt="Bishop" />
|
|
</button>
|
|
<button onclick="selectPromotion(2)">
|
|
<img src="/images/Chess Images/WhiteKnight.svg" alt="Knight" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="difficultyModal" style="display: none;">
|
|
<p>Set bot difficulty to:</p>
|
|
<div id="difficultyButtonContainer">
|
|
@for (int i = 1; i <= 20; i++)
|
|
{
|
|
<button onclick="selectDifficulty(@i)">
|
|
@i
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="colorModal" style="display: none;">
|
|
<p>Play as:</p>
|
|
<div id="colorButtonContainer">
|
|
<button onclick="selectColor('white')">White</button>
|
|
<button onclick="selectColor('black')">Black</button>
|
|
<button onclick="selectColor('random')">Random</button>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script src="~/js/signalr/signalr.min.js"></script>
|
|
<script src="~/js/ChessScripts/GameState.js?v=@ViewData["cssVersion"]"></script>
|
|
<script src="~/js/ChessScripts/ChessUtils.js?v=@ViewData["cssVersion"]"></script>
|
|
<script src="~/js/ChessScripts/ChessAPI.js?v=@ViewData["cssVersion"]"></script>
|
|
<script src="~/js/ChessScripts/ChessSignalR.js?v=@ViewData["cssVersion"]"></script>
|
|
<script src="~/js/ChessScripts/ChessInteractions.js?v=@ViewData["cssVersion"]"></script>
|
|
<script src="~/js/ChessScripts/ChessBoard.js?v=@ViewData["cssVersion"]"></script>
|
|
<script src="~/js/ChessScripts/ChessModals.js?v=@ViewData["cssVersion"]"></script>
|
|
<script src="~/js/ChessScripts/chessMain.js?v=@ViewData["cssVersion"]"></script>
|
|
}
|
|
|
|
@section Styles {
|
|
<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=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="~/css/chess/game.css?v=@ViewData["cssVersion"]" />
|
|
<link rel="stylesheet" href="~/css/chess/site.css?v=@ViewData["cssVersion"]" />
|
|
} |