表示されるビンゴカード一覧の表示条件を修正 (#74)

components/BingoCardView.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="block border border-gray-700 bingo-card-frame rounded-lg">
     <!--:style="{ backgroundColor: imageColor }"-->
+    <CreateUserBadge :isAnonymousCard="isAnonymousCard" />
     <h1
       class="text-center tracking-wider mb-7 font-normal text-xl text-gray-700"
     >
@@ -33,10 +34,11 @@
 <script setup lang="ts">
 import dayjs from "dayjs";
 import "dayjs/locale/ja"; // 日本語ロケールを有効化
+import { BingoCardDetail } from "~/server/models/bingo/dto";
 
 const props = defineProps({
   bingoCard: {
-    type: Array,
+    type: Object as PropType<BingoCardDetail>,
     required: true,
   },
 });
@@ -47,11 +49,13 @@ const openBingoCardDetailModal = async (bingoCellId: string) => {
 };
 // computed プロパティを作成
 const CreatedAt = computed(() => {
-  const timestamp =
-    props.bingoCard.createdAt._seconds * 1000 +
-    props.bingoCard.createdAt._nanoseconds / 1000000;
+  const timestamp = props.bingoCard.createdAt.getTime as any;
   return dayjs(timestamp).locale("ja").format("YYYY年M月D日 HH:mm:ss");
 });
+
+const isAnonymousCard = computed(() => {
+  return props.bingoCard.createdUid === "";
+});
 </script>
 
 <style scoped lang="scss">

components/CreateUserBadge.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    class="bingo-owner-badge-object font-bold"
+    :class="
+      props.isAnonymousCard
+        ? 'bingo-owner-badge-anonymous'
+        : 'bingo-owner-badge-own'
+    "
+  >
+    {{ message }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BingoCardDetail } from "~/server/models/bingo/dto";
+
+const props = defineProps({
+  isAnonymousCard: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const message = computed(() => {
+  return props.isAnonymousCard ? "だれか" : "あなた";
+});
+</script>
+
+<style lang="scss" scoped>
+.bingo-owner-badge-area {
+  position: relative;
+}
+.not-show-vote-result {
+  height: 90px;
+  padding: 15px;
+}
+.bingo-owner-badge-object {
+  position: absolute;
+  top: 16px;
+  left: 0px;
+  padding: 5px;
+  font-size: 14px;
+  text-align: center;
+  border-radius: 0 0 10px 0;
+}
+
+.bingo-owner-badge-own {
+  background: #ffca28;
+  color: rgba(55, 65, 81, var(--tw-text-opacity));
+}
+
+.bingo-owner-badge-anonymous {
+  background: #939087;
+  color: rgba(55, 65, 81, var(--tw-text-opacity));
+}
+</style>

server/api/bingoCard/index.get.ts

@@ -1,5 +1,5 @@
 import {
-  getAllBingoCard,
+  getAnonymousBingoCard,
   getAllBingoCardByUid,
 } from "@/server/facades/repositories/bingoContents";
 import { BingoCardsGetAllResponse } from "@/server/models/bingo/response";
@@ -13,16 +13,16 @@ import { checkBingoOrReachLines } from "../../utils/bingoCheck";
 export default defineEventHandler(async (event) => {
   try {
     const token = await getHeaders(event)["authorization"];
-    let bingoCards: BingoCard[] | undefined = [];
+    let bingoCards: BingoCard[] = [];
+    // uidがない場合は全件取得
+    bingoCards = await getAnonymousBingoCard();
     await idAuthentication(token)
       .then(async (uid) => {
         // uidがある場合はuidでフィルタして取得
-        bingoCards = await getAllBingoCardByUid(uid);
+        const myBingoCards = await getAllBingoCardByUid(uid);
+        bingoCards = bingoCards.concat(myBingoCards);
       })
-      .catch(async (e) => {
-        // uidがない場合は全件取得
-        bingoCards = await getAllBingoCard();
-      });
+      .catch(async (e) => {});
 
     const bingoCardDetails = bingoCards.map((bingoCard) => {
       const checkBingoOrReachLinesResult = checkBingoOrReachLines(bingoCard);

server/api/bingoCard/index.post.ts

@@ -12,28 +12,33 @@ import { incrementBingoCreationCount } from "@/server/facades/repositories/users
 export default defineEventHandler(async (event) => {
   try {
     const token = await getHeaders(event)["authorization"];
-    const uid = await idAuthentication(token);
+    let uid = "";
+    try {
+      uid = await idAuthentication(token);
+    } catch (e) {
+      uid = ""; // 認証に失敗した場合は空文字を入れる.
+    }
 
     const body = (await readBody(event).then((b) =>
       JSON.parse(b)
     )) as BongoCreateRequest;
 
     // ChatGPTによるお題の生成
-    const gptGenerateTheme = await createBingoCellTheme(body, 9);
-    if (gptGenerateTheme == null) {
-      return {
-        status: 500,
-        message: "Internal Server Error",
-      };
-    }
-    // const gptGenerateTheme = null; // 生成に時間がかかるのでDebug時はnullを入れる
+    // const gptGenerateTheme = await createBingoCellTheme(body, 9);
+    // if (gptGenerateTheme == null) {
+    //   return {
+    //     status: 500,
+    //     message: "Internal Server Error",
+    //   };
+    // }
+    const gptGenerateTheme = null; // 生成に時間がかかるのでDebug時はnullを入れる
     const entryBingoCard = createBingoCard(uid, body, gptGenerateTheme);
 
     // DBに追加
     addBingoCard(entryBingoCard);
 
-    // ユーザが作成したビンゴカードの数を1増やす
-    incrementBingoCreationCount(uid);
+    // ユーザが作成した場合、ビンゴカードの数を1増やす
+    if (uid !== "") incrementBingoCreationCount(uid);
     return {
       message: "OK",
       bingoCardId: entryBingoCard.id,

server/api/user/index.get.ts

@@ -9,7 +9,7 @@ export default defineEventHandler(async (event) => {
     const token = await getHeaders(event)["authorization"];
     const uid = await idAuthentication(token);
 
-    const user = await getUserInfo(uid);
+    let user = await getUserInfo(uid);
 
     // ユーザが存在しない場合は作成する
     if (user == null) user = await addUserInfo(uid);

server/facades/repositories/bingoContents.ts

@@ -37,23 +37,26 @@ export const getAllBingoCardByUid = async (uid: string) => {
     return bingoCard;
   } catch (e) {
     console.error("[getAllBingoCardByUid] uid: ", uid, e);
+    return [];
   }
 };
 
 /**
- * 全件取得
+ * ユーザIDがないものを取得する
  */
-export const getAllBingoCard = async () => {
+export const getAnonymousBingoCard = async () => {
   try {
     // createdUidのカラムが存在しないものを取得する
     const querySnapshot = await firestore
       .collection("bingoCard")
+      .where("createdUid", "==", "")
       .orderBy("updatedAt", "desc")
       .get();
     const bingoCard = querySnapshot.docs.map((doc) => doc.data() as BingoCard);
     return bingoCard;
   } catch (e) {
     console.error("[getAllBingoCard]", e);
+    return [];
   }
 };