gaesup-world 0.0.1

package/src/gaesup/tools/gamepad/style.css.ts

@@ -0,0 +1,16 @@
+import { style } from "@vanilla-extract/css";
+import { mobileButton } from "../../../styles/recipe/button.css";
+import { flex } from "../../../styles/recipe/index.css";
+
+export const gamePad = style([
+  flex({
+    row: "center",
+  }),
+  {
+    width: "100%",
+    height: "100%",
+    zIndex: 10000,
+  },
+]);
+
+export const gamePadButtonRecipe = style([mobileButton({})]);

package/src/gaesup/tools/index.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useContext, useEffect } from "react";
+
+import {
+  GaesupWorldContext,
+  GaesupWorldDispatchContext,
+} from "../stores/context/gaesupworld";
+import GameBoy from "./gameboy";
+import GamePad from "./gamepad";
+import JoyStick from "./joystick";
+import JumpPoint from "./jumpPoint";
+import KeyBoardToolTip from "./keyBoardToolTip";
+import MiniMap from "./minimap";
+import * as style from "./style.css";
+export default function GaeSupTools({
+  keyboardMap,
+}: {
+  keyboardMap: { name: string; keys: string[] }[];
+}) {
+  const { minimap, mode } = useContext(GaesupWorldContext);
+  const { control } = useContext(GaesupWorldContext);
+  const dispatch = useContext(GaesupWorldDispatchContext);
+  useEffect(() => {
+    const keyboard = keyboardMap.reduce((maps, keyboardMapItem) => {
+      maps[keyboardMapItem.name] = false;
+      return maps;
+    }, {});
+    const assignedControl = Object.assign(control, keyboard);
+
+    dispatch({
+      type: "update",
+      payload: {
+        control: {
+          ...assignedControl,
+        },
+      },
+    });
+  }, []);
+
+  return (
+    <>
+      <div className={style.footer}>
+        <div className={style.footerUpper}>
+          {(mode.controller === "joystick" ||
+            mode.controller === "gameboy") && <GamePad />}
+        </div>
+        <div className={style.footerLower}>
+          {mode.controller === "joystick" && <JoyStick />}
+          {mode.controller === "gameboy" && <GameBoy />}
+          {mode.controller === "keyboard" && (
+            <KeyBoardToolTip keyboardMap={keyboardMap} />
+          )}
+          {minimap.on && <MiniMap />}
+        </div>
+      </div>
+
+      <JumpPoint />
+    </>
+  );
+}

package/src/gaesup/tools/joystick/index.tsx

@@ -0,0 +1,145 @@
+import {
+  MouseEvent,
+  MouseEventHandler,
+  TouchEvent,
+  TouchEventHandler,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
+import { vars } from "../../../styles/theme.css";
+import useJoyStick from "../../stores/joystick";
+import * as style from "./style.css";
+
+export default function JoyStick() {
+  return (
+    <div className={style.joyStick}>
+      <JoyBall />
+    </div>
+  );
+}
+
+export function JoyBall() {
+  const outerRef = useRef<HTMLDivElement>(null);
+  const { joyStickBall, joyStickOrigin, setBall, setOrigin } = useJoyStick();
+  const [mouseDown, setMouseDown] = useState(false);
+  const [touchDown, setTouchDown] = useState(false);
+
+  const calcOriginBall = <T extends MouseEvent | TouchEvent>(
+    e: T,
+    X: number,
+    Y: number
+  ): T => {
+    const outer = e.target as HTMLDivElement;
+    const parent = outer.parentElement as HTMLDivElement;
+    const { top, left, bottom, right, width, height } =
+      parent.getBoundingClientRect();
+    if (top > Y || bottom < Y || left > X || right < X) return;
+    const normX = (joyStickOrigin.x - X) ** 2;
+    const normY = (joyStickOrigin.y - Y) ** 2;
+    const currentRadius = Math.sqrt(normX + normY);
+    const originRadius = Math.sqrt((width / 2) ** 2 + (height / 2) ** 2);
+
+    setOrigin({
+      x: left + width / 2,
+      y: bottom - height / 2,
+      angle: Math.atan2(Y - (bottom - height / 2), X - (left + width / 2)),
+      currentRadius,
+      originRadius,
+      isIn: currentRadius > originRadius / 2,
+      isOn: true,
+    });
+    setBall({
+      x: `${X}px`,
+      y: `${Y}px`,
+      position: "fixed",
+      background:
+        currentRadius > originRadius / 2
+          ? vars.gradient.lightGreen
+          : vars.gradient.green,
+      boxShadow: "0 0 10px rgba(99,251,215,1)",
+    });
+  };
+
+  const initialize = () => {
+    setOrigin({
+      x: 0,
+      y: 0,
+      angle: Math.PI / 2,
+      currentRadius: 0,
+      originRadius: 0,
+      isIn: true,
+      isOn: false,
+    });
+    setBall({
+      x: "50%",
+      y: "50%",
+      position: "absolute",
+      background: "rgba(0, 0, 0, 0.5)",
+      boxShadow: "0 0 10px  rgba(0, 0, 0, 0.5)",
+    });
+  };
+
+  const handleMouseOver: MouseEventHandler = useCallback(
+    (e) => {
+      if (!mouseDown) return;
+      calcOriginBall<MouseEvent<Element>>(e, e.pageX, e.pageY);
+    },
+    [joyStickBall, joyStickOrigin, setBall, setOrigin, mouseDown]
+  );
+
+  const handleTouchMove: TouchEventHandler = useCallback(
+    (e) => {
+      if (!touchDown) return;
+      calcOriginBall<TouchEvent<Element>>(
+        e,
+        e.touches[0].pageX,
+        e.touches[0].pageY
+      );
+    },
+    [touchDown]
+  );
+
+  const handleTouchEnd = useCallback(() => {
+    return initialize();
+  }, [touchDown]);
+  const handleMouseOut = useCallback(() => {
+    return initialize();
+  }, [joyStickBall, joyStickOrigin, setBall, setOrigin, mouseDown]);
+
+  return (
+    <>
+      <div className={style.joyStick}>
+        <div
+          className={style.joyStickInner}
+          ref={outerRef}
+          onMouseDown={() => setMouseDown(true)}
+          onMouseUp={() => setMouseDown(false)}
+          onMouseMove={handleMouseOver}
+          onMouseLeave={() => {
+            setMouseDown(false);
+            handleMouseOut();
+          }}
+          onTouchStart={() => setTouchDown(true)}
+          onTouchEnd={() => {
+            setTouchDown(false);
+            handleTouchEnd();
+          }}
+          onTouchMove={handleTouchMove}
+          onTouchCancel={handleTouchEnd}
+        >
+          <div
+            className={`${style.joystickBall}`}
+            style={{
+              position: joyStickBall.position as "fixed" | "absolute",
+              background: joyStickBall.background,
+              boxShadow: joyStickBall.boxShadow,
+              top: joyStickBall.y,
+              left: joyStickBall.x,
+            }}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

package/src/gaesup/tools/joystick/style.css.ts

@@ -0,0 +1,40 @@
+import { style } from "@vanilla-extract/css";
+import { fixed, flex } from "../../../styles/recipe/index.css";
+
+export const joyStick = style([
+  fixed({
+    south: true,
+  }),
+  flex({
+    column: "6",
+  }),
+  {
+    width: "100%",
+  },
+]);
+
+export const joyStickInner = style([
+  flex({
+    row: "center",
+  }),
+  {
+    margin: "4rem",
+    padding: "6rem",
+    borderRadius: "50%",
+    background: "rgba(0, 0, 0, 0.5)",
+    boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+  },
+]);
+
+export const joystickBall = style([
+  {
+    position: "fixed",
+    width: "5rem",
+    height: "5rem",
+    transform: "translate(-50%, -50%)",
+    borderRadius: "50%",
+    background: "rgba(0, 0, 0, 0.5)",
+    boxShadow: "0 0 10px  rgba(0, 0, 0, 0.5)",
+    cursor: "pointer",
+  },
+]);

package/src/gaesup/tools/jumpPoint/index.tsx

@@ -0,0 +1,27 @@
+import { useContext } from "react";
+import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { pointType } from "../../stores/point/type";
+import * as style from "./style.css";
+
+export default function JumpPoint() {
+  const { points, refs } = useContext(GaesupWorldContext);
+
+  return (
+    <div className={style.jumpPoints}>
+      {refs &&
+        points.map((obj: pointType, key: number) => {
+          return (
+            <div
+              key={key}
+              className={style.jumpPoint}
+              onClick={() => {
+                refs.rigidBodyRef?.current?.setTranslation(obj.position, true);
+              }}
+            >
+              {obj.text}
+            </div>
+          );
+        })}
+    </div>
+  );
+}

package/src/gaesup/tools/jumpPoint/style.css.ts

@@ -0,0 +1,33 @@
+import { style } from "@vanilla-extract/css";
+import { mobileButton } from "../../../styles/recipe/button.css";
+import { fixed, flex } from "../../../styles/recipe/index.css";
+
+export const jumpPoints = style([
+  fixed({
+    north_east: true,
+  }),
+  flex({
+    column: "center",
+  }),
+  {
+    margin: "1rem",
+    zIndex: 1000,
+  },
+]);
+
+export const jumpPoint = style([
+  mobileButton({}),
+  flex({}),
+  {
+    margin: "1rem",
+    fontSize: "0.8rem",
+    borderRadius: "50%",
+    width: "5rem",
+    height: "5rem",
+    color: "white",
+    background: "rgba(0, 0, 0, 0.6)",
+    boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.6)",
+    transition: "all 0.2s ease-in",
+    cursor: "pointer",
+  },
+]);

package/src/gaesup/tools/keyBoardToolTip/constant.ts

@@ -0,0 +1,144 @@
+export type keyMapItemType = {
+  name: string;
+  gridRow: string;
+  gridColumn: string;
+  code?: string;
+};
+
+export type keyArrayItemType = {
+  code: string;
+  gridRow: string;
+  gridColumn: string;
+  name: string;
+};
+
+export type keyBoardMapType = {
+  [name: string]: keyMapItemType;
+};
+
+export const KeyboardF = {
+  ESC: { name: "ESC", gridRow: "1/2", gridColumn: "1/2" },
+  F1: { name: "F1", gridRow: "1/2", gridColumn: "3/4" },
+  F2: { name: "F2", gridRow: "1/2", gridColumn: "4/5" },
+  F3: { name: "F3", gridRow: "1/2", gridColumn: "5/6" },
+  F4: { name: "F4", gridRow: "1/2", gridColumn: "6/7" },
+  F5: { name: "F5", gridRow: "1/2", gridColumn: "8/9" },
+  F6: { name: "F6", gridRow: "1/2", gridColumn: "9/10" },
+  F7: { name: "F7", gridRow: "1/2", gridColumn: "10/11" },
+  F8: { name: "F8", gridRow: "1/2", gridColumn: "11/12" },
+  F9: { name: "F9", gridRow: "1/2", gridColumn: "13/14" },
+  F10: { name: "F10", gridRow: "1/2", gridColumn: "14/15" },
+  F11: { name: "F11", gridRow: "1/2", gridColumn: "15/16" },
+  F12: { name: "F12", gridRow: "1/2", gridColumn: "16/17" },
+};
+
+export const KeyboardOne = {
+  Backquote: { name: "`", gridRow: "2/3", gridColumn: "1/3" },
+  Digit1: { name: "1", gridRow: "2/3", gridColumn: "3/4" },
+  Digit2: { name: "2", gridRow: "2/3", gridColumn: "4/5" },
+  Digit3: { name: "3", gridRow: "2/3", gridColumn: "5/6" },
+  Digit4: { name: "4", gridRow: "2/3", gridColumn: "6/7" },
+  Digit5: { name: "5", gridRow: "2/3", gridColumn: "7/8" },
+  Digit6: { name: "6", gridRow: "2/3", gridColumn: "8/9" },
+  Digit7: { name: "7", gridRow: "2/3", gridColumn: "9/10" },
+  Digit8: { name: "8", gridRow: "2/3", gridColumn: "10/11" },
+  Digit9: { name: "9", gridRow: "2/3", gridColumn: "11/12" },
+  Digit0: { name: "0", gridRow: "2/3", gridColumn: "12/13" },
+  Minus: { name: "-", gridRow: "2/3", gridColumn: "13/14" },
+  Equal: { name: "=", gridRow: "2/3", gridColumn: "14/15" },
+  Backspace: { name: "Backspace", gridRow: "2/3", gridColumn: "15/17" },
+};
+
+export const KeyboardTwo = {
+  Tab: { name: "Tab", gridRow: "3/4", gridColumn: "1/3" },
+  KeyQ: { name: "Q", gridRow: "3/4", gridColumn: "3/4" },
+  KeyW: { name: "W", gridRow: "3/4", gridColumn: "4/5" },
+  KeyE: { name: "E", gridRow: "3/4", gridColumn: "5/6" },
+  KeyR: { name: "R", gridRow: "3/4", gridColumn: "6/7" },
+  KeyT: { name: "T", gridRow: "3/4", gridColumn: "7/8" },
+  KeyY: { name: "Y", gridRow: "3/4", gridColumn: "8/9" },
+  KeyU: { name: "U", gridRow: "3/4", gridColumn: "9/10" },
+  KeyI: { name: "I", gridRow: "3/4", gridColumn: "10/11" },
+  KeyO: { name: "O", gridRow: "3/4", gridColumn: "11/12" },
+  KeyP: { name: "P", gridRow: "3/4", gridColumn: "12/13" },
+  BracketLeft: { name: "[", gridRow: "3/4", gridColumn: "13/14" },
+  BracketRight: { name: "]", gridRow: "3/4", gridColumn: "14/15" },
+  Backslash: { name: "\\", gridRow: "3/4", gridColumn: "15/17" },
+};
+
+export const KeyboardThree = {
+  CapsLock: { name: "CapsLock", gridRow: "4/5", gridColumn: "1/3" },
+  KeyA: { name: "A", gridRow: "4/5", gridColumn: "3/4" },
+  KeyS: { name: "S", gridRow: "4/5", gridColumn: "4/5" },
+  KeyD: { name: "D", gridRow: "4/5", gridColumn: "5/6" },
+  KeyF: { name: "F", gridRow: "4/5", gridColumn: "6/7" },
+  KeyG: { name: "G", gridRow: "4/5", gridColumn: "7/8" },
+  KeyH: { name: "H", gridRow: "4/5", gridColumn: "8/9" },
+  KeyJ: { name: "J", gridRow: "4/5", gridColumn: "9/10" },
+  KeyK: { name: "K", gridRow: "4/5", gridColumn: "10/11" },
+  KeyL: { name: "L", gridRow: "4/5", gridColumn: "11/12" },
+  Semicolon: { name: ";", gridRow: "4/5", gridColumn: "12/13" },
+  Quote: { name: "'", gridRow: "4/5", gridColumn: "13/14" },
+  Enter: { name: "Enter", gridRow: "4/5", gridColumn: "14/17" },
+};
+
+export const KeyboardFour = {
+  ShiftLeft: {
+    name: "Shift",
+    gridRow: "5/6",
+    gridColumn: "1/4",
+    code: "Shift",
+  },
+  KeyZ: { name: "Z", gridRow: "5/6", gridColumn: "4/5" },
+  KeyX: { name: "X", gridRow: "5/6", gridColumn: "5/6" },
+  KeyC: { name: "C", gridRow: "5/6", gridColumn: "6/7" },
+  KeyV: { name: "V", gridRow: "5/6", gridColumn: "7/8" },
+  KeyB: { name: "B", gridRow: "5/6", gridColumn: "8/9" },
+  KeyN: { name: "N", gridRow: "5/6", gridColumn: "9/10" },
+  KeyM: { name: "M", gridRow: "5/6", gridColumn: "10/11" },
+  Comma: { name: ",", gridRow: "5/6", gridColumn: "11/12" },
+  Period: { name: ".", gridRow: "5/6", gridColumn: "12/13" },
+  Slash: { name: "/", gridRow: "5/6", gridColumn: "13/14" },
+  ShiftRight: {
+    name: "Shift",
+    gridRow: "5/6",
+    gridColumn: "14/17",
+    code: "Shift",
+  },
+};
+
+export const KeyboardFive = {
+  ControlLeft: {
+    name: "Control",
+    gridRow: "6/7",
+    gridColumn: "1/3",
+    code: "Control",
+  },
+  Option: { name: "Option", gridRow: "6/7", gridColumn: "3/5" },
+  AltLeft: { name: "Alt", gridRow: "6/7", gridColumn: "5/7", code: "Alt" },
+  Space: { name: "Space", gridRow: "6/7", gridColumn: "7/13" },
+  AltRight: { name: "Alt", gridRow: "6/7", gridColumn: "13/15", code: "Alt" },
+  ControlRight: {
+    name: "Control",
+    gridRow: "6/7",
+    gridColumn: "15/17",
+    code: "Control",
+  },
+};
+
+export const KeyboardArrow = {
+  ArrowUp: { name: "Up", gridRow: "5/6", gridColumn: "19/20" },
+  ArrowLeft: { name: "Left", gridRow: "6/7", gridColumn: "18/19" },
+  ArrowDown: { name: "Down", gridRow: "6/7", gridColumn: "19/20" },
+  ArrowRight: { name: "Right", gridRow: "6/7", gridColumn: "20/21" },
+};
+
+export const KeyBoardAll: keyBoardMapType = {
+  ...KeyboardF,
+  ...KeyboardOne,
+  ...KeyboardTwo,
+  ...KeyboardThree,
+  ...KeyboardFour,
+  ...KeyboardFive,
+  ...KeyboardArrow,
+};

package/src/gaesup/tools/keyBoardToolTip/index.tsx

@@ -0,0 +1,85 @@
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { useContext } from "react";
+import { vars } from "../../../styles/theme.css";
+import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { KeyBoardAll, keyArrayItemType } from "./constant";
+import * as style from "./style.css";
+
+export default function KeyBoardToolTip({
+  keyboardMap,
+}: {
+  keyboardMap: {
+    name: string;
+    keys: string[];
+  }[];
+}) {
+  const worldContext = useContext(GaesupWorldContext);
+  const { animations } = worldContext;
+
+  const keyArray = Object.entries(KeyBoardAll).reduce<keyArrayItemType[]>(
+    (keyArray, cur) => {
+      const [key, value] = cur;
+      const { gridRow, gridColumn, name } = value;
+      const keyBoardItem: keyArrayItemType = {
+        code: value.code || key,
+        gridRow,
+        gridColumn,
+        name,
+      };
+      keyArray.push(keyBoardItem);
+      return keyArray;
+    },
+    []
+  );
+
+  const codeToActionObj = keyboardMap.reduce((maps, keyboardMapItem) => {
+    keyboardMapItem.keys.forEach((key) => {
+      maps[key] = keyboardMapItem.name;
+    });
+    return maps;
+  }, {});
+
+  return (
+    <div className={style.keyBoardToolTip}>
+      <div className={style.keyBoardTooInner}>
+        {keyArray.map((item: keyArrayItemType, key: number) => {
+          let background = "rgba(0, 0, 0, 0.1)";
+          let boxShadow = "0 0 5px rgba(0, 0, 0, 0.2)";
+
+          if (codeToActionObj[item.code]) {
+            if (animations.keyControl[codeToActionObj[item.code]]) {
+              background = `${vars.gradient.green}`;
+              boxShadow = `0 0 10px rgba(99,251,215,1)`;
+            } else {
+              background = "rgba(0, 0, 0, 0.6)";
+              boxShadow = "0 0 10px rgba(0, 0, 0, 0.6)";
+            }
+          }
+          let color = "white";
+          if (
+            codeToActionObj[item.code] &&
+            animations.keyControl[codeToActionObj[item.code]]
+          ) {
+            color = "black";
+          }
+
+          return (
+            <div
+              className={style.keyCap}
+              style={assignInlineVars({
+                background,
+                boxShadow,
+                color,
+                gridRow: item.gridRow,
+                gridColumn: item.gridColumn,
+              })}
+              key={key}
+            >
+              {item.name}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/gaesup/tools/keyBoardToolTip/style.css.ts

@@ -0,0 +1,49 @@
+import { style } from "@vanilla-extract/css";
+import { fixed, flex } from "../../../styles/recipe/index.css";
+import { sprinkles } from "../../../styles/sprinkles/index.css";
+
+export const keyBoardToolTip = style([
+  fixed({
+    south: true,
+  }),
+  sprinkles({
+    display: {
+      mobile: "none",
+      tablet: "none",
+      laptop: "flex",
+      desktop: "flex",
+    },
+  }),
+  flex({
+    column: "6",
+  }),
+  {
+    width: "100vw",
+  },
+]);
+
+export const keyBoardTooInner = style([
+  flex({}),
+  {
+    display: "grid",
+    gridTemplateColumns: "repeat(20, 2.5rem)",
+    gridTemplateRows: "repeat(10, 2.5rem)",
+    gap: "0.5rem",
+    width: "40rem",
+    height: "20rem",
+  },
+]);
+
+export const keyCap = style([
+  flex({}),
+  {
+    fontSize: "0.8rem",
+    borderRadius: "5px",
+    width: "100%",
+    height: "100%",
+    color: "white",
+    background: "rgba(0, 0, 0, 0.2)",
+    boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.2)",
+    transition: "all 0.2s ease-in",
+  },
+]);

package/src/gaesup/tools/minimap/index.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { useContext } from "react";
+import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import * as style from "./style.css";
+
+export function MiniMapInner() {
+  const { minimap, activeState } = useContext(GaesupWorldContext);
+
+  return (
+    <div className={style.minimap} style={minimap.minimapStyle || {}}>
+      <div className={style.minimapOuter} style={minimap.objectStyle || {}} />
+      <div className={style.minimapInner} style={minimap.innerStyle || {}}>
+        {Object.values(minimap.props).map((obj, key) => {
+          return (
+            <div
+              key={key}
+              className={style.minimapObject}
+              style={{
+                ...assignInlineVars({
+                  width: `${obj.size.x}rem`,
+                  height: `${obj.size.z}rem`,
+                  transform: `translate(${
+                    -obj.center.x + activeState.position.x * minimap.ratio
+                  }rem, ${
+                    -obj.center.z + activeState.position.z * minimap.ratio
+                  }rem)`,
+                }),
+                ...minimap.objectStyle,
+              }}
+            >
+              <div className={style.text} style={minimap.textStyle}>
+                {obj.text}
+              </div>
+            </div>
+          );
+        })}
+        <div className={style.avatar} style={minimap.avatarStyle} />
+      </div>
+    </div>
+  );
+}
+
+export default function MiniMap() {
+  return <MiniMapInner />;
+}