From 3b3dec36bb3e0fa68ec6d98dee047ec7f92c5487 Mon Sep 17 00:00:00 2001 From: Vighnesh Brahme Date: Wed, 4 Dec 2024 20:14:32 +0530 Subject: [PATCH 1/8] removed interactionMode and other fixes --- src/components/ChessWrapper/ChessWrapper.css | 68 ++-- src/components/ChessWrapper/ChessWrapper.tsx | 7 - src/components/Chessboard/Chessboard.tsx | 401 +++++++------------ src/components/Tile/Tile.tsx | 3 +- src/components/context/ChessContext.tsx | 9 - src/mediaQueries.css | 4 +- 6 files changed, 176 insertions(+), 316 deletions(-) diff --git a/src/components/ChessWrapper/ChessWrapper.css b/src/components/ChessWrapper/ChessWrapper.css index 2b8f4e6..767736d 100644 --- a/src/components/ChessWrapper/ChessWrapper.css +++ b/src/components/ChessWrapper/ChessWrapper.css @@ -1,27 +1,28 @@ .game-layout { display: flex; flex-direction: column; + padding: 20px; } .game-layout > .middle-panel { display: flex; } -.game-layout > .panel-area, .game-layout > .middle-panel > .panel-area { +.game-layout > .panel-area, +.game-layout > .middle-panel > .panel-area { display: flex; align-items: center; justify-content: center; - padding: 4px; } .middle-panels > .player-panel { writing-mode: vertical-rl; height: calc(var(--tile-size) * 8); - width: .5vw; + width: 0.5vw; } .game-layout > .panel-area > .player-panel { - height: .5vw; + height: 0.5vw; width: calc(var(--tile-size) * 8); } @@ -30,7 +31,7 @@ div#left-panel { } .player-panel { - padding: 10px 15px; + padding: 12px; border: 2px solid transparent; border-radius: 10px; display: flex; @@ -39,55 +40,40 @@ div#left-panel { } .game-display { - display: flex; - justify-content: space-around; - align-items: center; - width: fit-content; - margin: 0 auto; - padding: .2vh 3vw; - gap: 10px; - border: 2px solid whitesmoke; - height: var(--tile-size); - border-radius: var(--tile-size); - margin-bottom: 10px; -} - -.game-display > .currentPlayerDisplay { - color: whitesmoke; - padding: 2px 10px; - border-radius: calc(1rem + 2px); -} - -.game-display > .interactionModeToggleDiv { - display: flex; - justify-content: center; - align-items: center; -} - -.game-display > .interactionModeToggleDiv > .interactionModeToggleBtn { - padding: 5px; - border-radius: calc(1rem + 5px); - width: 5vw; - min-width: fit-content; + display: none; } -@media all and (max-width: 768px) { +@media all and (max-width: 700px) { /* phone styles here */ - .game-layout > .panel-area, .game-layout > .middle-panel > .panel-area { - padding: 2px; + .game-layout { + padding: 4vh 4vw; } .player-panel > .player-name { display: none; } - + .middle-panels > .player-panel { padding: 0; - width: 2px; + width: 5px; + border-radius: 1px; } .game-layout > .panel-area > .player-panel { padding: 0; - height: 0; + height: 5px; + border-radius: 1px; + } + + .game-display { + display: flex; + justify-content: center; + align-items: center; + } + + .game-display > .currentPlayerDisplay { + color: whitesmoke; + padding: 2px 10px; + border-radius: calc(1rem + 2px); } } diff --git a/src/components/ChessWrapper/ChessWrapper.tsx b/src/components/ChessWrapper/ChessWrapper.tsx index a1f2ac5..7082b28 100644 --- a/src/components/ChessWrapper/ChessWrapper.tsx +++ b/src/components/ChessWrapper/ChessWrapper.tsx @@ -8,7 +8,6 @@ export default function ChessWrapper({ children: React.ReactNode; }) { const { currentPlayer } = useChessContext(); - const {interactionMode, setInteractionMode} = useChessContext(); const players = [ { name: "Red Player", color: "red", id: "r" }, @@ -25,12 +24,6 @@ export default function ChessWrapper({
{players.find((p) => p.id === currentPlayer)?.name}
-
- -
diff --git a/src/components/Chessboard/Chessboard.tsx b/src/components/Chessboard/Chessboard.tsx index e2efcf3..7bf2062 100644 --- a/src/components/Chessboard/Chessboard.tsx +++ b/src/components/Chessboard/Chessboard.tsx @@ -1,307 +1,198 @@ -import './Chessboard.css' -// import PlayerName from '../PlayerName/PlayerName' -import { Piece, Position } from '../../models' -import Tile from '../Tile/Tile' -import { useEffect, useRef, useState } from 'react' -import { VERTICAL_AXIS, HORIZONTAL_AXIS } from '../../Constants' -import { useChessContext } from '../context/ChessContext' +import "./Chessboard.css"; +import { Piece, Position } from "../../models"; +import Tile from "../Tile/Tile"; +import { useEffect, useRef, useState } from "react"; +import { VERTICAL_AXIS, HORIZONTAL_AXIS } from "../../Constants"; -// Interface deciding the types interface Props { - playMove: (piece: Piece, position: Position) => boolean - pieces: Piece[] + playMove: (piece: Piece, position: Position) => boolean; + pieces: Piece[]; } export default function Chessboard({ playMove, pieces }: Props) { - /** Gets the grid size based on the window size dynamically */ + + // Dynamic grid size calculation const getGridSize = () => { - // basically imitates the same logic as in the css file - const vw = window.innerWidth * 0.9; + const vw = window.innerWidth * 0.8; const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); - - if (window.innerWidth > 768) { - return 2.5 * rem; - } else { - return vw / 14; - } - } + return window.innerWidth > 768 ? 2.5 * rem : vw / 14; + }; const GRID_SIZE = getGridSize(); - - // piece interaction and tracking + + // Piece tracking states const [currentPiece, setCurrentPiece] = useState(null); const [activePieceElement, setActivePieceElement] = useState(null); + const [selectedPieceElement, setSelectedPieceElement] = useState(null); + const [showPossibleMoves, setShowPossibleMoves] = useState(false); + + // board related states and constants + const chessboardRef = useRef(null); + const [boardMetrics, setBoardMetrics] = useState({ + top: 0, left: 0, width: 0, height: 0 + }); + + /** Calculates boundaries of the chessboard */ + const calculateBoundaries = () => { + if (!chessboardRef.current) return null; + + const { left, top, width, height } = boardMetrics; + const sidePortionWidth = 3 * GRID_SIZE; - // board related states - const chessboardRef = useRef(null) - const [boardMetrics, setBoardMetrics] = useState<{ - top: number; - left: number; - width: number; - height: number; - }>({ top: 0, left: 0, width: 0, height: 0 }); - const { interactionMode } = useChessContext(); - const boundaries = useRef({ - centralRegionLeft: 0, - topBottomRegionLeft: 0, - centralRegionRight: 0, - topBottomRegionRight: 0, - centralRegionTop: 0, - centralRegionBottom: 0, - topRegionBottom: 0, - bottomRegionTop: 0, - bottom: 0, - }); // ref object to store boundaries of the chessboard - - // player turn related states - const [playerState, setPlayerState] = useState<'playerIdle' | 'playerMovingPiece'>('playerIdle'); - - // logDebug function for debugging - /* const logDebug = (message: string, data?: any) => { - console.log(`🐞 Chessboard Debug: ${message}`, data || '') - } */ - - useEffect(() => { - // calculates the boundaries of the chessboard only when the chessboard is resized - if (chessboardRef.current && boardMetrics) { - const { top, left, height, width } = boardMetrics; - const sidePortionWidth = 3 * GRID_SIZE; - boundaries.current = { - centralRegionLeft: left, - topBottomRegionLeft: left + sidePortionWidth, - centralRegionRight: left + width, - topBottomRegionRight: left + width - sidePortionWidth, - centralRegionTop: top + sidePortionWidth, - centralRegionBottom: top + height - sidePortionWidth, - topRegionBottom: top + sidePortionWidth, - bottomRegionTop: top + height - sidePortionWidth, - bottom: top + height, - }; - } - }, [boardMetrics, GRID_SIZE]); - + return { + centralRegionLeft: left, + centralRegionRight: left + width, + centralRegionTop: top + sidePortionWidth, + centralRegionBottom: top + height - sidePortionWidth, + topBottomRegionLeft: left + sidePortionWidth, + topBottomRegionRight: left + width - sidePortionWidth, + topRegionBottom: top + sidePortionWidth, + bottomRegionTop: top + height - sidePortionWidth, + bottom: top + height + }; + }; + + // Updates board metrics on resize useEffect(() => { - // updates the offset of the chessboard when the window is resized const updateOffset = () => { - if(chessboardRef.current) { + if (chessboardRef.current) { const rect = chessboardRef.current.getBoundingClientRect(); setBoardMetrics({ top: rect.top, left: rect.left, width: rect.width, height: rect.height - }) + }); } - } + }; updateOffset(); - window.addEventListener('resize', updateOffset); - - return () => window.removeEventListener('resize', updateOffset); - }, []) - - useEffect(() => { - // changes the cursor style of the pieces based on the interaction mode - const cursorClass = interactionMode === 'drag' ? 'cursor-grab' : 'cursor-pointer'; - const pieces = Array.from(document.getElementsByClassName('chess-piece')); - - pieces.forEach((piece) => { - piece.classList.remove('cursor-grab', 'cursor-pointer'); - piece.classList.add(cursorClass); - }); - }, [interactionMode]) - - /** Calculates the grid position of a piece based on the clientX and clientY */ - function calculateGridPosition(clientX: number, clientY: number) { - return { - x: Math.floor((clientX - boardMetrics.left) / GRID_SIZE), - y: Math.floor((boardMetrics.height - (clientY - boardMetrics.top)) / GRID_SIZE) - } - } - - /** loads the grabbed/selected piece Object into the state */ - function getCurrentPieceSetToState(grabX: number, grabY: number) { - const curPiece = pieces.find((p) => p.samePosition(new Position(grabX, grabY))); - curPiece ? setCurrentPiece(curPiece) : setCurrentPiece(null); - } - - /** Handles chess piece grabbing event */ - function grabPiece(e: React.MouseEvent) { - if(interactionMode === 'select') return; - - const chessboard = chessboardRef.current; + window.addEventListener("resize", updateOffset); + return () => window.removeEventListener("resize", updateOffset); + }, []); + + /** Transforms client position to chessboard grid position coordinates */ + const calculateGridPosition = (clientX: number, clientY: number) => ({ + x: Math.floor((clientX - boardMetrics.left) / GRID_SIZE), + y: Math.floor((boardMetrics.height - (clientY - boardMetrics.top)) / GRID_SIZE) + }); + + /* Piece Interaction Event Handling */ + /** Handles piece grabbing event, loads piece htmlElement, piece object */ + const grabPiece = (e: React.MouseEvent) => { const element = e.target as HTMLElement; - - if (element.classList.contains('chess-piece') && chessboard) { - const { x: grabX, y: grabY } = calculateGridPosition(e.clientX, e.clientY) - - // center adjustment - const x = e.clientX - GRID_SIZE / 2 - const y = e.clientY - GRID_SIZE / 2 - - element.style.position = 'fixed' - element.style.left = `${x}px` - element.style.top = `${y}px` - element.style.zIndex = '100'; - - getCurrentPieceSetToState(grabX, grabY); - setActivePieceElement(element); - setPlayerState('playerMovingPiece'); - } - } + const chessboard = chessboardRef.current; - /** Handles chess piece click/select event */ - function clickPiece(e: React.MouseEvent) { - if(interactionMode === 'drag') return; + if (element.classList.contains("chess-piece") && chessboard) { + const { x: grabX, y: grabY } = calculateGridPosition(e.clientX, e.clientY); + const x = e.clientX - GRID_SIZE / 2; + const y = e.clientY - GRID_SIZE / 2; - const chessboard = chessboardRef.current - const element = e.target as HTMLElement + element.style.position = "fixed"; + element.style.left = `${x}px`; + element.style.top = `${y}px`; + element.style.zIndex = "100"; - if (element.classList.contains('chess-piece') && chessboard) { - const { x: grabX, y: grabY } = calculateGridPosition(e.clientX, e.clientY) - getCurrentPieceSetToState(grabX, grabY); + setCurrentPiece(pieces.find(p => p.samePosition(new Position(grabX, grabY))) || null); setActivePieceElement(element); - setPlayerState('playerMovingPiece'); + setShowPossibleMoves(true); } - } - - - /** Handles chess piece move event */ - function movePiece(e: React.MouseEvent) { - if(interactionMode === 'select') return; - const chessboard = chessboardRef.current; + }; - if (activePieceElement && chessboard) { - const { top } = boardMetrics; - const { - centralRegionLeft, - topBottomRegionLeft, - centralRegionRight, - topBottomRegionRight, - centralRegionTop, - centralRegionBottom, - topRegionBottom, - bottomRegionTop, - bottom - } = boundaries.current; + /** Handles Piece move event, restricts piece movement to insides of chessboard */ + const movePiece = (e: React.MouseEvent) => { + if (activePieceElement && chessboardRef.current) { + const boundaries = calculateBoundaries(); + if (!boundaries) return; - // adjusting peice position to center const x = e.clientX - GRID_SIZE / 2; const y = e.clientY - GRID_SIZE / 2; - // topPortion, centralRegion = centralSquare+leftPortion+rightPortion, bottomPortion - const isInsideValidRegion = !!( - ((x > centralRegionLeft && x < centralRegionRight) && (y > centralRegionTop && y < centralRegionBottom)) || - ((x > topBottomRegionLeft && x < topBottomRegionRight) && ( - (y > top && y < topRegionBottom) || - (y > bottomRegionTop && y < bottom) - )) + const isInsideValidRegion = ( + (x > boundaries.centralRegionLeft && + x < boundaries.centralRegionRight && + y > boundaries.centralRegionTop && + y < boundaries.centralRegionBottom) || + (x > boundaries.topBottomRegionLeft && + x < boundaries.topBottomRegionRight && + ((y > boardMetrics.top && y < boundaries.topRegionBottom) || + (y > boundaries.bottomRegionTop && y < boundaries.bottom))) ); - if(isInsideValidRegion) { - activePieceElement.style.position = 'fixed' - activePieceElement.style.left = `${x}px` - activePieceElement.style.top = `${y}px` - activePieceElement.style.visibility = 'visible'; - } else { - activePieceElement.style.visibility = 'hidden'; - } + activePieceElement.style.position = "fixed"; + activePieceElement.style.left = `${x}px`; + activePieceElement.style.top = `${y}px`; + activePieceElement.style.visibility = isInsideValidRegion ? "visible" : "hidden"; } - } + }; - /** handles piece drop event */ - function dropPiece(e: React.MouseEvent) { - if(interactionMode === 'select') return; - const chessboard = chessboardRef.current + /** Handles piece placement event, plays the move, checks for success, reflects the result on chessboard */ + const dropPiece = (e: React.MouseEvent) => { + if (chessboardRef.current && currentPiece) { + const targetElement = activePieceElement || selectedPieceElement; + if (!targetElement) return; - // Dropping the pieces on the right grid - if (activePieceElement && chessboard) { + const oldPosition = currentPiece.position; const { x: placeX, y: placeY } = calculateGridPosition(e.clientX, e.clientY); - if (currentPiece) { - var success = playMove(currentPiece.clone(), new Position(placeX, placeY)) - - if (!success) { - // Resets the piece position - activePieceElement.style.position = 'relative' - activePieceElement.style.removeProperty('top') - activePieceElement.style.removeProperty('left') - activePieceElement.style.removeProperty('z-index'); - } + // Reset piece if dropped in the same position + if (oldPosition?.x === placeX && oldPosition?.y === placeY) { + resetPiecePosition(targetElement); + setSelectedPieceElement(activePieceElement); + setActivePieceElement(null); + return; } - setPlayerState('playerIdle'); - setActivePieceElement(null) - } - } + const success = playMove(currentPiece.clone(), new Position(placeX, placeY)); - /** handles piece target selection event, applicable only in interactionMode: 'select' */ - function dropPieceSelectMode(e: React.MouseEvent) { - if(interactionMode === 'drag' || playerState !== 'playerMovingPiece') return; - const chessboard = chessboardRef.current - if (activePieceElement && chessboard && currentPiece && playerState === 'playerMovingPiece') { - const { x: placeX, y: placeY } = calculateGridPosition(e.clientX, e.clientY); - var success = playMove(currentPiece.clone(), new Position(placeX, placeY)) if (!success) { - // Resets the piece position - activePieceElement.style.position = 'relative' - activePieceElement.style.removeProperty('top') - activePieceElement.style.removeProperty('left') - activePieceElement.style.removeProperty('z-index'); + resetPiecePosition(targetElement); } - setPlayerState('playerIdle'); + setActivePieceElement(null); + setShowPossibleMoves(false); } - } - - // Setting the four player chessboard - let board = [] - - for (let j = VERTICAL_AXIS.length - 1; j >= 0; j--) { - for (let i = 0; i < HORIZONTAL_AXIS.length; i++) { - const num_i = i - const num_j = j - const piece = pieces.find((p) => p.samePosition(new Position(i, j))) - let image = piece ? piece.image : undefined - - // For highlighting all the possible moves - let highlight = false; - // Check if player is in the 'playerMovingPiece' state - if (playerState === 'playerMovingPiece' && currentPiece?.possibleMoves) { - highlight = currentPiece.possibleMoves.some((p) => - p.samePosition(new Position(i, j)) + }; + + /** Helper function for resetting piece position back to original place */ + const resetPiecePosition = (element: HTMLElement) => { + element.style.position = "relative"; + element.style.removeProperty("top"); + element.style.removeProperty("left"); + element.style.removeProperty("z-index"); + }; + + /** chessboard constructor */ + const renderBoard = () => { + const board = []; + for (let j = VERTICAL_AXIS.length - 1; j >= 0; j--) { + for (let i = 0; i < HORIZONTAL_AXIS.length; i++) { + const piece = pieces.find(p => p.samePosition(new Position(i, j))); + const highlight = showPossibleMoves && + currentPiece?.possibleMoves?.some(p => p.samePosition(new Position(i, j))); + + board.push( + ); } - - // Made chessboard with all the 'useful' squares - board.push( - - ) } - } + return board; + }; return ( - <> -
{ - if (interactionMode === 'drag') { - movePiece(e) - } - }} - onMouseDown={(e) => grabPiece(e)} - onClick={(e) => clickPiece(e)} - onMouseUp={(e) => {interactionMode === 'select' ? dropPieceSelectMode(e) : dropPiece(e)}} - id='chessboard' - ref={chessboardRef} - > - {board} -
- - ) -} +
+ {renderBoard()} +
+ ); +} \ No newline at end of file diff --git a/src/components/Tile/Tile.tsx b/src/components/Tile/Tile.tsx index fd1e667..6fd8ad2 100644 --- a/src/components/Tile/Tile.tsx +++ b/src/components/Tile/Tile.tsx @@ -6,10 +6,9 @@ interface Props { num_i: number num_j: number highlight: boolean - interactionMode: 'drag' | 'select' } -export default function Tile({ num_i, num_j, image, highlight, interactionMode }: Props) { +export default function Tile({ num_i, num_j, image, highlight }: Props) { const className: string = [ 'tile', (num_i + num_j) % 2 === 0 && 'dark-tile', // Dark Tiles diff --git a/src/components/context/ChessContext.tsx b/src/components/context/ChessContext.tsx index 8ee2b4e..27527b2 100644 --- a/src/components/context/ChessContext.tsx +++ b/src/components/context/ChessContext.tsx @@ -4,15 +4,11 @@ import { TeamType } from "../../Types"; interface ChessContextProps { currentPlayer: TeamType; setCurrentPlayerByWhoseTurn: (whoseTurn: number) => void; - interactionMode: "drag" | "select"; - setInteractionMode: (interactionMode: "drag" | "select") => void; } export const ChessContext = createContext({ currentPlayer: TeamType.RED, setCurrentPlayerByWhoseTurn: (whoseTurn) => {}, - interactionMode: "drag", - setInteractionMode: (interactionMode) => {}, }); /** Provider component for the chess context, provides currentPlayer, interactionMode */ @@ -36,9 +32,6 @@ export function ChessProvider({ whoseTurn, children }: { whoseTurn: number, chil const [currentPlayer, setCurrentPlayer] = useState( getCurrentPlayerByWhoseTurn(whoseTurn) ); - const [interactionMode, setInteractionMode] = useState<"drag" | "select">( - "drag" - ); /** memoized function to set the current player by whose turn as input */ // fixes the function behavior, function doesnt change on re-render, only changes when input differs @@ -55,8 +48,6 @@ export function ChessProvider({ whoseTurn, children }: { whoseTurn: number, chil value={{ currentPlayer, setCurrentPlayerByWhoseTurn, - interactionMode, - setInteractionMode, }} > {children} diff --git a/src/mediaQueries.css b/src/mediaQueries.css index a193522..bad1fcd 100644 --- a/src/mediaQueries.css +++ b/src/mediaQueries.css @@ -5,9 +5,9 @@ } } -@media all and (max-width: 768px) { +@media all and (max-width: 700px) { /* phone styles here */ :root { - --tile-size: calc(90vw / 14); + --tile-size: calc(80vw / 14); } } From c80e465ca9c5793a054fffc4dbc4e638ad200b01 Mon Sep 17 00:00:00 2001 From: Vighnesh Brahme Date: Thu, 12 Dec 2024 20:57:02 +0530 Subject: [PATCH 2/8] nameplates padding and alignment changes --- src/components/ChessWrapper/ChessWrapper.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/ChessWrapper/ChessWrapper.css b/src/components/ChessWrapper/ChessWrapper.css index 767736d..124f3fa 100644 --- a/src/components/ChessWrapper/ChessWrapper.css +++ b/src/components/ChessWrapper/ChessWrapper.css @@ -2,10 +2,12 @@ display: flex; flex-direction: column; padding: 20px; + gap: 10px; } .game-layout > .middle-panel { display: flex; + gap: 10px; } .game-layout > .panel-area, @@ -19,11 +21,13 @@ writing-mode: vertical-rl; height: calc(var(--tile-size) * 8); width: 0.5vw; + padding: 0 12px; } .game-layout > .panel-area > .player-panel { height: 0.5vw; width: calc(var(--tile-size) * 8); + padding: 12px 0; } div#left-panel { @@ -31,12 +35,10 @@ div#left-panel { } .player-panel { - padding: 12px; - border: 2px solid transparent; - border-radius: 10px; display: flex; justify-content: center; align-items: center; + border-radius: calc(var(--tile-size) * 0.1); } .game-display { From a42e4010052f208049c7d8ce38fa4e1675474bf3 Mon Sep 17 00:00:00 2001 From: Vighnesh Brahme Date: Tue, 17 Dec 2024 23:46:12 +0530 Subject: [PATCH 3/8] modal height dynamic --- src/components/Chessboard/Chessboard.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Chessboard/Chessboard.css b/src/components/Chessboard/Chessboard.css index aa6a05e..b83d642 100644 --- a/src/components/Chessboard/Chessboard.css +++ b/src/components/Chessboard/Chessboard.css @@ -29,7 +29,7 @@ align-items: center; justify-content: space-around; gap: 10px; - height: 20vh; + height: fit-content; width: calc(var(--tile-size) * 14); background-color: rgba(0, 0, 0, 0.75); } From 93049fc54fd84d98d45e315ca5ad049f42856b4d Mon Sep 17 00:00:00 2001 From: Vighnesh Brahme Date: Wed, 18 Dec 2024 10:54:33 +0530 Subject: [PATCH 4/8] fix: "undefined" in promotion pawn path --- src/components/Arbiter/Arbiter.tsx | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/Arbiter/Arbiter.tsx b/src/components/Arbiter/Arbiter.tsx index 73d12b2..158b7e1 100644 --- a/src/components/Arbiter/Arbiter.tsx +++ b/src/components/Arbiter/Arbiter.tsx @@ -94,14 +94,18 @@ export default function Arbiter() { // Deciding the type of color of the pieces when opening the modal function promotionTeamType() { - if (promotionPawn?.team === TeamType.RED) { - return 'r' - } else if (promotionPawn?.team === TeamType.BLUE) { - return 'b' - } else if (promotionPawn?.team === TeamType.YELLOW) { - return 'y' - } else if (promotionPawn?.team === TeamType.GREEN) { - return 'g' + if (promotionPawn && promotionPawn.team) { + if (promotionPawn.team === TeamType.RED) { + return 'r' + } else if (promotionPawn.team === TeamType.BLUE) { + return 'b' + } else if (promotionPawn.team === TeamType.YELLOW) { + return 'y' + } else if (promotionPawn.team === TeamType.GREEN) { + return 'g' + } + } else { + return 'r'; // defaulting to red team at initial state } } @@ -128,7 +132,7 @@ export default function Arbiter() { setBoard(initialBoard.clone()) } - + return ( <>
From 4556f92071654366657230712f5c7e36af615240 Mon Sep 17 00:00:00 2001 From: Vighnesh Brahme Date: Wed, 18 Dec 2024 11:40:22 +0530 Subject: [PATCH 5/8] fix undefined in pawn promotion path --- src/components/Arbiter/Arbiter.tsx | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/Arbiter/Arbiter.tsx b/src/components/Arbiter/Arbiter.tsx index 73d12b2..9f5bc28 100644 --- a/src/components/Arbiter/Arbiter.tsx +++ b/src/components/Arbiter/Arbiter.tsx @@ -93,16 +93,19 @@ export default function Arbiter() { } // Deciding the type of color of the pieces when opening the modal - function promotionTeamType() { - if (promotionPawn?.team === TeamType.RED) { - return 'r' - } else if (promotionPawn?.team === TeamType.BLUE) { - return 'b' - } else if (promotionPawn?.team === TeamType.YELLOW) { - return 'y' - } else if (promotionPawn?.team === TeamType.GREEN) { - return 'g' + function promotionTeamType(): 'r' | 'b' | 'y' | 'g' { + if (promotionPawn && promotionPawn.team) { + if (promotionPawn.team === TeamType.RED) { + return 'r' + } else if (promotionPawn.team === TeamType.BLUE) { + return 'b' + } else if (promotionPawn.team === TeamType.YELLOW) { + return 'y' + } else if (promotionPawn.team === TeamType.GREEN) { + return 'g' + } } + return 'r'; // defaulting to red team at initial state } // Writing the full name of the winning team @@ -128,7 +131,7 @@ export default function Arbiter() { setBoard(initialBoard.clone()) } - + return ( <>
From e72bab99cb83f8fdb86c95a0456bac1addd15cef Mon Sep 17 00:00:00 2001 From: Vighnesh Brahme Date: Wed, 18 Dec 2024 12:07:04 +0530 Subject: [PATCH 6/8] fix promotion pawn options image path --- src/components/Arbiter/Arbiter.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Arbiter/Arbiter.tsx b/src/components/Arbiter/Arbiter.tsx index 9f5bc28..421dd70 100644 --- a/src/components/Arbiter/Arbiter.tsx +++ b/src/components/Arbiter/Arbiter.tsx @@ -138,22 +138,22 @@ export default function Arbiter() {
promotePawn(PieceType.ROOK)} - src={`${basePath}/assets/images/${promotionTeamType()}R.png`} + src={`${basePath}assets/images/${promotionTeamType()}R.png`} alt='Rook' /> promotePawn(PieceType.KNIGHT)} - src={`${basePath}/assets/images/${promotionTeamType()}N.png`} + src={`${basePath}assets/images/${promotionTeamType()}N.png`} alt='Knight' /> promotePawn(PieceType.BISHOP)} - src={`${basePath}/assets/images/${promotionTeamType()}B.png`} + src={`${basePath}assets/images/${promotionTeamType()}B.png`} alt='Bishop' /> promotePawn(PieceType.QUEEN)} - src={`${basePath}/assets/images/${promotionTeamType()}Q.png`} + src={`${basePath}assets/images/${promotionTeamType()}Q.png`} alt='Queen' />
@@ -171,7 +171,7 @@ export default function Arbiter() { {teamNames[team]} {`${teamNames[team]} From f202030cbc262ebd31f9c565f96a22fcc78fe253 Mon Sep 17 00:00:00 2001 From: Vighnesh Brahme Date: Thu, 19 Dec 2024 17:50:00 +0530 Subject: [PATCH 7/8] css vars for color pallete --- src/App.css | 2 +- src/components/ChessWrapper/ChessWrapper.css | 2 +- src/components/Chessboard/Chessboard.css | 8 ++++---- src/index.css | 10 ++++++++++ 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/App.css b/src/App.css index da1168b..027e0b2 100644 --- a/src/App.css +++ b/src/App.css @@ -2,6 +2,6 @@ display: grid; place-content: center; height: 100vh; - background-color: black; + background-color: var(--app-background-color); } diff --git a/src/components/ChessWrapper/ChessWrapper.css b/src/components/ChessWrapper/ChessWrapper.css index 124f3fa..f8fcfd1 100644 --- a/src/components/ChessWrapper/ChessWrapper.css +++ b/src/components/ChessWrapper/ChessWrapper.css @@ -74,7 +74,7 @@ div#left-panel { } .game-display > .currentPlayerDisplay { - color: whitesmoke; + color: var(--secondary-text-color); padding: 2px 10px; border-radius: calc(1rem + 2px); } diff --git a/src/components/Chessboard/Chessboard.css b/src/components/Chessboard/Chessboard.css index b83d642..8e0f55a 100644 --- a/src/components/Chessboard/Chessboard.css +++ b/src/components/Chessboard/Chessboard.css @@ -4,7 +4,7 @@ grid-template-rows: repeat(14, var(--tile-size)); width: calc(var(--tile-size) * 14); height: calc(var(--tile-size) * 14); - background-color: black; + background-color: var(--app-background-color); } .modal { @@ -60,7 +60,7 @@ .modal > .modal-body > .checkmate-body .team { font-size: 20px; - color: white; + color: var(--secondary-text-color); } .modal > .modal-body > .checkmate-body td:nth-child(2) { @@ -68,12 +68,12 @@ } .modal > .modal-body > .checkmate-body > button { - background-color: #779556; + background-color: var(--button-background-color); border: none; border-radius: 8px; padding: 16px; font-size: 28px; - color: white; + color: var(--secondary-text-color); } .modal > .modal-body > .checkmate-body > button:hover { diff --git a/src/index.css b/src/index.css index c82532f..522997b 100644 --- a/src/index.css +++ b/src/index.css @@ -6,6 +6,16 @@ --chess-piece-size: calc(var(--tile-size) * 0.85); --tile-highlight-size: calc(var(--tile-size) * 0.25); --tile-highlight-chess-piece-size: calc(var(--tile-size) * 0.9); + + /* color palette */ + --dark-tile-color: #ababab; + --light-tile-color: #dcdcdc; + --useless-tile-color: black; + --checked-tile-gradient: radial-gradient(circle, red 20%, white 80%); + --primary-text-color: black; + --secondary-text-color: white; + --app-background-color: black; + --button-background-color: #779556; } body { From b2be7d179acc9edf84fbbc3b267ad7dcb9a45973 Mon Sep 17 00:00:00 2001 From: Vighnesh Brahme Date: Thu, 19 Dec 2024 17:50:25 +0530 Subject: [PATCH 8/8] add player lost color on nameplates --- src/components/Arbiter/Arbiter.tsx | 2 +- src/components/ChessWrapper/ChessWrapper.tsx | 88 ++++++++++++-------- 2 files changed, 54 insertions(+), 36 deletions(-) diff --git a/src/components/Arbiter/Arbiter.tsx b/src/components/Arbiter/Arbiter.tsx index 421dd70..f1659d8 100644 --- a/src/components/Arbiter/Arbiter.tsx +++ b/src/components/Arbiter/Arbiter.tsx @@ -185,7 +185,7 @@ export default function Arbiter() {
- + { + if (lostTeams.includes(playerId)) return 'lost' + return currentPlayer === playerId ? 'active' : 'inactive' + } - const displayBgColor = players.find((p) => p.id === currentPlayer)?.color || "grey"; - const lostPlayerColor = "#eeeeee"; + const displayBgColor = players.find((p) => p.id === currentPlayer)?.color || 'grey'; return ( -
-
-
+
+
+
{players.find((p) => p.id === currentPlayer)?.name}
-
-
+
+
-
-
+
+
-
{children}
-
+
{children}
+
-
+
@@ -66,19 +75,28 @@ export default function ChessWrapper({ } interface PlayerPanelProps { - name: string; - color: string; - isActive: boolean; + name: string + color: string + playerState: PlayerState } /** Player panel component, holds player name and indicates active player */ -function PlayerPanel({ name, color, isActive }: PlayerPanelProps) { +function PlayerPanel({ name, color, playerState }: PlayerPanelProps) { + const stateToColorMap = { + active: color, + inactive: 'grey', + lost: '#444', + } + return (
-
{name}
+
{`${name} ${playerState === 'lost' ? 'lost' : ''}`}
) }