Merge pull request #12 from ThePhoenix08/responsive

Make 4-player chess app responsive and refactor chess piece mechanics

src/App.tsx

@@ -1,4 +1,5 @@
 import './App.css'
+import './mediaQueries.css'
 import Arbiter from './components/Arbiter/Arbiter'
 
 // The app component

src/Constants.ts

@@ -5,9 +5,6 @@ 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(
   [

src/components/Arbiter/Arbiter.tsx

@@ -4,6 +4,8 @@ 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,
@@ -255,11 +257,14 @@ export default function Arbiter() {
         </div>
       </div>
 
-      <Chessboard
-        playMove={playMove}
-        pieces={board.pieces}
-        whoseTurn={board.totalTurns}
-      />
+      <ChessProvider whoseTurn={board.totalTurns}>
+        <ChessWrapper>
+          <Chessboard
+            playMove={playMove}
+            pieces={board.pieces}
+          />
+        </ChessWrapper>
+      </ChessProvider>
     </>
   )
 }

src/components/ChessWrapper/ChessWrapper.css

@@ -0,0 +1,93 @@
+.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;
+  }
+}

src/components/ChessWrapper/ChessWrapper.tsx

@@ -0,0 +1,88 @@
+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 (
+    <div className="chess-wrapper">
+      <div className="game-display">
+        <div className="currentPlayerDisplay" style={{backgroundColor: displayBgColor}}>
+          {players.find((p) => p.id === currentPlayer)?.name}
+        </div>
+        <div className="interactionModeToggleDiv">
+          <button
+            className="interactionModeToggleBtn"
+            onClick={() => setInteractionMode(interactionMode === "drag" ? "select" : "drag")}
+          >{interactionMode === "drag" ? "Select" : "Drag"}</button>
+        </div>
+      </div>
+      <div className="game-layout">
+        <div className="panel-area">
+          <PlayerPanel
+            name="Yellow Player"
+            color="yellow"
+            isActive={currentPlayer === "y"}
+          />
+        </div>
+        <div className="middle-panel">
+          <div className="panel-area middle-panels" id="left-panel">
+            <PlayerPanel
+              name="Blue Player"
+              color="blue"
+              isActive={currentPlayer === "b"}
+            />
+          </div>
+          <div className="panel-area chessboard-container">{children}</div>
+          <div className="panel-area middle-panels">
+            <PlayerPanel
+              name="Green Player"
+              color="green"
+              isActive={currentPlayer === "g"}
+            />
+          </div>
+        </div>
+        <div className="panel-area">
+          <PlayerPanel
+            name="Red Player"
+            color="red"
+            isActive={currentPlayer === "r"}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+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 (
+    <div
+      className={`player-panel ${isActive ? "active" : ""}`}
+      style={{ backgroundColor: isActive ? color : "grey" }}
+    >
+      <div className="player-name">{name}</div>
+    </div>
+  )
+}

src/components/Chessboard/Chessboard.css

@@ -1,39 +1,42 @@
 #chessboard {
   display: grid;
-  grid-template-columns: repeat(14, 50px);
-  grid-template-rows: repeat(14, 50px);
-  width: 700px;
-  height: 700px;
+  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);
   background-color: black;
 }
 
 .modal {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  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;
 }
 
 .modal.hidden {
   display: none;
 }
 
 .modal > .modal-body {
-  position: absolute;
-  top: calc(50% - 75px);
-  left: calc(50% - 350px);
   display: flex;
   align-items: center;
   justify-content: space-around;
-  height: 150px;
-  width: 700px;
+  gap: 10px;
+  height: 20vh;
+  width: calc(var(--tile-size) * 14);
   background-color: rgba(0, 0, 0, 0.75);
 }
 
 .modal > .modal-body > img {
-  height: 90px;
-  padding: 20px;
+  width: 100%;
+  padding: 10px;
   border-radius: 50%;
 }
 
@@ -45,11 +48,13 @@
 .modal > .modal-body > .checkmate-body {
   display: flex;
   flex-direction: column;
+  padding: 10px;
   gap: 24px;
 }
 
 .modal > .modal-body > .checkmate-body > span {
-  font-size: 28px;
+  font-size: 1.5rem;
+  text-align: center;
   color: white;
 }