diff --git a/packages/frontend/src/pages/room.vue b/packages/frontend/src/pages/room.vue index 51258b6e3b..8395daa04b 100644 --- a/packages/frontend/src/pages/room.vue +++ b/packages/frontend/src/pages/room.vue @@ -227,10 +227,8 @@ onMounted(() => { position: [-35, 90, 175], rotation: [0, Math.PI, 0], options: { - bodyStyle: { - type: 'color', - value: [0.45, 0.8, 1], - }, + bodyStyle: 'color', + bodyColor: [0.45, 0.8, 1], }, }, { id: 'f3', diff --git a/packages/frontend/src/utility/room/engine.ts b/packages/frontend/src/utility/room/engine.ts index 0e5e64dc32..7f20230b07 100644 --- a/packages/frontend/src/utility/room/engine.ts +++ b/packages/frontend/src/utility/room/engine.ts @@ -63,21 +63,39 @@ type RoomObjectInstance = { export const WORLD_SCALE = 100; -type ObjectDef> = { +type ColorOptionSchema = { + type: 'color'; + label: string; +}; + +type SelectOptionSchema = { + type: 'select'; + label: string; + enum: string[]; +}; + +type OptionsSchema = Record; + +type GetOptionsSchemaValues = { + [K in keyof T]: T[K] extends ColorOptionSchema ? [number, number, number] : T[K] extends SelectOptionSchema ? T[K]['enum'][number] : never; +}; + +type ObjectDef = { id: string; - defaultOptions: Options; + optionsSchema: OpSc; + defaultOptions: GetOptionsSchemaValues; placement: 'top' | 'side' | 'bottom' | 'wall' | 'ceiling' | 'floor'; isChair?: boolean; createInstance: (args: { room: RoomEngine; root: BABYLON.Mesh; - options: Options; + options: GetOptionsSchemaValues; loaderResult: BABYLON.ISceneLoaderAsyncResult; meshUpdated: () => void; - }) => RoomObjectInstance; + }) => RoomObjectInstance>; }; -export function defineObject>(def: ObjectDef): ObjectDef { +export function defineObject(def: ObjectDef): ObjectDef { return def; } diff --git a/packages/frontend/src/utility/room/objects/tabletopDigitalClock.ts b/packages/frontend/src/utility/room/objects/tabletopDigitalClock.ts index 83f1da243e..505828a5ac 100644 --- a/packages/frontend/src/utility/room/objects/tabletopDigitalClock.ts +++ b/packages/frontend/src/utility/room/objects/tabletopDigitalClock.ts @@ -9,11 +9,20 @@ import { get7segMeshesOfCurrentTime } from '../utility.js'; export const tabletopDigitalClock = defineObject({ id: 'tabletopDigitalClock', - defaultOptions: { + optionsSchema: { bodyStyle: { + type: 'select', + label: 'Body Style', + enum: ['color', 'wood'], + }, + bodyColor: { type: 'color', - value: [0.45, 0.8, 0], - } as { type: 'color'; value: [number, number, number] } | { type: 'wood'; } | null, + label: 'Body Color', + }, + }, + defaultOptions: { + bodyStyle: 'color', + bodyColor: [0.45, 0.8, 0], }, placement: 'top', createInstance: ({ room, options, root }) => { @@ -23,8 +32,8 @@ export const tabletopDigitalClock = defineObject({ const bodyMaterial = bodyMesh.material as BABYLON.PBRMaterial; - if (options.bodyStyle?.type === 'color') { - const [r, g, b] = options.bodyStyle.value; + if (options.bodyStyle === 'color') { + const [r, g, b] = options.bodyColor; bodyMaterial.albedoColor = new BABYLON.Color3(r, g, b); }