format : BoardView

src/components/BoardView.tsx

@@ -1,38 +1,40 @@
-import { Bank, MancalaGame, Pit } from 'mancala.js';
+import { Bank, MancalaGame, Pit } from "mancala.js";
-import * as React from 'react';
+import * as React from "react";
-import { FunctionComponent, useState } from 'react';
+import { FunctionComponent, useState } from "react";
 
 type Theme = {
-    background : string,
+  background: string;
-    boardColor: string
+  boardColor: string;
-    boardColorWhenPlayerTurn: string
+  boardColorWhenPlayerTurn: string;
-    storeColor: string
+  storeColor: string;
-    storeColorWhenPlayerTurn: string
+  storeColorWhenPlayerTurn: string;
-    holeColor: string
+  holeColor: string;
-    ballColor: string
+  ballColor: string;
-}
+};
 
 const theme: Theme = {
-    background : "#EEEEEE",
+  background: "#EEEEEE",
   boardColor: "#4D606E",
   boardColorWhenPlayerTurn: "#84b8a6",
   storeColor: "#3FBAC2",
   storeColorWhenPlayerTurn: "#6cab94",
   holeColor: "#D3D4D8",
   ballColor: "#393E46",
-}
+};
 
-const BallView: FunctionComponent<{color : string}> = ({color}) => {
+const BallView: FunctionComponent<{ color: string }> = ({ color }) => {
-
+  return (
-    return (<div style={{
+    <div
+      style={{
         background: color,
         margin: "1px",
         width: "1vw",
         height: "1vw",
-        borderRadius: "10vw"
+        borderRadius: "10vw",
-    }} >
+      }}
-    </div>)
+    ></div>
-}
+  );
+};
 
 function range(size: number) {
   var ans = [];
@@ -42,95 +44,149 @@ function range(size: number) {
   return ans;
 }
 
-const HoleView: FunctionComponent<{ hole: Pit, color: string, onClick: () => void }> = ({ hole, color, onClick }) => {
+const HoleView: FunctionComponent<{
-    const balls = [...range(hole.stoneCount)].map((i) => <BallView color={theme.ballColor}/>)
+  hole: Pit;
+  color: string;
+  onClick: () => void;
+}> = ({ hole, color, onClick }) => {
+  const balls = [...range(hole.stoneCount)].map((i) => (
+    <BallView color={theme.ballColor} />
+  ));
 
-    return (<div
+  return (
+    <div
       onClick={onClick}
       style={{
         background: color,
         margin: "5px",
         padding: "5px",
         borderRadius: "10vw",
-            display: 'flex',
+        display: "flex",
-            alignItems: 'center',
+        alignItems: "center",
-            alignContent: 'center',
+        alignContent: "center",
-            justifyContent: 'center',
+        justifyContent: "center",
-            justifyItems: 'center',
+        justifyItems: "center",
         flexWrap: "wrap",
-        }} >
+      }}
+    >
       {balls}
-    </div>)
+    </div>
-}
+  );
+};
 
-const StoreView: FunctionComponent<
+const StoreView: FunctionComponent<{
-    { store: Bank, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => {
+  store: Bank;
-        const balls = [...range(store.stoneCount)].map((i) => <BallView color={theme.ballColor}/>)
+  color: string;
-        return (<div style={{
+  gridColumn: string;
+  gridRow: string;
+}> = ({ store, color, gridColumn, gridRow }) => {
+  const balls = [...range(store.stoneCount)].map((i) => (
+    <BallView color={theme.ballColor} />
+  ));
+  return (
+    <div
+      style={{
         gridColumn: gridColumn,
         gridRow: gridRow,
         background: color,
         margin: "5px",
         borderRadius: "10vw",
-            display: 'flex',
+        display: "flex",
-            alignItems: 'center',
+        alignItems: "center",
-            justifyContent: 'center',
+        justifyContent: "center",
-            alignContent: 'center',
+        alignContent: "center",
         flexWrap: "wrap",
-        }} >
+      }}
+    >
       {balls}
-        </div>)
+    </div>
-    }
+  );
-
+};
-const BoardView: FunctionComponent<{ game?: MancalaGame, userKey: string, onHoleSelect: (index: number, hole: Pit) => void }> = ({
-    game, userKey, onHoleSelect }) => {
 
+const BoardView: FunctionComponent<{
+  game?: MancalaGame;
+  userKey: string;
+  onHoleSelect: (index: number, hole: Pit) => void;
+}> = ({ game, userKey, onHoleSelect }) => {
   const player1Pits = game?.board.player1Pits.map((hole) => (
-        <HoleView hole={hole} color={theme.holeColor} onClick={() => {
+    <HoleView
-            if (game.turnPlayerId === game.player1Id) onHoleSelect(game.board.player1Pits.indexOf(hole), hole)
+      hole={hole}
-        }} />
+      color={theme.holeColor}
-    ))
+      onClick={() => {
+        if (game.turnPlayerId === game.player1Id)
+          onHoleSelect(game.board.player1Pits.indexOf(hole), hole);
+      }}
+    />
+  ));
 
   const player2Pits = game!!.board.player2Pits.map((hole) => (
-        <HoleView hole={hole} color={theme.holeColor} onClick={() => {
+    <HoleView
-            if (game.turnPlayerId === game.player2Id) onHoleSelect(game.board.player2Pits.indexOf(hole), hole)
+      hole={hole}
-        }} />
+      color={theme.holeColor}
-    ))
+      onClick={() => {
+        if (game.turnPlayerId === game.player2Id)
+          onHoleSelect(game.board.player2Pits.indexOf(hole), hole);
+      }}
+    />
+  ));
 
-    const isUserTurn = game.checkIsPlayerTurn(userKey)
+  const isUserTurn = game.checkIsPlayerTurn(userKey);
 
-    const storeColor = isUserTurn ? theme.storeColor : theme.storeColorWhenPlayerTurn;
+  const storeColor = isUserTurn
+    ? theme.storeColor
+    : theme.storeColorWhenPlayerTurn;
 
   return (
-        <div style={{
+    <div
-            margin: '10px',
+      style={{
-            padding: '20px',
+        margin: "10px",
-            display: 'grid',
+        padding: "20px",
-            gridTemplateColumns: 'repeat(8, 11vw)',
+        display: "grid",
-            gridTemplateRows: 'repeat(2, 11vw)',
+        gridTemplateColumns: "repeat(8, 11vw)",
+        gridTemplateRows: "repeat(2, 11vw)",
         borderRadius: "3vw",
-            background: isUserTurn ? theme.boardColor : theme.boardColorWhenPlayerTurn
+        background: isUserTurn
-        }}>
+          ? theme.boardColor
-            {
+          : theme.boardColorWhenPlayerTurn,
-                userKey === game.player2Id ? (
+      }}
+    >
+      {userKey === game.player2Id ? (
         <>
-                        <StoreView store={game!!.board.player1Bank} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
+          <StoreView
-                        <StoreView store={game!!.board.player2Bank} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
+            store={game!!.board.player1Bank}
+            color={storeColor}
+            gridColumn="1 / 2"
+            gridRow="1 / 3"
+          />
+          <StoreView
+            store={game!!.board.player2Bank}
+            color={storeColor}
+            gridColumn="8 / 9"
+            gridRow="1 / 3"
+          />
           {player1Pits.reverse()}
           {player2Pits}
         </>
       ) : (
         <>
-                        <StoreView store={game!!.board.player2Bank} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
+          <StoreView
-                        <StoreView store={game!!.board.player1Bank} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
+            store={game!!.board.player2Bank}
+            color={storeColor}
+            gridColumn="1 / 2"
+            gridRow="1 / 3"
+          />
+          <StoreView
+            store={game!!.board.player1Bank}
+            color={storeColor}
+            gridColumn="8 / 9"
+            gridRow="1 / 3"
+          />
           {player2Pits.reverse()}
           {player1Pits}
         </>
-                )
+      )}
-            }
-
     </div>
-    )
+  );
-}
+};
 
-export default BoardView
+export default BoardView;