gaesup-world 0.0.2 → 0.0.3

package/src/gaesup/tools/gamepad/GamePadButton.tsx

@@ -1,20 +1,36 @@
-import { usePushKey } from "../../stores/control";
+import { useContext, useState } from "react";
+import { GaesupToolsContext } from "../context";
+import { usePushKey } from "../pushKey";
 import * as style from "./style.css";
 
-export default function GamePadButton({ value }: { value: string }) {
+export default function GamePadButton({
+  value,
+  name,
+}: {
+  value: string;
+  name: string;
+}) {
+  const {
+    gamepad: { gamepadButtonStyle },
+  } = useContext(GaesupToolsContext);
+  const [isClicked, setIsClicked] = useState(false);
   const { pushKey } = usePushKey();
 
   const onMouseDown = () => {
     pushKey(value, true);
+    setIsClicked(true);
   };
 
   const onMouseLeave = () => {
     pushKey(value, false);
+    setIsClicked(false);
   };
 
   return (
     <button
-      className={`${style.gamePadButtonRecipe}`}
+      className={`${style.padButton({
+        isClicked: isClicked,
+      })}`}
       onMouseDown={() => onMouseDown()}
       onMouseUp={() => onMouseLeave()}
       onMouseLeave={() => onMouseLeave()}
@@ -24,8 +40,9 @@ export default function GamePadButton({ value }: { value: string }) {
       }}
       onPointerDown={() => onMouseDown()}
       onPointerUp={() => onMouseLeave()}
+      style={gamepadButtonStyle}
     >
-      {value}
+      {name}
     </button>
   );
 }

package/src/gaesup/tools/gamepad/default.ts

@@ -0,0 +1,3 @@
+export const gamepadDefault = {
+  on: true,
+};

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

@@ -1,19 +1,25 @@
 import { useContext } from "react";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { GaesupWorldContext } from "../../world/context";
+import { GaesupToolsContext } from "../context";
 import GamePadButton from "./GamePadButton";
 import * as style from "./style.css";
 
 type gameBoyDirectionType = {
   tag: string;
   value: string;
+  name: string;
   icon: JSX.Element;
 };
 
 export default function GamePad() {
-  const { control } = useContext(GaesupWorldContext);
-  const { mode } = useContext(GaesupWorldContext);
+  const {
+    gamepad: { gamepadStyle, gamepadGridStyle },
+    keyboardToolTip: { keyBoardLabel },
+  } = useContext(GaesupToolsContext);
+  const { control, mode } = useContext(GaesupWorldContext);
   const GamePadDirections = Object.keys(control)
     .map((key) => {
+      const name = keyBoardLabel[key] || key;
       if (
         key !== "forward" &&
         key !== "backward" &&
@@ -23,6 +29,7 @@ export default function GamePad() {
         return {
           tag: key,
           value: key,
+          name: name,
         };
     })
     .filter((item) => item !== undefined)
@@ -32,10 +39,14 @@ export default function GamePad() {
     );
 
   return (
-    <div className={style.gamePad}>
-      {GamePadDirections.map((item: gameBoyDirectionType, key: number) => {
-        return <GamePadButton key={key} value={item.value} />;
-      })}
+    <div className={style.gamePad} style={gamepadStyle}>
+      <div className={style.gamePadGrid} style={gamepadGridStyle}>
+        {GamePadDirections.map((item: gameBoyDirectionType, key: number) => {
+          return (
+            <GamePadButton key={key} value={item.value} name={item.name} />
+          );
+        })}
+      </div>
     </div>
   );
 }

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

@@ -1,16 +1,71 @@
 import { style } from "@vanilla-extract/css";
-import { mobileButton } from "../../../styles/recipe/button.css";
-import { flex } from "../../../styles/recipe/index.css";
+import { recipe } from "@vanilla-extract/recipes";
+import { fixed, grid } from "../../../styles/recipe/index.css";
+import { vars } from "../../../styles/theme.css";
 
 export const gamePad = style([
-  flex({
-    row: "center",
+  fixed({
+    south_east: true,
   }),
   {
-    width: "100%",
-    margin: "1rem",
+    marginRight: "5rem",
+    width: "12rem",
     zIndex: 10000,
   },
 ]);
 
-export const gamePadButtonRecipe = style([mobileButton({})]);
+export const gamePadGrid = style([
+  grid({
+    row: "center",
+  }),
+  {
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gridTemplateRows: "repeat(3, 1fr)",
+  },
+]);
+
+export const padButton = recipe({
+  base: [
+    {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "relative",
+      width: "5rem",
+      height: "5rem",
+      borderRadius: "50%",
+      fontSize: "1rem",
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      color: "white",
+      boxShadow: "0 0 0.5rem rgba(0, 0, 0, 0.5)",
+      cursor: "pointer",
+      transition: "all 0.3s ease-in",
+      margin: "0.5rem",
+      ":hover": {
+        boxShadow: "0 0 1rem rgba(0, 0, 0, 0.5)",
+      },
+      ":after": {
+        content: "''",
+        position: "absolute",
+        width: "4rem",
+        height: "4rem",
+        borderRadius: "50%",
+        background: "rgba(0, 0, 0, 0.2)",
+        zIndex: 100000,
+      },
+    },
+  ],
+  variants: {
+    isClicked: {
+      true: {
+        background: vars.gradient.red,
+        boxShadow: "0 0 1rem rgba(245,177,97,1)",
+        color: "black",
+        transition: "all 0.3s ease-in",
+        ":hover": {
+          boxShadow: "0 0 2rem rrgba(245,177,97,1)",
+        },
+      },
+    },
+  },
+});

package/src/gaesup/tools/gamepad/type.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+
+export type gamepadType = {
+  on?: boolean;
+  gamepadStyle?: CSSProperties;
+  gamepadInnerStyle?: CSSProperties;
+  gamepadGridStyle?: CSSProperties;
+  gamepadButtonStyle?: CSSProperties;
+};

package/src/gaesup/tools/index.tsx

@@ -1,61 +1,82 @@
 "use client";
 
-import { useContext, useEffect } from "react";
+import { useContext, useMemo, useReducer } from "react";
 
-import {
-  GaesupWorldContext,
-  GaesupWorldDispatchContext,
-} from "../stores/context/gaesupworld";
+import { GaesupWorldContext } from "../world/context";
+import { GaesupToolsContext, GaesupToolsDispatchContext } from "./context";
 import GameBoy from "./gameboy";
+import { gameboyDefault } from "./gameboy/default";
 import GamePad from "./gamepad";
+import { gamepadDefault } from "./gamepad/default";
 import JoyStick from "./joystick";
+import { joyStickDefault } from "./joystick/default";
 import JumpPoint from "./jumpPoint";
 import KeyBoardToolTip from "./keyBoardToolTip";
+import { keyboardToolTipDefault } from "./keyBoardToolTip/default";
 import MiniMap from "./minimap";
+import { minimapDefault } from "./minimap/default";
+import { gaesupToolsReducer } from "./reducer";
 import * as style from "./style.css";
+import { gaesupToolsPartialPropType } from "./type";
 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);
+  keyboardToolTip,
+  joystick,
+  minimap,
+  gameboy,
+  gamepad,
+}: gaesupToolsPartialPropType) {
+  const worldContext = useContext(GaesupWorldContext);
+  const { mode } = worldContext;
 
-    dispatch({
-      type: "update",
-      payload: {
-        control: {
-          ...assignedControl,
-        },
-      },
-    });
-  }, []);
+  const [tools, toolsDispatch] = useReducer(gaesupToolsReducer, {
+    keyboardToolTip: Object.assign(
+      keyboardToolTipDefault,
+      keyboardToolTip || {}
+    ),
+    joystick: Object.assign(joyStickDefault, joystick || {}),
+    minimap: Object.assign(minimapDefault, minimap || {}),
+    gameboy: Object.assign(gameboyDefault, gameboy || {}),
+    gamepad: Object.assign(gamepadDefault, gamepad || {}),
+  });
+
+  const gaesupTool = useMemo(
+    () => ({
+      value: tools,
+      dispatch: toolsDispatch,
+    }),
+    [
+      tools.keyboardToolTip,
+      tools.joystick,
+      tools.minimap,
+      tools.gameboy,
+      tools.gamepad,
+    ]
+  );
 
   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 />}
+    <GaesupToolsContext.Provider value={gaesupTool.value}>
+      <GaesupToolsDispatchContext.Provider value={gaesupTool.dispatch}>
+        <div className={style.footer}>
+          <div className={style.footerUpper}>
+            {(mode.controller === "joystick" ||
+              mode.controller === "gameboy") &&
+              gaesupTool.value.gamepad.on && <GamePad />}
+          </div>
+          <div className={style.footerLower}>
+            {mode.controller === "joystick" && gaesupTool.value.joystick.on && (
+              <JoyStick />
+            )}
+            {mode.controller === "gameboy" && gaesupTool.value.gameboy.on && (
+              <GameBoy />
+            )}
+            {mode.controller === "keyboard" &&
+              gaesupTool.value.keyboardToolTip.on && <KeyBoardToolTip />}
+            {gaesupTool.value.minimap.on && <MiniMap />}
+          </div>
         </div>
-      </div>
 
-      <JumpPoint />
-    </>
+        <JumpPoint />
+      </GaesupToolsDispatchContext.Provider>
+    </GaesupToolsContext.Provider>
   );
 }

package/src/gaesup/{stores/joystick/index.ts → tools/joystick/default.ts}

@@ -1,16 +1,14 @@
 import { useContext } from "react";
+
 import {
   GaesupWorldContext,
   GaesupWorldDispatchContext,
-} from "../context/gaesupworld";
+} from "../../world/context";
 import { joyStickBallType, joyStickOriginType } from "./type";
 
 export const joyStickBallDefault = {
-  x: "50%",
-  y: "50%",
-  position: "absolute",
-  background: "rgba(0, 0, 0, 0.5)",
-  boxShadow: "0 0 10px  rgba(0, 0, 0, 0.5)",
+  top: "50%",
+  left: "50%",
 };
 
 export const joyStickOriginDefault = {
@@ -21,16 +19,20 @@ export const joyStickOriginDefault = {
   originRadius: 0,
   isIn: true,
   isOn: false,
-  isCenter: true,
   isUp: true,
+  isCenter: true,
 };
 
-export const joyStickDefault = {
-  on: false,
+export const joyStickInnerDefault = {
+  on: true,
   joyStickBall: joyStickBallDefault,
   joyStickOrigin: joyStickOriginDefault,
 };
 
+export const joyStickDefault = {
+  on: true,
+};
+
 export default function useJoyStick() {
   const { joystick } = useContext(GaesupWorldContext);
   const dispatch = useContext(GaesupWorldDispatchContext);

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

@@ -5,18 +5,18 @@ import {
   TouchEventHandler,
   useCallback,
   useContext,
+  useEffect,
   useRef,
   useState,
 } from "react";
 import { vars } from "../../../styles/theme.css";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
-import useJoyStick from "../../stores/joystick";
+import { GaesupToolsContext } from "../context";
+import useJoyStick from "./default";
 import * as style from "./style.css";
 
 export default function JoyStick() {
-  const { joystick } = useContext(GaesupWorldContext);
   return (
-    <div className={style.joyStick} style={joystick.joyStickStyle}>
+    <div className={style.joyStick}>
       <JoyBall />
     </div>
   );
@@ -24,10 +24,15 @@ export default function JoyStick() {
 
 export function JoyBall() {
   const outerRef = useRef<HTMLDivElement>(null);
-  const { joystick } = useContext(GaesupWorldContext);
+  const childRef = useRef<HTMLDivElement>(null);
+  const {
+    joystick: { joyStickBallStyle, joyStickInnerStyle, joyStickStyle },
+  } = useContext(GaesupToolsContext);
   const { joyStickBall, joyStickOrigin, setBall, setOrigin } = useJoyStick();
   const [mouseDown, setMouseDown] = useState(false);
   const [touchDown, setTouchDown] = useState(false);
+  const [background, setBackground] = useState("rgba(0, 0, 0, 0.5)");
+  const [boxShadow, setBoxShadow] = useState("0 0 10px  rgba(0, 0, 0, 0.5)");
 
   const calcOriginBall = <T extends MouseEvent | TouchEvent>(
     e: T,
@@ -43,7 +48,6 @@ export function JoyBall() {
     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,
@@ -55,23 +59,22 @@ export function JoyBall() {
       isCenter: currentRadius < originRadius / 4,
       isUp: top > Y - height / 2,
     });
+    setBoxShadow("0 0 10px rgba(99,251,215,1)");
+    setBackground(
+      currentRadius > originRadius / 2
+        ? vars.gradient.lightGreen
+        : vars.gradient.green
+    );
     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)",
+      top: `${Y}px`,
+      left: `${X}px`,
     });
   };
 
   const initialize = (e) => {
     const outer = e.target as HTMLDivElement;
     const parent = outer.parentElement as HTMLDivElement;
-    const { top, left, bottom, right, width, height } =
-      parent.getBoundingClientRect();
+    const { left, bottom, width, height } = parent.getBoundingClientRect();
     const x = left + width / 2;
     const y = bottom - height / 2;
     setOrigin({
@@ -85,13 +88,7 @@ export function JoyBall() {
       isCenter: true,
       isUp: true,
     });
-    setBall({
-      x: `${-x}px`,
-      y: `${-y}px`,
-      position: "absolute",
-      background: "rgba(0, 0, 0, 0.5)",
-      boxShadow: "0 0 10px  rgba(0, 0, 0, 0.5)",
-    });
+    initBall();
   };
 
   const handleMouseOver: MouseEventHandler = useCallback(
@@ -99,7 +96,17 @@ export function JoyBall() {
       if (!mouseDown) return;
       calcOriginBall<MouseEvent<Element>>(e, e.pageX, e.pageY);
     },
-    [joyStickBall, joyStickOrigin, setBall, setOrigin, mouseDown]
+    [
+      joyStickBall,
+      joyStickOrigin,
+      setBall,
+      setOrigin,
+      mouseDown,
+      boxShadow,
+      background,
+      setBoxShadow,
+      setBackground,
+    ]
   );
 
   const handleTouchMove: TouchEventHandler = useCallback(
@@ -111,59 +118,83 @@ export function JoyBall() {
         e.touches[0].pageY
       );
     },
-    [touchDown]
+    [touchDown, boxShadow, background, setBoxShadow, setBackground]
   );
 
-  const handleTouchEnd = useCallback(
+  const handleTouchEnd: TouchEventHandler = useCallback(
     (e) => {
+      setTouchDown(false);
       return initialize(e);
     },
-    [touchDown]
+    [
+      touchDown,
+      setTouchDown,
+      boxShadow,
+      background,
+      setBoxShadow,
+      setBackground,
+    ]
   );
-  const handleMouseOut = useCallback(
+  const handleMouseOut: MouseEventHandler = useCallback(
     (e) => {
+      setMouseDown(false);
       return initialize(e);
     },
-    [joyStickBall, joyStickOrigin, setBall, setOrigin, mouseDown]
+    [
+      setBall,
+      setMouseDown,
+      setOrigin,
+      mouseDown,
+      boxShadow,
+      background,
+      setBoxShadow,
+      setBackground,
+    ]
   );
 
+  const initBall = () => {
+    if (outerRef.current) {
+      const { top, left, width, height } = outerRef.current.getClientRects()[0];
+      setBoxShadow("0 0 10px  rgba(0, 0, 0, 0.5)");
+      setBackground("rgba(0, 0, 0, 0.5)");
+      setBall({
+        top: `${top + height / 2}px`,
+        left: `${left + width / 2}px`,
+      });
+    }
+  };
+
+  useEffect(() => {
+    initBall();
+  }, []);
+
   return (
-    <>
-      <div className={style.joyStick} style={joystick.joyBallStyle}>
+    <div className={style.joyStick} style={joyStickStyle}>
+      <div
+        className={style.joyStickInner}
+        style={joyStickInnerStyle}
+        ref={outerRef}
+        onMouseDown={() => setMouseDown(true)}
+        onMouseUp={() => setMouseDown(false)}
+        onMouseMove={handleMouseOver}
+        onMouseLeave={(e) => handleMouseOut(e)}
+        onTouchStart={() => setTouchDown(true)}
+        onTouchEnd={(e) => handleTouchEnd(e)}
+        onTouchMove={handleTouchMove}
+        onTouchCancel={handleTouchEnd}
+      >
         <div
-          className={style.joyStickInner}
-          style={joystick.joyStickInnerStyle}
-          ref={outerRef}
-          onMouseDown={() => setMouseDown(true)}
-          onMouseUp={() => setMouseDown(false)}
-          onMouseMove={handleMouseOver}
-          onMouseLeave={(e) => {
-            setMouseDown(false);
-            handleMouseOut(e);
+          className={`${style.joystickBall}`}
+          ref={childRef}
+          style={{
+            background: joyStickBallStyle?.background || background,
+            boxShadow: joyStickBallStyle?.boxShadow || boxShadow,
+            top: joyStickBall.top,
+            left: joyStickBall.left,
+            ...joyStickBallStyle,
           }}
-          onTouchStart={() => setTouchDown(true)}
-          onTouchEnd={(e) => {
-            setTouchDown(false);
-            handleTouchEnd(e);
-          }}
-          onTouchMove={handleTouchMove}
-          onTouchCancel={handleTouchEnd}
-        >
-          <div
-            className={`${style.joystickBall}`}
-            style={{
-              position: joyStickBall.position as "fixed" | "absolute",
-              background:
-                joystick.joyStickBallStyle?.background ||
-                joyStickBall.background,
-              boxShadow:
-                joystick.joyStickBallStyle?.boxShadow || joyStickBall.boxShadow,
-              top: joyStickBall.y,
-              left: joyStickBall.x,
-            }}
-          />
-        </div>
+        />
       </div>
-    </>
+    </div>
   );
 }

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

@@ -18,21 +18,24 @@ export const joyStickInner = style([
     row: "center",
   }),
   {
-    margin: "4rem",
-    padding: "6rem",
+    margin: "5rem",
+    padding: "1rem",
+    width: "12rem",
+    height: "12rem",
     borderRadius: "50%",
     background: "rgba(0, 0, 0, 0.5)",
     boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+    ":after": {
+      content: "''",
+      width: "10rem",
+      height: "10rem",
+      borderRadius: "50%",
+      background: "rgba(0, 0, 0, 0.2)",
+    },
   },
 ]);
 
 export const joystickBall = style([
-  fixed({
-    south_east: true,
-  }),
-  flex({
-    column: "7",
-  }),
   {
     position: "fixed",
     width: "5rem",

package/src/gaesup/{stores → tools}/joystick/type.ts

@@ -1,11 +1,8 @@
 import { CSSProperties } from "react";
 
 export type joyStickBallType = {
-  x: string;
-  y: string;
-  position: string;
-  background: string;
-  boxShadow: string;
+  left: string;
+  top: string;
 };
 
 export type joyStickOriginType = {
@@ -16,14 +13,18 @@ export type joyStickOriginType = {
   originRadius: number;
   isIn: boolean;
   isOn: boolean;
-  isCenter: boolean;
   isUp: boolean;
+  isCenter: boolean;
 };
 
-export type joyStickType = {
+export type joyStickInnerType = {
   on?: boolean;
   joyStickBall?: joyStickBallType;
   joyStickOrigin?: joyStickOriginType;
+};
+
+export type joyStickType = {
+  on?: boolean;
   joyStickStyle?: CSSProperties;
   joyBallStyle?: CSSProperties;
   joyStickInnerStyle?: CSSProperties;

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

@@ -1,6 +1,6 @@
 import { useContext } from "react";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
-import { pointType } from "../../stores/point/type";
+import { GaesupWorldContext } from "../../world/context";
+import { pointType } from "../../world/context/type";
 import * as style from "./style.css";
 
 export default function JumpPoint() {