mlp-server-tools/webclient/src/App.vue

<template>
	<div id="app">
		<section class="hero is-primary">
			<div class="hero-body">
				<div class="container">
					<h1 class="title">{{ title }}</h1>
					<h2 class="subtitle">{{ subtitle }}</h2>
				</div>
			</div>
		</section>
		<div class="container">
			<ConnectForm v-if="!isConnected" />
			<RoomList v-if="inLobby" />
			<RoomLog v-if="inRoom" />
		</div>
	</div>
</template>

<style lang="scss" scoped>
.hero {
	margin-bottom: 2rem;
}
</style>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State } from "vuex-class";
import ConnectForm from "@/components/ConnectForm.vue";
import RoomList from "@/components/RoomList.vue";
import RoomLog from "@/components/RoomLog.vue";
import { ServerState } from "./store/server";
import { RoomState } from "./store/room";

@Component({
	components: {
		ConnectForm,
		RoomList,
		RoomLog
	}
})
export default class App extends Vue {
	@State("server") private server!: ServerState;
	@State("room") private room!: RoomState;

	private data() {
		return {};
	}

	private get isConnected(): boolean {
		return this.server.connected;
	}

	private get inLobby(): boolean {
		return this.isConnected && !this.room.in_room;
	}

	private get inRoom(): boolean {
		return this.isConnected && this.room.in_room;
	}

	private get title(): string {
		return "Cardgage test client";
	}

	private get subtitle(): string {
		if (this.inRoom && this.room.room) {
			return `Inside room "${this.room.room.name}" (${
				this.room.room.id
			})`;
		}
		if (this.isConnected) {
			return "Browsing " + this.server.server;
		}
		return "";
	}
}
</script>