game.tsを分割して整理

Author: GuY8528

packages/web/src/App.tsx

@@ -12,6 +12,7 @@ import { getUsers } from "./fetchAPI";
 import type { User } from "./component/Emulator";
 import { useApiPasswordContext } from "./common/api-password";
 import ApiPasswordDialog from "./component/ApiPasswordDialog";
+import options from "./options";
 
 export default function App() {
   const [currentUser, setCurrentUser] = useState({
@@ -47,7 +48,7 @@ export default function App() {
             setIsApiPasswordDialogOpen(true);
           }}
         />
-        <Injection workspaceRef={workspaceRef} />
+        <Injection workspaceRef={workspaceRef} options={options} />
       </Box>
       {password && (
         <>

packages/web/src/component/Emulator.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
-import Game from "./game";
-import type { Result } from "./game";
+import type { Result } from "./game/game";
+import TutorialGame from "./tutorial/tutorialGames";
+import Game from "./game/game";
 
 export interface User {
   name: string;
@@ -26,6 +27,7 @@ type EmulatorProps = {
   executionId: number; // エミュレーターそのものを更新するためのId
   handleStatuses: (statuses: Status[]) => void;
   onGameCompleted?: (result: Result) => void;
+  gameModeId: number;
 };
 
 export default function Emulator(props: EmulatorProps) {
@@ -38,19 +40,35 @@ export default function Emulator(props: EmulatorProps) {
     executionId,
     handleStatuses,
     onGameCompleted,
+    gameModeId,
   } = props;
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const gameRef = useRef<Game>();
+  const gameRef = useRef<any>();
   useEffect(() => {
     if (!canvasRef.current) throw new Error();
-    const game = new Game(users, canvasRef.current, (newStatuses: Status[]) => {
-      handleStatuses(newStatuses);
-    });
+    let GameClass;
+    switch (gameModeId) {
+      case 0:
+        GameClass = Game;
+        break;
+      case 1:
+        GameClass = TutorialGame;
+        break;
+      default:
+        GameClass = Game;
+    }
+    const game = new GameClass(
+      users,
+      canvasRef.current,
+      (newStatuses: Status[]) => {
+        handleStatuses(newStatuses);
+      }
+    );
     gameRef.current = game;
     return () => {
       game.destroy();
     };
-  }, [users, executionId, handleStatuses]);
+  }, [users, executionId, handleStatuses, gameModeId]);
   useEffect(() => {
     if (!gameRef.current) throw new Error();
     gameRef.current.onCompleted = (result: Result) => {

packages/web/src/component/Injection.tsx

@@ -5,7 +5,6 @@ import Blockly from "blockly";
 import Ja from "blockly/msg/ja";
 import "../style.css";
 import { Box } from "@mui/material";
-import options from "../options";
 import modifyTranslation from "../modifyTranslation";
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -16,9 +15,11 @@ import modifyTranslation from "../modifyTranslation";
 
 export default function Injection(props: {
   workspaceRef: React.MutableRefObject<Blockly.WorkspaceSvg | undefined>;
+  options: any;
 }) {
   const { workspaceRef } = props;
   const workspaceDivRef = useRef<HTMLDivElement>(null);
+  const { options } = props;
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -28,7 +29,7 @@ export default function Injection(props: {
     return () => {
       workspace.dispose();
     };
-  }, [workspaceRef]);
+  }, [workspaceRef, options]);
 
   return <Box ref={workspaceDivRef} sx={{ width: 1, height: 1 }} />;
 }

packages/web/src/component/TestPlay.tsx

@@ -29,7 +29,7 @@ import { grey } from "@mui/material/colors";
 import { HiOutlineScale } from "react-icons/hi";
 import Draggable from "react-draggable";
 import Emulator, { Status } from "./Emulator";
-import type { User } from "./game";
+import type { User } from "./game/game";
 import { getUsers } from "../fetchAPI";
 
 interface EnemyDialogProps {
@@ -264,6 +264,7 @@ export default function TestPlay(props: TestPlayProps) {
                   isPaused={isPaused}
                   executionId={executionId}
                   handleStatuses={setStatuses}
+                  gameModeId={0}
                 />
               ) : (
                 <Skeleton width="100%" height="auto" />