firefish/src/client/app/common/views/pages/room/room.vue

<template>
<div class="hveuntkp">
	<div class="controller" v-if="objectSelected">
		<section>
			<p class="name">{{ selectedFurnitureName }}</p>
			<x-preview ref="preview"/>
			<template v-if="selectedFurnitureInfo.props">
				<div v-for="k in Object.keys(selectedFurnitureInfo.props)" :key="k">
					<p>{{ k }}</p>
					<template v-if="selectedFurnitureInfo.props[k] === 'image'">
						<ui-button @click="chooseImage(k)">{{ $t('chooseImage') }}</ui-button>
					</template>
					<template v-else-if="selectedFurnitureInfo.props[k] === 'color'">
						<input type="color" :value="selectedFurnitureProps ? selectedFurnitureProps[k] : null" @change="updateColor(k, $event)"/>
					</template>
				</div>
			</template>
		</section>
		<section>
			<ui-button @click="translate()" :primary="isTranslateMode"><fa :icon="faArrowsAlt"/> {{ $t('translate') }}</ui-button>
			<ui-button @click="rotate()" :primary="isRotateMode"><fa :icon="faUndo"/> {{ $t('rotate') }}</ui-button>
			<ui-button v-if="isTranslateMode || isRotateMode" @click="exit()"><fa :icon="faBan"/> {{ $t('exit') }}</ui-button>
		</section>
		<section>
			<ui-button @click="remove()"><fa :icon="faTrashAlt"/> {{ $t('remove') }}</ui-button>
		</section>
	</div>
	<div class="menu">
		<section>
			<ui-button @click="add()"><fa :icon="faBoxOpen"/> {{ $t('add-furniture') }}</ui-button>
		</section>
		<section>
			<ui-select :value="roomType" @input="updateRoomType($event)">
				<template #label>{{ $t('room-type') }}</template>
				<option value="default">{{ $t('rooms.default') }}</option>
				<option value="washitsu">{{ $t('rooms.washitsu') }}</option>
			</ui-select>
			<label v-if="roomType === 'default'">
				<span>{{ $t('carpet-color') }}</span>
				<input type="color" :value="carpetColor" @change="updateCarpetColor($event)"/>
			</label>
		</section>
		<section>
			<ui-button primary @click="save()"><fa :icon="faSave"/> {{ $t('save') }}</ui-button>
		</section>
	</div>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
import { Room } from '../../../scripts/room/room';
import parseAcct from '../../../../../../misc/acct/parse';
import XPreview from './preview.vue';
const storeItems = require('../../../scripts/room/furnitures.json5');
import { faBoxOpen, faUndo, faArrowsAlt, faBan } from '@fortawesome/free-solid-svg-icons';
import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';

let room: Room;

export default Vue.extend({
	i18n: i18n('room'),

	components: {
		XPreview
	},

	props: {
		acct: {
			type: String,
			required: true
		},
	},

	data() {
		return {
			objectSelected: false,
			selectedFurnitureName: null,
			selectedFurnitureInfo: null,
			selectedFurnitureProps: null,
			roomType: null,
			carpetColor: null,
			isTranslateMode: false,
			isRotateMode: false,
			faBoxOpen, faSave, faTrashAlt, faUndo, faArrowsAlt, faBan,
		};
	},

	async mounted() {
		const user = await this.$root.api('users/show', {
			...parseAcct(this.acct)
		});

		const roomInfo = await this.$root.api('room/show', {
			userId: user.id
		});

		this.roomType = roomInfo.roomType;
		this.carpetColor = roomInfo.carpetColor;

		room = new Room(user, this.$store.getters.isSignedIn && this.$store.state.i.id === user.id, roomInfo, this.$el, {
			graphicsQuality: this.$store.state.device.roomGraphicsQuality,
			onChangeSelect: obj => {
				this.objectSelected = obj != null;
				if (obj) {
					const f = room.findFurnitureById(obj.name);
					this.selectedFurnitureName = this.$t('furnitures.' + f.type);
					this.selectedFurnitureInfo = storeItems.find(x => x.id === f.type);
					this.selectedFurnitureProps = f.props
						? JSON.parse(JSON.stringify(f.props)) // Disable reactivity
						: null;
					this.$nextTick(() => {
						this.$refs.preview.selected(obj);
					});
				}
			},
			useOrthographicCamera: this.$store.state.device.roomUseOrthographicCamera
		});
	},

	methods: {
		async add() {
			const { canceled, result: id } = await this.$root.dialog({
				type: null,
				title: this.$t('add-furniture'),
				select: {
					items: storeItems.map(item => ({
						value: item.id, text: this.$t('furnitures.' + item.id)
					}))
				},
				showCancelButton: true
			});
			if (canceled) return;
			room.addFurniture(id);
		},

		remove() {
			room.removeFurniture();
		},

		save() {
			this.$root.api('room/update', {
				room: room.getRoomInfo()
			});
		},

		chooseImage(key) {
			this.$chooseDriveFile({
				multiple: false
			}).then(file => {
				room.updateProp(key, file.thumbnailUrl);
				this.$refs.preview.selected(room.getSelectedObject());
			});
		},

		updateColor(key, ev) {
			room.updateProp(key, ev.target.value);
			this.$refs.preview.selected(room.getSelectedObject());
		},

		updateCarpetColor(ev) {
			room.updateCarpetColor(ev.target.value);
			this.carpetColor = ev.target.value;
		},

		updateRoomType(type) {
			room.changeRoomType(type);
			this.roomType = type;
		},

		translate() {
			if (this.isTranslateMode) {
				this.exit();
			} else {
				this.isRotateMode = false;
				this.isTranslateMode = true;
				room.enterTransformMode('translate');
			}
		},

		rotate() {
			if (this.isRotateMode) {
				this.exit();
			} else {
				this.isTranslateMode = false;
				this.isRotateMode = true;
				room.enterTransformMode('rotate');
			}
		},

		exit() {
			this.isTranslateMode = false;
			this.isRotateMode = false;
			room.exitTransformMode();
		}
	}
});
</script>

<style lang="stylus" scoped>
.hveuntkp
	> .controller
	> .menu
		position fixed
		z-index 1
		padding 16px
		background var(--face)
		color var(--text)

		> section
			padding 16px 0

			&:first-child
				padding-top 0

			&:last-child
				padding-bottom 0

			&:not(:last-child)
				border-bottom solid 1px var(--faceDivider)

	> .controller
		top 16px
		left 16px
		width 256px

		> section
			> .name
				margin 0

	> .menu
		top 16px
		right 16px
		width 256px
	
</style>