diff --git a/src/App.tsx b/src/App.tsx index 323fca3..6a35175 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,4 @@ import './App.css' -import './mediaQueries.css' import Arbiter from './components/Arbiter/Arbiter' // The app component diff --git a/src/Constants.ts b/src/Constants.ts index 1c002be..880daa3 100644 --- a/src/Constants.ts +++ b/src/Constants.ts @@ -5,6 +5,9 @@ import { PieceType, TeamType } from './Types' export const VERTICAL_AXIS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] export const HORIZONTAL_AXIS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] +// Grid Size +export const GRID_SIZE = 50 + // InitialBoardState export const initialBoard: Board = new Board( [ diff --git a/src/components/Arbiter/Arbiter.tsx b/src/components/Arbiter/Arbiter.tsx index 51f2c60..118ff5f 100644 --- a/src/components/Arbiter/Arbiter.tsx +++ b/src/components/Arbiter/Arbiter.tsx @@ -4,8 +4,6 @@ import { initialBoard } from '../../Constants' import { PieceType, TeamType } from '../../Types' import { Piece, Position } from '../../models' import { useRef, useState } from 'react' -import { ChessProvider } from '../context/ChessContext' -import ChessWrapper from '../ChessWrapper/ChessWrapper' //import { // bishopMove, // kingMove, @@ -257,14 +255,11 @@ export default function Arbiter() { - - - - - + ) } diff --git a/src/components/ChessWrapper/ChessWrapper.css b/src/components/ChessWrapper/ChessWrapper.css deleted file mode 100644 index 2b8f4e6..0000000 --- a/src/components/ChessWrapper/ChessWrapper.css +++ /dev/null @@ -1,93 +0,0 @@ -.game-layout { - display: flex; - flex-direction: column; -} - -.game-layout > .middle-panel { - display: flex; -} - -.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; -} - -.game-layout > .panel-area > .player-panel { - height: .5vw; - width: calc(var(--tile-size) * 8); -} - -div#left-panel { - transform: rotate(-180deg); -} - -.player-panel { - padding: 10px 15px; - border: 2px solid transparent; - border-radius: 10px; - display: flex; - justify-content: center; - align-items: center; -} - -.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; -} - -@media all and (max-width: 768px) { - /* phone styles here */ - .game-layout > .panel-area, .game-layout > .middle-panel > .panel-area { - padding: 2px; - } - - .player-panel > .player-name { - display: none; - } - - .middle-panels > .player-panel { - padding: 0; - width: 2px; - } - - .game-layout > .panel-area > .player-panel { - padding: 0; - height: 0; - } -} diff --git a/src/components/ChessWrapper/ChessWrapper.tsx b/src/components/ChessWrapper/ChessWrapper.tsx deleted file mode 100644 index a1f2ac5..0000000 --- a/src/components/ChessWrapper/ChessWrapper.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import "./ChessWrapper.css"; -import { useChessContext } from "../context/ChessContext"; - -/** Wrapper component for the chess board, holds player panels surrounding the board */ -export default function ChessWrapper({ - children, -}: { - children: React.ReactNode; -}) { - const { currentPlayer } = useChessContext(); - const {interactionMode, setInteractionMode} = useChessContext(); - - const players = [ - { name: "Red Player", color: "red", id: "r" }, - { name: "Blue Player", color: "blue", id: "b" }, - { name: "Yellow Player", color: "yellow", id: "y" }, - { name: "Green Player", color: "green", id: "g" }, - ]; - - const displayBgColor = players.find((p) => p.id === currentPlayer)?.color || "grey"; - - return ( -
-
-
- {players.find((p) => p.id === currentPlayer)?.name} -
-
- -
-
-
-
- -
-
-
- -
-
{children}
-
- -
-
-
- -
-
-
- ); -} - -interface PlayerPanelProps { - name: string; - color: string; - isActive: boolean; -} - -/** Player panel component, holds player name and indicates active player */ -function PlayerPanel({ name, color, isActive }: PlayerPanelProps) { - return ( -
-
{name}
-
- ) -} diff --git a/src/components/Chessboard/Chessboard.css b/src/components/Chessboard/Chessboard.css index 9990e9a..84693b9 100644 --- a/src/components/Chessboard/Chessboard.css +++ b/src/components/Chessboard/Chessboard.css @@ -1,23 +1,18 @@ #chessboard { display: grid; - grid-template-columns: repeat(14, var(--tile-size)); - grid-template-rows: repeat(14, var(--tile-size)); - width: calc(var(--tile-size) * 14); - height: calc(var(--tile-size) * 14); + grid-template-columns: repeat(14, 50px); + grid-template-rows: repeat(14, 50px); + width: 700px; + height: 700px; background-color: black; } .modal { - position: fixed; - top: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; - width: 100dvw; - height: 100dvh; - background-color: rgba(0, 0, 0, 0.75); - z-index: 20; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; } .modal.hidden { @@ -25,18 +20,20 @@ } .modal > .modal-body { + position: absolute; + top: calc(50% - 75px); + left: calc(50% - 350px); display: flex; align-items: center; justify-content: space-around; - gap: 10px; - height: 20vh; - width: calc(var(--tile-size) * 14); + height: 150px; + width: 700px; background-color: rgba(0, 0, 0, 0.75); } .modal > .modal-body > img { - width: 100%; - padding: 10px; + height: 90px; + padding: 20px; border-radius: 50%; } @@ -48,13 +45,11 @@ .modal > .modal-body > .checkmate-body { display: flex; flex-direction: column; - padding: 10px; gap: 24px; } .modal > .modal-body > .checkmate-body > span { - font-size: 1.5rem; - text-align: center; + font-size: 28px; color: white; } diff --git a/src/components/Chessboard/Chessboard.tsx b/src/components/Chessboard/Chessboard.tsx index e2efcf3..3ae132d 100644 --- a/src/components/Chessboard/Chessboard.tsx +++ b/src/components/Chessboard/Chessboard.tsx @@ -1,255 +1,157 @@ import './Chessboard.css' -// import PlayerName from '../PlayerName/PlayerName' +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 { useRef, useState } from 'react' +import { VERTICAL_AXIS, HORIZONTAL_AXIS, GRID_SIZE } from '../../Constants' // Interface deciding the types interface Props { playMove: (piece: Piece, position: Position) => boolean pieces: Piece[] + whoseTurn: number } -export default function Chessboard({ playMove, pieces }: Props) { - /** Gets the grid size based on the window size dynamically */ - const getGridSize = () => { - // basically imitates the same logic as in the css file - const vw = window.innerWidth * 0.9; - const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); - - if (window.innerWidth > 768) { - return 2.5 * rem; - } else { - return vw / 14; - } - } - const GRID_SIZE = getGridSize(); - - // piece interaction and tracking - const [currentPiece, setCurrentPiece] = useState(null); - const [activePieceElement, setActivePieceElement] = useState(null); - - // board related states +export default function Chessboard({ playMove, pieces, whoseTurn }: Props) { + // Declaring Constants + const [activePiece, setActivePiece] = useState(null) + const [grabPosition, setGrabPosition] = useState( + new Position(-1, -1) + ) + const [isClicked, setIsClicked] = useState(false) 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]); - - useEffect(() => { - // updates the offset of the chessboard when the window is resized - const updateOffset = () => { - 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 when player grabs a piece function grabPiece(e: React.MouseEvent) { - if(interactionMode === 'select') return; + // Grabbing the pieces off the chessboard + const chessboard = chessboardRef.current + const element = e.target as HTMLElement - const chessboard = chessboardRef.current; - 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 grabX = Math.floor((e.clientX - chessboard.offsetLeft) / GRID_SIZE) + const grabY = Math.abs( + Math.abs( + Math.ceil((e.clientY - chessboard.offsetTop - 700) / GRID_SIZE) + ) + ) + + setGrabPosition(new Position(grabX, grabY)) + const x = e.clientX - GRID_SIZE / 2 const y = e.clientY - GRID_SIZE / 2 - - element.style.position = 'fixed' + + element.style.position = 'absolute' element.style.left = `${x}px` element.style.top = `${y}px` - element.style.zIndex = '100'; - - getCurrentPieceSetToState(grabX, grabY); - setActivePieceElement(element); - setPlayerState('playerMovingPiece'); + + setActivePiece(element) + setIsClicked(false) } } - /** Handles chess piece click/select event */ + // Function when player clicks a piece function clickPiece(e: React.MouseEvent) { - if(interactionMode === 'drag') return; - const chessboard = chessboardRef.current const element = e.target as HTMLElement if (element.classList.contains('chess-piece') && chessboard) { - const { x: grabX, y: grabY } = calculateGridPosition(e.clientX, e.clientY) - getCurrentPieceSetToState(grabX, grabY); - setActivePieceElement(element); - setPlayerState('playerMovingPiece'); + const grabX = Math.floor((e.clientX - chessboard.offsetLeft) / GRID_SIZE) + const grabY = Math.abs( + Math.abs( + Math.ceil((e.clientY - chessboard.offsetTop - 700) / GRID_SIZE) + ) + ) + + setGrabPosition(new Position(grabX, grabY)) + setActivePiece(element) + setIsClicked(true) } } - /** Handles chess piece move event */ + // Function when player tries to move a piece 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; + const chessboard = chessboardRef.current - // adjusting peice position to center - const x = e.clientX - GRID_SIZE / 2; - const y = e.clientY - GRID_SIZE / 2; + if (activePiece && chessboard) { + // Declaring constants for restricting the pieces + const leftX = chessboard.offsetLeft - 4 + const midleftX = + chessboard.offsetLeft + (chessboard.clientWidth / 14) * 3 - 4 + const topY = chessboard.offsetTop - 4 + const midtopY = + chessboard.offsetTop + (chessboard.clientHeight / 14) * 3 - 4 + const rightX = chessboard.offsetLeft + chessboard.clientWidth - 46 + const midrightX = + chessboard.offsetLeft - + (chessboard.clientWidth / 14) * 3 + + chessboard.clientWidth - + 46 + const bottomY = chessboard.offsetTop + chessboard.clientHeight - 46 + const midbottomY = + chessboard.offsetTop - + (chessboard.clientHeight / 14) * 3 + + chessboard.clientHeight - + 46 + const x = e.clientX - GRID_SIZE / 2 + const y = e.clientY - GRID_SIZE / 2 + activePiece.style.position = 'absolute' - // 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) - )) - ); + // Restricting the x position + if (x < leftX) { + activePiece.style.left = `${leftX}px` + } else if (x > rightX) { + activePiece.style.left = `${rightX}px` + } else { + activePiece.style.left = `${x}px` + } - if(isInsideValidRegion) { - activePieceElement.style.position = 'fixed' - activePieceElement.style.left = `${x}px` - activePieceElement.style.top = `${y}px` - activePieceElement.style.visibility = 'visible'; + // Restricting the y position + if (y < topY) { + activePiece.style.top = `${topY}px` + } else if (y > bottomY) { + activePiece.style.top = `${bottomY}px` } else { - activePieceElement.style.visibility = 'hidden'; + activePiece.style.top = `${y}px` + } + + // Restricting the cutout portions + if ((x < midleftX && y > midbottomY) || (x < midleftX && y < midtopY)) { + activePiece.style.left = `${midleftX}px` + } else if ( + (x > midrightX && y > midbottomY) || + (x > midrightX && y < midtopY) + ) { + activePiece.style.left = `${midrightX}px` } } } - /** handles piece drop event */ + // Function when player drops a piece function dropPiece(e: React.MouseEvent) { - if(interactionMode === 'select') return; const chessboard = chessboardRef.current // Dropping the pieces on the right grid - if (activePieceElement && chessboard) { - const { x: placeX, y: placeY } = calculateGridPosition(e.clientX, e.clientY); + if (activePiece && chessboard) { + const x = Math.floor((e.clientX - chessboard.offsetLeft) / GRID_SIZE) + const y = Math.abs( + Math.ceil((e.clientY - chessboard.offsetTop - 700) / GRID_SIZE) + ) + + const currentPiece = pieces.find((p) => p.samePosition(grabPosition)) if (currentPiece) { - var success = playMove(currentPiece.clone(), new Position(placeX, placeY)) + var success = playMove(currentPiece.clone(), new Position(x, y)) if (!success) { // Resets the piece position - activePieceElement.style.position = 'relative' - activePieceElement.style.removeProperty('top') - activePieceElement.style.removeProperty('left') - activePieceElement.style.removeProperty('z-index'); + activePiece.style.position = 'relative' + activePiece.style.removeProperty('top') + activePiece.style.removeProperty('left') } } - setPlayerState('playerIdle'); - setActivePieceElement(null) - } - } - - /** 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'); - } - setPlayerState('playerIdle'); - setActivePieceElement(null); + setActivePiece(null) } } @@ -263,14 +165,17 @@ export default function Chessboard({ playMove, pieces }: Props) { 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)) - ); - } + let currentPiece = + activePiece != null + ? pieces.find((p) => p.samePosition(grabPosition)) + : undefined + + // For highlighting the attacked pieces + let highlight = currentPiece?.possibleMoves + ? currentPiece.possibleMoves.some((p) => + p.samePosition(new Position(i, j)) + ) + : false // Made chessboard with all the 'useful' squares board.push( @@ -280,7 +185,6 @@ export default function Chessboard({ playMove, pieces }: Props) { num_j={num_j} image={image} highlight={highlight} - interactionMode={interactionMode} /> ) } @@ -290,17 +194,18 @@ export default function Chessboard({ playMove, pieces }: Props) { <>
{ - if (interactionMode === 'drag') { + if (!isClicked) { movePiece(e) - } + } }} onMouseDown={(e) => grabPiece(e)} onClick={(e) => clickPiece(e)} - onMouseUp={(e) => {interactionMode === 'select' ? dropPieceSelectMode(e) : dropPiece(e)}} + onMouseUp={(e) => dropPiece(e)} id='chessboard' ref={chessboardRef} > {board} +
) diff --git a/src/components/PlayerName/PlayerName.css b/src/components/PlayerName/PlayerName.css new file mode 100644 index 0000000..dc9990a --- /dev/null +++ b/src/components/PlayerName/PlayerName.css @@ -0,0 +1,47 @@ +.playerName { + padding: 15px; + border-radius: 20px; + font-weight: bold; + position: absolute; + opacity: 0.4; +} + +.team-blue { + margin-top: 100px; + margin-left: 0; + background-color: rgb(96, 96, 253); +} + +.team-yellow { + margin-top: 0; + margin-left: 550px; + background-color: rgb(255, 255, 88); +} + +.team-red { + margin-top: 652px; + margin-left: 36px; + background-color: rgb(254, 81, 81); +} + +.team-green { + margin-top: 550px; + margin-left: 565px; + background-color: rgb(85, 249, 85); +} + +#RED { + opacity: 1; +} + +#YELLOW { + opacity: 1; +} + +#BLUE { + opacity: 1; +} + +#GREEN { + opacity: 1; +} diff --git a/src/components/PlayerName/PlayerName.tsx b/src/components/PlayerName/PlayerName.tsx new file mode 100644 index 0000000..80a6a57 --- /dev/null +++ b/src/components/PlayerName/PlayerName.tsx @@ -0,0 +1,38 @@ +import './PlayerName.css' + +interface Props { + whoseTurn: number +} +// Color names for the different players +export default function PlayerName({ whoseTurn }: Props) { + let red = '' + let yellow = '' + let blue = '' + let green = '' + if (whoseTurn % 4 === 1) { + red = 'RED' + } else if (whoseTurn % 4 === 2) { + blue = 'BLUE' + } else if (whoseTurn % 4 === 3) { + yellow = 'YELLOW' + } else if (whoseTurn % 4 === 0) { + green = 'GREEN' + } + + return ( + <> +
+ Player RED +
+
+ Player BLUE +
+
+ Player YELLOW +
+
+ Player GREEN +
+ + ) +} diff --git a/src/components/Tile/Tile.css b/src/components/Tile/Tile.css index 46694d3..9878b0a 100644 --- a/src/components/Tile/Tile.css +++ b/src/components/Tile/Tile.css @@ -1,30 +1,26 @@ .tile { display: grid; place-content: center; - width: var(--tile-size); - height: var(--tile-size); + width: 50px; + height: 50px; } .tile img { - width: var(--tile-size); + width: 50px; } .tile .chess-piece { - width: var(--chess-piece-size); - height: var(--chess-piece-size); + width: 43px; + height: 43px; background-repeat: no-repeat; background-position: center; - background-size: var(--chess-piece-size); + background-size: 43px; } -.tile .chess-piece.cursor-grab:hover { +.tile .chess-piece:hover { cursor: grab; } -.tile .chess-piece.cursor-pointer:hover { - cursor: pointer; -} - .tile .chess-piece:active { cursor: grabbing; } @@ -43,17 +39,17 @@ .tile-highlight:not(.chess-piece-tile)::before { content: ' '; - width: var(--tile-highlight-size); - height: var(--tile-highlight-size); + width: 12px; + height: 12px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.4); } .tile-highlight.chess-piece-tile::before { - position: fixed; + position: absolute; content: ' '; - width: var(--tile-highlight-chess-piece-size); - height: var(--tile-highlight-chess-piece-size); + width: 45px; + height: 45px; border: 2.5px solid rgba(0, 0, 0); border-radius: 50%; } 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 deleted file mode 100644 index 8ee2b4e..0000000 --- a/src/components/context/ChessContext.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { createContext, useCallback, useContext, useEffect, useState } from "react"; -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 */ -export function ChessProvider({ whoseTurn, children }: { whoseTurn: number, children: React.ReactNode }) { - const getCurrentPlayerByWhoseTurn = (whoseTurn: number): TeamType => { - const playerID: number = whoseTurn % 4; - switch (playerID) { - case 0: - return TeamType.GREEN; - case 1: - return TeamType.RED; - case 2: - return TeamType.BLUE; - case 3: - return TeamType.YELLOW; - default: - return TeamType.RED; - } - }; - - 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 - const setCurrentPlayerByWhoseTurn = useCallback((whoseTurn: number) => { - setCurrentPlayer(getCurrentPlayerByWhoseTurn(whoseTurn)); - }, []); - - useEffect(() => { - setCurrentPlayerByWhoseTurn(whoseTurn) - }, [whoseTurn, setCurrentPlayerByWhoseTurn]); - - return ( - - {children} - - ); -} - -/** custom chess context hook, provides easy access to the chess context */ -export function useChessContext() { - return useContext(ChessContext); -} diff --git a/src/index.css b/src/index.css index c82532f..ec2585e 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,3 @@ -:root { - /* strictly global css variables only */ - --tile-size: 3rem; - - /* size */ - --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); -} - body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', diff --git a/src/mediaQueries.css b/src/mediaQueries.css deleted file mode 100644 index a193522..0000000 --- a/src/mediaQueries.css +++ /dev/null @@ -1,13 +0,0 @@ -@media all and (min-width: 700px) { - /* tablet landscape and desktop styles here */ - :root { - --tile-size: 2.5rem; - } -} - -@media all and (max-width: 768px) { - /* phone styles here */ - :root { - --tile-size: calc(90vw / 14); - } -}