@revealui/core 0.0.1-pre.1 → 0.0.1-pre.3

package/dist/ui/hooks/useGame.ts

@@ -1,1147 +0,0 @@
-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 };
-// // }