ゲーム結果が表示されるよう改良

Author: kazukinumazato

packages/web/src/component/Emulator.tsx

@@ -17,16 +17,18 @@ export interface Status {
   weapon: "ファイヤ" | "なし";
 }
 
-export default function Emulator(props: {
+type EmulatorProps = {
   width: number;
   height: number;
   users: User[];
   hasGameStarted: boolean;
   isPaused: boolean;
   executionId: number; // エミュレーターそのものを更新するためのId
   handleStatuses: (statuses: Status[]) => void;
-  onGameCompleted: (result: Result) => void;
-}) {
+  onGameCompleted?: (result: Result) => void;
+};
+
+export default function Emulator(props: EmulatorProps) {
   const {
     width,
     height,
@@ -52,7 +54,7 @@ export default function Emulator(props: {
   useEffect(() => {
     if (!gameRef.current) throw new Error();
     gameRef.current.onCompleted = (result: Result) => {
-      onGameCompleted(result);
+      onGameCompleted?.(result);
     };
     if (hasGameStarted) {
       if (!isPaused) {
@@ -69,3 +71,9 @@ export default function Emulator(props: {
     />
   );
 }
+
+Emulator.defaultProps = {
+  onGameCompleted: (result: Result) => {
+    result.keys();
+  },
+};

packages/web/src/component/TestPlay.tsx

@@ -1,5 +1,5 @@
 import Blockly from "blockly";
-import { useState, useEffect, useCallback, useMemo } from "react";
+import { useState, useEffect, useMemo } from "react";
 import {
   Accordion,
   AccordionDetails,
@@ -27,7 +27,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { grey } from "@mui/material/colors";
 import { HiOutlineScale } from "react-icons/hi";
 import Emulator, { Status } from "./Emulator";
-import type { Result, User } from "./game";
+import type { User } from "./game";
 import { getUsers } from "../fetchAPI";
 
 // const sampleUsers: [User, User, User, User] = [
@@ -301,8 +301,6 @@ export default function TestPlay(props: TestPlayProps) {
     () => (enemyUsers ? [currentUser].concat(enemyUsers) : null),
     [currentUser, enemyUsers]
   );
-
-  const onGameCompleted = useCallback((result: Result) => result, []);
   const [submitted, setSubmitted] = useState(false);
 
   return (
@@ -322,7 +320,6 @@ export default function TestPlay(props: TestPlayProps) {
                 isPaused={isPaused}
                 executionId={executionId}
                 handleStatuses={setStatuses}
-                onGameCompleted={onGameCompleted}
               />
             ) : (
               <Skeleton width="100%" height="auto" />

packages/web/src/component/game.ts

@@ -889,6 +889,22 @@ class WorldRenderer {
     }
   }
 
+  showResult(result: Result, users: User[]) {
+    let rank = 1;
+    for (const id of result) {
+      const user = users.find((eachUser) => eachUser.id === id);
+      if (!user) throw new Error();
+      const resultText = new PIXI.Text(`${rank}位: ${user.name}`, {
+        fontFamily: "Arial",
+        fontStyle: "italic",
+      });
+      resultText.anchor.set(0.5);
+      resultText.position.set(400, 100 * rank);
+      this.#pixi.stage.addChild(resultText);
+      rank += 1;
+    }
+  }
+
   destroy() {
     this.#pixi.destroy();
   }
@@ -1123,6 +1139,7 @@ export default class Game {
     this.world.clear();
     this.isEnded = true;
     this.onCompleted?.(this.result);
+    this.worldRenderer.showResult(result, this.users);
   }
 
   destroy() {