From 720c9a6340c28eb2a0b7db7a2ecaaab4aa55f2a5 Mon Sep 17 00:00:00 2001
From: p_craft <ef81sp@gmail.com>
Date: Thu, 10 Jul 2025 00:17:18 +0900
Subject: [PATCH 1/7] =?UTF-8?q?=E5=9B=9E=E7=AD=94=E3=81=8C=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4=E3=81=97=E3=81=A6=E3=81=84=E3=81=9F=E3=82=89=E3=81=95?=
 =?UTF-8?q?=E3=81=95=E3=82=84=E3=81=8B=E3=81=AA=E3=82=A2=E3=83=8B=E3=83=A1?=
 =?UTF-8?q?=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Room.vue                | 32 +++++++++++++++--
 src/components/RoomParticipant.vue     |  8 ++++-
 src/components/RoomParticipantCard.vue | 49 ++++++++++++++++++++++----
 3 files changed, 79 insertions(+), 10 deletions(-)

diff --git a/src/components/Room.vue b/src/components/Room.vue
index 1ddc20b..4fa26b5 100644
--- a/src/components/Room.vue
+++ b/src/components/Room.vue
@@ -148,8 +148,9 @@ watch(
   { immediate: true }
 );
 
-// --- 全員回答済みなら自動で公開（computedで管理） ---
-const isOpen = computed(() => {
+// --- 全員回答済みなら自動で公開（ちょっと遅延させて裏面を見せてからめくる） ---
+const isOpen = ref(false);
+const shouldBeOpen = computed(() => {
   if (!room.value) return false;
   const participants = room.value.participants;
   // 観戦者（isAudience）を除外
@@ -157,6 +158,32 @@ const isOpen = computed(() => {
   return answerable.length > 0 && answerable.every(p => p.answer !== '');
 });
 
+let isOpenTimeout: ReturnType<typeof setTimeout> | null = null;
+watch(shouldBeOpen, newValue => {
+  if (isOpenTimeout) {
+    clearTimeout(isOpenTimeout);
+  }
+
+  if (newValue) {
+    isOpenTimeout = setTimeout(() => {
+      isOpen.value = true;
+    }, 600);
+  } else {
+    isOpen.value = false;
+  }
+});
+
+// --- audience以外のメンバーの回答がすべて一致しているかを判定 ---
+const allAnswersMatch = computed(() => {
+  if (!room.value || !isOpen.value) return false;
+  const participants = room.value.participants;
+  // 観戦者（isAudience）を除外し、回答がある参加者のみを取得
+  const answerable = participants.filter(p => !p.isAudience && p.answer !== '');
+  if (answerable.length < 2) return false; // 2人未満なら一致の概念がない
+
+  const firstAnswer = answerable[0].answer;
+  return answerable.every(p => p.answer === firstAnswer);
+});
 </script>
 
 <template>
@@ -176,6 +203,7 @@ const isOpen = computed(() => {
         :key="p.userNumber"
         :participant="p"
         :is-open="isOpen"
+        :all-answers-match="allAnswersMatch"
       />
     </section>
     <section class="mt-8">
diff --git a/src/components/RoomParticipant.vue b/src/components/RoomParticipant.vue
index 7948d95..29c5903 100644
--- a/src/components/RoomParticipant.vue
+++ b/src/components/RoomParticipant.vue
@@ -6,6 +6,7 @@ import RoomParticipantCard from './RoomParticipantCard.vue';
 const props = defineProps<{
   participant: RoomForClient['participants'][number];
   isOpen: boolean;
+  allAnswersMatch?: boolean;
 }>();
 const answer = computed(() => {
   if (props.participant.isAudience) return '';
@@ -23,6 +24,11 @@ const answer = computed(() => {
     >
       <p class="rotate-[54deg] text-base text-center">Audience</p>
     </div>
-    <RoomParticipantCard v-else :answer="answer" :is-open="props.isOpen" />
+    <RoomParticipantCard
+      v-else
+      :answer="answer"
+      :is-open="props.isOpen"
+      :all-answers-match="props.allAnswersMatch || false"
+    />
   </article>
 </template>
diff --git a/src/components/RoomParticipantCard.vue b/src/components/RoomParticipantCard.vue
index 6543836..78995e5 100644
--- a/src/components/RoomParticipantCard.vue
+++ b/src/components/RoomParticipantCard.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, watch, nextTick } from 'vue';
 import backUrl from '@/assets/trading_card08_back_red.png';
 
 const props = defineProps<{
   answer: string;
   isOpen: boolean;
+  allAnswersMatch: boolean;
 }>();
 const answer = computed(() => {
   if (props.answer === '') return '';
@@ -31,7 +32,10 @@ const cardClass = computed(() => {
 </script>
 
 <template>
-  <Transition mode="out-in">
+  <Transition
+    mode="out-in"
+    :name="props.allAnswersMatch ? 'card-match' : 'card'"
+  >
     <div :class="cardClass" v-if="status === 'reverse'">
       <img :src="backUrl" />
     </div>
@@ -43,13 +47,44 @@ const cardClass = computed(() => {
 </template>
 
 <style scoped>
-.v-enter-active,
-.v-leave-active {
-  @apply transition-transform;
+/* 通常のアニメーション */
+.card-enter-active,
+.card-leave-active {
+  transition: transform 0.3s ease;
 }
 
-.v-enter-from,
-.v-leave-to {
+.card-enter-from,
+.card-leave-to {
   transform: rotateY(90deg);
 }
+
+/* 回答一致時の特別なアニメーション */
+.card-match-enter-active,
+.card-match-leave-active {
+  transition: transform 0.5s linear;
+}
+
+.card-match-enter-from,
+.card-match-leave-to {
+  transform: rotateY(540deg); /* 5倍多く回転 (90deg × 6 = 540deg) */
+}
+
+.card-match-enter-active {
+  animation: matchReveal 0.3s ease;
+}
+
+@keyframes matchReveal {
+  /* 0% {
+    transform: rotateY(450deg) scale(1);
+  } */
+  0% {
+    transform: rotateY(0deg) scale(1);
+  }
+  70% {
+    transform: rotateY(0deg) scale(1.15); /* 少し大きくなる */
+  }
+  100% {
+    transform: rotateY(0deg) scale(1); /* 元のサイズに戻る */
+  }
+}
 </style>

From 6f8aca7dab1fef0bc4b65dd0cfbcd3ca2b28c536 Mon Sep 17 00:00:00 2001
From: p_craft <ef81sp@gmail.com>
Date: Thu, 10 Jul 2025 00:21:16 +0900
Subject: [PATCH 2/7] fix

---
 src/components/RoomParticipantCard.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/RoomParticipantCard.vue b/src/components/RoomParticipantCard.vue
index 78995e5..77beea8 100644
--- a/src/components/RoomParticipantCard.vue
+++ b/src/components/RoomParticipantCard.vue
@@ -66,7 +66,7 @@ const cardClass = computed(() => {
 
 .card-match-enter-from,
 .card-match-leave-to {
-  transform: rotateY(540deg); /* 5倍多く回転 (90deg × 6 = 540deg) */
+  transform: rotateY(calc(90deg * 6));
 }
 
 .card-match-enter-active {
@@ -74,9 +74,6 @@ const cardClass = computed(() => {
 }
 
 @keyframes matchReveal {
-  /* 0% {
-    transform: rotateY(450deg) scale(1);
-  } */
   0% {
     transform: rotateY(0deg) scale(1);
   }

From 2b7fe652ed656fd73ea9d23e1d3f9d86dd7a6c05 Mon Sep 17 00:00:00 2001
From: p_craft / kamikuzu <35532793+ef81sp@users.noreply.github.com>
Date: Thu, 10 Jul 2025 00:23:24 +0900
Subject: [PATCH 3/7] =?UTF-8?q?=E4=BD=99=E8=A8=88=E3=81=AA=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=88=E3=82=92=E6=B6=88=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/RoomParticipantCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/RoomParticipantCard.vue b/src/components/RoomParticipantCard.vue
index 77beea8..ee6cffb 100644
--- a/src/components/RoomParticipantCard.vue
+++ b/src/components/RoomParticipantCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch, nextTick } from 'vue';
+import { computed } from 'vue';
 import backUrl from '@/assets/trading_card08_back_red.png';
 
 const props = defineProps<{

From 94057e0879d151346e6d105e9a6b57e188928cca Mon Sep 17 00:00:00 2001
From: p_craft <ef81sp@gmail.com>
Date: Thu, 10 Jul 2025 00:28:42 +0900
Subject: [PATCH 4/7] fix: clear timeout on component unmount to prevent memory
 leaks

---
 src/components/Room.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Room.vue b/src/components/Room.vue
index 4fa26b5..a439d14 100644
--- a/src/components/Room.vue
+++ b/src/components/Room.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { computed, ref, watch, onMounted, onBeforeUnmount, onUnmounted } from 'vue';
 import {
   room,
   setName,
@@ -184,6 +184,14 @@ const allAnswersMatch = computed(() => {
   const firstAnswer = answerable[0].answer;
   return answerable.every(p => p.answer === firstAnswer);
 });
+
+// コンポーネントアンマウント時にタイムアウトをクリア
+onUnmounted(() => {
+  if (isOpenTimeout) {
+    clearTimeout(isOpenTimeout);
+    isOpenTimeout = null;
+  }
+});
 </script>
 
 <template>

From 796a523a5327559ce75e7ea6764307bb44db0ccb Mon Sep 17 00:00:00 2001
From: p_craft <ef81sp@gmail.com>
Date: Thu, 10 Jul 2025 00:30:24 +0900
Subject: [PATCH 5/7] refactor: merge duplicate .card-match-enter-active
 declarations

- Combine transition and animation properties into single class declaration
- Remove CSS duplication for better maintainability
---
 src/components/RoomParticipantCard.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/RoomParticipantCard.vue b/src/components/RoomParticipantCard.vue
index ee6cffb..6cdda21 100644
--- a/src/components/RoomParticipantCard.vue
+++ b/src/components/RoomParticipantCard.vue
@@ -59,7 +59,11 @@ const cardClass = computed(() => {
 }
 
 /* 回答一致時の特別なアニメーション */
-.card-match-enter-active,
+.card-match-enter-active {
+  transition: transform 0.5s linear;
+  animation: matchReveal 0.3s ease;
+}
+
 .card-match-leave-active {
   transition: transform 0.5s linear;
 }
@@ -69,10 +73,6 @@ const cardClass = computed(() => {
   transform: rotateY(calc(90deg * 6));
 }
 
-.card-match-enter-active {
-  animation: matchReveal 0.3s ease;
-}
-
 @keyframes matchReveal {
   0% {
     transform: rotateY(0deg) scale(1);

From 4a0e231cbf879649d4b59ba4823c9a3fff8069a3 Mon Sep 17 00:00:00 2001
From: p_craft / kamikuzu <35532793+ef81sp@users.noreply.github.com>
Date: Thu, 10 Jul 2025 00:35:07 +0900
Subject: [PATCH 6/7] Update src/components/Room.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/Room.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Room.vue b/src/components/Room.vue
index a439d14..b69d161 100644
--- a/src/components/Room.vue
+++ b/src/components/Room.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch, onMounted, onBeforeUnmount, onUnmounted } from 'vue';
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
 import {
   room,
   setName,

From e37939b74ec190cd013ddb7bc82e7cb1d2ebe09d Mon Sep 17 00:00:00 2001
From: p_craft / kamikuzu <35532793+ef81sp@users.noreply.github.com>
Date: Thu, 10 Jul 2025 00:38:42 +0900
Subject: [PATCH 7/7] Update src/components/Room.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/components/Room.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Room.vue b/src/components/Room.vue
index b69d161..b6d6b73 100644
--- a/src/components/Room.vue
+++ b/src/components/Room.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
+import { computed, ref, watch, onUnmounted } from 'vue';
 import {
   room,
   setName,