wip

packages/frontend/src/pages/room.vue

@@ -60,6 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkButton @click="toggleLight">Toggle Light</MkButton>
 			<MkButton :primary="engine.isEditMode.value" @click="toggleEditMode">Edit mode: {{ engine.isEditMode.value ? 'on' : 'off' }}</MkButton>
 			<MkButton @click="addObject">addObject</MkButton>
+			<MkButton primary @click="save">save</MkButton>
 		</div>
 	</template>
 </div>
@@ -202,280 +203,282 @@ function onWheel(ev: WheelEvent) {
 	}
 }
 
-onMounted(() => {
-	engine.value = new RoomEngine({
-		roomType: 'default',
-		installedObjects: [{
-			id: 'a',
-			type: 'cardboardBox',
-			position: [120, 0, 50],
-			rotation: [0, 0.2, 0],
-			options: {
-				variation: 'mikan',
-			},
-		}, {
-			id: 'a2',
-			type: 'openedCardboardBox',
-			position: [115, 0, -20],
-			rotation: [0, -0.1, 0],
-			options: {},
-		}, {
-			id: 'b',
-			type: 'cardboardBox',
-			position: [120, 31, 50],
-			rotation: [0, 0.1, 0],
-			sticky: 'a',
-			options: {
-				variation: 'aizon',
-			},
-		}, {
-			id: '1',
-			type: 'cardboardBox',
-			position: [80, 0, 110],
-			rotation: [0, 2, 0],
-			options: {
-				variation: null,
-			},
-		}, {
-			id: 'c',
-			type: 'desk',
-			position: [-115, 0, 85],
-			rotation: [0, -Math.PI / 2, 0],
-			options: {},
-		}, {
-			id: 'd',
-			type: 'monitor',
-			position: [-130, 70, 85],
-			rotation: [0, -Math.PI / 2, 0],
-			sticky: 'c',
-			options: {},
-		}, {
-			id: 'd2',
-			type: 'keyboard',
-			position: [-110, 70, 85],
-			rotation: [0, Math.PI, 0],
-			sticky: 'c',
-			options: {},
-		}, {
-			id: 'e',
-			type: 'chair',
-			position: [-75, 0, 85],
-			rotation: [0, Math.PI / 2, 0],
-			options: {},
-		}, {
-			id: 'f',
-			type: 'plant',
-			position: [-60, 90, 165],
-			rotation: [0, 0, 0],
-			options: {},
-		}, {
-			id: 'f2',
-			type: 'monstera',
-			position: [-55, 90, 175],
-			rotation: [0, 0, 0],
-			options: {},
-		}, {
-			id: 'f22',
-			type: 'tabletopDigitalClock',
-			position: [-35, 90, 175],
-			rotation: [0, Math.PI, 0],
-			options: {
-				bodyStyle: 'color',
-				bodyColor: [0.45, 0.8, 1],
-			},
-		}, {
-			id: 'f3',
-			type: 'snakeplant',
-			position: [40, 90, 170],
-			rotation: [0, 0, 0],
-			options: {},
-		}, {
-			id: 'f4',
-			type: 'cactusS',
-			position: [50, 90, 155],
-			rotation: [0, 0, 0],
-			options: {},
-		}, {
-			id: 'g',
-			type: 'mug',
-			position: [-45, 90, 160],
-			rotation: [0, Math.PI / 2, 0],
-			options: {},
-		}, {
-			id: 'h',
-			type: 'aircon',
-			position: [80, 215, 150],
-			rotation: [0, Math.PI, 0],
-			options: {},
-		}, {
-			id: 'i',
-			type: 'lavaLamp',
-			position: [60, 90, 170],
-			rotation: [0, 0, 0],
-			options: {},
-		}, {
-			id: 'j',
-			type: 'steelRack',
-			position: [130, 0, 115],
-			rotation: [0, Math.PI / 2, 0],
-			options: {},
-		}, {
-			id: 'j2',
-			type: 'aquarium',
-			position: [130, 100, 115],
-			rotation: [0, Math.PI / 2, 0],
-			sticky: 'j',
-			options: {},
-		}, {
-			id: '8ce7a065-120d-479f-9153-aa3b6a1fd4a7',
-			type: 'router',
-			position: [130, 142, 135],
-			rotation: [0, Math.PI / 2, 0],
-			sticky: 'j',
-			options: {},
-		}, {
-			id: 'j4',
-			type: 'letterCase',
-			position: [130, 59, 125],
-			rotation: [0, Math.PI / 2, 0],
-			sticky: 'j',
-			options: {},
-		}, {
-			id: 'a37cb419-d028-47a7-b317-7553bc2553e0',
-			type: 'ductTape',
-			position: [133, 85, 130],
-			rotation: [0, 0, 0],
-			sticky: 'j4',
-			options: {},
-		}, {
-			id: 'j3',
-			type: 'powerStrip',
-			position: [130, 13, 115],
-			rotation: [0, Math.PI / 2, 0],
-			sticky: 'j',
-			options: {},
-		}, {
-			id: 'k',
-			type: 'cupNoodle',
-			position: [-100, 70, 40],
-			rotation: [0, -2, 0],
-			sticky: 'c',
-			options: {},
-		}, {
-			id: 'k2',
-			type: 'tabletopCalendar',
-			position: [-130, 70, 40],
-			rotation: [0, -Math.PI / 2, 0],
-			sticky: 'c',
-			options: {},
-		}, {
-			id: 'l',
-			type: 'banknote',
-			position: [-100, 70, 55],
-			rotation: [0, 2, 0],
-			sticky: 'c',
-			options: {},
-		}, {
-			id: 'm',
-			type: 'energyDrink',
-			position: [-100, 70, 120],
-			rotation: [0, -1, 0],
-			sticky: 'c',
-			options: {},
-		}, {
-			id: 'n',
-			type: 'milk',
-			position: [-120, 70, 130],
-			rotation: [0, 1.5, 0],
-			sticky: 'c',
-			options: {},
-		}, {
-			id: 'o',
-			type: 'facialTissue',
-			position: [-100, 70, 138],
-			rotation: [0, -1.5, 0],
-			sticky: 'c',
-			options: {},
-		}, {
-			id: 'p',
-			type: 'tv',
-			position: [-135, 88, -5],
-			rotation: [0, -Math.PI / 2, 0],
-			sticky: 'q',
-			options: {},
-		}, {
-			id: 'q',
-			type: 'colorBox',
-			position: [-135, 0, -5],
-			rotation: [0, -Math.PI / 2, 0],
-			options: {},
-		}, {
-			id: 'r',
-			type: 'pachira',
-			position: [135, 0, -135],
-			rotation: [0, 0, 0],
-			options: {},
-		}, {
-			id: 's',
-			type: 'wallClock',
-			position: [-150, 200, 100],
-			rotation: [0, -Math.PI / 2, 0],
-			options: {},
-		}, {
-			id: 's2',
-			type: 'woodSoundAbsorbingPanel',
-			position: [-150, 140, 80],
-			rotation: [0, -Math.PI / 2, 0],
-			options: {},
-		}, {
-			id: 't',
-			type: 'book',
-			position: [10, 100, 10],
-			rotation: [0, 0, 0],
-			options: {
-				variation: 1,
-			},
-		}, {
-			id: 'u',
-			type: 'bed',
-			position: [-30, 0, -100],
-			rotation: [0, Math.PI, 0],
-			options: {},
-		}, {
-			id: 'v',
-			type: 'ceilingFanLight',
-			position: [0, 250, 0],
-			rotation: [0, 0, 0],
-			isMainLight: true,
-			options: {},
-		}, {
-			id: 'w',
-			type: 'roundRug',
-			position: [0, 0, 0],
-			rotation: [0, 0, 0],
-			options: {},
-		}, {
-			id: 'x',
-			type: 'blind',
-			position: [-35, 194, 185],
-			rotation: [0, Math.PI, 0],
-			options: {
-				blades: 24,
-				angle: 0.5,
-				open: 0.8,
-			},
-		}, {
-			id: 'x2',
-			type: 'blind',
-			position: [35, 194, 185],
-			rotation: [0, Math.PI, 0],
-			options: {
-				blades: 24,
-				angle: -0.4,
-				open: 0.5,
-			},
-		}],
+const data = localStorage.getItem('roomData') != null ? JSON.parse(localStorage.getItem('roomData')!) : {
+	roomType: 'default',
+	installedObjects: [{
+		id: 'a',
+		type: 'cardboardBox',
+		position: [120, 0, 50],
+		rotation: [0, 0.2, 0],
+		options: {
+			variation: 'mikan',
+		},
 	}, {
+		id: 'a2',
+		type: 'openedCardboardBox',
+		position: [115, 0, -20],
+		rotation: [0, -0.1, 0],
+		options: {},
+	}, {
+		id: 'b',
+		type: 'cardboardBox',
+		position: [120, 31, 50],
+		rotation: [0, 0.1, 0],
+		sticky: 'a',
+		options: {
+			variation: 'aizon',
+		},
+	}, {
+		id: '1',
+		type: 'cardboardBox',
+		position: [80, 0, 110],
+		rotation: [0, 2, 0],
+		options: {
+			variation: null,
+		},
+	}, {
+		id: 'c',
+		type: 'desk',
+		position: [-115, 0, 85],
+		rotation: [0, -Math.PI / 2, 0],
+		options: {},
+	}, {
+		id: 'd',
+		type: 'monitor',
+		position: [-130, 70, 85],
+		rotation: [0, -Math.PI / 2, 0],
+		sticky: 'c',
+		options: {},
+	}, {
+		id: 'd2',
+		type: 'keyboard',
+		position: [-110, 70, 85],
+		rotation: [0, Math.PI, 0],
+		sticky: 'c',
+		options: {},
+	}, {
+		id: 'e',
+		type: 'chair',
+		position: [-75, 0, 85],
+		rotation: [0, Math.PI / 2, 0],
+		options: {},
+	}, {
+		id: 'f',
+		type: 'plant',
+		position: [-60, 90, 165],
+		rotation: [0, 0, 0],
+		options: {},
+	}, {
+		id: 'f2',
+		type: 'monstera',
+		position: [-55, 90, 175],
+		rotation: [0, 0, 0],
+		options: {},
+	}, {
+		id: 'f22',
+		type: 'tabletopDigitalClock',
+		position: [-35, 90, 175],
+		rotation: [0, Math.PI, 0],
+		options: {
+			bodyStyle: 'color',
+			bodyColor: [0.45, 0.8, 1],
+		},
+	}, {
+		id: 'f3',
+		type: 'snakeplant',
+		position: [40, 90, 170],
+		rotation: [0, 0, 0],
+		options: {},
+	}, {
+		id: 'f4',
+		type: 'cactusS',
+		position: [50, 90, 155],
+		rotation: [0, 0, 0],
+		options: {},
+	}, {
+		id: 'g',
+		type: 'mug',
+		position: [-45, 90, 160],
+		rotation: [0, Math.PI / 2, 0],
+		options: {},
+	}, {
+		id: 'h',
+		type: 'aircon',
+		position: [80, 215, 150],
+		rotation: [0, Math.PI, 0],
+		options: {},
+	}, {
+		id: 'i',
+		type: 'lavaLamp',
+		position: [60, 90, 170],
+		rotation: [0, 0, 0],
+		options: {},
+	}, {
+		id: 'j',
+		type: 'steelRack',
+		position: [130, 0, 115],
+		rotation: [0, Math.PI / 2, 0],
+		options: {},
+	}, {
+		id: 'j2',
+		type: 'aquarium',
+		position: [130, 100, 115],
+		rotation: [0, Math.PI / 2, 0],
+		sticky: 'j',
+		options: {},
+	}, {
+		id: '8ce7a065-120d-479f-9153-aa3b6a1fd4a7',
+		type: 'router',
+		position: [130, 142, 135],
+		rotation: [0, Math.PI / 2, 0],
+		sticky: 'j',
+		options: {},
+	}, {
+		id: 'j4',
+		type: 'letterCase',
+		position: [130, 59, 125],
+		rotation: [0, Math.PI / 2, 0],
+		sticky: 'j',
+		options: {},
+	}, {
+		id: 'a37cb419-d028-47a7-b317-7553bc2553e0',
+		type: 'ductTape',
+		position: [133, 85, 130],
+		rotation: [0, 0, 0],
+		sticky: 'j4',
+		options: {},
+	}, {
+		id: 'j3',
+		type: 'powerStrip',
+		position: [130, 13, 115],
+		rotation: [0, Math.PI / 2, 0],
+		sticky: 'j',
+		options: {},
+	}, {
+		id: 'k',
+		type: 'cupNoodle',
+		position: [-100, 70, 40],
+		rotation: [0, -2, 0],
+		sticky: 'c',
+		options: {},
+	}, {
+		id: 'k2',
+		type: 'tabletopCalendar',
+		position: [-130, 70, 40],
+		rotation: [0, -Math.PI / 2, 0],
+		sticky: 'c',
+		options: {},
+	}, {
+		id: 'l',
+		type: 'banknote',
+		position: [-100, 70, 55],
+		rotation: [0, 2, 0],
+		sticky: 'c',
+		options: {},
+	}, {
+		id: 'm',
+		type: 'energyDrink',
+		position: [-100, 70, 120],
+		rotation: [0, -1, 0],
+		sticky: 'c',
+		options: {},
+	}, {
+		id: 'n',
+		type: 'milk',
+		position: [-120, 70, 130],
+		rotation: [0, 1.5, 0],
+		sticky: 'c',
+		options: {},
+	}, {
+		id: 'o',
+		type: 'facialTissue',
+		position: [-100, 70, 138],
+		rotation: [0, -1.5, 0],
+		sticky: 'c',
+		options: {},
+	}, {
+		id: 'p',
+		type: 'tv',
+		position: [-135, 88, -5],
+		rotation: [0, -Math.PI / 2, 0],
+		sticky: 'q',
+		options: {},
+	}, {
+		id: 'q',
+		type: 'colorBox',
+		position: [-135, 0, -5],
+		rotation: [0, -Math.PI / 2, 0],
+		options: {},
+	}, {
+		id: 'r',
+		type: 'pachira',
+		position: [135, 0, -135],
+		rotation: [0, 0, 0],
+		options: {},
+	}, {
+		id: 's',
+		type: 'wallClock',
+		position: [-150, 200, 100],
+		rotation: [0, -Math.PI / 2, 0],
+		options: {},
+	}, {
+		id: 's2',
+		type: 'woodSoundAbsorbingPanel',
+		position: [-150, 140, 80],
+		rotation: [0, -Math.PI / 2, 0],
+		options: {},
+	}, {
+		id: 't',
+		type: 'book',
+		position: [10, 100, 10],
+		rotation: [0, 0, 0],
+		options: {
+			variation: 1,
+		},
+	}, {
+		id: 'u',
+		type: 'bed',
+		position: [-30, 0, -100],
+		rotation: [0, Math.PI, 0],
+		options: {},
+	}, {
+		id: 'v',
+		type: 'ceilingFanLight',
+		position: [0, 250, 0],
+		rotation: [0, 0, 0],
+		isMainLight: true,
+		options: {},
+	}, {
+		id: 'w',
+		type: 'roundRug',
+		position: [0, 0, 0],
+		rotation: [0, 0, 0],
+		options: {},
+	}, {
+		id: 'x',
+		type: 'blind',
+		position: [-35, 194, 185],
+		rotation: [0, Math.PI, 0],
+		options: {
+			blades: 24,
+			angle: 0.5,
+			open: 0.8,
+		},
+	}, {
+		id: 'x2',
+		type: 'blind',
+		position: [35, 194, 185],
+		rotation: [0, Math.PI, 0],
+		options: {
+			blades: 24,
+			angle: -0.4,
+			open: 0.5,
+		},
+	}],
+};
+
+onMounted(() => {
+	engine.value = new RoomEngine(data, {
 		canvas: canvas.value!,
 	});
 
@@ -593,6 +596,11 @@ function getRgb(hex: string | number): [number, number, number] | null {
 	return m.map(x => parseInt(x, 16) / 255) as [number, number, number];
 }
 
+function save() {
+	if (engine.value == null) return;
+	localStorage.setItem('roomData', JSON.stringify(engine.value.roomState));
+}
+
 definePage(() => ({
 	title: 'Room',
 	icon: 'ti ti-door',

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

@@ -521,7 +521,7 @@ export class RoomEngine {
 			id: o.id,
 			type: o.type,
 			position: new BABYLON.Vector3(...o.position),
-			rotation: new BABYLON.Vector3(o.rotation[0], -o.rotation[1], o.rotation[2]),
+			rotation: new BABYLON.Vector3(o.rotation[0], o.rotation[1], o.rotation[2]),
 			options: o.options,
 			isMainLight: o.isMainLight,
 		})));