@revealui/core 0.0.1-pre.0

package/dist/ui/hooks/useGame.ts

@@ -0,0 +1,1147 @@
+import { useMemo } from "react";
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface Velocity {
+  x: number;
+  y: number;
+}
+
+interface Offset {
+  x: number;
+  y: number;
+}
+
+interface AttackBox {
+  offset: Offset;
+  width: number;
+  height: number;
+}
+
+interface Fighter {
+  position: Position;
+  velocity: Velocity;
+  color: string;
+  offset: Offset;
+  image: string;
+  scale: number;
+  framesMax: number;
+  sprites: Record<string, { image: string; framesMax: number }>;
+  attackBox: AttackBox;
+  isAttacking: boolean;
+  dead: boolean;
+  attack: () => void;
+  takeHit: () => void;
+  death: () => void;
+  idle: () => void;
+  run: () => void;
+  jump: () => void;
+  fall: () => void;
+  update: () => void;
+  draw: (context: CanvasRenderingContext2D) => void;
+}
+interface GameInput {
+  isKeyDown: (key: string) => boolean;
+}
+
+interface Game {
+  player: Fighter;
+  enemy: Fighter;
+  input: { isKeyDown: (key: string) => boolean };
+}
+
+const createCharacter = (
+  imageBasePath: string,
+  handleFunctions: Partial<Fighter>,
+): Fighter => {
+  const spritePath = (spriteName: string): string =>
+    `${imageBasePath}/${spriteName}.png`;
+
+  const defaultHandleFunctions: Fighter = {
+    position: { x: 50, y: 0 },
+    velocity: { x: 0, y: 0 },
+    color: "red",
+    offset: { x: 215, y: 170 },
+    image: spritePath("Idle"),
+    scale: 2.5,
+    framesMax: 4,
+    sprites: {
+      idle: { image: spritePath("Idle"), framesMax: 4 },
+      run: { image: spritePath("Run"), framesMax: 8 },
+      jump: { image: spritePath("Jump"), framesMax: 2 },
+      fall: { image: spritePath("Fall"), framesMax: 2 },
+      attack1: { image: spritePath("Attack1"), framesMax: 4 },
+      takeHit: { image: spritePath("TakeHit"), framesMax: 3 },
+      death: { image: spritePath("Death"), framesMax: 7 },
+    },
+    attackBox: { offset: { x: 170, y: 50 }, width: 170, height: 50 },
+    isAttacking: false,
+    dead: false,
+    attack: handleFunctions.attack || (() => {}),
+    takeHit: handleFunctions.takeHit || (() => {}),
+    death: handleFunctions.death || (() => {}),
+    idle: handleFunctions.idle || (() => {}),
+    run: handleFunctions.run || (() => {}),
+    jump: handleFunctions.jump || (() => {}),
+    fall: handleFunctions.fall || (() => {}),
+    update: handleFunctions.update || (() => {}),
+    draw: handleFunctions.draw || (() => {}),
+  };
+
+  return { ...defaultHandleFunctions };
+};
+
+async function useGame(): Promise<Game> {
+  // const input = useMemo(() => ({ isKeyDown: (key: string) => key === "" }), []);
+  const input: GameInput = useMemo(
+    () => ({ isKeyDown: (key: string) => key === "" }),
+    [],
+  );
+
+  const keydown = (event: KeyboardEvent) => {
+    input.isKeyDown = (key: string) => event.key === key;
+  };
+  const keyup = () => {
+    input.isKeyDown = (key: string) => key === "";
+  };
+
+  window.addEventListener("keydown", keydown);
+  window.addEventListener("keyup", keyup);
+
+  let player: Fighter | null = null;
+  let enemy: Fighter | null = null;
+
+  const playerHandleFunctions = useMemo(
+    () => ({
+      update: () => {
+        if (input.isKeyDown("ArrowRight")) {
+          player!.position.x += 5;
+        }
+
+        if (input.isKeyDown("ArrowLeft")) {
+          player!.position.x -= 5;
+        }
+
+        if (input.isKeyDown("ArrowUp")) {
+          player!.position.y -= 5;
+        }
+
+        if (input.isKeyDown("ArrowDown")) {
+          player!.position.y += 5;
+        }
+
+        if (input.isKeyDown(" ")) {
+          player!.attack();
+        }
+
+        player!.update();
+
+        if (player!.isAttacking) {
+          if (
+            player!.position.x + player!.attackBox.offset.x <
+              enemy!.position.x +
+                enemy!.attackBox.offset.x +
+                enemy!.attackBox.width &&
+            player!.position.x +
+              player!.attackBox.offset.x +
+              player!.attackBox.width >
+              enemy!.position.x + enemy!.attackBox.offset.x &&
+            player!.position.y + player!.attackBox.offset.y <
+              enemy!.position.y +
+                enemy!.attackBox.offset.y +
+                enemy!.attackBox.height &&
+            player!.position.y +
+              player!.attackBox.offset.y +
+              player!.attackBox.height >
+              enemy!.position.y + enemy!.attackBox.offset.y
+          ) {
+            enemy!.takeHit();
+          }
+        }
+
+        if (enemy!.dead) {
+          enemy!.death();
+        }
+
+        enemy!.update();
+
+        if (enemy!.isAttacking) {
+          if (
+            enemy!.position.x + enemy!.attackBox.offset.x <
+              player!.position.x +
+                player!.attackBox.offset.x +
+                player!.attackBox.width &&
+            enemy!.position.x +
+              enemy!.attackBox.offset.x +
+              enemy!.attackBox.width >
+              player!.position.x + player!.attackBox.offset.x &&
+            enemy!.position.y + enemy!.attackBox.offset.y <
+              player!.position.y +
+                player!.attackBox.offset.y +
+                player!.attackBox.height &&
+            enemy!.position.y +
+              enemy!.attackBox.offset.y +
+              enemy!.attackBox.height >
+              player!.position.y + player!.attackBox.offset.y
+          ) {
+            player!.takeHit();
+          }
+        }
+
+        if (player!.dead) {
+          player!.death();
+        }
+
+        player!.update();
+
+        if (
+          player!.position.x + player!.attackBox.offset.x <
+            enemy!.position.x +
+              enemy!.attackBox.offset.x +
+              enemy!.attackBox.width &&
+          player!.position.x +
+            player!.attackBox.offset.x +
+            player!.attackBox.width >
+            enemy!.position.x + enemy!.attackBox.offset.x &&
+          player!.position.y + player!.attackBox.offset.y <
+            enemy!.position.y +
+              enemy!.attackBox.offset.y +
+              enemy!.attackBox.height &&
+          player!.position.y +
+            player!.attackBox.offset.y +
+            player!.attackBox.height >
+            enemy!.position.y + enemy!.attackBox.offset.y
+        ) {
+          enemy!.takeHit();
+        }
+      },
+      draw: (context: CanvasRenderingContext2D) => {
+        context.fillStyle = "blue";
+        context.fillRect(
+          player!.position.x,
+          player!.position.y,
+          player!.attackBox.width,
+          player!.attackBox.height,
+        );
+      },
+    }),
+    [enemy, input, player],
+  );
+
+  const enemyHandleFunctions = useMemo(
+    () => ({
+      update: () => {
+        if (input.isKeyDown("d")) {
+          enemy!.position.x += 5;
+        }
+
+        if (input.isKeyDown("a")) {
+          enemy!.position.x -= 5;
+        }
+
+        if (input.isKeyDown("w")) {
+          enemy!.position.y -= 5;
+        }
+
+        if (input.isKeyDown("s")) {
+          enemy!.position.y += 5;
+        }
+
+        if (input.isKeyDown("q")) {
+          enemy!.attack();
+        }
+
+        enemy!.update();
+
+        if (enemy!.isAttacking) {
+          if (
+            enemy!.position.x + enemy!.attackBox.offset.x <
+              player!.position.x +
+                player!.attackBox.offset.x +
+                player!.attackBox.width &&
+            enemy!.position.x +
+              enemy!.attackBox.offset.x +
+              enemy!.attackBox.width >
+              player!.position.x + player!.attackBox.offset.x &&
+            enemy!.position.y + enemy!.attackBox.offset.y <
+              player!.position.y +
+                player!.attackBox.offset.y +
+                player!.attackBox.height &&
+            enemy!.position.y +
+              enemy!.attackBox.offset.y +
+              enemy!.attackBox.height >
+              player!.position.y + player!.attackBox.offset.y
+          ) {
+            player!.takeHit();
+          }
+        }
+
+        if (player!.dead) {
+          player!.death();
+        }
+
+        player!.update();
+
+        if (player!.isAttacking) {
+          if (
+            player!.position.x + player!.attackBox.offset.x <
+              enemy!.position.x +
+                enemy!.attackBox.offset.x +
+                enemy!.attackBox.width &&
+            player!.position.x +
+              player!.attackBox.offset.x +
+              player!.attackBox.width >
+              enemy!.position.x + enemy!.attackBox.offset.x &&
+            player!.position.y + player!.attackBox.offset.y <
+              enemy!.position.y +
+                enemy!.attackBox.offset.y +
+                enemy!.attackBox.height &&
+            player!.position.y +
+              player!.attackBox.offset.y +
+              player!.attackBox.height >
+              enemy!.position.y + enemy!.attackBox.offset.y
+          ) {
+            enemy!.takeHit();
+          }
+        }
+
+        if (enemy!.dead) {
+          enemy!.death();
+        }
+
+        enemy!.update();
+
+        if (
+          enemy!.position.x + enemy!.attackBox.offset.x <
+            player!.position.x +
+              player!.attackBox.offset.x +
+              player!.attackBox.width &&
+          enemy!.position.x +
+            enemy!.attackBox.offset.x +
+            enemy!.attackBox.width >
+            player!.position.x + player!.attackBox.offset.x &&
+          enemy!.position.y + enemy!.attackBox.offset.y <
+            player!.position.y +
+              player!.attackBox.offset.y +
+              player!.attackBox.height &&
+          enemy!.position.y +
+            enemy!.attackBox.offset.y +
+            enemy!.attackBox.height >
+            player!.position.y + player!.attackBox.offset.y
+        ) {
+          player!.takeHit();
+        }
+      },
+      draw: (context: CanvasRenderingContext2D) => {
+        context.fillStyle = "green";
+        context.fillRect(
+          enemy!.position.x,
+          enemy!.position.y,
+          enemy!.attackBox.width,
+          enemy!.attackBox.height,
+        );
+      },
+    }),
+    [enemy, input, player],
+  );
+
+  player = await useMemo(
+    () => createCharacter("/assets/images/kenji", playerHandleFunctions),
+    [playerHandleFunctions],
+  );
+
+  enemy = await useMemo(
+    () => createCharacter("/assets/images/kenji", enemyHandleFunctions),
+    [enemyHandleFunctions],
+  );
+
+  return { player: player!, enemy: enemy!, input };
+}
+
+export default useGame;
+
+// import { useMemo } from "react";
+
+// interface Position {
+//   x: number;
+//   y: number;
+// }
+
+// interface Velocity {
+//   x: number;
+//   y: number;
+// }
+
+// interface Offset {
+//   x: number;
+//   y: number;
+// }
+
+// interface AttackBox {
+//   offset: Offset;
+//   width: number;
+//   height: number;
+// }
+
+// interface Fighter {
+//   position: Position;
+//   velocity: Velocity;
+//   color: string;
+//   offset: Offset;
+//   image: string;
+//   scale: number;
+//   framesMax: number;
+//   sprites: Record<string, { image: string; framesMax: number }>;
+//   attackBox: AttackBox;
+//   isAttacking: boolean;
+//   dead: boolean;
+//   attack: () => void;
+//   takeHit: () => void;
+//   death: () => void;
+//   idle: () => void;
+//   run: () => void;
+//   jump: () => void;
+//   fall: () => void;
+//   update: () => void;
+//   draw: (context: CanvasRenderingContext2D) => void;
+// }
+
+// interface Game {
+//   player: Fighter;
+//   enemy: Fighter;
+//   input: { isKeyDown: (key: string) => boolean };
+// }
+
+// const createCharacter = (
+//   imageBasePath: string,
+//   handleFunctions: Partial<Fighter>,
+// ): Fighter => {
+//   const spritePath = (spriteName: string): string =>
+//     `${imageBasePath}/${spriteName}.png`;
+
+//   const defaultHandleFunctions: Fighter = {
+//     position: { x: 50, y: 0 },
+//     velocity: { x: 0, y: 0 },
+//     color: "red",
+//     offset: { x: 215, y: 170 },
+//     image: spritePath("Idle"),
+//     scale: 2.5,
+//     framesMax: 4,
+//     sprites: {
+//       idle: { image: spritePath("Idle"), framesMax: 4 },
+//       run: { image: spritePath("Run"), framesMax: 8 },
+//       jump: { image: spritePath("Jump"), framesMax: 2 },
+//       fall: { image: spritePath("Fall"), framesMax: 2 },
+//       attack1: { image: spritePath("Attack1"), framesMax: 4 },
+//       takeHit: { image: spritePath("TakeHit"), framesMax: 3 },
+//       death: { image: spritePath("Death"), framesMax: 7 },
+//     },
+//     attackBox: { offset: { x: 170, y: 50 }, width: 170, height: 50 },
+//     isAttacking: false,
+//     dead: false,
+//     attack: handleFunctions.attack || (() => {}),
+//     takeHit: handleFunctions.takeHit || (() => {}),
+//     death: handleFunctions.death || (() => {}),
+//     idle: handleFunctions.idle || (() => {}),
+//     run: handleFunctions.run || (() => {}),
+//     jump: handleFunctions.jump || (() => {}),
+//     fall: handleFunctions.fall || (() => {}),
+//     update: handleFunctions.update || (() => {}),
+//     draw: handleFunctions.draw || (() => {}),
+//   };
+
+//   return { ...defaultHandleFunctions };
+// };
+
+// async function useGame(): Promise<Game> {
+//   const input = useMemo(() => ({ isKeyDown: (key: string) => key === "" }), []);
+//   // const input: {
+//   //   isKeyDown: (key: string) => boolean;
+//   // } = useMemo(
+//   //   {
+//   //     isKeyDown: (key: string) => key === "",
+//   //   },
+//   //   [],
+//   // );
+
+//   const keydown = (event: KeyboardEvent) => {
+//     input.isKeyDown = (key: string) => event.key === key;
+//   };
+//   const keyup = () => {
+//     input.isKeyDown = (key: string) => key === "";
+//   };
+
+//   window.addEventListener("keydown", keydown);
+//   window.addEventListener("keyup", keyup);
+
+//   let player: Fighter | null = null;
+//   let enemy: Fighter | null = null;
+
+//   const playerHandleFunctions = useMemo(
+//     () => ({
+//       update: () => {
+//         if (input.isKeyDown("ArrowRight")) {
+//           player!.position.x += 5;
+//         }
+
+//         if (input.isKeyDown("ArrowLeft")) {
+//           player!.position.x -= 5;
+//         }
+
+//         if (input.isKeyDown("ArrowUp")) {
+//           player!.position.y -= 5;
+//         }
+
+//         if (input.isKeyDown("ArrowDown")) {
+//           player!.position.y += 5;
+//         }
+
+//         if (input.isKeyDown(" ")) {
+//           player!.attack();
+//         }
+
+//         player!.update();
+
+//         if (player!.isAttacking) {
+//           if (
+//             player!.position.x + player!.attackBox.offset.x <
+//               enemy!.position.x +
+//                 enemy!.attackBox.offset.x +
+//                 enemy!.attackBox.width &&
+//             player!.position.x +
+//               player!.attackBox.offset.x +
+//               player!.attackBox.width >
+//               enemy!.position.x + enemy!.attackBox.offset.x &&
+//             player!.position.y + player!.attackBox.offset.y <
+//               enemy!.position.y +
+//                 enemy!.attackBox.offset.y +
+//                 enemy!.attackBox.height &&
+//             player!.position.y +
+//               player!.attackBox.offset.y +
+//               player!.attackBox.height >
+//               enemy!.position.y + enemy!.attackBox.offset.y
+//           ) {
+//             enemy!.takeHit();
+//           }
+//         }
+
+//         if (enemy!.dead) {
+//           enemy!.death();
+//         }
+
+//         enemy!.update();
+
+//         if (enemy!.isAttacking) {
+//           if (
+//             enemy!.position.x + enemy!.attackBox.offset.x <
+//               player!.position.x +
+//                 player!.attackBox.offset.x +
+//                 player!.attackBox.width &&
+//             enemy!.position.x +
+//               enemy!.attackBox.offset.x +
+//               enemy!.attackBox.width >
+//               player!.position.x + player!.attackBox.offset.x &&
+//             enemy!.position.y + enemy!.attackBox.offset.y <
+//               player!.position.y +
+//                 player!.attackBox.offset.y +
+//                 player!.attackBox.height &&
+//             enemy!.position.y +
+//               enemy!.attackBox.offset.y +
+//               enemy!.attackBox.height >
+//               player!.position.y + player!.attackBox.offset.y
+//           ) {
+//             player!.takeHit();
+//           }
+//         }
+
+//         if (player!.dead) {
+//           player!.death();
+//         }
+
+//         player!.update();
+
+//         if (
+//           player!.position.x + player!.attackBox.offset.x <
+//             enemy!.position.x +
+//               enemy!.attackBox.offset.x +
+//               enemy!.attackBox.width &&
+//           player!.position.x +
+//             player!.attackBox.offset.x +
+//             player!.attackBox.width >
+//             enemy!.position.x + enemy!.attackBox.offset.x &&
+//           player!.position.y + player!.attackBox.offset.y <
+//             enemy!.position.y +
+//               enemy!.attackBox.offset.y +
+//               enemy!.attackBox.height &&
+//           player!.position.y +
+//             player!.attackBox.offset.y +
+//             player!.attackBox.height >
+//             enemy!.position.y + enemy!.attackBox.offset.y
+//         ) {
+//           enemy!.takeHit();
+//         }
+//       },
+//       draw: (context: CanvasRenderingContext2D) => {
+//         context.fillStyle = "blue";
+//         context.fillRect(
+//           player!.position.x,
+//           player!.position.y,
+//           player!.attackBox.width,
+//           player!.attackBox.height,
+//         );
+//       },
+//     }),
+//     [enemy, input, player],
+//   );
+
+//   const enemyHandleFunctions = useMemo(
+//     () => ({
+//       update: () => {
+//         if (input.isKeyDown("d")) {
+//           enemy!.position.x += 5;
+//         }
+
+//         if (input.isKeyDown("a")) {
+//           enemy!.position.x -= 5;
+//         }
+
+//         if (input.isKeyDown("w")) {
+//           enemy!.position.y -= 5;
+//         }
+
+//         if (input.isKeyDown("s")) {
+//           enemy!.position.y += 5;
+//         }
+
+//         if (input.isKeyDown("q")) {
+//           enemy!.attack();
+//         }
+
+//         enemy!.update();
+
+//         if (enemy!.isAttacking) {
+//           if (
+//             enemy!.position.x + enemy!.attackBox.offset.x <
+//               player!.position.x +
+//                 player!.attackBox.offset.x +
+//                 player!.attackBox.width &&
+//             enemy!.position.x +
+//               enemy!.attackBox.offset.x +
+//               enemy!.attackBox.width >
+//               player!.position.x + player!.attackBox.offset.x &&
+//             enemy!.position.y + enemy!.attackBox.offset.y <
+//               player!.position.y +
+//                 player!.attackBox.offset.y +
+//                 player!.attackBox.height &&
+//             enemy!.position.y +
+//               enemy!.attackBox.offset.y +
+//               enemy!.attackBox.height >
+//               player!.position.y + player!.attackBox.offset.y
+//           ) {
+//             player!.takeHit();
+//           }
+//         }
+
+//         if (player!.dead) {
+//           player!.death();
+//         }
+
+//         player!.update();
+
+//         if (player!.isAttacking) {
+//           if (
+//             player!.position.x + player!.attackBox.offset.x <
+//               enemy!.position.x +
+//                 enemy!.attackBox.offset.x +
+//                 enemy!.attackBox.width &&
+//             player!.position.x +
+//               player!.attackBox.offset.x +
+//               player!.attackBox.width >
+//               enemy!.position.x + enemy!.attackBox.offset.x &&
+//             player!.position.y + player!.attackBox.offset.y <
+//               enemy!.position.y +
+//                 enemy!.attackBox.offset.y +
+//                 enemy!.attackBox.height &&
+//             player!.position.y +
+//               player!.attackBox.offset.y +
+//               player!.attackBox.height >
+//               enemy!.position.y + enemy!.attackBox.offset.y
+//           ) {
+//             enemy!.takeHit();
+//           }
+//         }
+
+//         if (enemy!.dead) {
+//           enemy!.death();
+//         }
+
+//         enemy!.update();
+
+//         if (
+//           enemy!.position.x + enemy!.attackBox.offset.x <
+//             player!.position.x +
+//               player!.attackBox.offset.x +
+//               player!.attackBox.width &&
+//           enemy!.position.x +
+//             enemy!.attackBox.offset.x +
+//             enemy!.attackBox.width >
+//             player!.position.x + player!.attackBox.offset.x &&
+//           enemy!.position.y + enemy!.attackBox.offset.y <
+//             player!.position.y +
+//               player!.attackBox.offset.y +
+//               player!.attackBox.height &&
+//           enemy!.position.y +
+//             enemy!.attackBox.offset.y +
+//             enemy!.attackBox.height >
+//             player!.position.y + player!.attackBox.offset.y
+//         ) {
+//           player!.takeHit();
+//         }
+
+//         if (player!.dead) {
+//           player!.death();
+//         }
+
+//         player!.update();
+//       },
+//       draw: (context: CanvasRenderingContext2D) => {
+//         context.fillStyle = "green";
+//         context.fillRect(
+//           enemy!.position.x,
+//           enemy!.position.y,
+//           enemy!.attackBox.width,
+//           enemy!.attackBox.height,
+//         );
+//       },
+//     }),
+//     [enemy, input, player],
+//   );
+
+//   player = await useMemo(
+//     () => createCharacter("/assets/images/kenji", playerHandleFunctions),
+//     [playerHandleFunctions],
+//   );
+
+//   enemy = await useMemo(
+//     () => createCharacter("/assets/images/kenji", enemyHandleFunctions),
+//     [enemyHandleFunctions],
+//   );
+
+//   return { player: player!, enemy: enemy!, input };
+// }
+
+// export default useGame;
+
+// // import { useMemo } from "react";
+
+// // interface Position {
+// //   x: number;
+// //   y: number;
+// // }
+
+// // interface Velocity {
+// //   x: number;
+// //   y: number;
+// // }
+
+// // interface Offset {
+// //   x: number;
+// //   y: number;
+// // }
+
+// // interface AttackBox {
+// //   offset: Offset;
+// //   width: number;
+// //   height: number;
+// // }
+
+// // interface Fighter {
+// //   position: Position;
+// //   velocity: Velocity;
+// //   color: string;
+// //   offset: Offset;
+// //   image: string;
+// //   scale: number;
+// //   framesMax: number;
+// //   sprites: Record<string, { image: string; framesMax: number }>;
+// //   attackBox: AttackBox;
+// //   isAttacking: boolean;
+// //   dead: boolean;
+// //   attack: () => void;
+// //   takeHit: () => void;
+// //   death: () => void;
+// //   idle: () => void;
+// //   run: () => void;
+// //   jump: () => void;
+// //   fall: () => void;
+// //   update: () => void;
+// //   draw: (context: CanvasRenderingContext2D) => void;
+// // }
+
+// // interface Game {
+// //   player: Fighter;
+// //   enemy: Fighter;
+// //   input: { isKeyDown: (key: string) => boolean };
+// // }
+
+// // const createCharacter = (
+// //   imageBasePath: string,
+// //   handleFunctions: Partial<Fighter>,
+// // ): Fighter => {
+// //   const spritePath = (spriteName: string): string =>
+// //     `${imageBasePath}/${spriteName}.png`;
+
+// //   const defaultHandleFunctions: Fighter = {
+// //     position: { x: 50, y: 0 },
+// //     velocity: { x: 0, y: 0 },
+// //     color: "red",
+// //     offset: { x: 215, y: 170 },
+// //     image: spritePath("Idle"),
+// //     scale: 2.5,
+// //     framesMax: 4,
+// //     sprites: {
+// //       idle: { image: spritePath("Idle"), framesMax: 4 },
+// //       run: { image: spritePath("Run"), framesMax: 8 },
+// //       jump: { image: spritePath("Jump"), framesMax: 2 },
+// //       fall: { image: spritePath("Fall"), framesMax: 2 },
+// //       attack1: { image: spritePath("Attack1"), framesMax: 4 },
+// //       takeHit: { image: spritePath("TakeHit"), framesMax: 3 },
+// //       death: { image: spritePath("Death"), framesMax: 7 },
+// //     },
+// //     attackBox: { offset: { x: 170, y: 50 }, width: 170, height: 50 },
+// //     isAttacking: false,
+// //     dead: false,
+// //     attack: handleFunctions.attack || (() => {}),
+// //     takeHit: handleFunctions.takeHit || (() => {}),
+// //     death: handleFunctions.death || (() => {}),
+// //     idle: handleFunctions.idle || (() => {}),
+// //     run: handleFunctions.run || (() => {}),
+// //     jump: handleFunctions.jump || (() => {}),
+// //     fall: handleFunctions.fall || (() => {}),
+// //     update: handleFunctions.update || (() => {}),
+// //     draw: handleFunctions.draw || (() => {}),
+// //   };
+
+// //   return { ...defaultHandleFunctions };
+// // };
+
+// // export async function useGame(): Promise<Game> {
+// //   const input = { isKeyDown: (key: string) => key === "" };
+
+// //   const keydown = (event: KeyboardEvent) => {
+// //     input.isKeyDown = (key: string) => event.key === key;
+// //   };
+// //   const keyup = () => {
+// //     input.isKeyDown = (key: string) => key === "";
+// //   };
+
+// //   window.addEventListener("keydown", keydown);
+// //   window.addEventListener("keyup", keyup);
+
+// //   const playerHandleFunctions = useMemo(
+// //     () => ({
+// //       update: () => {
+// //         if (input.isKeyDown("ArrowRight")) {
+// //           player.position.x += 5;
+// //         }
+
+// //         if (input.isKeyDown("ArrowLeft")) {
+// //           player.position.x -= 5;
+// //         }
+
+// //         if (input.isKeyDown("ArrowUp")) {
+// //           player.position.y -= 5;
+// //         }
+
+// //         if (input.isKeyDown("ArrowDown")) {
+// //           player.position.y += 5;
+// //         }
+
+// //         if (input.isKeyDown(" ")) {
+// //           player.attack();
+// //         }
+
+// //         player.update();
+
+// //         if (player.isAttacking) {
+// //           if (
+// //             player.position.x + player.attackBox.offset.x <
+// //               enemy.position.x +
+// //                 enemy.attackBox.offset.x +
+// //                 enemy.attackBox.width &&
+// //             player.position.x +
+// //               player.attackBox.offset.x +
+// //               player.attackBox.width >
+// //               enemy.position.x + enemy.attackBox.offset.x &&
+// //             player.position.y + player.attackBox.offset.y <
+// //               enemy.position.y +
+// //                 enemy.attackBox.offset.y +
+// //                 enemy.attackBox.height &&
+// //             player.position.y +
+// //               player.attackBox.offset.y +
+// //               player.attackBox.height >
+// //               enemy.position.y + enemy.attackBox.offset.y
+// //           ) {
+// //             enemy.takeHit();
+// //           }
+// //         }
+
+// //         if (enemy.dead) {
+// //           enemy.death();
+// //         }
+
+// //         enemy.update();
+
+// //         if (enemy.isAttacking) {
+// //           if (
+// //             enemy.position.x + enemy.attackBox.offset.x <
+// //               player.position.x +
+// //                 player.attackBox.offset.x +
+// //                 player.attackBox.width &&
+// //             enemy.position.x +
+// //               enemy.attackBox.offset.x +
+// //               enemy.attackBox.width >
+// //               player.position.x + player.attackBox.offset.x &&
+// //             enemy.position.y + enemy.attackBox.offset.y <
+// //               player.position.y +
+// //                 player.attackBox.offset.y +
+// //                 player.attackBox.height &&
+// //             enemy.position.y +
+// //               enemy.attackBox.offset.y +
+// //               enemy.attackBox.height >
+// //               player.position.y + player.attackBox.offset.y
+// //           ) {
+// //             player.takeHit();
+// //           }
+// //         }
+
+// //         if (player.dead) {
+// //           player.death();
+// //         }
+
+// //         player.update();
+
+// //         if (
+// //           player.position.x + player.attackBox.offset.x <
+// //             enemy.position.x +
+// //               enemy.attackBox.offset.x +
+// //               enemy.attackBox.width &&
+// //           player.position.x +
+// //             player.attackBox.offset.x +
+// //             player.attackBox.width >
+// //             enemy.position.x + enemy.attackBox.offset.x &&
+// //           player.position.y + player.attackBox.offset.y <
+// //             enemy.position.y +
+// //               enemy.attackBox.offset.y +
+// //               enemy.attackBox.height &&
+// //           player.position.y +
+// //             player.attackBox.offset.y +
+// //             player.attackBox.height >
+// //             enemy.position.y + enemy.attackBox.offset.y
+// //         ) {
+// //           enemy.takeHit();
+// //         }
+
+// //         if (enemy.dead) {
+// //           enemy.death();
+// //         }
+
+// //         enemy.update();
+
+// //         if (
+// //           enemy.position.x + enemy.attackBox.offset.x <
+// //             player.position.x +
+// //               player.attackBox.offset.x +
+// //               player.attackBox.width &&
+// //           enemy.position.x + enemy.attackBox.offset.x + enemy.attackBox.width >
+// //             player.position.x + player.attackBox.offset.x &&
+// //           enemy.position.y + enemy.attackBox.offset.y <
+// //             player.position.y +
+// //               player.attackBox.offset.y +
+// //               player.attackBox.height &&
+// //           enemy.position.y + enemy.attackBox.offset.y + enemy.attackBox.height >
+// //             player.position.y + player.attackBox.offset.y
+// //         ) {
+// //           player.takeHit();
+// //         }
+
+// //         if (player.dead) {
+// //           player.death();
+// //         }
+
+// //         player.update();
+// //       },
+// //       draw: (context: CanvasRenderingContext2D) => {
+// //         context.fillStyle = "blue";
+// //         context.fillRect(
+// //           player.position.x,
+// //           player.position.y,
+// //           player.attackBox.width,
+// //           player.attackBox.height,
+// //         );
+// //       },
+// //     }),
+// //     [input]
+// //   );
+
+// //   const enemyHandleFunctions = useMemo(
+// //     () => ({
+// //       update: () => {
+// //         if (input.isKeyDown("d")) {
+// //           enemy.position.x += 5;
+// //         }
+
+// //         if (input.isKeyDown("a")) {
+// //           enemy.position.x -= 5;
+// //         }
+
+// //         if (input.isKeyDown("w")) {
+// //           enemy.position.y -= 5;
+// //         }
+
+// //         if (input.isKeyDown("s")) {
+// //           enemy.position.y += 5;
+// //         }
+
+// //         if (input.isKeyDown("q")) {
+// //           enemy.attack();
+// //         }
+
+// //         enemy.update();
+
+// //         if (enemy.isAttacking) {
+// //           if (
+// //             enemy.position.x + enemy.attackBox.offset.x <
+// //               player.position.x +
+// //                 player.attackBox.offset.x +
+// //                 player.attackBox.width &&
+// //             enemy.position.x +
+// //               enemy.attackBox.offset.x +
+// //               enemy.attackBox.width >
+// //               player.position.x + player.attackBox.offset.x &&
+// //             enemy.position.y + enemy.attackBox.offset.y <
+// //               player.position.y +
+// //                 player.attackBox.offset.y +
+// //                 player.attackBox.height &&
+// //             enemy.position.y +
+// //               enemy.attackBox.offset.y +
+// //               enemy.attackBox.height >
+// //               player.position.y + player.attackBox.offset.y
+// //           ) {
+// //             player.takeHit();
+// //           }
+// //         }
+
+// //         if (player.dead) {
+// //           player.death();
+// //         }
+
+// //         player.update();
+
+// //         if (player.isAttacking) {
+// //           if (
+// //             player.position.x + player.attackBox.offset.x <
+// //               enemy.position.x +
+// //                 enemy.attackBox.offset.x +
+// //                 enemy.attackBox.width &&
+// //             player.position.x +
+// //               player.attackBox.offset.x +
+// //               player.attackBox.width >
+// //               enemy.position.x + enemy.attackBox.offset.x &&
+// //             player.position.y + player.attackBox.offset.y <
+// //               enemy.position.y +
+// //                 enemy.attackBox.offset.y +
+// //                 enemy.attackBox.height &&
+// //             player.position.y +
+// //               player.attackBox.offset.y +
+// //               player.attackBox.height >
+// //               enemy.position.y + enemy.attackBox.offset.y
+// //           ) {
+// //             enemy.takeHit();
+// //           }
+// //         }
+
+// //         if (enemy.dead) {
+// //           enemy.death();
+// //         }
+
+// //         enemy.update();
+
+// //         if (
+// //           enemy.position.x + enemy.attackBox.offset.x <
+// //             player.position.x +
+// //               player.attackBox.offset.x +
+// //               player.attackBox.width &&
+// //           enemy.position.x + enemy.attackBox.offset.x + enemy.attackBox.width >
+// //             player.position.x + player.attackBox.offset.x &&
+// //           enemy.position.y + enemy.attackBox.offset.y <
+// //             player.position.y +
+// //               player.attackBox.offset.y +
+// //               player.attackBox.height &&
+// //           enemy.position.y + enemy.attackBox.offset.y + enemy.attackBox.height >
+// //             player.position.y + player.attackBox.offset.y
+// //         ) {
+// //           player.takeHit();
+// //         }
+
+// //         if (player.dead) {
+// //           player.death();
+// //         }
+
+// //         player.update();
+
+// //         if (
+// //           player.position.x + player.attackBox.offset.x <
+// //             enemy.position.x +
+// //               enemy.attackBox.offset.x +
+// //               enemy.attackBox.width &&
+// //           player.position.x +
+// //             player.attackBox.offset.x +
+// //             player.attackBox.width >
+// //             enemy.position.x + enemy.attackBox.offset.x &&
+// //           player.position.y + player.attackBox.offset.y <
+// //             enemy.position.y +
+// //               enemy.attackBox.offset.y +
+// //               enemy.attackBox.height &&
+// //           player.position.y +
+// //             player.attackBox.offset.y +
+// //             player.attackBox.height >
+// //             enemy.position.y + enemy.attackBox.offset.y
+// //         ) {
+// //           enemy.takeHit();
+// //         }
+
+// //         if (enemy.dead) {
+// //           enemy.death();
+// //         }
+
+// //         enemy.update();
+// //       },
+// //       draw: (context: CanvasRenderingContext2D) => {
+// //         context.fillStyle = "green";
+// //         context.fillRect(
+// //           enemy.position.x,
+// //           enemy.position.y,
+// //           enemy.attackBox.width,
+// //           enemy.attackBox.height
+// //         );
+// //       },
+// //     }),
+// //     []
+// //   );
+
+// //   const player = await useMemo(
+// //     () => createCharacter("/assets/images/kenji", playerHandleFunctions),
+// //     [playerHandleFunctions]
+// //   );
+
+// //   const enemy = await useMemo(
+// //     () => createCharacter("/assets/images/kenji", enemyHandleFunctions),
+// //     [enemyHandleFunctions]
+// //   );
+
+// //   return { player, enemy, input };
+// // }