[camera-position] add camera position debugging and memoize functions…

… that are affected

resources/js/Game/Board/Board.tsx

@@ -1,11 +1,9 @@
 import { useGameDimensions } from "@/Store/game_dimensions";
-import { DragControls, Grid } from "@react-three/drei";
-import { PieceCode } from "@/types/piece";
 import * as THREE from "three";
 import { useBoardState } from "@/Store/board_state";
+import { memo } from "react";
 
-export const Board = () => {
-    const blockSize = useGameDimensions(state => state.blockSize);
+export const Board = memo(() => {
     const gridSize = useGameDimensions(state => state.getGridSize());
     const setBoardRef = useBoardState(state => state.setBoardRef);
     return (
@@ -17,4 +15,4 @@ export const Board = () => {
             </mesh>
         </>
     );
-}
+});

resources/js/Game/Board/GameMap.tsx

@@ -1,9 +1,38 @@
+import { useThree } from "@react-three/fiber";
 import { Lights } from "../Ligths";
 import { Board } from "./Board";
 import Hand from "./Hand";
+import { useEffect } from "react";
+import { useControls } from "leva";
 
 const GameMap = () => {
 
+    const {y,z} = useControls({
+        y: {
+            label: 'Camera Y',
+            value: 9.5,
+            min: 0,
+            max: 30,
+            step: 0.1,
+        },
+        z: {
+            label: 'Camera Z',
+            value: 8.3,
+            min: 0,
+            max: 30,
+            step: 0.1,
+        },
+    })
+
+    const {camera} = useThree();
+
+    useEffect(() => {
+
+        camera.position.set(0, y, z);
+        camera.updateProjectionMatrix()
+
+    }, [y,z])
+
     return (
         <>
             <Lights/>

resources/js/Game/Board/Hand.tsx

@@ -2,9 +2,9 @@ import * as THREE from "three";
 import { Piece } from "./Piece/Piece";
 import { PieceCode } from "@/types/piece";
 import { useGameDimensions } from "@/Store/game_dimensions";
+import { memo } from "react";
 
-const Hand = () => {
-
+const Hand = memo(() => {
     const blockSize = useGameDimensions(state => state.blockSize);
     const handPosition = new THREE.Vector3(10, 0, 0);
     return (
@@ -24,6 +24,6 @@ const Hand = () => {
             }
         </>
     )
-}
+})
 
 export default Hand