wip

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',

packages/frontend/src/utility/room/engine.ts

@@ -63,21 +63,39 @@ type RoomObjectInstance<Options> = {
 
 export const WORLD_SCALE = 100;
 
-type ObjectDef<Options extends Record<string, any>> = {
+type ColorOptionSchema = {
+	type: 'color';
+	label: string;
+};
+
+type SelectOptionSchema = {
+	type: 'select';
+	label: string;
+	enum: string[];
+};
+
+type OptionsSchema = Record<string, ColorOptionSchema | SelectOptionSchema>;
+
+type GetOptionsSchemaValues<T extends OptionsSchema> = {
+	[K in keyof T]: T[K] extends ColorOptionSchema ? [number, number, number] : T[K] extends SelectOptionSchema ? T[K]['enum'][number] : never;
+};
+
+type ObjectDef<OpSc extends OptionsSchema> = {
 	id: string;
-	defaultOptions: Options;
+	optionsSchema: OpSc;
+	defaultOptions: GetOptionsSchemaValues<OpSc>;
 	placement: 'top' | 'side' | 'bottom' | 'wall' | 'ceiling' | 'floor';
 	isChair?: boolean;
 	createInstance: (args: {
 		room: RoomEngine;
 		root: BABYLON.Mesh;
-		options: Options;
+		options: GetOptionsSchemaValues<OpSc>;
 		loaderResult: BABYLON.ISceneLoaderAsyncResult;
 		meshUpdated: () => void;
-	}) => RoomObjectInstance<Options>;
+	}) => RoomObjectInstance<GetOptionsSchemaValues<OpSc>>;
 };
 
-export function defineObject<Options extends Record<string, any>>(def: ObjectDef<Options>): ObjectDef<Options> {
+export function defineObject<const OpSc extends OptionsSchema>(def: ObjectDef<OpSc>): ObjectDef<OpSc> {
 	return def;
 }
 

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);
 				}