Implement game rules

src/views/Home.vue

@@ -39,8 +39,8 @@
                 <md-input type="number" v-model="diceCount"></md-input>
               </md-field>
               Die value: <br>
-              <span v-for="n in 6" :key="'v'+n" @click="dieValue = n" :class="(dieValue === n) ? 'inverted' : ''">
-                <die :number="n"></die>
+              <span v-for="n in 6" :key="'v'+n" @click="dieValue = n">
+                <die :number="n" :selected="dieValue === n"></die>
               </span> <br><br>
               <md-button @click="makeGuess" class="md-raised md-primary">Guess</md-button>
               <md-button @click="callBluff" class="md-raised md-accent">Call</md-button>
@@ -62,6 +62,8 @@
                 <template v-for="player in gameStateObject.players">
                   - {{ player.name }}<br>
                 </template>
+                <br/>
+                <game-rules-editor v-model="rules" :readonly="!owner"/>
               </template>
             </template>
 
@@ -70,7 +72,8 @@
             </template>
 
             <template v-if="gameStateObject && gameRunning">
-              <span v-if="previousRound && previousRound.loser.hash === playerHash">You lost the previous round!<br></span>
+              <span
+                v-if="previousRound && previousRound.loser.hash === playerHash">You lost the previous round!<br></span>
               Round: {{ currentRound.number + 1 }} <br>
               Turn: {{ lastTurn ? lastTurn.number + 2 : 1 }} <br>
 
@@ -81,7 +84,7 @@
               <br><br>
               <template v-if="lastTurn">
                 Last guesses: <br>
-                <round-turns :round="currentRound" />
+                <round-turns :round="currentRound"/>
               </template>
               <br>
               <template v-if="!myTurn">Someone else is playing, waiting for your turn<br></template>
@@ -111,7 +114,7 @@
 </template>
 
 <script lang="ts">
-import {Component, Vue} from 'vue-property-decorator'
+import { Component, Vue } from 'vue-property-decorator'
 import PerudoApi from "@/services/PerudoApi";
 import Die from "@/components/Die.vue";
 import {
@@ -124,13 +127,15 @@ import {
   RoundObject,
   TurnObject,
   GameStateState,
-  PlayerObject
+  PlayerObject,
+  GameRules
 } from "@/objects/objects";
 import Round from "@/components/Round.vue";
 import RoundTurns from "@/components/RoundTurns.vue";
+import GameRulesEditor from "@/components/GameRulesEditor.vue";
 
 @Component({
-  components: {RoundTurns, Round, Die}
+  components: {GameRulesEditor, RoundTurns, Round, Die}
 })
 export default class Home extends Vue {
   private gameState: GameState = GameState.Setup;
@@ -148,27 +153,27 @@ export default class Home extends Vue {
   private diceCount: string = '1';
   private dieValue: number = 2;
 
-  private get gameJoined(): boolean {
+  private get gameJoined (): boolean {
     return this.gameState >= GameState.Joined;
   }
 
-  private get gameStarted(): boolean {
+  private get gameStarted (): boolean {
     return this.gameState >= GameState.Started;
   }
 
-  private get gameRunning(): boolean {
+  private get gameRunning (): boolean {
     return this.gameStarted && !this.gameEnded;
   }
 
-  private get gameEnded(): boolean {
+  private get gameEnded (): boolean {
     return this.gameState === GameState.Ended;
   }
 
-  private get myTurn(): boolean {
+  private get myTurn (): boolean {
     return this.gameState === GameState.MyTurn;
   }
 
-  private get playersKeyedById(): Record<string, PlayerObject> | undefined {
+  private get playersKeyedById (): Record<string, PlayerObject> | undefined {
     let newPlayers: Record<string, PlayerObject> = {};
     if (this.gameStateObject) {
       let players = this.gameStateObject.players;
@@ -179,22 +184,33 @@ export default class Home extends Vue {
     return newPlayers;
   }
 
-  private get previousRound(): RoundObject | undefined {
+  private get previousRound (): RoundObject | undefined {
     let rounds = this.gameStateObject?.rounds;
     return rounds ? (rounds[rounds.length - 2] ?? undefined) : undefined;
   }
 
-  private get currentRound(): RoundObject | undefined {
+  private get currentRound (): RoundObject | undefined {
     let rounds = this.gameStateObject?.rounds;
     return rounds ? rounds[rounds.length - 1] : undefined;
   }
 
-  private get lastTurn(): TurnObject | undefined {
+  private get lastTurn (): TurnObject | undefined {
     let turns = this.currentRound?.turns;
     return turns ? turns[turns.length - 1] : undefined;
   }
 
-  private createGame(): void {
+  private get rules (): GameRules | undefined {
+    return this.gameStateObject?.rules;
+  }
+
+  private set rules (gameRules: GameRules | undefined) {
+    console.log(gameRules);
+    if (this.playerId && gameRules) {
+      PerudoApi.instance.setGameRules(this.playerId, gameRules);
+    }
+  }
+
+  private createGame (): void {
     if (this.name === '') {
       this.error = "Name cannot be empty";
       return;
@@ -206,7 +222,7 @@ export default class Home extends Vue {
       this.owner = true;
 
       this.gameState = GameState.Joined;
-      this.gameTimer = setInterval(() => {
+      setTimeout(() => {
         this.checkStarted();
       }, 1000);
     }).catch((reason => {
@@ -214,7 +230,7 @@ export default class Home extends Vue {
     }));
   }
 
-  private joinGame(): void {
+  private joinGame (): void {
     if (this.code === '') {
       this.error = "Game code cannot be empty when joining a game";
       return;
@@ -236,18 +252,19 @@ export default class Home extends Vue {
     }));
   }
 
-  private startGame(): void {
+  private startGame (): void {
     if (this.gameJoined && this.playerId) {
       PerudoApi.instance.startGame(this.playerId).then((response: ApiObject) => {
         this.gameState = GameState.Started;
         this.gameStateObject = null; // Bug fix because checkStarted gameStateObject misses some properties
+        this.checkTurn();
       }).catch((reason => {
         this.error = reason;
       }));
     }
   }
 
-  private makeGuess(): void {
+  private makeGuess (): void {
     if (this.myTurn && this.playerId) {
       PerudoApi.instance.makeGuess(this.playerId, {
         diceCount: parseInt(this.diceCount),
@@ -264,7 +281,7 @@ export default class Home extends Vue {
     }
   }
 
-  private callBluff(): void {
+  private callBluff (): void {
     if (this.myTurn && this.playerId) {
       PerudoApi.instance.callBluff(this.playerId).then((response: MyTurnObject) => {
         this.gameState = GameState.Started;
@@ -278,11 +295,12 @@ export default class Home extends Vue {
     }
   }
 
-  private checkStarted(): void {
+  private checkStarted (): void {
     console.log("Check started");
     if (this.gameJoined && this.playerId) {
       PerudoApi.instance.gameStarted(this.playerId).then((response: IsStartedObject) => {
         this.gameStateObject = response.gameState;
+        console.log(this.gameStateObject.rules);
         if (response.started) {
           this.gameState = GameState.Started;
 
@@ -297,7 +315,7 @@ export default class Home extends Vue {
     }
   }
 
-  private checkTurn(): void {
+  private checkTurn (): void {
     console.log("Check turn");
     if (this.gameStarted && this.playerId) {
       PerudoApi.instance.myTurn(this.playerId).then((response: MyTurnObject) => {
@@ -318,7 +336,7 @@ export default class Home extends Vue {
     }
   }
 
-  private clearGameTimer(): void {
+  private clearGameTimer (): void {
     if (this.gameTimer) {
       clearInterval(this.gameTimer);
       this.gameTimer = null;
@@ -326,9 +344,3 @@ export default class Home extends Vue {
   }
 }
 </script>
-
-<style scoped lang="scss">
-.inverted {
-  filter: invert(1);
-}
-</style>