追加:おめでとう画面 (#43)

Co-authored-by: sayako21 <>
teritamas · Oct 15, 2023 · db27fc1 · db27fc1
1 parent 50eddf3
commit db27fc1
Show file tree

Hide file tree

Showing 3 changed files with 289 additions and 0 deletions.
diff --git a/components/CongratulationsBingo.vue b/components/CongratulationsBingo.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="bg p-10 md:p-20">
+    <!-- Modal header -->
+    <div class="flex items-center justify-end p-5 rounded-t">
+      <button
+        @click="closeCongratulationsBingoView"
+        type="button"
+        class="text-gray-700 border border-gray-700 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm w-8 h-8 ml-auto inline-flex justify-center items-center"
+      >
+        <svg
+          class="w-3 h-3"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 14"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+          />
+        </svg>
+        <span class="sr-only">Close modal</span>
+      </button>
+    </div>
+    <div class="flex justify-center items-center">
+      <div v-for="x in 15" :class="'firework-' + x"></div>
+      <div class="text-center pt-20">
+        <div class="title">Nice Bingo! 🎉</div>
+        <div>あと マスでコンプリート！</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emits = defineEmits(["closeCongratulationsBingoView"]);
+const closeCongratulationsBingoView = async () => {
+  await emits("closeCongratulationsBingoView");
+};
+</script>
+<style lang="scss" scoped>
+@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
+.bg {
+  height: 100vh;
+  width: 100vw;
+  background-color: #fff;
+  top: 0;
+  position: fixed;
+}
+.title {
+  font-family: "Pacifico", cursive;
+  font-size: clamp(36px, 0.6rem, 100px);
+  color: #e2aa01;
+}
+[class^="firework-"] {
+  position: absolute;
+  width: 0.1rem;
+  height: 0.1rem;
+  border-radius: 50%;
+}
+
+$count: 15;
+$frame-list: firework-sm, firework-md, firework-lg;
+@for $i from 1 through $count {
+  .firework-#{$i} {
+    animation: nth($frame-list, random(3)) 1.2s both infinite;
+    animation-delay: #{random($count) * 0.1}s;
+    top: random(16) * 5% + 10%;
+    left: random(16) * 5% + 10%;
+  }
+}
+
+// dots generator
+@function dots($r) {
+  $result: ();
+  // straight
+  @for $i from 1 through 4 {
+    $x: 0;
+    $y: 0;
+    @if $i <= 2 {
+      $x: $r;
+    } @else {
+      $y: $r;
+    }
+    @if $i % 2 != 0 {
+      $x: -$x;
+      $y: -$y;
+    }
+    $result: append($result, #{$x}rem #{$y}rem 0 #e2aa01, comma);
+  }
+  // diagonal
+  @for $i from 1 through 4 {
+    $dist2: $r * 0.7;
+    $x: $dist2;
+    $y: $dist2;
+    @if $i > 2 {
+      $x: -$x;
+    }
+    @if $i % 2 != 0 {
+      $y: -$y;
+    }
+    $result: append($result, #{$x}rem #{$y}rem 0 #e2aa01, comma);
+  }
+  @return $result;
+}
+
+// firework animation
+@mixin fireworkSize($name, $r) {
+  @keyframes firework-#{$name} {
+    0%,
+    100% {
+      opacity: 0;
+    }
+    10%,
+    70% {
+      opacity: 1;
+    }
+    100% {
+      box-shadow: dots($r);
+    }
+  }
+}
+@include fireworkSize(sm, 0.5);
+@include fireworkSize(md, 0.7);
+@include fireworkSize(lg, 0.9);
+</style>
diff --git a/components/CongratulationsComplete.vue b/components/CongratulationsComplete.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="bg p-10 md:p-20">
+    <!-- Modal header -->
+    <div class="flex items-center justify-end p-5 rounded-t">
+      <button
+        @click="closeCongratulationsCompleteView"
+        type="button"
+        class="text-gray-700 border border-white bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm w-8 h-8 ml-auto inline-flex justify-center items-center"
+      >
+        <svg
+          class="w-3 h-3"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 14"
+        >
+          <path
+            stroke="white"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+          />
+        </svg>
+        <span class="sr-only">Close modal</span>
+      </button>
+    </div>
+    <div class="flex justify-center items-center">
+      <div v-for="x in 15" :class="'firework-' + x"></div>
+      <div class="text-center pt-20">
+        <div class="title">Congratulations 🎉</div>
+        <div class="title">Nice Your Drive!</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emits = defineEmits(["closeCongratulationsCompleteView"]);
+const closeCongratulationsCompleteView = async () => {
+  await emits("closeCongratulationsCompleteView");
+};
+</script>
+<style lang="scss" scoped>
+@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
+.bg {
+  height: 100vh;
+  width: 100vw;
+  background-color: #e2aa01;
+  top: 0;
+  position: fixed;
+}
+.title {
+  font-family: "Pacifico", cursive;
+  font-size: clamp(36px, 0.6rem, 100px);
+  color: #fff;
+  text-shadow: 6px 4px #735b13;
+}
+[class^="firework-"] {
+  position: absolute;
+  width: 0.1rem;
+  height: 0.1rem;
+  border-radius: 50%;
+}
+
+$count: 15;
+$frame-list: firework-sm, firework-md, firework-lg;
+@for $i from 1 through $count {
+  .firework-#{$i} {
+    animation: nth($frame-list, random(3)) 1.2s both infinite;
+    animation-delay: #{random($count) * 0.1}s;
+    top: random(16) * 5% + 10%;
+    left: random(16) * 5% + 10%;
+  }
+}
+
+// dots generator
+@function dots($r) {
+  $result: ();
+  // straight
+  @for $i from 1 through 4 {
+    $x: 0;
+    $y: 0;
+    @if $i <= 2 {
+      $x: $r;
+    } @else {
+      $y: $r;
+    }
+    @if $i % 2 != 0 {
+      $x: -$x;
+      $y: -$y;
+    }
+    $result: append($result, #{$x}rem #{$y}rem 0 #fff, comma);
+  }
+  // diagonal
+  @for $i from 1 through 4 {
+    $dist2: $r * 0.7;
+    $x: $dist2;
+    $y: $dist2;
+    @if $i > 2 {
+      $x: -$x;
+    }
+    @if $i % 2 != 0 {
+      $y: -$y;
+    }
+    $result: append($result, #{$x}rem #{$y}rem 0 #fff, comma);
+  }
+  @return $result;
+}
+
+// firework animation
+@mixin fireworkSize($name, $r) {
+  @keyframes firework-#{$name} {
+    0%,
+    100% {
+      opacity: 0;
+    }
+    10%,
+    70% {
+      opacity: 1;
+    }
+    100% {
+      box-shadow: dots($r);
+    }
+  }
+}
+@include fireworkSize(sm, 0.5);
+@include fireworkSize(md, 0.7);
+@include fireworkSize(lg, 0.9);
+</style>
diff --git a/pages/index.vue b/pages/index.vue
@@ -8,6 +8,14 @@
       :isFollowingSubject="isFollowingSubject"
     />
   </div>
+  <congratulations-complete
+    v-if="congratulationsCompleteViewIsOpen"
+    @closeCongratulationsCompleteView="closeCongratulationsCompleteView"
+  />
+  <congratulations-bingo
+    v-if="congratulationsBingoViewIsOpen"
+    @closeCongratulationsBingoView="closeCongratulationsBingoView"
+  />
 </template>
 
 <script setup lang="ts">
@@ -17,6 +25,8 @@ import { IsFollowingSubjectResponse } from "@/server/models/facades/visionai/ima
 
 const bingoCards = ref([] as BingoCard[]);
 const isFollowingSubject = ref(null as IsFollowingSubjectResponse | null);
+const congratulationsCompleteViewIsOpen = ref(true);
+const congratulationsBingoViewIsOpen = ref(false);
 
 // 全てのビンゴカードを取得
 onMounted(async () => {
@@ -86,4 +96,24 @@ const postBingoCellRequest = async (
   // 最新の状態を取得
   await getAllBingoCard();
 };
+
+// ビンゴカードをコンプリートしたときのお祝い画面をひらく
+const openCongratulationsCompleteView = async () => {
+  congratulationsCompleteViewIsOpen.value = true;
+};
+
+// ビンゴカードをコンプリートしたときのお祝い画面をとじる
+const closeCongratulationsCompleteView = async () => {
+  congratulationsCompleteViewIsOpen.value = false;
+};
+
+// ビンゴしたときのお祝い画面をひらく
+const openCongratulationsBingoView = async () => {
+  congratulationsBingoViewIsOpen.value = true;
+};
+
+// ビンゴしたときのお祝い画面をとじる
+const closeCongratulationsBingoView = async () => {
+  congratulationsBingoViewIsOpen.value = false;
+};
 </script>