object type creation and deletion

src/blockly/actions/physics/applyImpulse.ts

@@ -15,7 +15,7 @@ Blockly.Blocks['physics_apply_impulse_action'] = {
         this.setInputsInline(true)
         this.setPreviousStatement(true, null);
         this.setNextStatement(true, null);
-        this.setTooltip('Push me to a position');
+        this.setTooltip('Push me in a direction');
         this.setColour(150);
     }
 };

src/blockly/values/index.ts

@@ -7,3 +7,4 @@ export * from './position';
 export * from './direction';
 export * from './objectById';
 export * from './directionToPosition';
+export * from './playerObject';

src/blockly/values/playerObject.ts

@@ -0,0 +1,19 @@
+import * as Blockly from "blockly";
+import { javascriptGenerator, Order } from "blockly/javascript";
+
+Blockly.Blocks['player_object_value'] = {
+    init(this: Blockly.Block) {
+        this.appendEndRowInput()
+            .appendField('Player');
+        this.setInputsInline(false)
+        this.setOutput(true, 'Object');
+        this.setTooltip('Returns object that is controlled by player');
+        this.setColour(315);
+    }
+};
+
+javascriptGenerator.forBlock['player_object_value'] = function (_block, _generator) {
+    return ['(scene.playerObjectId?scene.objects[scene.playerObjectId]:undefined)', Order.ATOMIC];
+};
+
+export { };

src/components/CharacterView.tsx

@@ -69,7 +69,7 @@ export const PlayerObjectView = observer(function ({ object, objectType }: Playe
 
     useEffect(() => {
         const canvas = gl.domElement;
-        const onClick = () => canvas.requestPointerLock();
+        const onClick = () => { if (document.pointerLockElement !== canvas) canvas.requestPointerLock()?.catch(() => {}); };
         const onMouseMove = (e: MouseEvent) => {
             if (document.pointerLockElement !== canvas) return;
             mouseRef.current.x += e.movementX;

src/components/MenuView.scss

@@ -1,6 +1,6 @@
 .menu {
     user-select: none;
-    font-size: 13px;
+    font-size: 16px;
 
     & details {
         &>summary {
@@ -11,7 +11,6 @@
             }
 
             display: flex;
-            padding: 8px 8px;
             cursor: pointer;
             border-radius: 4px;
             white-space: nowrap;
@@ -30,12 +29,26 @@
             }
 
             &>.title {
+                padding: 8px;
                 flex: 1;
+                overflow-x: hidden;
+                text-overflow: ellipsis;
+            }
+
+            &>.actions {
+                display: flex;
+
+                &>* {
+                    padding: 8px;
+                }
+
+                &>*:hover {
+                    background: rgba(255, 255, 255, 0.08);
+                }
             }
 
             & svg {
                 vertical-align: middle;
-                margin: 2px;
 
                 box-sizing: border-box;
             }

src/components/ObjectEditorView.tsx

@@ -4,7 +4,6 @@ import { useMemo, useRef, type RefObject } from "react";
 import type { Group } from "three";
 import { TransformControls, useHelper } from "@react-three/drei";
 import { BoxHelper } from "three";
-import type { ThreeEvent } from "@react-three/fiber";
 import { state } from "../state";
 import { nextObjectEditMode } from "../state/worldEditorState";
 import { ObjectViewInternal, type ObjectViewInternalHandle } from "./ObjectViewInternal";

src/components/ObjectViewInternal.tsx

@@ -63,13 +63,12 @@ export const ObjectViewInternal = function ({ object, objectType, ref, ...props
             return reaction(
                 () => gameObj.pendingActions.impulse,
                 (impulse) => {
-                    if (!impulse) return;
+                    if (!impulse || !rbRef.current)
-                    if (!rbRef.current) { console.warn('applyImpulse: rbRef is null for', gameObj.id); return; }
+                        return;
 
                     let { direction, amplitude } = impulse;
                     amplitude *= 100;
                     const v = { x: direction[0] * amplitude, y: direction[1] * amplitude, z: direction[2] * amplitude };
-                    console.log('applyImpulse', gameObj.id, v, 'bodyType', rbRef.current.bodyType());
                     rbRef.current.applyImpulse(v, true);
                     runInAction(() => {
                         gameObj.pendingActions.impulse = undefined;

src/components/scriptEditor/ScriptEditorView.tsx

@@ -36,6 +36,7 @@ const TOOLBOX: Blockly.utils.toolbox.ToolboxDefinition = {
                 { kind: 'block', type: 'dpos_value' },
                 { kind: 'block', type: 'direction_to_position_value' },
                 { kind: 'block', type: 'object_by_id_value' },
+                { kind: 'block', type: 'player_object_value' },
             ],
         },
         {

src/model/defaultVoxelTypes.ts

@@ -38,3 +38,5 @@ export const DEFAULT_VOXEL_TYPES = {
     [water.id]: water,
     [glass.id]: glass,
 }
+
+export const DEFAULT_VOXEL_TYPE = stone;

src/model/gameFactory.ts

@@ -29,7 +29,6 @@ export class GameEventBus {
 
     emit(event: string, context: GameEventContext): void {
         console.log('emitting ' + event);
-        console.log(Array.from(this.handlers.entries()));
         this.handlers.get(event)
             ?.forEach((handler) => handler(context));
     }

src/state/menuState.tsx

@@ -1,7 +1,7 @@
 import { makeAutoObservable } from "mobx";
 import { state } from "./rootState";
 import type { ReactNode } from "react";
-import { IconRun } from '@tabler/icons-react';
+import { IconRun, IconTrash, IconPlus, IconCubePlus, IconCubeOff } from '@tabler/icons-react';
 
 export type MenuNodeAction = {
     id: string;
@@ -26,51 +26,83 @@ export class MenuState {
     }
 
     private get editorObjectTypesMenu(): MenuNode[] {
-        const scene = state.worldEditor.scene;
+        const editor = state.worldEditor;
+        const scene = editor.scene;
 
         return Object.values(state.world.data.objectTypes)
-            .map((ot) => ({
+            .map((ot) => {
-                id: `ot-${ot.id}`,
+                const children = Object.values(scene.objects)
-                title: ot.name,
-                onClick: () => { state.worldEditor.setSelectedObjectType({ id: ot.id, editMode: 'scripts' }) },
-                selected: () => state.worldEditor.selection?.type === 'objectType' && state.worldEditor.selection?.id === ot.id,
-                children: Object.values(scene.objects)
                     .filter((o) => o.typeId === ot.id)
-                    .map((o) => {
+                    .map((o, idx) => {
                         const isPlayer = scene.playerObjectId === o.id;
 
                         const actions: MenuNodeAction[] = [];
-                        if (!isPlayer)
+                        if (!isPlayer) {
                             actions.push({
-                                id: 'control-by-player',
+                                id: 'delete-object-instance',
+                                content: <IconTrash size="1em" />,
+                                tooltip: 'Delete the object',
+                                onClick: () => { editor.deleteObject(o.id); },
+                            });
+                            actions.push({
+                                id: 'control-object-instance-by-player',
                                 content: <IconRun size="1em" />,
                                 tooltip: 'Mark as player',
-                                onClick: () => { state.markObjectAsPlayer(o); },
+                                onClick: () => { scene.playerObjectId = o.id; },
                             });
+                        }
 
                         return {
                             id: `o-${o.id}`,
                             title: <>
                                 {isPlayer && <IconRun size="1em" />}
-                                {o.id}
+                                {`${ot.name} ${idx + 1}`}
                             </>,
                             className: isPlayer ? 'player-controlled-object' : undefined,
                             actions,
                             onClick: () => { state.worldEditor.setSelectedObject({ id: o.id, editMode: 'translate' }) },
                             selected: () => state.worldEditor.selection?.type === 'object' && state.worldEditor.selection?.id === o.id,
                         } as MenuNode;
-                    })
+                    });
-            } as MenuNode));
+
+                return {
+                    id: `ot-${ot.id}`,
+                    title: `${ot.name} (${children.length ? children.length : 'no'} instance${children.length != 1 ? 's' : ''})`,
+                    actions: [
+                        {
+                            id: 'create-object-instance',
+                            content: <IconPlus size="1em" />,
+                            tooltip: 'Create new object instance',
+                            onClick: () => { editor.addObjectInstanceAtRandomPosition(ot.id); },
+                        },
+                        {
+                            id: 'delete-object-type',
+                            content: <IconCubeOff size="1em" />,
+                            tooltip: 'Delete object type',
+                            onClick: () => { editor.deleteObjectType(ot.id); },
+                        },
+                    ],
+                    onClick: () => { editor.setSelectedObjectType({ id: ot.id, editMode: 'scripts' }) },
+                    selected: () => editor.selection?.type === 'objectType' && editor.selection?.id === ot.id,
+                    children,
+                } as MenuNode
+            });
     }
 
     private get editorMenu(): MenuNode[] {
         return [
             {
-                id: 'editor-objects-menu',
+                id: 'editor-scene-menu',
-                title: 'Objects',
+                title: 'Scene',
                 onClick: () => { state.worldEditor.resetSelection() },
                 selected: () => !state.worldEditor.selection,
                 children: this.editorObjectTypesMenu,
+                actions: [{
+                    id: 'create-object-type',
+                    content: <IconCubePlus size="1em" />,
+                    tooltip: 'Create new object type',
+                    onClick: () => { state.worldEditor.addObjectType(); },
+                }],
             }
         ]
     }

src/state/worldEditorState.ts

@@ -1,10 +1,11 @@
 import { makeAutoObservable, runInAction } from "mobx";
 import type { WorldState } from "./worldState";
-import { type ObjectInstance, type Pos3, type R3, type V3, type RuntimeScene } from "../types";
+import { type ObjectInstance, type Pos3, type R3, type V3, type RuntimeScene, type ObjectType } from "../types";
 import { createObjectInstance } from "../utils/object";
 import { randomId } from "../utils";
 import { state } from "./rootState";
 import { populateRuntimeObject } from "../utils/runtime";
+import { DEFAULT_VOXEL_TYPE } from "../model/defaultVoxelTypes";
 
 export const ObjectEditModeEnum = [
     'translate',
@@ -116,14 +117,14 @@ export class WorldEditorState {
         });
     }
 
-    public addObjectCloneAtRandomPosition(typeId: string): ObjectInstance {
+    public addObjectInstanceAtRandomPosition(typeId: string): ObjectInstance {
-        return this.addObjectClone(
+        return this.addObjectInstance(
             typeId,
             { x: Math.random() * 3, y: Math.random() * 3, z: Math.random() * 1 },
         );
     }
 
-    public addObjectClone(
+    public addObjectInstance(
         typeId: string,
         pos: { x: number; y: number; z: number; },
     ): ObjectInstance {
@@ -133,7 +134,42 @@ export class WorldEditorState {
 
         this.scene.objects[obj.id] = obj;
 
+        this.setSelectedObject({ id: obj.id, editMode: 'translate' });
+
         return obj;
     }
+
+    public deleteObject(objectId: string) {
+        if (this.selection?.type === 'object' && this.selection.id === objectId)
+            this.resetSelection();
+        delete (this.scene.objects[objectId]);
+    }
+
+    public addObjectType(): ObjectType {
+        const objectType: ObjectType = {
+            id: randomId(),
+            name: 'Unnamed',
+            voxels: [
+                {
+                    typeId: DEFAULT_VOXEL_TYPE.id,
+                    position: [0, 0, 0],
+                }
+            ],
+        };
+        this.world.data.objectTypes[objectType.id] = objectType;
+        this.setSelectedObjectType({ id: objectType.id, editMode: 'scripts' });
+        return objectType;
+    }
+
+    public deleteObjectType(typeId: string) {
+        if (this.selection?.type === 'objectType' && this.selection.id === typeId)
+            this.resetSelection();
+
+        for (const id in this.scene.objects)
+            if (this.scene.objects[id].typeId === typeId)
+                this.deleteObject(id);
+
+        delete (this.world.data.objectTypes[typeId])
+    }
 }