110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
<template>
|
|
<div id="game">
|
|
<h1>
|
|
Room:
|
|
<a>{{ this.$route.params.code }}</a>
|
|
</h1>
|
|
<h2>Your name is: {{ this.name }}</h2>
|
|
<ul>
|
|
<li v-for="player in this.room.players">{{ player.name }}: {{player.points}}</li>
|
|
</ul>
|
|
|
|
<button v-if="this.game.owner && !this.room.started" @click="this.start_game">Stort</button>
|
|
|
|
<span v-show="this.card" v-html="this.card.text" />
|
|
|
|
<ul v-show="this.card && !this.czar()">
|
|
<li v-for="blank in this.card.pick">
|
|
Card {{blank}}:
|
|
<input type="text" v-model="inputs[blank - 1]" :disabled="input_blocked" />
|
|
</li>
|
|
<li>
|
|
<button @click="this.send_answers" v-show="!input_blocked && room.started">Submit Answers</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul>
|
|
<li v-for="ans in this.answers">
|
|
<span v-for="t in ans.text">{{ t }}, </span>
|
|
<button @click="pick(ans)" v-show="czar()">Pick</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
import { Game, axios_api } from "../util/api";
|
|
import { Message, MessageType } from "../models/Message";
|
|
import { Room } from "../models/Room";
|
|
import { Card } from "../models/Card";
|
|
import { Answer } from "../models/Answer";
|
|
|
|
@Component({
|
|
name: "Game",
|
|
})
|
|
export default class GameVueView extends Vue {
|
|
private game: Game = {};
|
|
private room: Room = {};
|
|
private card: Card = {};
|
|
private inputs: string[] = [];
|
|
private input_blocked: boolean = false;
|
|
private answers: Answer[] = [];
|
|
private name: string;
|
|
/**
|
|
* Lifecycle hooks
|
|
*/
|
|
private async mounted() {
|
|
this.name = this.$route.query.name || prompt("What is your nickname?");
|
|
if (name && this.$route.params.code.length > 3) {
|
|
this.name = name as string;
|
|
const room = await axios_api.get(`/room/${this.$route.params.code}`);
|
|
|
|
if (room.status === 200 && !room.data.started) {
|
|
this.game = new Game(this.$route.params.code, name, this.on_message);
|
|
}
|
|
}
|
|
}
|
|
|
|
private start_game() {
|
|
this.game.start_game();
|
|
}
|
|
|
|
private send_answers() {
|
|
this.input_blocked = true;
|
|
this.game.send_answer(this.inputs);
|
|
}
|
|
|
|
private czar(): boolean {
|
|
return this.game.you === this.room.czar;
|
|
}
|
|
|
|
private pick(ans: Answer) {
|
|
this.game.pick_answer(ans);
|
|
}
|
|
|
|
private on_message(message: Message) {
|
|
switch (message.msgtype) {
|
|
case MessageType.JOIN:
|
|
break;
|
|
case MessageType.START:
|
|
this.answers = [];
|
|
this.inputs = [];
|
|
this.input_blocked = false;
|
|
this.card = message.data.card as Card;
|
|
break;
|
|
case MessageType.ROOM:
|
|
this.room = message.data as Room;
|
|
break;
|
|
case MessageType.ANSWER:
|
|
this.answers = message.data as Answer[];
|
|
break;
|
|
case MessageType.PICK:
|
|
alert(message.data.text);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
</style>
|