animate on continue game

client/src/components/Play.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="play">
     <div class="play__layout">
-      <div class="play__layout-playground">
+      <div :class="['play__layout-playground', cssLayoutClass ]">
         <Quote :text="quote" />
         <Sources :sources="sources" :selectable="selectable" />
         <ConfirmButton v-if="selectable"/>
@@ -16,6 +16,15 @@
 <script>
 export default {
   computed: {
+    cssLayoutClass() {
+      if (this.$store.state.game.phase === 'reveal-start-1') {
+        return 'play__layout-playground__flip-out'
+      } else if (this.$store.state.game.phase === 'reveal-start-2') {
+        return 'play__layout-playground__flip-in'
+      }
+
+      return
+    },
     gamePhase() {
       return this.$store.state.game.phase
     },
@@ -59,16 +68,36 @@ body,
     display: flex;
     width: 100%;
     height: 100%;
+    perspective: 1200px;
 
     &-playground {
       position: relative;
       flex-grow: 1;
+
+      &__flip-out {
+        animation: flip-out .5s ease-in-out;
+        animation-fill-mode: forwards;
+      }
+
+      &__flip-in {
+        animation: flip-in .5s ease-in-out;
+        animation-fill-mode: forwards;
+      }
     }
 
     &-right-column {
       width: 200px;
       margin: 16px 16px 0 0;
     }
+
   }
+
+}
+@keyframes flip-out {
+  to   { transform: rotateX(90deg); }
+}
+@keyframes flip-in {
+  from { transform: rotateX(90deg); }
+  to   { transform: rotateX(0deg); }
 }
 </style>

client/src/plugins/engine/parseSyncData.js

@@ -5,4 +5,8 @@ export default function(data) {
   store.commit('game/setStateAndPhase', data.game)
   store.commit('players/setPlayers', data.game)
   store.commit('round/setRound', data.game)
+
+  if (data.game.state === 'play' && data.game.phase === 'reveal-start-2') {
+    store.commit('selection/clearSelection')
+  }
 }

server/src/game/continueGame.go

@@ -2,6 +2,7 @@ package game
 
 import (
 	"fmt"
+	"time"
 )
 
 func (gm *Game) ContinueGame() {
@@ -26,12 +27,18 @@ func (gm *Game) proceedToReveal() {
 		return
 	}
 
-	err := gm.changeGamePhase(STATE_PLAY, PHASE_SELECT_QUOTE, PHASE_REVEAL_START)
-	if err != nil {
+	if err := gm.changeGamePhase(STATE_PLAY, PHASE_SELECT_QUOTE, PHASE_REVEAL_START1); err != nil {
 		fmt.Println(err)
 		return
 	}
+	gm.notifyClients()
 
+	time.Sleep(1 * time.Second)
+
+	if err := gm.changeGamePhase(STATE_PLAY, PHASE_REVEAL_START1, PHASE_REVEAL_START2); err != nil {
+		fmt.Println(err)
+		return
+	}
 	gm.notifyClients()
 }
 

server/src/game/struct.go

@@ -16,7 +16,8 @@ const (
 const (
 	PHASE_NONE          = ""
 	PHASE_SELECT_QUOTE  = "select-quote"
-	PHASE_REVEAL_START = "reveal-start"
+	PHASE_REVEAL_START1 = "reveal-start-1"
+	PHASE_REVEAL_START2 = "reveal-start-2"
 )
 
 const (