Merge pull request #79 from nkc-ug/feater/battle

Feater/battle

.github/workflows/ci.yml

@@ -7,40 +7,39 @@ on:
     branches: ['main', 'develop']
 
 jobs:
-  eslint: 
-    name: Run eslint scanning         
-    runs-on: ubuntu-latest  
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
     steps:
-      - name: Checkout code                               #コードを持ってくる
+      - name: Checkout code #コードを持ってくる
         uses: actions/checkout@v3
 
-      - name: Install ESLint                              #ESlintをインストールする
+      - name: Install ESLint #ESlintをインストールする
         run: |
           npm install [email protected]
           npm install @microsoft/[email protected]
 
-      - name: Run ESLint                                  #ESLintを実行する  
-        run:
-          npx eslint ./src --ext .js,.jsx,.ts,.tsx --format @microsoft/eslint-formatter-sarif
-          --output-file eslint-results.sarif 
+      - name: Run ESLint #ESLintを実行する
+        run: npx eslint ./src --ext .js,.jsx,.ts,.tsx --format @microsoft/eslint-formatter-sarif
+          --output-file eslint-results.sarif
         continue-on-error: true
 
-      - name: Upload analysis results to GitHub           #githubに解析結果をアップロード
+      - name: Upload analysis results to GitHub #githubに解析結果をアップロード
         uses: github/codeql-action/upload-sarif@v2
         with:
           sarif_file: eslint-results.sarif
           wait-for-processing: true
 
   rome:
-    name: Run rome scanning 
+    name: Run rome scanning
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code        #コードを持ってくる
+      - name: Checkout code #コードを持ってくる
         uses: actions/checkout@v3
 
-      - name: Install Rome         #romeをインストールする
+      - name: Install Rome #romeをインストールする
         run: |
           npm install [email protected]
 
-      - name: Run Rome             #romeを実行
-        run: npx rome check ./src
+      - name: Run Rome #romeを実行
+        run: npx rome check ./src

doc/battle.md

@@ -0,0 +1,5 @@
+バトルする
+勝つ
+ツイートできるようにする
+負ける
+励ましの言葉をヤギにかける

package.json

@@ -14,6 +14,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.6",
+    "@swc/core": "^1.3.76",
     "axios": "^1.4.0",
     "dayjs": "^1.11.8",
     "firebase": "^9.23.0",

src/components/Battle.tsx

@@ -0,0 +1,115 @@
+import { FC, useState, useEffect } from 'react';
+import Backdrop from '@mui/material/Backdrop';
+import Modal from '@mui/material/Modal';
+import Fade from '@mui/material/Fade';
+import Typography from '@mui/material/Typography';
+import backgroundImage from '../assets/tutorial.png';
+import { Button, Stack } from '@mui/material';
+import { EATLIMIT } from '../const/eatLimit';
+
+const style = {
+  position: 'absolute' as const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 300,
+  color: '#000',
+
+  backgroundImage: `url(${backgroundImage})`,
+  backgroundSize: 'cover',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center',
+  border: '1.5px solid #FFF',
+  borderRadius: '10px',
+  boxShadow: 24,
+  p: 4,
+  outline: 'none',
+};
+
+type Props = {
+  eatCount: number;
+  monster: number;
+  open: boolean;
+  openclick: React.MouseEventHandler<HTMLButtonElement> | undefined;
+  closeclick: React.MouseEventHandler<HTMLButtonElement> | undefined;
+};
+
+const Battle: FC<Props> = ({ open, monster, openclick, closeclick, eatCount }) => {
+  const [monsterlabel1, setmonsterlabel1] = useState('');
+  const [monsterlabel2, setmonsterlabel2] = useState('');
+  const labelList = [
+    'このモンスターは',
+    monsterlabel1,
+    'よわいようだ！',
+    'ことばをたべさせて',
+    monsterlabel2,
+    'やぎをそだてよう',
+  ];
+
+  useEffect(() => {
+    switch (monster) {
+      case 1:
+        setmonsterlabel1('よろこびのかんじょうに');
+        setmonsterlabel2('やぎをよろこびのかんじょうに');
+        break;
+      case 2:
+        setmonsterlabel1('いかりのかんじょうに');
+        setmonsterlabel2('やぎをいかりのかんじょうに');
+        break;
+      case 3:
+        setmonsterlabel1('かなしいのかんじょうに');
+        setmonsterlabel2('やぎをかなしいのかんじょうに');
+        break;
+      case 4:
+        setmonsterlabel1('たのしいのかんじょうに');
+        setmonsterlabel2('やぎをたのしいかんじょうに');
+        break;
+    }
+  }, []);
+
+  return (
+    <div>
+      {eatCount > EATLIMIT ? null : (
+        <Modal
+          open={open}
+          onClose={closeclick}
+          closeAfterTransition
+          slots={{ backdrop: Backdrop }}
+          slotProps={{
+            backdrop: {
+              timeout: 500,
+            },
+          }}
+        >
+          <Fade in={open}>
+            <Stack sx={style} spacing={3}>
+              <Typography
+                id="transition-modal-title"
+                variant="h5"
+                textAlign={'center'}
+                sx={{
+                  fontSize: '40px',
+                }}
+              >
+                モンスターがあらわれた！！
+              </Typography>
+              <Stack justifyContent="center" spacing={1}>
+                {labelList.map((label) => (
+                  <Typography key={label} variant="h6" textAlign={'center'}>
+                    {label}
+                  </Typography>
+                ))}
+              </Stack>
+              <Stack justifyContent="center" direction="row">
+                <Button variant="contained" sx={{ color: 'white' }} onClick={closeclick}>
+                  やぎをそだてる
+                </Button>
+              </Stack>
+            </Stack>
+          </Fade>
+        </Modal>
+      )}
+    </div>
+  );
+};
+export default Battle;