From 79a37c911d44b4c399d27207863f3d75a1d59eca Mon Sep 17 00:00:00 2001 From: jheaps Date: Thu, 27 Mar 2025 15:03:21 -0600 Subject: [PATCH] Update home page --- JoshHeaps.Net/Pages/Index.cshtml | 31 +++++++++-------- JoshHeaps.Net/Pages/_Layout.cshtml | 2 +- JoshHeaps.Net/Program.cs | 5 ++- JoshHeaps.Net/wwwroot/css/chess/game.css | 4 +++ JoshHeaps.Net/wwwroot/css/chess/site.css | 8 +++++ JoshHeaps.Net/wwwroot/css/home/site.css | 33 +++++++++++++++++++ .../wwwroot/js/ChessScripts/chessLogic.js | 25 +++++++++++--- JoshHeaps.Net/wwwroot/js/utils.js | 7 ++++ 8 files changed, 93 insertions(+), 22 deletions(-) diff --git a/JoshHeaps.Net/Pages/Index.cshtml b/JoshHeaps.Net/Pages/Index.cshtml index 465529b..3f329cb 100644 --- a/JoshHeaps.Net/Pages/Index.cshtml +++ b/JoshHeaps.Net/Pages/Index.cshtml @@ -5,10 +5,11 @@ Layout = "_Layout"; } - +
@@ -40,23 +41,21 @@ + -
-
- - - -
-
-

Chess

-

- As someone who loves chess, I wanted to create a chess game that I could play with my friends and family. This project is a work in progress, as currently it can only be played locally. It was built in C# on .NET 8.0, using winforms, because I like a challenge. I plan to add online multiplayer functionality in the future. -

-
+
+

Demos

+
+ +
- + @section Styles { diff --git a/JoshHeaps.Net/Pages/_Layout.cshtml b/JoshHeaps.Net/Pages/_Layout.cshtml index 51ec811..9ba0d4c 100644 --- a/JoshHeaps.Net/Pages/_Layout.cshtml +++ b/JoshHeaps.Net/Pages/_Layout.cshtml @@ -1,6 +1,6 @@ @{ Layout = null; - ViewData["cssVersion"] = "1.0.0"; // <--- change this once to bust cache + ViewData["cssVersion"] = "1.0.1"; // <--- change this once to bust cache } diff --git a/JoshHeaps.Net/Program.cs b/JoshHeaps.Net/Program.cs index 4f34166..8829e08 100644 --- a/JoshHeaps.Net/Program.cs +++ b/JoshHeaps.Net/Program.cs @@ -7,7 +7,10 @@ var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddRazorPages(); var configuration = builder.Configuration; -_ = Run(configuration); +Task updateIpTask; + +if (!builder.Environment.IsDevelopment()) + updateIpTask = Run(configuration); builder.Services.AddControllers(); diff --git a/JoshHeaps.Net/wwwroot/css/chess/game.css b/JoshHeaps.Net/wwwroot/css/chess/game.css index e22f2ad..87c5b16 100644 --- a/JoshHeaps.Net/wwwroot/css/chess/game.css +++ b/JoshHeaps.Net/wwwroot/css/chess/game.css @@ -37,4 +37,8 @@ border: 4px dashed red; box-sizing: border-box; cursor: pointer; +} + +#chessBoard.flipped { + transform: rotate(180deg); } \ No newline at end of file diff --git a/JoshHeaps.Net/wwwroot/css/chess/site.css b/JoshHeaps.Net/wwwroot/css/chess/site.css index b99e705..ff1f9bd 100644 --- a/JoshHeaps.Net/wwwroot/css/chess/site.css +++ b/JoshHeaps.Net/wwwroot/css/chess/site.css @@ -13,6 +13,7 @@ border: 0px; cursor: pointer; order: 1; + padding: 2vh; } #chessContainer { @@ -49,6 +50,7 @@ flex-direction: column; order: -1; flex-shrink: 1; + font-size: large } #buttonContainer { @@ -88,6 +90,7 @@ grid-row: 1; grid-column: 2; text-align: center; + font-size: x-large; } #buttonContainer { @@ -97,6 +100,11 @@ align-self: start; } + #startGameBtn { + padding: 1vw; + font-size: large; + } + #chessBoard { aspect-ratio: 1 / 1; flex-shrink: 1; diff --git a/JoshHeaps.Net/wwwroot/css/home/site.css b/JoshHeaps.Net/wwwroot/css/home/site.css index cb6c1be..2553864 100644 --- a/JoshHeaps.Net/wwwroot/css/home/site.css +++ b/JoshHeaps.Net/wwwroot/css/home/site.css @@ -31,4 +31,37 @@ text-align: left; padding-left: 10vw; padding-right: 10vw; +} + +#DemosBox { + margin: 10vw; + display: flex; + flex-direction: column; + justify-content: end; + width: 80%; +} + +#DemoHeader { + margin: 0; + color: rgb(212, 212, 212); + font-size: 4vw; +} + +.demoButton { + margin-top: 5vw; + margin-right: 2vw; + padding-top: 0.5vw; + padding-bottom: 0.5vw; + text-align: center; + border: none; + border-radius: 5vw; + width: 25vw; + height: 10vw; + font-size: 2vw; + background-color: rgb(104, 255, 0, 0.39); + cursor: pointer; +} + +#MoreFiller { + cursor: default; } \ No newline at end of file diff --git a/JoshHeaps.Net/wwwroot/js/ChessScripts/chessLogic.js b/JoshHeaps.Net/wwwroot/js/ChessScripts/chessLogic.js index baabee8..6ddaf56 100644 --- a/JoshHeaps.Net/wwwroot/js/ChessScripts/chessLogic.js +++ b/JoshHeaps.Net/wwwroot/js/ChessScripts/chessLogic.js @@ -1,5 +1,6 @@ let currentGameId = null; let currentPlayerId = null; +let currentPlayerIsWhite = null; let signalRConnection = null; let selectedPiece = null; let legalMoves = []; @@ -17,6 +18,7 @@ async function startNewGame() { currentGameId = gameData.gameId; currentPlayerId = gameData.id; + currentPlayerIsWhite = gameData.isWhite; console.log("🆕 Game started:", currentGameId); // Build and start SignalR connection @@ -50,6 +52,7 @@ async function startNewGame() { // Render initial state const gameState = await fetch(`/api/chess/${currentGameId}`); const data = await gameState.json(); + renderPieces(data.pieces); } @@ -62,7 +65,9 @@ function renderPieces(pieces) { // Place each piece pieces.forEach(piece => { - const index = piece.row * 8 + piece.col; + const [r, c] = flipCoordinates(piece.row, piece.col); + + const index = r * 8 + c; const square = document.getElementById(`square-${index}`); if (!square) return; @@ -122,12 +127,15 @@ async function handlePieceClick(piece) { } function highlightSelected(row, col) { - document.getElementById(`square-${row * 8 + col}`).classList.add("selected"); + const [r, c] = flipCoordinates(row, col); + const index = r * 8 + c; + document.getElementById(`square-${index}`).classList.add("selected"); } function highlightLegalMoves(moves) { moves.forEach(move => { - const index = move.row * 8 + move.col; + const [r, c] = flipCoordinates(move.row, move.col); + const index = r * 8 + c; const square = document.getElementById(`square-${index}`); square.classList.add("legal"); @@ -136,13 +144,15 @@ function highlightLegalMoves(moves) { if (img) img.onclick = null; // Let the square itself handle the move - square.onclick = () => handleMove(move.row, move.col); + square.onclick = () => handleMove(r, c); }); } async function handleMove(targetRow, targetCol) { if (!selectedPiece) return; + [targetRow, targetCol] = flipCoordinates(targetRow, targetCol); + const moveDto = { GameId: currentGameId, PlayerId: currentPlayerId, @@ -215,5 +225,12 @@ function alertGameStatusChange(moveResultDto) { }, 500); } +function flipCoordinates(row, col) { + if (!currentPlayerIsWhite) { + return [7 - row, 7 - col]; + } + return [row, col]; +} + console.log("chessLogic.js loaded"); window.startNewGame = startNewGame; \ No newline at end of file diff --git a/JoshHeaps.Net/wwwroot/js/utils.js b/JoshHeaps.Net/wwwroot/js/utils.js index ef8ca00..0b75136 100644 --- a/JoshHeaps.Net/wwwroot/js/utils.js +++ b/JoshHeaps.Net/wwwroot/js/utils.js @@ -57,4 +57,11 @@ function showClickedContents(option) { inline: "nearest" }); } + else if (option === 'demos') { + document.querySelector("#DemosBox").scrollIntoView({ + behavior: "smooth", + block: "start", + inline: "nearest" + }); + } } \ No newline at end of file