Improve code legibility by introducing gameState enum
This commit is contained in:
parent
239a804c33
commit
7ec967a08b
@ -1,28 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="hello center">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<md-button class="md-raised">Test button!</md-button>
|
||||
<md-field>
|
||||
<label>Initial Value</label>
|
||||
<md-input v-model="initial"></md-input>
|
||||
</md-field>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -40,18 +48,18 @@ export default class HelloWorld extends Vue {
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,16 +1,24 @@
|
||||
export enum GameState {
|
||||
Setup,
|
||||
Joined,
|
||||
Started,
|
||||
Ended,
|
||||
}
|
||||
|
||||
export interface ApiObject {
|
||||
errors?: string[],
|
||||
}
|
||||
|
||||
export interface ResponseObject<T extends ApiObject> {
|
||||
date: T
|
||||
}
|
||||
|
||||
export interface PlayerObject {
|
||||
export interface PlayerObject extends ApiObject {
|
||||
id: string,
|
||||
name: string,
|
||||
}
|
||||
|
||||
export interface CreateGameObject extends ApiObject {
|
||||
export interface JoinCreateGameObject extends ApiObject {
|
||||
player: PlayerObject,
|
||||
code: string,
|
||||
}
|
||||
|
||||
export interface IsStartedObject extends ApiObject {
|
||||
started: boolean,
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import axios, {AxiosPromise, AxiosRequestConfig, AxiosResponse} from 'axios'
|
||||
import {CreateGameObject} from "@/objects/objects";
|
||||
import {JoinCreateGameObject, IsStartedObject, ApiObject} from "@/objects/objects";
|
||||
|
||||
export default class PerudoApi {
|
||||
private static baseUrl = 'http://localhost:8000/'
|
||||
@ -13,13 +13,34 @@ export default class PerudoApi {
|
||||
return PerudoApi.objectInstance;
|
||||
}
|
||||
|
||||
public createGame(name: string):Promise<CreateGameObject> {
|
||||
return this.get<CreateGameObject>(PerudoApi.baseUrl + 'game/create?name=' + name)
|
||||
.then((response: AxiosResponse<CreateGameObject>) => {
|
||||
public createGame(name: string): Promise<JoinCreateGameObject> {
|
||||
return this.get<JoinCreateGameObject>(PerudoApi.baseUrl + 'game/create?name=' + name)
|
||||
.then((response: AxiosResponse<JoinCreateGameObject>) => {
|
||||
return response.data;
|
||||
})
|
||||
}
|
||||
|
||||
public joinGame(name: string, code: string): Promise<JoinCreateGameObject> {
|
||||
return this.get<JoinCreateGameObject>(PerudoApi.baseUrl + 'game/join/' + code + '?name=' + name)
|
||||
.then((response: AxiosResponse<JoinCreateGameObject>) => {
|
||||
return response.data;
|
||||
})
|
||||
}
|
||||
|
||||
public startedGame(playerId: string): Promise<IsStartedObject> {
|
||||
return this.get<IsStartedObject>(PerudoApi.baseUrl + 'game/started/' + playerId)
|
||||
.then((response: AxiosResponse<IsStartedObject>) => {
|
||||
return response.data;
|
||||
})
|
||||
}
|
||||
|
||||
public startGame(playerId: string): Promise<ApiObject> {
|
||||
return this.get<ApiObject>(PerudoApi.baseUrl + 'game/start/' + playerId)
|
||||
.then((response: AxiosResponse<ApiObject>) => {
|
||||
return response.data;
|
||||
});
|
||||
}
|
||||
|
||||
private get<T = any>(url: string, getParameters?: Record<string, any>) {
|
||||
return axios.get(url).then((response: AxiosResponse<T>) => {
|
||||
return response;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<div class="center">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.about {
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,32 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<md-field>
|
||||
<label>Name</label>
|
||||
<md-input v-model="name" :readonly="gameJoined"></md-input>
|
||||
</md-field>
|
||||
<md-field v-if="!gameStarted">
|
||||
<label>Game code</label>
|
||||
<md-input v-model="code" :readonly="gameJoined"></md-input>
|
||||
</md-field>
|
||||
<template v-if="!gameJoined">
|
||||
<md-button @click="createGame" class="md-raised">Create</md-button>
|
||||
<md-button @click="joinGame" class="md-raised">Join</md-button>
|
||||
</template>
|
||||
|
||||
<template v-if="gameJoined && !gameStarted">
|
||||
<span v-if="owner">Game created!</span>
|
||||
<span v-else>Game joined!</span>
|
||||
<br>
|
||||
PlayerId: {{ playerId }} <br>
|
||||
|
||||
<md-button v-if="owner" @click="startGame" class="md-raised md-primary">Start</md-button>
|
||||
<md-button v-else @click="checkStarted" class="md-raised md-primary">Check</md-button>
|
||||
</template>
|
||||
|
||||
<template v-if="gameStarted">
|
||||
The game has started, lets go!
|
||||
</template>
|
||||
|
||||
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
|
||||
</div>
|
||||
</template>
|
||||
@ -9,7 +35,7 @@
|
||||
import {Component, Vue} from 'vue-property-decorator'
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
import PerudoApi from "@/services/PerudoApi";
|
||||
import {CreateGameObject} from "@/objects/objects"; // @ is an alias to /src
|
||||
import {ApiObject, GameState, IsStartedObject, JoinCreateGameObject} from "@/objects/objects"; // @ is an alias to /src
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
@ -17,10 +43,56 @@ import {CreateGameObject} from "@/objects/objects"; // @ is an alias to /src
|
||||
}
|
||||
})
|
||||
export default class Home extends Vue {
|
||||
public mounted() {
|
||||
PerudoApi.instance.createGame('Tosti').then((response: CreateGameObject) => {
|
||||
console.log(response);
|
||||
private gameState: GameState = GameState.Setup;
|
||||
|
||||
private name: string = 'Bobby';
|
||||
private code: string = '';
|
||||
private owner: boolean = false;
|
||||
|
||||
private playerId: string | null = null;
|
||||
|
||||
private get gameJoined(): boolean {
|
||||
return this.gameState >= GameState.Joined;
|
||||
}
|
||||
|
||||
private get gameStarted(): boolean {
|
||||
return this.gameState >= GameState.Started;
|
||||
}
|
||||
|
||||
private createGame() {
|
||||
PerudoApi.instance.createGame(this.name).then((response: JoinCreateGameObject) => {
|
||||
this.playerId = response.player.id;
|
||||
this.code = response.code;
|
||||
this.owner = true;
|
||||
|
||||
this.gameState = GameState.Joined;
|
||||
});
|
||||
}
|
||||
|
||||
private joinGame() {
|
||||
PerudoApi.instance.joinGame(this.name, this.code).then((response: JoinCreateGameObject) => {
|
||||
this.playerId = response.player.id;
|
||||
|
||||
this.gameState = GameState.Joined;
|
||||
})
|
||||
}
|
||||
|
||||
private startGame() {
|
||||
if (this.playerId) {
|
||||
PerudoApi.instance.startGame(this.playerId).then((response: ApiObject) => {
|
||||
this.gameState = GameState.Started;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
private checkStarted() {
|
||||
if (this.playerId) {
|
||||
PerudoApi.instance.startedGame(this.playerId).then((response: IsStartedObject) => {
|
||||
if (response.started) {
|
||||
this.gameState = GameState.Started;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user