Added dice rolling and some basic piece dragging

src/Game/Dice/Dice.css

@@ -0,0 +1,7 @@
+.dice {
+    position: absolute;
+    left: 20%;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+}

src/Game/Dice/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEventHandler } from 'react';
 import * as IMAGES from './images';
+import './Dice.css'
 
 type DiceProps = {
     onClick: MouseEventHandler,
@@ -9,6 +10,6 @@ type DiceProps = {
 export default function Dice({ onClick, values }: DiceProps) {
     return <div className="dice" onClick={onClick} style={{ cursor: 'pointer' }}>
         <img src={IMAGES[`black${values[0] || 6}`]} />
-        <img src={IMAGES[`white${values[1] || 3}`]} />
+        <img src={IMAGES[`white${values[1] || 6}`]} />
     </div>
 }

src/Game/Game.css

@@ -5,14 +5,6 @@
     flex-wrap: wrap;
 }
 
-.dice {
-    position: absolute;
-    left: 20%;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 2;
-}
-
 .bar {
     background: lightblue;
     flex-basis: 4%;
@@ -23,19 +15,6 @@
     flex-basis: 4%;
 }
 
-.piece {
-    width: 20px;
-    height: 20px;
-
-    &.white {
-        background: white;
-    }
-
-    &.black {
-        background: black;
-    }
-}
-
 .point {
     position: relative;
     flex-basis: calc(100% / 14);
@@ -46,6 +25,7 @@
         width: 0;
         height: 0;
         position: absolute;
+        z-index: -1;
     }
 }
 

src/Game/Piece/Piece.css

@@ -0,0 +1,12 @@
+.piece {
+    width: 20px;
+    height: 20px;
+
+    &.white {
+        background: white;
+    }
+
+    &.black {
+        background: black;
+    }
+}

src/Game/Piece/index.tsx

@@ -0,0 +1,32 @@
+import { useCallback, type DragEventHandler } from "react";
+import black from './images/piece-black-2.png';
+import white from './images/piece-white-2.png';
+import './Piece.css'
+
+const IMAGES = { black, white }
+
+type PointProps = {
+    pieces: number,
+    move: (from: number, to: number) => void,
+    position: number
+}
+
+export default function Point({ pieces, move, position }: PointProps) {
+
+    const onDragStart: DragEventHandler = useCallback((event) => event.dataTransfer?.setData('text', position.toString()), [])
+    const onDragOver: DragEventHandler = useCallback((event) => { event.preventDefault(); }, [])
+    const onDropListener: DragEventHandler = useCallback((event) => {
+        event.preventDefault();
+        let from = parseInt(event.dataTransfer?.getData("text")!)
+        return move(from, position)
+    }, [move])
+
+    const Pieces = Array.from({ length: Math.abs(pieces) });
+    const color = pieces > 0 ? 'white' : 'black';
+
+    return <div className="point" onDragOver={onDragOver} onDragStart={onDragStart} onDrop={onDropListener}>
+        {Pieces.map((value, index) => <div className={`piece ${color}`} key={index}>
+            <img src={IMAGES[color]} />
+        </div>)}
+    </div>
+}

src/Game/index.tsx

@@ -1,6 +1,6 @@
 import './Game.css';
 import Dice from './Dice';
-import Point from './Point';
+import Point from './Piece';
 import { useCallback, useState } from 'react';
 
 const DEFAULT_BOARD = [
@@ -26,10 +26,16 @@ export default function Game() {
         const fromPieces = board[from];
         if (!fromPieces) return;
 
-        if (board[to] === 1) {
+        // TODO: Validate moves against dice
+
+        if (to === -1) {
+            // TODO: bear off piece
+        } else if (board[to] === 1) {
             board[to] = -1;
+            // TODO: move piece to bar
         } else if (board[to] === -1) {
             board[to] = 1;
+            // TODO: move piece to bar
         } else if (board[to] > 0 && fromPieces > 0) {
             board[to]++;
             board[from]--;
@@ -48,40 +54,15 @@ export default function Game() {
         setDice([first, second])
     }, [])
 
-    const onDrop = useCallback((position: number, event: DragEvent) => {
-        move(event.dataTransfer.getData('text'), position);
-    }, [move])
 
     return <div id="board">
         <Dice onClick={roll} values={dice} />
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
+
+        {board.slice(0, 12).map((pieces, index) => <Point pieces={pieces} move={move} position={index} />)}
         <div className="bar"></div>
         <div className="bar"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
-        <div className="point"></div>
+        {board.slice(12).map((pieces, index) => <Point pieces={pieces} move={move} position={index} />)}
         <div className="home"></div>
         <div className="home"></div>
     </div >;
-    return <>{this.state.board.map((pieces, position) => <Point onDrop={this.onDrop.bind(this, position)} pieces={pieces} position={position} />)}</>;
 }