From 7ec6bf8755fa80908a2045994f90736fa8ee39d5 Mon Sep 17 00:00:00 2001
From: "Ichiro.S" <sey323@users.noreply.github.com>
Date: Sat, 4 Nov 2023 02:38:52 +0900
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C=E3=82=8B?=
 =?UTF-8?q?=E3=83=93=E3=83=B3=E3=82=B4=E3=82=AB=E3=83=BC=E3=83=89=E4=B8=80?=
 =?UTF-8?q?=E8=A6=A7=E3=81=AE=E8=A1=A8=E7=A4=BA=E6=9D=A1=E4=BB=B6=E3=82=92?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20(#74)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BingoCardView.vue                 | 12 +++--
 components/CreateUserBadge.vue               | 56 ++++++++++++++++++++
 server/api/bingoCard/index.get.ts            | 14 ++---
 server/api/bingoCard/index.post.ts           | 27 ++++++----
 server/api/user/index.get.ts                 |  2 +-
 server/facades/repositories/bingoContents.ts |  7 ++-
 6 files changed, 93 insertions(+), 25 deletions(-)
 create mode 100644 components/CreateUserBadge.vue

diff --git a/components/BingoCardView.vue b/components/BingoCardView.vue
index 38968f4..ee9a084 100644
--- a/components/BingoCardView.vue
+++ b/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">
diff --git a/components/CreateUserBadge.vue b/components/CreateUserBadge.vue
new file mode 100644
index 0000000..0849487
--- /dev/null
+++ b/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>
diff --git a/server/api/bingoCard/index.get.ts b/server/api/bingoCard/index.get.ts
index 5983719..0cb7076 100644
--- a/server/api/bingoCard/index.get.ts
+++ b/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);
diff --git a/server/api/bingoCard/index.post.ts b/server/api/bingoCard/index.post.ts
index c5a3f68..d6b7eba 100644
--- a/server/api/bingoCard/index.post.ts
+++ b/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,
diff --git a/server/api/user/index.get.ts b/server/api/user/index.get.ts
index 59d399b..a783a01 100644
--- a/server/api/user/index.get.ts
+++ b/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);
diff --git a/server/facades/repositories/bingoContents.ts b/server/facades/repositories/bingoContents.ts
index 92b0786..32cc0da 100644
--- a/server/facades/repositories/bingoContents.ts
+++ b/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 [];
   }
 };