Revert "Make 4-player chess app responsive and refactor chess piece m…

…echanics"

src/App.tsx

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

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(
   [

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() {
         </div>
       </div>
 
-      <ChessProvider whoseTurn={board.totalTurns}>
-        <ChessWrapper>
-          <Chessboard
-            playMove={playMove}
-            pieces={board.pieces}
-          />
-        </ChessWrapper>
-      </ChessProvider>
+      <Chessboard
+        playMove={playMove}
+        pieces={board.pieces}
+        whoseTurn={board.totalTurns}
+      />
     </>
   )
 }

src/components/Chessboard/Chessboard.css

@@ -1,42 +1,39 @@
 #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 {
   display: none;
 }
 
 .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;
 }