display ready set info

client/src/components/ReadySet.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="ready-set">
+    <div class="ready-set__container">
+      <div class="ready-set__box1" />
+      <div class="ready-set__text">{{ text }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['text'],
+}
+</script>
+
+<style lang="scss">
+.ready-set {
+  &__container {
+    position: relative;
+    width: 600px;
+    height: 600px;
+    border: 1px solid white;
+  }
+
+  &__box1 {
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    transform: rotate(45deg);
+    width: 370px;
+    height: 370px;
+    border: 15px solid #808040;
+    border-radius: 50px;
+    background-color: #6040c0;
+    z-index: 5;
+  }
+  &__text {
+    position: absolute;
+    width: 600px;
+    height: 600px;
+    line-height: 600px;
+    font-size: 64px;
+    font-family: 'Wendy One';
+    color: #ffff80;
+    text-align: center;
+    z-index: 10;
+  }
+}
+</style>

client/src/components/TitleBox.vue

@@ -50,7 +50,6 @@
     z-index: 1;
   }
   &__title {
-    color: #e0e080;
     font-size: 64px;
     font-family: 'Wendy One';
     color: #ffff80;

client/src/pages/play.vue

@@ -2,11 +2,9 @@
   <div>
     <GameControls />
     <EngineDebug />
+    <ReadySet v-if="gameState === 'ready-set'" :text="gamePhase" />
     <div v-if="gameState === 'idle'">
-      <p>waiting ...</p>
-    </div>
-    <div v-if="gameState === 'ready-set'">
-      <h1>{{ gamePhase }}</h1>
+      <ReadySet text="waiting ..." />
     </div>
     <div v-if="gameState === 'play'">
       <h2>Play</h2>