Merge pull request #125 from nkc-ug/feature/trophy

トロフィーシステム実装/合計5,10回言葉を食べる
nkc-ug · Sep 1, 2023 · 102f1d4 · 102f1d4
2 parents 0702a10 + edc4008
commit 102f1d4
Show file tree

Hide file tree

Showing 10 changed files with 200 additions and 4 deletions.
diff --git a/src/components/auth/AddUserData.ts b/src/components/auth/AddUserData.ts
@@ -4,6 +4,12 @@ import { USERCOLLECTIONNAME } from '../../lib/firestore';
 import { GetUserData } from './GetUserData';
 
 export const AddUserData = async (email: string) => {
+  const trophy = {
+    eatCount5: false,
+    eatCount10: false,
+    battleWinCount3: false,
+    battleWinCount5: false,
+  };
   const userData = await GetUserData(email);
   const collectionRef = doc(db, USERCOLLECTIONNAME, email);
   const docData = {
@@ -12,6 +18,7 @@ export const AddUserData = async (email: string) => {
     battleWinCount: 0,
     goatType: '',
     goatClothes: 'yagi',
+    trophy: trophy,
   };
   if (docData.userName !== 'NoLogin') {
     await setDoc(collectionRef, docData);

diff --git a/src/components/auth/SetupUserData.ts b/src/components/auth/SetupUserData.ts
@@ -5,12 +5,19 @@ import { UserProps } from '../../types/UserDataType';
 
 export const SetupUserData = async ({ userId, userName }: UserProps) => {
   const collectionRef = doc(db, USERCOLLECTIONNAME, userId);
+  const trophy = {
+    eatCount5: false,
+    eatCount10: false,
+    battleWinCount3: false,
+    battleWinCount5: false,
+  };
   const docData = {
     userName: userName,
     totalEatCount: 0,
     battleWinCount: 0,
     goatType: '',
     goatClothes: 'yagi',
+    trophy: trophy,
   };
   if (docData.userName !== 'NoLogin') {
     await setDoc(collectionRef, docData);

diff --git a/src/components/auth/UpdateUserData.ts b/src/components/auth/UpdateUserData.ts
@@ -1,6 +1,7 @@
 import { setDoc, doc } from 'firebase/firestore';
 import { db } from '../../lib/firebase';
 import { USERCOLLECTIONNAME, UserDBType } from '../../lib/firestore';
+import { TrophyType } from '../../types/UserDataType';
 
 /*
 ～UpdateUserDataについて～
@@ -22,14 +23,17 @@ updateData: 更新したいデータを入力
 export const UpdateUserData = async (
   userId: string,
   updateDataName: string,
-  updateData: string | number | boolean
+  updateData: string | number | boolean | TrophyType
 ) => {
   const collectionRef = doc(db, USERCOLLECTIONNAME, userId);
   const docData = dataPackage(updateDataName, updateData);
   await setDoc(collectionRef, docData, { merge: true });
 };
 
-const dataPackage = (updateDataName: string, updateData: string | number | boolean) => {
+const dataPackage = (
+  updateDataName: string,
+  updateData: string | number | boolean | TrophyType
+) => {
   switch (updateDataName) {
     case 'userName':
       return { userName: updateData };
@@ -41,5 +45,7 @@ const dataPackage = (updateDataName: string, updateData: string | number | boole
       return { totalEatCount: updateData };
     case 'battleWinCount':
       return { battleWinCount: updateData };
+    case 'trophy':
+      return { trophy: updateData };
   }
 };
diff --git a/src/components/auth/update/TotalEatCount.ts b/src/components/auth/update/TotalEatCount.ts
@@ -1,10 +1,35 @@
 import { UpdateUserData } from '../UpdateUserData';
 import { GetUserData } from '../GetUserData';
+import { TrophyType } from '../../../types/UserDataType';
+import { UserDataType } from '../../../types/UserDataType';
 
 export const AddTotalEatCount = (email: string, isLogin: boolean) => {
   const addCount = async () => {
-    const response = (await GetUserData(email)).totalEatCount + 1;
-    UpdateUserData(email, 'totalEatCount', response);
+    const response = await GetUserData(email);
+    const count = response.totalEatCount + 1;
+    !response.trophy.eatCount5 && count > 4 ? totalEatCount5Unlock(email, response) : null;
+    !response.trophy.eatCount10 && count > 9 ? totalEatCount10Unlock(email, response) : null;
+    UpdateUserData(email, 'totalEatCount', count);
   };
   isLogin ? addCount() : null;
 };
+
+const totalEatCount5Unlock = (email: string, response: UserDataType) => {
+  const trophy: TrophyType = {
+    eatCount5: true,
+    eatCount10: response.trophy.eatCount10,
+    battleWinCount3: response.trophy.battleWinCount3,
+    battleWinCount5: response.trophy.battleWinCount5,
+  };
+  UpdateUserData(email, 'trophy', trophy);
+};
+
+const totalEatCount10Unlock = (email: string, response: UserDataType) => {
+  const trophy: TrophyType = {
+    eatCount5: response.trophy.eatCount5,
+    eatCount10: true,
+    battleWinCount3: response.trophy.battleWinCount3,
+    battleWinCount5: response.trophy.battleWinCount5,
+  };
+  UpdateUserData(email, 'trophy', trophy);
+};
diff --git a/src/components/navbar/NavBar.tsx b/src/components/navbar/NavBar.tsx
@@ -5,6 +5,7 @@ import HelpIcon from '@mui/icons-material/Help';
 import SearchIcon from '@mui/icons-material/Search';
 import SettingsIcon from '@mui/icons-material/Settings';
 import CoronavirusIcon from '@mui/icons-material/Coronavirus';
+import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
 import { StyleMenu } from './StyleMenu';
 import {
   MonsterContext,
@@ -78,6 +79,14 @@ export const NavBar: FC<Props> = ({ handleTutorialChange }) => {
           }}
           sx={{ color: 'white' }}
         />
+        <BottomNavigationAction
+          label="トロフィー"
+          icon={<EmojiEventsIcon />}
+          onClick={() => {
+            navigate('/TrophyPage');
+          }}
+          sx={{ color: 'white' }}
+        />
         <BottomNavigationAction
           label="せってい"
           icon={<SettingsIcon />}

diff --git a/src/components/trophy/RequestLogin.tsx b/src/components/trophy/RequestLogin.tsx
@@ -0,0 +1,21 @@
+import { useContext } from 'react';
+import { Box } from '@mui/material';
+import { IsLoginContext } from '../../provider/ContextProviders';
+import { LoginButton } from '../auth/LoginButton';
+
+export const RequestLogin = () => {
+  const [isLogin] = useContext(IsLoginContext);
+  return isLogin ? null : (
+    <div>
+      <Box sx={{ color: 'rgba(225, 225, 225, 1)' }}>
+        <h2>ログインがひつようです</h2>
+        <h4>
+          トロフィーきのうをつかうにはログインがひつようです。
+          <br />
+          おてすうですがログインしていただくようにおねがいいたします。
+        </h4>
+      </Box>
+      <LoginButton />
+    </div>
+  );
+};
diff --git a/src/components/trophy/TrophyList.tsx b/src/components/trophy/TrophyList.tsx
@@ -0,0 +1,52 @@
+import { useContext, useEffect, useState } from 'react';
+import { Box, Grid, Typography, Paper } from '@mui/material';
+import { IsLoginContext } from '../../provider/ContextProviders';
+import { EmailContext } from '../../provider/ContextProviders';
+
+import { TrophyType } from '../../types/UserDataType';
+import { GetUserData } from '../auth/GetUserData';
+import { UserDataType } from '../../types/UserDataType';
+
+export const TrophyList = () => {
+  const [isLogin] = useContext(IsLoginContext);
+  const [email] = useContext(EmailContext);
+  const [userData, setUserData] = useState<UserDataType>();
+
+  useEffect(() => {
+    // useEffect自体ではasyncの関数を受け取れないので内部で関数を定義して呼び出す。
+    const access_db = async () => {
+      const response = await GetUserData(email);
+      setUserData(response);
+    };
+    isLogin ? access_db() : null;
+  }, [isLogin]);
+
+  return isLogin ? (
+    <div>
+      <Box sx={{ color: 'rgba(225, 225, 225, 1)', marginTop: '30px' }}>
+        <Box>
+          <Grid container spacing={2}>
+            <Grid item xs={6}>
+              <Paper sx={{ backgroundColor: 'rgba(128, 128, 128, 0.75)', height: '150px' }}>
+                <Typography sx={{ fontSize: '24px' }}>
+                  {userData?.trophy.eatCount5 ? 'おなかいっぱいメェ～' : '？？？'}
+                </Typography>
+                <Typography fontWeight="bold">かくとくほうほう</Typography>
+                <Typography>ヤギにことばを５かいたべさせる</Typography>
+              </Paper>
+            </Grid>
+            <Grid item xs={6}>
+              <Paper sx={{ backgroundColor: 'rgba(128, 128, 128, 0.75)', height: '150px' }}>
+                <Typography sx={{ fontSize: '24px' }}>
+                  {userData?.trophy.eatCount5 ? 'もうたべれないメェー！！！' : '？？？'}
+                </Typography>
+                <Typography fontWeight="bold">かくとくほうほう</Typography>
+                <Typography>ヤギにことばを１０かいたべさせる</Typography>
+              </Paper>
+            </Grid>
+          </Grid>
+        </Box>
+      </Box>
+    </div>
+  ) : null;
+};
diff --git a/src/pages/TrophyPage.tsx b/src/pages/TrophyPage.tsx
@@ -0,0 +1,46 @@
+import { useContext } from 'react';
+import { Typography, Container } from '@mui/material';
+import backgroundgImage from '../assets/night.png';
+import { GetUserData } from '../components/auth/GetUserData';
+import { IsLoginContext } from '../provider/ContextProviders';
+
+import { RequestLogin } from '../components/trophy/RequestLogin';
+import { TrophyList } from '../components/trophy/TrophyList';
+
+import { CostumeNavBarCon } from '../components/costume/CostumeNavBarcon';
+
+export const TrophyPage = () => {
+  return (
+    <div>
+      <Container
+        maxWidth="sm"
+        sx={{
+          padding: '0px',
+          minHeight: '100vh',
+          height: '100%',
+          width: '100%',
+          textAlign: 'center',
+          backgroundImage: `url(${backgroundgImage})`,
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+        }}
+      >
+        <Typography
+          variant="h2"
+          sx={{
+            margin: '0px',
+            padding: '20px',
+            backgroundColor: 'rgba(220, 220, 220, 0.6)',
+            fontSize: '48px',
+          }}
+        >
+          トロフィールーム
+        </Typography>
+        <RequestLogin />
+        <TrophyList />
+      </Container>
+      <CostumeNavBarCon />
+    </div>
+  );
+};
diff --git a/src/routes/Routers.tsx b/src/routes/Routers.tsx
@@ -4,6 +4,7 @@ import { BattleView } from '../pages/BattleView';
 import { MonsterView } from '../pages/MonsterView';
 import { CostumePage } from '../pages/CostumePage';
 import { SettingsView } from '../pages/SettingsView';
+import { TrophyPage } from '../pages/TrophyPage';
 
 export const Router = () => {
   return (
@@ -14,6 +15,7 @@ export const Router = () => {
         <Route path={'/battle'} element={<BattleView />} />
         <Route path={'/CostumePage'} element={<CostumePage />} />
         <Route path={'/SettingsView'} element={<SettingsView />} />
+        <Route path={'/TrophyPage'} element={<TrophyPage />} />
       </Routes>
     </BrowserRouter>
   );

diff --git a/src/types/UserDataType.ts b/src/types/UserDataType.ts
@@ -4,9 +4,30 @@ export type UserDataType = {
   battleWinCount: number;
   goatType: string;
   goatClothes: string;
+  trophy: TrophyType;
+};
+
+export type TrophyType = {
+  eatCount5: boolean;
+  eatCount10: boolean;
+  battleWinCount3: boolean;
+  battleWinCount5: boolean;
 };
 
 export type UserProps = {
   userId: string;
   userName: string;
 };
+
+/*
+Trophy更新用のテンプレ
+const totalEatCount5Unlock = (email: string, response: UserDataType) => {
+  const trophy: TrophyType = {
+    eatCount5: response.trophy.eatCount5,
+    eatCount10: response.trophy.eatCount10,
+    battleWinCount3: response.trophy.battleWinCount3,
+    battleWinCount5: response.trophy.battleWinCount5,
+  };
+  UpdateUserData(email, 'trophy', trophy);
+};
+*/