diff --git a/src/components/BoardView.tsx b/src/components/BoardView.tsx
index cd2479c..49ce4cc 100644
--- a/src/components/BoardView.tsx
+++ b/src/components/BoardView.tsx
@@ -1,136 +1,192 @@
-import { Bank, MancalaGame, Pit } from 'mancala.js';
-import * as React from 'react';
-import { FunctionComponent, useState } from 'react';
+import { Bank, MancalaGame, Pit } from "mancala.js";
+import * as React from "react";
+import { FunctionComponent, useState } from "react";
 
 type Theme = {
-    background : string,
-    boardColor: string
-    boardColorWhenPlayerTurn: string
-    storeColor: string
-    storeColorWhenPlayerTurn: string
-    holeColor: string
-    ballColor: string
-}
+  background: string;
+  boardColor: string;
+  boardColorWhenPlayerTurn: string;
+  storeColor: string;
+  storeColorWhenPlayerTurn: string;
+  holeColor: string;
+  ballColor: string;
+};
 
 const theme: Theme = {
-    background : "#EEEEEE",
-    boardColor: "#4D606E",
-    boardColorWhenPlayerTurn: "#84b8a6",
-    storeColor: "#3FBAC2",
-    storeColorWhenPlayerTurn: "#6cab94",
-    holeColor: "#D3D4D8",
-    ballColor: "#393E46",
-}
+  background: "#EEEEEE",
+  boardColor: "#4D606E",
+  boardColorWhenPlayerTurn: "#84b8a6",
+  storeColor: "#3FBAC2",
+  storeColorWhenPlayerTurn: "#6cab94",
+  holeColor: "#D3D4D8",
+  ballColor: "#393E46",
+};
 
-const BallView: FunctionComponent<{color : string}> = ({color}) => {
-
-    return (<div style={{
+const BallView: FunctionComponent<{ color: string }> = ({ color }) => {
+  return (
+    <div
+      style={{
         background: color,
         margin: "1px",
         width: "1vw",
         height: "1vw",
-        borderRadius: "10vw"
-    }} >
-    </div>)
-}
+        borderRadius: "10vw",
+      }}
+    ></div>
+  );
+};
 
 function range(size: number) {
-    var ans = [];
-    for (let i = 0; i < size; i++) {
-        ans.push(i);
-    }
-    return ans;
+  var ans = [];
+  for (let i = 0; i < size; i++) {
+    ans.push(i);
+  }
+  return ans;
 }
 
-const HoleView: FunctionComponent<{ hole: Pit, color: string, onClick: () => void }> = ({ hole, color, onClick }) => {
-    const balls = [...range(hole.stoneCount)].map((i) => <BallView color={theme.ballColor}/>)
+const HoleView: FunctionComponent<{
+  hole: Pit;
+  color: string;
+  onClick: () => void;
+}> = ({ hole, color, onClick }) => {
+  const balls = [...range(hole.stoneCount)].map((i) => (
+    <BallView color={theme.ballColor} />
+  ));
 
-    return (<div
-        onClick={onClick}
-        style={{
-            background: color,
-            margin: "5px",
-            padding: "5px",
-            borderRadius: "10vw",
-            display: 'flex',
-            alignItems: 'center',
-            alignContent: 'center',
-            justifyContent: 'center',
-            justifyItems: 'center',
-            flexWrap: "wrap",
-        }} >
-        {balls}
-    </div>)
-}
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        background: color,
+        margin: "5px",
+        padding: "5px",
+        borderRadius: "10vw",
+        display: "flex",
+        alignItems: "center",
+        alignContent: "center",
+        justifyContent: "center",
+        justifyItems: "center",
+        flexWrap: "wrap",
+      }}
+    >
+      {balls}
+    </div>
+  );
+};
 
-const StoreView: FunctionComponent<
-    { store: Bank, color: string, 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',
-            alignItems: 'center',
-            justifyContent: 'center',
-            alignContent: 'center',
-            flexWrap: "wrap",
-        }} >
-            {balls}
-        </div>)
-    }
+const StoreView: FunctionComponent<{
+  store: Bank;
+  color: string;
+  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",
+        alignItems: "center",
+        justifyContent: "center",
+        alignContent: "center",
+        flexWrap: "wrap",
+      }}
+    >
+      {balls}
+    </div>
+  );
+};
 
-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={() => {
-            if (game.turnPlayerId === game.player1Id) onHoleSelect(game.board.player1Pits.indexOf(hole), hole)
-        }} />
-    ))
+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={() => {
+        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={() => {
-            if (game.turnPlayerId === game.player2Id) onHoleSelect(game.board.player2Pits.indexOf(hole), hole)
-        }} />
-    ))
+  const player2Pits = game!!.board.player2Pits.map((hole) => (
+    <HoleView
+      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={{
-            margin: '10px',
-            padding: '20px',
-            display: 'grid',
-            gridTemplateColumns: 'repeat(8, 11vw)',
-            gridTemplateRows: 'repeat(2, 11vw)',
-            borderRadius: "3vw",
-            background: isUserTurn ? theme.boardColor : theme.boardColorWhenPlayerTurn
-        }}>
-            {
-                userKey === game.player2Id ? (
-                    <>
-                        <StoreView 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 store={game!!.board.player1Bank} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
-                        {player2Pits.reverse()}
-                        {player1Pits}
-                    </>
-                )
-            }
+  return (
+    <div
+      style={{
+        margin: "10px",
+        padding: "20px",
+        display: "grid",
+        gridTemplateColumns: "repeat(8, 11vw)",
+        gridTemplateRows: "repeat(2, 11vw)",
+        borderRadius: "3vw",
+        background: isUserTurn
+          ? theme.boardColor
+          : theme.boardColorWhenPlayerTurn,
+      }}
+    >
+      {userKey === game.player2Id ? (
+        <>
+          <StoreView
+            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
+            store={game!!.board.player1Bank}
+            color={storeColor}
+            gridColumn="8 / 9"
+            gridRow="1 / 3"
+          />
+          {player2Pits.reverse()}
+          {player1Pits}
+        </>
+      )}
+    </div>
+  );
+};
 
-        </div>
-    )
-}
-
-export default BoardView
\ No newline at end of file
+export default BoardView;