Update home page
This commit is contained in:
jheaps
@@ -5,10 +5,11 @@
|
||||
Layout = "_Layout";
|
||||
}
|
||||
|
||||
<div id="Header">
|
||||
<header id="Header">
|
||||
<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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="WelcomeMessage"></div>
|
||||
|
||||
@@ -40,23 +41,21 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ChessProject" class="projectContainer">
|
||||
<div class="displayBox diagonal-section-left">
|
||||
<a target="_blank" href="https://github.com/JoshHeaps/OnlineChess">
|
||||
<img id="ChessImage" class="projectImage projectImageLeft" src="/images/Chess.jpg" title="Chessboard"/>
|
||||
</a>
|
||||
</div>
|
||||
<div id="ChessText" class="projectTextRight">
|
||||
<h2 id="ChessTitle" class="projectHeaderRight projectHeader">Chess</h2>
|
||||
<p id="ChessDescription" class="projectDescriptionRight projectDescription">
|
||||
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 id="DemosBox" class="displayBox">
|
||||
<h2 id="DemoHeader">Demos</h2>
|
||||
<div id="buttonWrapper">
|
||||
<button id="ChessDemo" class="demoButton" onclick="window.location.href='/chess'">
|
||||
Play Chess
|
||||
</button>
|
||||
<button id="MoreFiller" class="demoButton">
|
||||
More coming soon...
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="Contacts">
|
||||
<footer id="Contacts">
|
||||
<svg viewBox="0 0 16 16" class="social-icon">
|
||||
<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>
|
||||
@@ -81,7 +80,7 @@
|
||||
<rect width="100%" height="100%" fill="transparent" />
|
||||
</a>
|
||||
</svg>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@section Styles {
|
||||
<link href="/css/home/site.css?v=@ViewData["cssVersion"]" rel="stylesheet" type="text/css" />
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
@@ -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();
|
||||
|
||||
|
||||
@@ -38,3 +38,7 @@
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#chessBoard.flipped {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -32,3 +32,36 @@
|
||||
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;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -57,4 +57,11 @@ function showClickedContents(option) {
|
||||
inline: "nearest"
|
||||
});
|
||||
}
|
||||
else if (option === 'demos') {
|
||||
document.querySelector("#DemosBox").scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
inline: "nearest"
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user