finals table (WIP)

client/src/components/Play.vue

@@ -44,15 +44,6 @@ export default {
 </script>
 
 <style lang="scss">
-html,
-body,
-#__nuxt,
-#__layout,
-.layout-default,
-.page-play {
-  height: 100%;
-}
-
 .play {
   position: relative;
   width: 100%;

client/src/components/ReadySet.vue

@@ -1,6 +1,6 @@
 fade-out<template>
   <div class="ready-set">
-    <div :class="['ready-set__container', flipOut ]">
+    <div :class="['ready-set__container', fadeOut ]">
       <div class="ready-set__box1" />
       <div class="ready-set__box2" />
       <div class="ready-set__box3" />
@@ -18,7 +18,7 @@ fade-out<template>
 export default {
   props: ['text'],
   computed: {
-    flipOut() {
+    fadeOut() {
       if (this.text === '' ){
         return 'ready-set__container__fade-out'
       }
@@ -39,11 +39,15 @@ export default {
 
 <style lang="scss">
 .ready-set {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+
   &__container {
-    position: absolute;
+    position: relative;
-    left: 50%;
-    top: 100px;
-    margin: 0 0 0 -300px;
     width: 600px;
     height: 600px;
     overflow: hidden;

client/src/components/final.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="final">
+    <div class="final__container">
+      <div class="final__table-outer-border">
+        <div class="final__table-head">
+          <div class="final__title">{{ title }}</div>
+        </div>
+        <div class="final__table-body">
+          <table>
+            <tr v-for="player in players" :key="player.id">
+              <td>{{ player.name }}</td>
+              <td>{{ player.score }}</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    title() {
+      return 'Team Banana Mania'
+    },
+    players() {
+      return [
+        { name: 'Hans-Hugo', score: 170 },
+        { name: 'Ferdinand', score: 140 },
+        { name: 'Ann-Marie', score: 137 },
+        { name: 'Jocelyn', score: 80 },
+        { name: 'Klaus-Bernd', score: 61 },
+        { name: 'Annegret', score: 11 },
+        { name: 'Jens-Jörg Hinterhammer-Füllschmied', score: 9 },
+        { name: 'Brunhilde', score: 7 },
+        { name: 'Margarete Bausenkopf', score: 7 },
+        { name: 'Edwin', score: 1 },
+        { name: 'Bastoph', score: 0 },
+        { name: 'Henndirk', score: -12 },
+      ]
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.final {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+
+  &__container {
+    margin: 64px 0;
+    width: 600px;
+    min-height: 600px;
+  }
+
+  &__table-outer-border {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: #8060c0;
+    padding: 4px;
+    border-radius: 32px;
+  }
+
+  &__table-head {
+    display: flex;
+    width: 100%;
+    height: 100px;
+    align-items: center;
+    justify-content: center;
+    background-color: #402080;
+    border-radius: 32px 32px 0 0;
+    margin-bottom: 4px;
+  }
+
+  &__title {
+    color: #ffffff;
+    font-family: "Wendy One";
+    font-size: 48px;
+  }
+
+  &__table-body {
+    width: 100%;
+    height: 100%;
+    background-color: #402080;
+    border-radius: 0 0 32px 32px;
+    color: #ffffff;
+    font-family: Dosis;
+    font-size: 32px;
+
+    table {
+      width: 100%;
+      padding: 64px;
+    }
+    td {
+      max-width: 300px;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    td ~ td {
+      text-align: right;
+    }
+  }
+}
+</style>

client/src/layouts/default.vue

@@ -3,3 +3,13 @@
     <Nuxt />
   </div>
 </template>
+
+<style lang="scss">
+html,
+body,
+#__nuxt,
+#__layout,
+.layout-default {
+  height: 100%;
+}
+</style>

client/src/pages/play.vue

@@ -11,6 +11,7 @@
           </div>
           <ReadySet v-if="gameState === 'ready-set'" :text="gamePhase" />
           <Play v-if="gameState === 'play'" />
+          <Final v-if="gameState === 'final'" />
         </div>
       </div>
       <div class="page-play__container-debug">
@@ -42,6 +43,7 @@ export default {
 <style lang="scss">
 .page-play {
   width: 100%;
+  height: 100%;
 
   &__container {
     display: flex;

server/src/game/runFinal.go

@@ -0,0 +1,21 @@
+package game
+
+import (
+	"fmt"
+)
+
+func (gm *Game) runFinal() {
+	state, _ := gm.GetState()
+	if state != STATE_IDLE && state != STATE_PLAY {
+		fmt.Println(fmt.Errorf("expected state \"IDLE\" | \"PLAY\" != \"%s\"", state))
+		return
+	}
+
+	err := gm.changeGameState(STATE_ANY, STATE_FINAL, PHASE_NONE)
+	if err != nil {
+		fmt.Println(err)
+		return
+	}
+
+	gm.notifyClients()
+}

server/src/game/startGame.go

@@ -6,7 +6,8 @@ import (
 
 func (gm *Game) StartGame() {
 	// go gm.runCountdown()
-	go gm.runRound()
+	// go gm.runRound()
+	go gm.runFinal()
 }
 
 func (gm *Game) ResetGame() {

server/src/game/struct.go

@@ -11,6 +11,7 @@ const (
 	STATE_IDLE      = "idle"
 	STATE_READY_SET = "ready-set"
 	STATE_PLAY      = "play"
+	STATE_FINAL     = "final"
 )
 
 const (