Merge pull request #72 from ut-code/feature/DropDown

ログイン機能を作成

Author: kazukinumazato

packages/web/src/App.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Blockly from "blockly";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -10,6 +10,8 @@ import TestPlay from "./component/TestPlay";
 import Arena from "./component/Arena";
 import Welcome from "./component/Welcome";
 import ButtonAppBar from "./component/ButtonAppBar";
+import { getUsers } from "./fetchAPI";
+import type { User } from "./component/Emulator";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -28,8 +30,16 @@ export default function App() {
     program: "",
     rank: 0,
   });
+  const [users, setUsers] = useState<User[]>([]);
   const workspaceRef = useRef<Blockly.WorkspaceSvg>();
 
+  useEffect(() => {
+    async function fetchUsers() {
+      setUsers(await getUsers());
+    }
+    fetchUsers();
+  }, []);
+
   return (
     <>
       <Box
@@ -43,11 +53,12 @@ export default function App() {
         <ButtonAppBar />
         <Injection workspaceRef={workspaceRef} />
       </Box>
-      <Welcome setCurrentUser={setCurrentUser} />
+      <Welcome users={users} setCurrentUser={setCurrentUser} />
       <Arena
         currentUser={currentUser}
         setCurrentUser={setCurrentUser}
         workspaceRef={workspaceRef}
+        users={users}
       />
       <TestPlay
         currentUser={currentUser}

packages/web/src/component/Arena.tsx

@@ -19,7 +19,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { grey } from "@mui/material/colors";
 import { FaFortAwesome } from "react-icons/fa";
 import type { User } from "./game";
-import { getUsers, getUser, changeUserName, uploadProgram } from "../fetchAPI";
+import { getUser, changeUserName, uploadProgram } from "../fetchAPI";
 
 interface ChangeNameDialogProps {
   currentUser: User;
@@ -109,10 +109,11 @@ interface ArenaProps {
   currentUser: User;
   setCurrentUser: (value: User) => void;
   workspaceRef: React.MutableRefObject<Blockly.WorkspaceSvg | undefined>;
+  users: User[];
 }
 
 export default function Arena(props: ArenaProps) {
-  const { currentUser, setCurrentUser, workspaceRef } = props;
+  const { currentUser, setCurrentUser, workspaceRef, users } = props;
   const [numberOfUsers, setNumberOfUsers] = useState(0);
   const [loaded, setLoaded] = useState(false);
   const [open, setOpen] = useState(false);
@@ -122,7 +123,7 @@ export default function Arena(props: ArenaProps) {
   const handleChange = async (_: unknown, expanded: boolean) => {
     if (expanded) {
       setCurrentUser(await getUser(currentUser.id));
-      setNumberOfUsers((await getUsers()).length);
+      setNumberOfUsers(users.length);
       setLoaded(true);
     } else setLoaded(false);
   };

packages/web/src/component/DropDown.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import Box from "@mui/material/Box";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import Typography from "@mui/material/Typography";
+import type { User } from "./Emulator";
+
+export default function DropDown(props: {
+  users: User[];
+  handleClose: (user: User) => void;
+}) {
+  const { users, handleClose: handleUser } = props;
+
+  const [name, setName] = React.useState("");
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setName(event.target.value as string);
+  };
+
+  return (
+    <>
+      <Typography color="text.secondary" sx={{ my: 1, marginLeft: 10 }}>
+        もしくは
+      </Typography>
+      <Box sx={{ display: "flex", marginLeft: 10, marginBottom: 10 }}>
+        <Box sx={{ width: 100 }}>
+          <FormControl fullWidth>
+            <InputLabel id="demo-simple-select-label">名前</InputLabel>
+            <Select
+              labelId="demo-simple-select-label"
+              id="demo-simple-select"
+              value={name}
+              label="User"
+              onChange={handleChange}
+            >
+              {users.map((user) => (
+                <MenuItem value={user.name} key={user.id}>
+                  {user.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+        <Button
+          onClick={() => {
+            const user = users.find((eachUser) => eachUser.name === name);
+            if (!user) throw Error();
+            handleUser(user);
+          }}
+          variant="outlined"
+        >
+          でログイン
+        </Button>
+      </Box>
+    </>
+  );
+}

packages/web/src/component/TestPlay.tsx

@@ -251,10 +251,19 @@ export default function TestPlay(props: TestPlayProps) {
   useEffect(() => {
     const fetchUsers = async () => {
       const response = await getUsers();
+      const copy = response
+        .filter((user) => user.id !== currentUser.id)
+        .slice();
+      const newEnemyIds = [...Array(3)].map(
+        () => copy.splice(Math.floor(Math.random() * copy.length), 1)[0]?.id
+      ) as number[];
+      setEnemyIds(newEnemyIds);
       setUsers(response);
     };
     fetchUsers();
-  }, []);
+  }, [currentUser.id]);
+
+  const usersExceptMe = users?.filter((user) => user.id !== currentUser.id);
 
   const [isActive, setIsActive] = useState(false);
   const [executionId, setExecutionId] = useState(1);
@@ -453,9 +462,9 @@ export default function TestPlay(props: TestPlayProps) {
           </Box>
         </AccordionDetails>
       </Accordion>
-      {users ? (
+      {users && usersExceptMe ? (
         <EnemyDialog
-          users={users}
+          users={usersExceptMe}
           enemyIds={enemyIds}
           selectedEnemyIds={selectedEnemyIds}
           setSelectedEnemyIds={setSelectedEnemyIds}

packages/web/src/component/Welcome.tsx

@@ -14,14 +14,16 @@ import {
 import type { User } from "./game";
 import iconURL from "../icon1.svg";
 import { createUser } from "../fetchAPI";
+import DropDown from "./DropDown";
 
 interface WelcomeProps {
   // currentUser: User;
   setCurrentUser: (value: User) => void;
+  users: User[];
 }
 
 export default function Welcome(props: WelcomeProps) {
-  const { /* currentUser, */ setCurrentUser } = props;
+  const { /* currentUser, */ setCurrentUser, users } = props;
   const [open, setOpen] = useState(true);
   const [name, setName] = useState("");
   const [selectedIcon, setSelectedIcon] = useState(0);
@@ -99,6 +101,13 @@ export default function Welcome(props: WelcomeProps) {
             開始
           </Button>
         </DialogActions>
+        <DropDown
+          users={users}
+          handleClose={(user: User) => {
+            setCurrentUser(user);
+            setOpen(false);
+          }}
+        />
       </Dialog>
     </div>
   );