From 247f14559db010237e53d3908355e5ca92871f0d Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Tue, 21 Sep 2021 07:57:15 +0200
Subject: [PATCH] finals table (WIP)

---
 client/src/components/Play.vue     |   9 ---
 client/src/components/ReadySet.vue |  16 +++--
 client/src/components/final.vue    | 111 +++++++++++++++++++++++++++++
 client/src/layouts/default.vue     |  10 +++
 client/src/pages/play.vue          |   2 +
 server/src/game/runFinal.go        |  21 ++++++
 server/src/game/startGame.go       |   3 +-
 server/src/game/struct.go          |   1 +
 8 files changed, 157 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/final.vue
 create mode 100644 server/src/game/runFinal.go

diff --git a/client/src/components/Play.vue b/client/src/components/Play.vue
index 968ab14..883c553 100644
--- a/client/src/components/Play.vue
+++ b/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%;
diff --git a/client/src/components/ReadySet.vue b/client/src/components/ReadySet.vue
index 4d3abe5..cfec3b3 100644
--- a/client/src/components/ReadySet.vue
+++ b/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;
-    left: 50%;
-    top: 100px;
-    margin: 0 0 0 -300px;
+    position: relative;
     width: 600px;
     height: 600px;
     overflow: hidden;
diff --git a/client/src/components/final.vue b/client/src/components/final.vue
new file mode 100644
index 0000000..1994a98
--- /dev/null
+++ b/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>
diff --git a/client/src/layouts/default.vue b/client/src/layouts/default.vue
index 50bb506..3c6a077 100644
--- a/client/src/layouts/default.vue
+++ b/client/src/layouts/default.vue
@@ -3,3 +3,13 @@
     <Nuxt />
   </div>
 </template>
+
+<style lang="scss">
+html,
+body,
+#__nuxt,
+#__layout,
+.layout-default {
+  height: 100%;
+}
+</style>
diff --git a/client/src/pages/play.vue b/client/src/pages/play.vue
index fecb9b5..1ae8e81 100644
--- a/client/src/pages/play.vue
+++ b/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;
diff --git a/server/src/game/runFinal.go b/server/src/game/runFinal.go
new file mode 100644
index 0000000..be28935
--- /dev/null
+++ b/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()
+}
diff --git a/server/src/game/startGame.go b/server/src/game/startGame.go
index 9b74659..8473238 100644
--- a/server/src/game/startGame.go
+++ b/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() {
diff --git a/server/src/game/struct.go b/server/src/game/struct.go
index 2762ee0..908b5b5 100644
--- a/server/src/game/struct.go
+++ b/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 (