Added tap interface support

src/Game/Game.css

@@ -3,6 +3,10 @@
     --secondary: #ffd8a0;
     --primary-hover: #2727ff;
     --secondary-hover: rgb(128, 128, 211);
+    .selected {
+        --primary: red;
+        --secondary: red;
+    }
     display: flex;
     gap: 0;
     height: 100%;

src/Game/Piece.tsx

@@ -7,11 +7,13 @@ const IMAGES = { black, white }
 
 type PieceProps = {
     color: 'black' | 'white',
-    position?: number
+    position?: number,
+    onSelect?: (position: number|null) => void,
 }
 
-export default function Piece({ color, position }: PieceProps) {
+export default function Piece({ color, position, onSelect }: PieceProps) {
     const onDragStart: DragEventHandler = useCallback((event) => {
+        if (onSelect) onSelect(null)
         switch (position) {
             case undefined:
                 event.preventDefault()
@@ -22,7 +24,7 @@ export default function Piece({ color, position }: PieceProps) {
             default:
                 event.dataTransfer?.setData('text', position.toString())
         }
-    }, [position, color]);
+    }, [position, color, onSelect]);
 
     return <div className={`piece ${color}`} onDragStart={onDragStart} draggable={position !== undefined}>
         <img src={IMAGES[color]} />

src/Game/Point.tsx

@@ -4,10 +4,12 @@ import Piece from './Piece'
 type PointProps = {
     pieces: number,
     move: (from: number, to: number) => void,
-    position: number
+    position: number,
+    selected: boolean,
+    onSelect: (position: number) => void
 }
 
-export default function Point({ pieces, move, position }: PointProps) {
+export default function Point({ pieces, move, position, onSelect, selected }: PointProps) {
     const onDragOver: DragEventHandler = useCallback((event) => { event.preventDefault(); }, [])
     const onDrop: DragEventHandler = useCallback((event) => {
         event.preventDefault();
@@ -17,7 +19,11 @@ export default function Point({ pieces, move, position }: PointProps) {
 
     const color = pieces > 0 ? 'white' : 'black';
 
-    return <div className="point" onDragOver={onDragOver} onDrop={onDrop}>
-        {Array.from({ length: Math.abs(pieces) }, (_, index) => <Piece key={index} color={color} position={position} />)}
+    const onClick = useCallback(() => {
+        onSelect(position)
+    }, [position, onSelect])
+
+    return <div className={`point ${selected&&'selected'}`} onClick={onClick} onDragOver={onDragOver} onDrop={onDrop}>
+        {Array.from({ length: Math.abs(pieces) }, (_, index) => <Piece key={index} color={color} position={position} onSelect={onSelect} />)}
     </div>
 }

src/Game/index.tsx

@@ -23,6 +23,18 @@ export default function Game() {
     const [whiteBar, setWhiteBar] = useState(0)
     const [board, setBoard] = useState(() => [...DEFAULT_BOARD])
     const [dice, setDice] = useState(() => [rollDie(), rollDie()])
+    const [selected, setSelected] = useState(null);
+
+    const onSelect = useCallback(position => {
+        if (position === null || selected === position) {
+            setSelected(null);
+        } else if (selected === null) {
+            setSelected(position);
+        } else {
+            move(selected, position);
+            setSelected(null);
+        }
+    }, [selected])
 
     // TODO: Validate moves against dice
     const move = useCallback((from: number | "white" | "black", to: number) => {
@@ -101,6 +113,6 @@ export default function Game() {
         <div className="home" onDragOver={onDragOver} onDrop={onDrop}>
             {Array.from({ length: whiteHome }, (_, index) => <Piece key={index} color="white" />)}
         </div>
-        {board.map((pieces, index) => <Point key={index} pieces={pieces} move={move} position={index} />)}
+        {board.map((pieces, index) => <Point key={index} pieces={pieces} move={move} position={index} selected={selected==index} onSelect={onSelect} />)}
     </div >;
 }