Improve code legibility by introducing gameState enum

src/components/HelloWorld.vue

@@ -1,33 +1,41 @@
 <template>
-  <div>
+  <div class="hello center">
+    <img alt="Vue logo" src="../assets/logo.png">
     <h1>{{ msg }}</h1>
-
+    <p>
-    <md-button class="md-raised">Test button!</md-button>
+      For a guide and recipes on how to configure / customize this project,<br>
-    <md-field>
+      check out the
-      <label>Initial Value</label>
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-      <md-input v-model="initial"></md-input>
+    </p>
-    </md-field>
+    <h3>Installed CLI Plugins</h3>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
+    <ul>
-      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
+    </ul>
-      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
+    <h3>Essential Links</h3>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
+    <ul>
-      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
+    </ul>
-      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
+    <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>
 
 <script lang="ts">
-import {Component, Prop, Vue} from 'vue-property-decorator'
+import { Component, Prop, Vue } from 'vue-property-decorator'
 
 @Component
 export default class HelloWorld extends Vue {
@@ -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>

src/objects/objects.ts

@@ -1,16 +1,24 @@
+export enum GameState {
+  Setup,
+  Joined,
+  Started,
+  Ended,
+}
+
 export interface ApiObject {
+  errors?: string[],
 }
 
-export interface ResponseObject<T extends ApiObject> {
+export interface PlayerObject extends ApiObject  {
-  date: T
-}
-
-export interface PlayerObject {
   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,
+}

src/services/PerudoApi.ts

@@ -1,5 +1,5 @@
-import axios, { AxiosPromise, AxiosRequestConfig, AxiosResponse } from 'axios'
+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/'
@@ -7,19 +7,40 @@ export default class PerudoApi {
   private static objectInstance?: PerudoApi;
 
   public static get instance(): PerudoApi {
-    if(typeof PerudoApi.objectInstance === 'undefined') {
+    if (typeof PerudoApi.objectInstance === 'undefined') {
       PerudoApi.objectInstance = new PerudoApi();
     }
     return PerudoApi.objectInstance;
   }
 
-  public createGame(name: string):Promise<CreateGameObject> {
+  public createGame(name: string): Promise<JoinCreateGameObject> {
-    return this.get<CreateGameObject>(PerudoApi.baseUrl + 'game/create?name=' + name)
+    return this.get<JoinCreateGameObject>(PerudoApi.baseUrl + 'game/create?name=' + name)
-      .then((response: AxiosResponse<CreateGameObject>) => {
+      .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;

src/views/About.vue

@@ -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>

src/views/Home.vue

@@ -1,15 +1,41 @@
 <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>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+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() {
+  private gameState: GameState = GameState.Setup;
-    PerudoApi.instance.createGame('Tosti').then((response: CreateGameObject) => {
+
-      console.log(response);
+  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>