78 lines
1.6 KiB
Vue
78 lines
1.6 KiB
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>
|