game state separated from world state

src/components/SceneEditorView.tsx

@@ -1,24 +1,12 @@
-import { useLayoutEffect, useRef } from 'react';
+import { useRef } from 'react';
 import type React from 'react';
-import { useThree } from '@react-three/fiber';
 import { Grid, OrbitControls } from '@react-three/drei';
 import { observer } from 'mobx-react-lite';
 import { state } from '../state';
 import { SceneView } from './SceneView';
-import type { Pos3 } from '../types/3d';
 import { type OrthographicCamera, type PerspectiveCamera } from 'three';
+import { CameraSync } from './tools/CameraSync';
 
-const CameraSync = observer(function ({ camera }: { camera: Pos3 }) {
-    const { camera: threeCamera } = useThree();
-
-    useLayoutEffect(() => {
-        threeCamera.position.set(camera.position[0], camera.position[1], camera.position[2]);
-        threeCamera.rotation.set(camera.look[0], camera.look[1], camera.look[2]);
-        threeCamera.updateProjectionMatrix();
-    });
-
-    return null;
-});
 
 export const SceneEditorView = observer(function () {
     const controlsRef = useRef<React.ComponentRef<typeof OrbitControls>>(null);

src/components/ThreeView.tsx

@@ -49,14 +49,14 @@ export const ThreeView = observer(function () {
                 {
                     state.game
                         ? <>
-                            <button onClick={() => state.game!.stop()}><IconStop /></button>
+                            <button onClick={() => state.stopGame()}><IconStop /></button>
                             {
                                 state.game!.isPaused
                                     ? <button onClick={() => state.game!.resume()}><IconPlay /></button>
                                     : <button onClick={() => state.game!.pause()}><IconPause /></button>
                             }
                         </>
-                        : <button onClick={() => state.world.play()}><IconPlay /></button>
+                        : <button onClick={() => state.startGame()}><IconPlay /></button>
                 }
             </div>
         </div>

src/components/tools/CameraSync.tsx

@@ -0,0 +1,16 @@
+import { useThree } from "@react-three/fiber";
+import type { Pos3 } from "../../types/3d";
+import { useLayoutEffect } from "react";
+import { observer } from "mobx-react-lite";
+
+export const CameraSync = observer(function ({ camera }: { camera: Pos3 }) {
+    const { camera: threeCamera } = useThree();
+
+    useLayoutEffect(() => {
+        threeCamera.position.set(camera.position[0], camera.position[1], camera.position[2]);
+        threeCamera.rotation.set(camera.look[0], camera.look[1], camera.look[2]);
+        threeCamera.updateProjectionMatrix();
+    });
+
+    return null;
+});