[opponents-hand] generate random move and random piece for demo

resources/js/Game/Board/OpponentsPiece/OpponentsHand.tsx

@@ -1,21 +1,26 @@
 import { useBoardState } from "@/Store/board_state";
 import { useGameDimensions } from "@/Store/game_dimensions";
-import { OpponentMovePayload } from "@/types/piece";
+import { OpponentMovePayload, PieceCode, Vector2 } from "@/types/piece";
 import { useControls } from "leva";
 import { useEffect, useState } from "react";
 import * as THREE from "three";
 import { OpponentPiece } from "./OpponentPiece";
+import { PiecePositions } from "@/Constants/Piece";
 
 export const OpponentsHand = () => {
     const [occupations, setOccupations] = useState<OpponentMovePayload[]>([]);
     const state = useBoardState(state => state.gameState.state);
+    const blockSize = useGameDimensions(state => state.blockSize);
 
     useEffect(() => {
 
         if(state === 'OpponentTurn'){
+            //* Generate a random opponent move for demo
+            const randomX = Math.round((((Math.random() - 0.5) * 10)) / blockSize) * blockSize;
+            const randomY = Math.round((((Math.random() - 0.5) * 10)) / blockSize) * blockSize;
             const opponentMovePayload: OpponentMovePayload = {
-                block_positions: [{x: 0, y: 0}, {x: -1, y: 0}, {x: -1, y: -1}],
-                destination: {x: Math.random() < 0.5 ? -2 : 2, y: Math.random() < 0.5 ? -2 : 2},
+                block_positions: PiecePositions[Math.floor(Math.random() * 20) as PieceCode],
+                destination: {x: randomX, y: randomY},
                 opponent: 'green',
             }
             setOccupations([...occupations, opponentMovePayload])