レイアウトや文言の違和感のある箇所を修正 (#71)

components/BingoCardDetail.vue

@@ -41,7 +41,7 @@
             <!--{{ mission.mission_title + ":" + mission }}-->
           </p>
           <p class="text-base leading-relaxed text-white font-bold">
-            ミッション詳細はここにかく
+            お題の詳細はここにかく
           </p>
           <div class="mt-8">
             <label

components/MyProfile.vue

@@ -15,16 +15,16 @@
       </div>
       <div class="stats px-5">
         <div class="stat text-center">
-          <i>クリアした回数</i>
-          <i class="grid">{{ missionClearCount }}<span>回</span></i>
+          <i>カードを作成した回数</i>
+          <i class="grid">{{ userInfo?.bingoCreationCount ?? 0 }}</i>
         </div>
         <div class="stat text-center">
-          <i>ビンゴを作成した回数</i>
-          <i class="grid">{{ missionCreateCount }}<span>回</span></i>
+          <i>ビンゴを達成した回数</i>
+          <i class="grid">{{ userInfo?.bingoCellClearCount ?? 0 }}</i>
         </div>
         <div class="stat text-center">
-          <i>ビンゴがクリアされた回数</i>
-          <i class="grid">{{ missionClearedByOtherCount }}<span>pts</span></i>
+          <i>ビンゴカードを<br />クリアした回数</i>
+          <i class="grid">{{ userInfo?.bingoCardClearCount ?? 0 }}</i>
         </div>
       </div>
       <div class="footer">
@@ -48,6 +48,10 @@ const props = defineProps({
     type: String as PropType<string | null>,
     required: true,
   },
+  userInfo: {
+    type: Object as PropType<UserInfo | null>,
+    required: true,
+  },
   walletAccount: {
     type: Object,
     required: true,
@@ -62,12 +66,14 @@ const avatarImageURL = computed(() => {
   );
 });
 
-const exchangeableToken = 100;
-const missionClearCount = 25;
-const missionCreateCount = 10;
-const missionClearedByOtherCount = 120;
+const exchangeableToken = computed(() => {
+  if (!props.walletAccount?.address) {
+    return "???";
+  }
+  // トークン取得は未実装
+  return 0;
+});
 const walletAddress = computed(() => {
-  console.log(props.walletAccount);
   return (
     props.walletAccount?.address ??
     "接続されていません。ウォレットと接続してください"
@@ -78,7 +84,7 @@ const walletAddress = computed(() => {
 <style lang="scss" scoped>
 /*** VARS ***/
 
-$main-col: #fbde60;
+$main-col: #6a60fb;
 //$main-col: rgb(251 191 36);
 $sec-col: lighten(#303f9f, 20%);
 $back-col: #c5cae9;
@@ -138,7 +144,7 @@ body {
 /*** CARD STLES ***/
 .card {
   float: left;
-  margin: 3rem;
+  margin: 3rem 3rem 0rem 3rem;
 }
 
 .card-one {

pages/create.vue

@@ -6,7 +6,7 @@
     <h1
       class="text-center tracking-wider mb-5 mt-5 font-normal text-xl text-gray-700"
     >
-      BINGO <span class="text-lg">をつくる</span>
+      ビンゴカード <span class="text-lg">をつくる</span>
     </h1>
 
     <div class="px-5 md:px-12">
@@ -25,10 +25,16 @@
           class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
           >タイトル</label
         >
-        <small>例：冬の景色と車、家族との思い出</small>
+        <small
+          >このビンゴカードのタイトルを入力してください<br />
+          例：冬の景色と車、家族との思い出</small
+        >
       </div>
       <div class="mb-3">
         <legend class="text-sm text-gray-500 mb-1">テーマ</legend>
+        <small
+          >これから何をしますか？テーマに沿ったビンゴカードを作成します。</small
+        >
         <div class="sample-form flex">
           <div class="w-1/3 text-center">
             <input
@@ -71,7 +77,8 @@
           </div>
         </div>
       </div>
-      <div class="mb-6">
+      <!-- テーマカラーは利用方法が見つからないのでコメントアウト -->
+      <!-- <div class="mb-6">
         <fieldset class="flex">
           <legend class="text-sm text-gray-500 mb-1">テーマカラー</legend>
           <div class="flex items-center mb-4 mr-9">
@@ -86,7 +93,7 @@
             />
           </div>
         </fieldset>
-      </div>
+      </div> -->
       <div class="flex justify-between">
         <router-link
           class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2"
@@ -135,7 +142,7 @@ const createBingoCard = async () => {
       Authorization: `Bearer ${await currentUser.value?.getIdToken()}`,
     },
     body: JSON.stringify({
-      title: form.value.title,
+      title: form.value.title == "" ? "タイトルなし" : form.value.title,
       theme: form.value.theme,
       imageColor: form.value.imageColor,
     } as BongoCreateRequest),

pages/mypage.vue

@@ -3,28 +3,35 @@
     v-if="currentUser"
     :avatarImageUrl="currentUser.photoURL"
     :displayName="currentUser.displayName"
+    :userInfo="userInfo"
     :walletAccount="walletAccount"
   />
 
-  <div class="flex flex-col justify-center text-center">
+  <div class="flex flex-col justify-center text-center mt-5">
     <!-- ウォレットと接続するボタン -->
     <div>
       <div class="mb-3">
-        <span class="mr-2">ウォレット</span>
+        <h2
+          class="text-center tracking-wider mb-3 font-normal text-xm text-gray-700"
+        >
+          ウォレット
+        </h2>
         <w3m-core-button themeVariables="--w3m-accent-color: #000" />
       </div>
       <!-- <div class="">
         <w3m-network-switch themeVariables="--w3m-accent-color: #000" />
       </div> -->
     </div>
+  </div>
 
+  <div class="flex flex-col justify-center text-center">
     <!-- サインアウトボタン -->
     <div v-if="currentUser">
       <button
-        class="text-white font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 focus:outline-none bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
+        class="text-white font-medium rounded-lg text-sm px-5 py-2.5 mt-5 focus:outline-none bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
         @click="logout"
       >
-        Sign Out
+        ログアウトする
       </button>
     </div>
   </div>
@@ -47,13 +54,28 @@ const currentUser = useCurrentUser();
 const router = useRouter();
 
 // ログインしていない場合はログイン画面にリダイレクト
-onBeforeMount(() => {
+onBeforeMount(async () => {
   if (!currentUser.value) {
     console.log("Not logged in");
     router.push(`/login`);
+  } else {
+    await getUser();
   }
 });
 
+// ユーザ情報をDBから取得
+const userInfo = ref(Object as unknown as UserInfo);
+const getUser = async () => {
+  const res = await fetch("/api/user", {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${await currentUser.value?.getIdToken()}`,
+    },
+  });
+  const data = await res.json();
+  userInfo.value = data;
+};
+
 // サインアウトボタン
 const logout = async () => {
   const auth = getAuth();

server/api/bingoCard/index.post.ts

@@ -4,6 +4,7 @@ import { BingoCard, BingoCell } from "@/server/models/bingo/dto";
 import { createBingoCellTheme } from "@/server/facades/generativeai/chatgpt";
 import { CreateBingoCellThemeResponse } from "@/server/models/facades/generativeai/chatgpt";
 import { idAuthentication } from "@/server/facades/auth/idAuthentication";
+import { incrementBingoCreationCount } from "@/server/facades/repositories/users";
 
 /**
  * ビンゴカードを新規作成する
@@ -31,6 +32,8 @@ export default defineEventHandler(async (event) => {
     // DBに追加
     addBingoCard(entryBingoCard);
 
+    // ユーザが作成したビンゴカードの数を1増やす
+    await incrementBingoCreationCount(uid);
     return {
       message: "OK",
       bingoCardId: entryBingoCard.id,

server/api/user/index.get.ts

@@ -0,0 +1,23 @@
+import { idAuthentication } from "@/server/facades/auth/idAuthentication";
+import { getUserInfo } from "@/server/facades/repositories/users";
+
+/**
+ * ユーザの詳細情報を取得する
+ */
+export default defineEventHandler(async (event) => {
+  try {
+    const token = await getHeaders(event)["authorization"];
+    const uid = await idAuthentication(token);
+
+    const user = await getUserInfo(uid);
+    return {
+      ...user,
+    } as UserInfo;
+  } catch (error) {
+    console.error(error);
+    return {
+      status: 500,
+      message: "Internal Server Error",
+    };
+  }
+});

server/facades/repositories/users.ts

@@ -1,6 +1,21 @@
-import { doc } from "firebase/firestore";
 import { firestore } from "../firebase";
 
+/**
+ * ユーザ情報を取得する
+ */
+export const getUserInfo = async (uid: string) => {
+  try {
+    const querySnapshot = await firestore.collection("users").doc(uid).get();
+    const userInfo = querySnapshot.data() as UserInfo;
+    return userInfo;
+  } catch (e) {
+    console.error("[getUserInfo]", e);
+  }
+};
+
+/**
+ * ユーザアカウントにウォレットを紐づける
+ */
 export const updateUserWallet = async (
   uid: string,
   userWallet: UserWalletPutDto
@@ -11,6 +26,10 @@ export const updateUserWallet = async (
       walletAddress: userWallet.walletAddress,
       createdAt: new Date(),
       updatedAt: new Date(),
+
+      bingoCreationCount: 0,
+      bingoCellClearCount: 0,
+      bingoCardClearCount: 0,
     } as UserInfo;
 
     const docRef = await firestore.collection("users").doc(uid);
@@ -19,3 +38,45 @@ export const updateUserWallet = async (
     console.error("[updateUserWallet]", e);
   }
 };
+
+/**
+ * ビンゴカードを作成した回数をインクリメントする
+ */
+export const incrementBingoCreationCount = async (uid: string) => {
+  try {
+    const docRef = await firestore.collection("users").doc(uid);
+    await docRef.update({
+      bingoCreationCount: (await docRef.get()).data()?.bingoCreationCount + 1,
+    });
+  } catch (e) {
+    console.error("[incrementBingoCreationCount]", e);
+  }
+};
+
+/**
+ * ビンゴセルをビンゴした回数をインクリメントする
+ */
+export const incrementBingoCellClearCount = async (uid: string) => {
+  try {
+    const docRef = await firestore.collection("users").doc(uid);
+    await docRef.update({
+      bingoCellClearCount: (await docRef.get()).data()?.bingoCellClearCount + 1,
+    });
+  } catch (e) {
+    console.error("[incrementBingoCreationCount]", e);
+  }
+};
+
+/**
+ * ビンゴカードをクリアした回数をインクリメントする
+ */
+export const incrementBingoCardClearCount = async (uid: string) => {
+  try {
+    const docRef = await firestore.collection("users").doc(uid);
+    await docRef.update({
+      bingoCardClearCount: (await docRef.get()).data()?.bingoCardClearCount + 1,
+    });
+  } catch (e) {
+    console.error("[incrementBingoCreationCount]", e);
+  }
+};

server/models/user/dto.ts

@@ -5,4 +5,9 @@ interface UserInfo {
   walletAddress: string;
   createdAt: Date;
   updatedAt: Date;
+
+  // ユーザの各種アクション
+  bingoCreationCount?: number; // ビンゴカードを作成した数
+  bingoCellClearCount?: number; // ビンゴセルをクリアした数
+  bingoCardClearCount?: number; // ビンゴカードをクリアした数
 }