feat: show ReadySet animation

client/src/assets/css/colors.scss

@@ -19,6 +19,11 @@ $box-primary-disabled-background-color: $box-primary-background-color;
 $box-primary-disabled-text-color: darken($box-primary-text-color, 60%);
 $box-primary-disabled-border: $box-primary-border;
 
+// Animation Box
+$animationbox-background-color: $background-primary-color;
+$animationbox-text-color: #ffff88;
+$animationbox-border: 15px solid #00a0c0;
+$animationbox-animation-color: rgba(0, 104, 152, 0.5);
 
 // Button
 $button-background-color: #00a0e0;

client/src/components/ReadySet.vue

@@ -1,10 +1,158 @@
 <template>
-  <p>ReadySet.vue</p>
-  <p>{{ text }}</p>
+  <div class="ready-set__container-outer">
+    <div :class="['ready-set__container-inner', fadeOut]">
+      <div class="ready-set__box1" />
+      <div class="ready-set__box2" />
+      <div class="ready-set__box3" />
+      <div :class="['ready-set__text', 'ready-set__text__popup', textSize]" :key="text">
+        {{  text  }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue'
+const props = defineProps<{
   text: string,
 }>()
-</script>
+
+const fadeOut = computed((): string | null => props.text === '' ? 'ready-set__container-inner__fade-out' : null)
+const textSize = computed((): string => {
+  if (props.text.length < 3) {
+    return 'ready-set__text__size-big'
+  } else if (props.text.length < 4) {
+    return 'ready-set__text__size-medium'
+  } else if (props.text.length > 5) {
+    return 'ready-set__text__size-small'
+  }
+})
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.ready-set {
+  &__container-outer {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__container-inner {
+    position: relative;
+    width: 600px;
+    height: 600px;
+    overflow: hidden;
+
+    &__fade-out {
+      animation: fade-out 0.3s linear;
+      animation-fill-mode: forwards;
+    }
+  }
+
+  &__box1 {
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    transform: rotate(45deg);
+    width: 370px;
+    height: 370px;
+    background-color: $animationbox-background-color;
+    border: $animationbox-border;
+    border-radius: 50px;
+    z-index: 5;
+  }
+
+  &__box2 {
+    position: absolute;
+    left: 90px;
+    top: 90px;
+    width: 420px;
+    height: 420px;
+    border-radius: 150px;
+    background-color: $animationbox-animation-color;
+    animation: spin-rev 5s linear infinite;
+    z-index: 4;
+  }
+
+  &__box3 {
+    position: absolute;
+    left: 90px;
+    top: 90px;
+    width: 420px;
+    height: 420px;
+    border-radius: 150px;
+    background-color: $animationbox-animation-color;
+    z-index: 3;
+    animation: spin 6s linear infinite;
+  }
+
+  &__text {
+    position: absolute;
+    width: 600px;
+    height: 600px;
+    line-height: 600px;
+    font-size: 100px;
+    font-family: $font-primary;
+    color: $animationbox-text-color;
+    text-align: center;
+    z-index: 10;
+
+    &__size-small {
+      font-size: 80px;
+    }
+
+    &__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);
+  }
+}
+
+@keyframes fade-out {
+  25% {
+    transform: scale(1.2);
+  }
+
+  100% {
+    transform: scale(0);
+  }
+}
+</style>