initial commit

src/components/ObjectView.tsx

@@ -0,0 +1,32 @@
+import { observer } from "mobx-react-lite";
+import type { ObjectInstance } from "../types";
+import { useRef } from "react";
+import type { Mesh } from "three";
+import { state } from "../state";
+
+type ObjectViewProps = {
+    object: ObjectInstance;
+}
+
+export const ObjectView = observer(function ({ object }: ObjectViewProps) {
+    const meshRef = useRef<Mesh>(null);
+
+    const objectType = state.world.getObjectTypeById(object.typeId);
+    if (!objectType)
+        return null;
+
+    return (<>
+        <group position={object.position} rotation={object.rotation}>
+            {
+                objectType.voxels.map((v, idx) => {
+                    const vt = state.world.getVoxelTypeById(v.typeId);
+                    return <mesh key={idx} ref={meshRef} position={v.position}>
+                        <boxGeometry args={[1, 1, 1]} />
+                        <meshStandardMaterial color={(v.color ?? vt?.color) ?? 'white'} opacity={(v.opacity ?? vt?.opacity) ?? 1} />
+                    </mesh>
+                })
+            }
+        </group>
+    </>);
+});
+

src/components/ThreeView.tsx

@@ -0,0 +1,14 @@
+import { Canvas } from '@react-three/fiber';
+import { observer } from 'mobx-react-lite';
+import { state } from '../state';
+import { WorldView } from './WorldView';
+
+export const ThreeView = observer(function () {
+    return (
+        <div style={{ width: '800px', height: '600px', border: '1px solid #333', borderRadius: '8px', overflow: 'hidden' }}>
+            <Canvas camera={state.world.character.camera}>
+                <WorldView />
+            </Canvas>
+        </div>
+    )
+});

src/components/Toolbar.tsx

@@ -0,0 +1,26 @@
+import { observer } from "mobx-react-lite";
+
+import { state } from "../state";
+import type { RunningGameState } from "../types";
+
+export const Toolbar = observer(function () {
+
+    function handleCloneTest1ObjectClick(): void {
+        state.worldEditor.addObjectCloneAtRandomPosition('test1');
+    }
+
+    return <div className="toolbar">
+        {state.world.isPlaying
+            ? <>
+                <button onClick={() => state.world.stop()}>Stop</button>
+                {
+                    (state.world.data.state as RunningGameState).paused
+                        ? <button onClick={() => state.world.play()}>Play</button>
+                        : <button onClick={() => state.world.pause()}>Pause</button>
+                }
+            </>
+            : <button onClick={() => state.world.play()}>Play</button>
+        }
+        <button onClick={handleCloneTest1ObjectClick}>Clone test1</button>
+    </div>
+});

src/components/WorldView.tsx

@@ -0,0 +1,20 @@
+import { useFrame } from '@react-three/fiber';
+import { observer } from 'mobx-react-lite';
+import { state } from '../state';
+import { ObjectView } from './ObjectView';
+
+export const WorldView = observer(function () {
+  const world = state.world;
+
+  console.log(world.currentScene.objects);
+
+  useFrame((_, delta) => {
+    world.tick(delta);
+  })
+
+  return (<>
+    <ambientLight intensity={0.5} />
+    <directionalLight position={[5, 5, 5]} intensity={1} />
+    {world.currentScene.objects.map((obj) => <ObjectView key={obj.id} object={obj} />)}
+  </>)
+});