-
- 
-
-
-
-
-
-
+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