ReadySet animation

client/src/components/ReadySet.vue

@@ -4,7 +4,12 @@
       <div class="ready-set__box1" />
       <div class="ready-set__box2" />
       <div class="ready-set__box3" />
-      <div class="ready-set__text">{{ text }}</div>
+      <div
+        :class="['ready-set__text', 'ready-set__text__popup', textSize]"
+        :key="text"
+      >
+        {{ text }}
+      </div>
     </div>
   </div>
 </template>
@@ -12,6 +17,15 @@
 <script>
 export default {
   props: ['text'],
+  computed: {
+    textSize() {
+      if (this.text.length < 3) {
+        return 'ready-set__text__size-big'
+      } else if (this.text.length < 5) {
+        return 'ready-set__text__size-medium'
+      }
+    },
+  },
 }
 </script>
 
@@ -71,8 +85,25 @@ export default {
     color: #ffff80;
     text-align: center;
     z-index: 10;
+
+    &__size-medium {
+      font-size: 150px;
+    }
+
+    &__size-big {
+      font-size: 250px;
+    }
+
+    &__popup {
+      animation: pop 0.5s ease-in-out;
+    }
   }
 }
 @keyframes spin { 100% { transform: rotate(360deg); } }
 @keyframes spin-rev { 100% { transform: rotate(-360deg); } }
+@keyframes pop {
+  0% { transform: scale(1.7); }
+  25% { transform: scale(2); }
+  100% { transform: scale(1); }
+}
 </style>

server/src/game/startGame.go

@@ -11,11 +11,12 @@ func (gm *Game) StartGame() {
 
 func (gm *Game) startGameSub() {
 	phases := []string{
-		"ready",
+		"5",
+		"4",
 		"3",
 		"2",
 		"1",
-		"go",
+		"Go!",
 	}
 
 	err := gm.changeGameState(STATE_IDLE, STATE_READY_SET, phases[0])
@@ -25,7 +26,7 @@ func (gm *Game) startGameSub() {
 	}
 
 	for i := 1; i < len(phases); i++ {
-		time.Sleep(2 * time.Second)
+		time.Sleep(1500 * time.Millisecond)
 		err = gm.changeGamePhase(STATE_READY_SET, phases[i-1], phases[i])
 		if err != nil {
 			fmt.Println(err)