feat: add bar component

src/components/Bar.tsx

@@ -0,0 +1,40 @@
+import { useDimensions, useGameState, useTheme } from "../providers";
+import { Checker } from "./Checker";
+import { PipCounter } from "./PipCounter";
+
+export const Bar = () => {
+  const dimensions = useDimensions();
+  const colours = useTheme();
+  const gameState = useGameState();
+
+  const { barWidth, panelWidth, borderWidth, boardHeight } = dimensions;
+  const barPositions = (gameState?.positions ?? []).filter(
+    (p) => p.position === "bar",
+  );
+
+  return (
+    <>
+      <rect
+        key="bar"
+        x={panelWidth + borderWidth}
+        y={borderWidth}
+        width={barWidth}
+        height={boardHeight - borderWidth * 2}
+        fill={colours.borderColor}
+      />
+      {barPositions.map(({ playerType, numberOfCheckers = 1 }) =>
+        [...new Array(numberOfCheckers)].map((_, i) => (
+          <Checker
+            key={`bar-${playerType}-${i}`}
+            playerType={playerType}
+            x="bar"
+            y={i + 1}
+            totalOnPoint={numberOfCheckers}
+          />
+        )),
+      )}
+      <PipCounter key="opponent-pip-counter" playerType="opponent" />
+      <PipCounter key="player-pip-counter" playerType="player" />
+    </>
+  );
+};

src/components/Board.tsx

@@ -3,8 +3,8 @@ import { useDimensions, useGameState, useTheme } from "../providers";
 import { Checker } from "./Checker";
 import { Point } from "./Point";
 import { Sidebar } from "./Sidebar";
-import { PipCounter } from "./PipCounter";
 import { Dice } from "./Dice";
+import { Bar } from "./Bar";
 
 export const Board: React.FC = () => {
   const dimensions = useDimensions();
@@ -15,7 +15,6 @@ export const Board: React.FC = () => {
   const {
     boardWidth,
     barWidth,
-    panelWidth,
     borderWidth,
     pointWidth,
     boardHeight,
@@ -154,7 +153,8 @@ export const Board: React.FC = () => {
         {positions &&
           positions.map(({ position, numberOfCheckers = 1, playerType }) => {
             const checkers = [...new Array(numberOfCheckers)].map((_, i) => {
-              if (position === 0 || position === 25) return null;
+              if (position === 0 || position === 25 || position === "bar")
+                return null;
               return (
                 <Checker
                   key={`${playerType}-${position}-${i}`}
@@ -172,16 +172,7 @@ export const Board: React.FC = () => {
             );
           })}
         {/* Middle bar */}
-        <rect
-          key="bar"
-          x={panelWidth + borderWidth}
-          y={borderWidth}
-          width={barWidth}
-          height={boardHeight - borderWidth * 2}
-          fill={colours.borderColor}
-        />
-        <PipCounter key="opponent-pip-counter" playerType="opponent" />
-        <PipCounter key="player-pip-counter" playerType="player" />
+        <Bar />
       </svg>
       <Sidebar key="sidebar" />
     </svg>

src/components/Checker.tsx

@@ -2,7 +2,33 @@ import { useDimensions, usePosition, useTheme } from "../providers";
 import { PlayerType } from "../types";
 
 type CheckerProps = {
-  x: number;
+  x:
+    | 0
+    | 1
+    | 2
+    | 3
+    | 4
+    | 5
+    | 6
+    | 7
+    | 8
+    | 9
+    | 10
+    | 11
+    | 12
+    | 13
+    | 14
+    | 15
+    | 16
+    | 17
+    | 18
+    | 19
+    | 20
+    | 21
+    | 22
+    | 23
+    | 24
+    | "bar";
   y: number;
   playerType: PlayerType;
   totalOnPoint: number;
@@ -28,10 +54,14 @@ export const Checker: React.FC<CheckerProps> = ({
       : opponentCheckerBorderColor;
   const pos = usePosition();
   const { checkerWidth, checkerStroke } = useDimensions();
-  const bottomModifier = x > 12 ? 1 : -1;
+  const bottomModifier =
+    x === "bar" ? (playerType === "opponent" ? 1 : -1) : x > 12 ? 1 : -1;
   const baseYOffset = checkerWidth * bottomModifier;
 
+  const barInitialOffset =
+    x === "bar" ? (checkerWidth / 1.8) * bottomModifier : 0;
   const yOffset =
+    barInitialOffset +
     (y - 1) * baseYOffset * (totalOnPoint > 5 ? 4 / (totalOnPoint - 1) : 1);
   return (
     <circle

src/components/Die.tsx

@@ -189,7 +189,6 @@ export const Die: React.FC<DieProps> = ({ value = 2, colorSchema }) => {
       );
       break;
   }
-  console.log(value);
   return (
     <g
       transform={`translate(${panelWidth + barWidth + panelWidth / 2 - dieWidth / 2}, ${boardHeight / 2 - dieWidth / 2})`}

src/components/PipCounter.tsx

@@ -13,9 +13,11 @@ export const PipCounter: React.FC<PipCountProps> = ({ playerType }) => {
   const pip = positions?.reduce((acc, current) => {
     const isPlayer = current.playerType === playerType;
     const normalisedPosition =
-      current.playerType === "player"
-        ? current.position
-        : 25 - current.position;
+      current.position === "bar"
+        ? 25
+        : current.playerType === "player"
+          ? current.position
+          : 25 - current.position;
     return isPlayer ? acc + current.numberOfCheckers * normalisedPosition : acc;
   }, 0);
 

src/components/Point.tsx

@@ -17,7 +17,7 @@ export const Point: React.FC<PointProps> = ({
 }) => {
   const { pointWidth, pointHeight, borderWidth } = useDimensions();
 
-  const { pointNumberColor, pointColor } = useTheme();
+  const { pointNumberColor, pointColor, altPointColor } = useTheme();
 
   const transform = bottom ? `scale(1 -1) translate(0, ${borderWidth})` : "";
 
@@ -38,7 +38,7 @@ export const Point: React.FC<PointProps> = ({
       </text>
       <polygon
         points={`${x},${y} ${x + width},${y} ${x + width / 2},${y + height}`}
-        fill={pointColor}
+        fill={odd ? pointColor : altPointColor}
         fillOpacity={odd ? "1" : "0.4"}
       />
       ;

src/helpers/calculate-base-points.ts

@@ -10,8 +10,13 @@ export const calculateBasePoints = (
     checkerWidth,
     boardHeight,
     checkerStroke,
+    boardWidth,
   } = dimensions;
   return {
+    bar: {
+      x: boardWidth / 2,
+      y: boardHeight / 2,
+    },
     24: {
       x: borderWidth + pointWidth / 2,
       y: borderWidth + checkerWidth / 2 + checkerStroke,

src/helpers/presets.ts

@@ -4,7 +4,7 @@ export const presets = {
     borderColor: "#ff7f50",
     pointColor: "#008080",
     pointNumberColor: "#000",
-    altPointColor: "#ffd700",
+    altPointColor: "#00d4d4",
     playerCheckerColor: "#fff",
     playerCheckerBorderColor: "#000",
     opponentCheckerColor: "#000",

src/providers/PositionProvider.tsx

@@ -2,9 +2,9 @@ import React, { createContext, useContext } from "react";
 import { calculateBasePoints } from "../helpers/calculate-base-points";
 import { useDimensions } from "./DimensionProvider";
 
-const PositionContext = createContext<Record<number, { x: number; y: number }>>(
-  {},
-);
+const PositionContext = createContext<
+  Record<number | "bar", { x: number; y: number }>
+>({ bar: { x: 0, y: 0 } });
 
 export const usePosition = () => useContext(PositionContext);
 

src/types.ts

@@ -32,7 +32,8 @@ type Position = {
     | 22
     | 23
     | 24
-    | 25;
+    | 25
+    | "bar";
   numberOfCheckers:
     | 1
     | 2

test-harness/tests/presets.ts

@@ -89,6 +89,8 @@ export const positionsPresets: Record<string, BoardStateState["positions"]> = {
     { position: 23, playerType: "opponent", numberOfCheckers: 15 },
     { position: 24, playerType: "opponent", numberOfCheckers: 15 },
     { position: 25, playerType: "opponent", numberOfCheckers: 15 },
+    { position: "bar", playerType: "opponent", numberOfCheckers: 15 },
+    { position: "bar", playerType: "player", numberOfCheckers: 15 },
   ],
   random: randomPositions(),
 };