jheaps/JoshHeaps.Net
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update home page

Browse Source
This commit is contained in:
jheaps
2025-03-27 15:03:21 -06:00
parent 0bb3840aa7
commit 79a37c911d
8 changed files with 93 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
JoshHeaps.Net/Pages/Index.cshtml
+15 -16
View File
@@ -5,10 +5,11 @@
Layout = "_Layout"; Layout = "_Layout";
} }
<div id="Header"> <header id="Header">
<a class="headerOption" onclick="showClickedContents('projects')">./ Projects</a> <a class="headerOption" onclick="showClickedContents('projects')">./ Projects</a>
<a class="headerOption" onclick="showClickedContents('demos')">./ Demos</a>
<a class="headerOption" onclick="showClickedContents('contact')">./ Contact me</a> <a class="headerOption" onclick="showClickedContents('contact')">./ Contact me</a>
</div> </header>
<div id="WelcomeMessage"></div> <div id="WelcomeMessage"></div>
@@ -40,23 +41,21 @@
</a> </a>
</div> </div>
</div> </div>
</div>
<div id="ChessProject" class="projectContainer"> <div id="DemosBox" class="displayBox">
<div class="displayBox diagonal-section-left"> <h2 id="DemoHeader">Demos</h2>
<a target="_blank" href="https://github.com/JoshHeaps/OnlineChess"> <div id="buttonWrapper">
<img id="ChessImage" class="projectImage projectImageLeft" src="/images/Chess.jpg" title="Chessboard"/> <button id="ChessDemo" class="demoButton" onclick="window.location.href='/chess'">
</a> Play Chess
</div> </button>
<div id="ChessText" class="projectTextRight"> <button id="MoreFiller" class="demoButton">
<h2 id="ChessTitle" class="projectHeaderRight projectHeader">Chess</h2> More coming soon...
<p id="ChessDescription" class="projectDescriptionRight projectDescription"> </button>
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.
</p>
</div>
</div> </div>
</div> </div>
<div id="Contacts"> <footer id="Contacts">
<svg viewBox="0 0 16 16" class="social-icon"> <svg viewBox="0 0 16 16" class="social-icon">
<a id="GithubLink" class="social-link" href="https://github.com/JoshHeaps" target="_blank"> <a id="GithubLink" class="social-link" href="https://github.com/JoshHeaps" target="_blank">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path> <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
@@ -81,7 +80,7 @@
<rect width="100%" height="100%" fill="transparent" /> <rect width="100%" height="100%" fill="transparent" />
</a> </a>
</svg> </svg>
</div> </footer>
@section Styles { @section Styles {
<link href="/css/home/site.css?v=@ViewData["cssVersion"]" rel="stylesheet" type="text/css" /> <link href="/css/home/site.css?v=@ViewData["cssVersion"]" rel="stylesheet" type="text/css" />
JoshHeaps.Net/Pages/_Layout.cshtml
+1 -1
View File
@@ -1,6 +1,6 @@
@{ @{
Layout = null; Layout = null;
ViewData["cssVersion"] = "1.0.0"; // <--- change this once to bust cache ViewData["cssVersion"] = "1.0.1"; // <--- change this once to bust cache
} }
<!DOCTYPE html> <!DOCTYPE html>
JoshHeaps.Net/Program.cs
+4 -1
View File
@@ -7,7 +7,10 @@ var builder = WebApplication.CreateBuilder(args);
// Add services to the container. // Add services to the container.
builder.Services.AddRazorPages(); builder.Services.AddRazorPages();
var configuration = builder.Configuration; var configuration = builder.Configuration;
_ = Run(configuration); Task updateIpTask;
if (!builder.Environment.IsDevelopment())
updateIpTask = Run(configuration);
builder.Services.AddControllers(); builder.Services.AddControllers();
JoshHeaps.Net/wwwroot/css/chess/game.css
+4
View File
@@ -38,3 +38,7 @@
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
} }
#chessBoard.flipped {
transform: rotate(180deg);
}
JoshHeaps.Net/wwwroot/css/chess/site.css
+8
View File
@@ -13,6 +13,7 @@
border: 0px; border: 0px;
cursor: pointer; cursor: pointer;
order: 1; order: 1;
padding: 2vh;
} }
#chessContainer { #chessContainer {
@@ -49,6 +50,7 @@
flex-direction: column; flex-direction: column;
order: -1; order: -1;
flex-shrink: 1; flex-shrink: 1;
font-size: large
} }
#buttonContainer { #buttonContainer {
@@ -88,6 +90,7 @@
grid-row: 1; grid-row: 1;
grid-column: 2; grid-column: 2;
text-align: center; text-align: center;
font-size: x-large;
} }
#buttonContainer { #buttonContainer {
@@ -97,6 +100,11 @@
align-self: start; align-self: start;
} }
#startGameBtn {
padding: 1vw;
font-size: large;
}
#chessBoard { #chessBoard {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
flex-shrink: 1; flex-shrink: 1;
JoshHeaps.Net/wwwroot/css/home/site.css
+33
View File
@@ -32,3 +32,36 @@
padding-left: 10vw; padding-left: 10vw;
padding-right: 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;
}
JoshHeaps.Net/wwwroot/js/ChessScripts/chessLogic.js
+21 -4
View File
@@ -1,5 +1,6 @@
let currentGameId = null; let currentGameId = null;
let currentPlayerId = null; let currentPlayerId = null;
let currentPlayerIsWhite = null;
let signalRConnection = null; let signalRConnection = null;
let selectedPiece = null; let selectedPiece = null;
let legalMoves = []; let legalMoves = [];
@@ -17,6 +18,7 @@ async function startNewGame() {
currentGameId = gameData.gameId; currentGameId = gameData.gameId;
currentPlayerId = gameData.id; currentPlayerId = gameData.id;
currentPlayerIsWhite = gameData.isWhite;
console.log("🆕 Game started:", currentGameId); console.log("🆕 Game started:", currentGameId);
// Build and start SignalR connection // Build and start SignalR connection
@@ -50,6 +52,7 @@ async function startNewGame() {
// Render initial state // Render initial state
const gameState = await fetch(`/api/chess/${currentGameId}`); const gameState = await fetch(`/api/chess/${currentGameId}`);
const data = await gameState.json(); const data = await gameState.json();
renderPieces(data.pieces); renderPieces(data.pieces);
} }
@@ -62,7 +65,9 @@ function renderPieces(pieces) {
// Place each piece // Place each piece
pieces.forEach(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}`); const square = document.getElementById(`square-${index}`);
if (!square) return; if (!square) return;
@@ -122,12 +127,15 @@ async function handlePieceClick(piece) {
} }
function highlightSelected(row, col) { 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) { function highlightLegalMoves(moves) {
moves.forEach(move => { 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}`); const square = document.getElementById(`square-${index}`);
square.classList.add("legal"); square.classList.add("legal");
@@ -136,13 +144,15 @@ function highlightLegalMoves(moves) {
if (img) img.onclick = null; if (img) img.onclick = null;
// Let the square itself handle the move // Let the square itself handle the move
square.onclick = () => handleMove(move.row, move.col); square.onclick = () => handleMove(r, c);
}); });
} }
async function handleMove(targetRow, targetCol) { async function handleMove(targetRow, targetCol) {
if (!selectedPiece) return; if (!selectedPiece) return;
[targetRow, targetCol] = flipCoordinates(targetRow, targetCol);
const moveDto = { const moveDto = {
GameId: currentGameId, GameId: currentGameId,
PlayerId: currentPlayerId, PlayerId: currentPlayerId,
@@ -215,5 +225,12 @@ function alertGameStatusChange(moveResultDto) {
}, 500); }, 500);
} }
function flipCoordinates(row, col) {
if (!currentPlayerIsWhite) {
return [7 - row, 7 - col];
}
return [row, col];
}
console.log("chessLogic.js loaded"); console.log("chessLogic.js loaded");
window.startNewGame = startNewGame; window.startNewGame = startNewGame;
JoshHeaps.Net/wwwroot/js/utils.js
+7
View File
@@ -57,4 +57,11 @@ function showClickedContents(option) {
inline: "nearest" inline: "nearest"
}); });
} }
else if (option === 'demos') {
document.querySelector("#DemosBox").scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest"
});
}
} }