gaesup-world 0.0.2 → 0.0.4

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() {

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

@@ -1,20 +1,4 @@
-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;
-};
+import { keyBoardMapType } from "./type";
 
 export const KeyboardF = {
   ESC: { name: "ESC", gridRow: "1/2", gridColumn: "1/2" },

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

@@ -0,0 +1,14 @@
+export const KeyboardMapDefault = [
+  { name: "forward", keys: ["ArrowUp", "KeyW"] },
+  { name: "backward", keys: ["ArrowDown", "KeyS"] },
+  { name: "leftward", keys: ["ArrowLeft", "KeyA"] },
+  { name: "rightward", keys: ["ArrowRight", "KeyD"] },
+  { name: "jump", keys: ["Space"] },
+  { name: "run", keys: ["Shift"] },
+  { name: "greet", keys: ["KeyZ"] },
+];
+
+export const keyboardToolTipDefault = {
+  on: true,
+  keyBoardMap: KeyboardMapDefault,
+};

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

@@ -1,25 +1,29 @@
 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 { GaesupWorldContext } from "../../world/context";
+import { GaesupToolsContext } from "../context";
+import { KeyBoardAll } from "./constant";
 import * as style from "./style.css";
+import { keyArrayItemType } from "./type";
 
-export default function KeyBoardToolTip({
-  keyboardMap,
-}: {
-  keyboardMap: {
-    name: string;
-    keys: string[];
-  }[];
-}) {
+export default function KeyBoardToolTip() {
   const worldContext = useContext(GaesupWorldContext);
+  const {
+    keyboardToolTip: {
+      keyBoardMap,
+      keyBoardToolTipStyle,
+      keyBoardToolTipInnerStyle,
+      keyCapStyle,
+    },
+  } = useContext(GaesupToolsContext);
   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,
@@ -32,7 +36,7 @@ export default function KeyBoardToolTip({
     []
   );
 
-  const codeToActionObj = keyboardMap.reduce((maps, keyboardMapItem) => {
+  const codeToActionObj = keyBoardMap.reduce((maps, keyboardMapItem) => {
     keyboardMapItem.keys.forEach((key) => {
       maps[key] = keyboardMapItem.name;
     });
@@ -40,8 +44,8 @@ export default function KeyBoardToolTip({
   }, {});
 
   return (
-    <div className={style.keyBoardToolTip}>
-      <div className={style.keyBoardTooInner}>
+    <div className={style.keyBoardToolTip} style={keyBoardToolTipStyle}>
+      <div className={style.keyBoardTooInner} style={keyBoardToolTipInnerStyle}>
         {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)";
@@ -66,13 +70,16 @@ export default function KeyBoardToolTip({
           return (
             <div
               className={style.keyCap}
-              style={assignInlineVars({
-                background,
-                boxShadow,
-                color,
-                gridRow: item.gridRow,
-                gridColumn: item.gridColumn,
-              })}
+              style={{
+                ...assignInlineVars({
+                  background,
+                  boxShadow,
+                  color,
+                  gridRow: item.gridRow,
+                  gridColumn: item.gridColumn,
+                }),
+                ...keyCapStyle,
+              }}
               key={key}
             >
               {item.name}

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

@@ -0,0 +1,37 @@
+import { CSSProperties } from "react";
+
+export type keyMapItemType = {
+  name: string;
+  gridRow: string;
+  gridColumn: string;
+  code?: string;
+};
+
+export type keyArrayItemType = {
+  code: string;
+  gridRow: string;
+  gridColumn: string;
+  name: string;
+};
+
+export type keyboardMapItemType = {
+  name: string;
+  keys: string[];
+};
+
+export type keyBoardMapType = {
+  [name: string]: keyMapItemType;
+};
+
+export type keyBoardLabelType = {
+  [name: string]: string;
+};
+
+export type keyBoardToolTipType = {
+  on?: boolean;
+  keyBoardLabel?: keyBoardLabelType;
+  keyBoardMap?: keyboardMapItemType[];
+  keyBoardToolTipStyle?: CSSProperties;
+  keyBoardToolTipInnerStyle?: CSSProperties;
+  keyCapStyle?: CSSProperties;
+};

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

@@ -1,5 +1,9 @@
 export const minimapDefault = {
   on: true,
   ratio: 0.1,
+};
+
+export const minimapInnerDefault = {
+  on: true,
   props: {},
 };

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

@@ -1,14 +1,32 @@
 "use client";
 
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useCallback, useContext, useState } from "react";
-import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+import { useCallback, useContext, useEffect, useState } from "react";
+
+import {
+  GaesupWorldContext,
+  GaesupWorldDispatchContext,
+} from "../../world/context";
+import { GaesupToolsContext } from "../context";
 import * as style from "./style.css";
 
 export default function MiniMap() {
-  const { minimap, activeState } = useContext(GaesupWorldContext);
+  const { minimap: minimapInner, activeState } = useContext(GaesupWorldContext);
+  const dispatch = useContext(GaesupWorldDispatchContext);
+  const { minimap } = useContext(GaesupToolsContext);
   const [ratio, setRatio] = useState(minimap.ratio);
-  let lastScroll = 0;
+
+  useEffect(() => {
+    minimapInner.ratio = ratio;
+    dispatch({
+      type: "update",
+      payload: {
+        minimap: {
+          ...minimapInner,
+        },
+      },
+    });
+  }, []);
 
   const upRatio = useCallback(() => {
     if (ratio >= 1) setRatio((prev) => prev - 0.1);
@@ -31,7 +49,7 @@ export default function MiniMap() {
     >
       <div className={style.minimapOuter} style={minimap.objectStyle || {}} />
       <div className={style.minimapInner} style={minimap.innerStyle || {}}>
-        {Object.values(minimap.props).map((obj, key) => {
+        {Object.values(minimapInner.props).map((obj, key) => {
           return (
             <div
               key={key}

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

@@ -7,12 +7,17 @@ export type minimapPropsType = {
   size: THREE.Vector3;
 };
 
-export type minimapType = {
+export type minimapInnerType = {
   on: boolean;
   ratio?: number;
   props: {
     [key: string]: minimapPropsType;
   };
+};
+
+export type minimapType = {
+  on: boolean;
+  ratio?: number;
   minimapStyle?: CSSProperties;
   outerStyle?: CSSProperties;
   innerStyle?: CSSProperties;

package/src/gaesup/{stores/control → tools/pushKey}/index.ts

@@ -2,14 +2,7 @@ import { useContext } from "react";
 import {
   GaesupWorldContext,
   GaesupWorldDispatchContext,
-} from "../context/gaesupworld";
-
-export const controlDefault = {
-  forward: false,
-  backward: false,
-  leftward: false,
-  rightward: false,
-};
+} from "../../world/context";
 
 export function usePushKey() {
   const { control } = useContext(GaesupWorldContext);

package/src/gaesup/tools/reducer.ts

@@ -0,0 +1,21 @@
+import { gaesupToolsPropType } from "./type";
+
+export function gaesupToolsReducer(
+  props: gaesupToolsPropType,
+  action: {
+    type: string;
+    payload?: gaesupToolsPropType;
+  }
+) {
+  switch (action.type) {
+    case "init": {
+      return { ...props };
+    }
+    case "update": {
+      return { ...props, ...action.payload };
+    }
+    default: {
+      throw Error("Unknown action: " + action.type);
+    }
+  }
+}

package/src/gaesup/tools/type.ts

@@ -0,0 +1,26 @@
+import { Dispatch } from "react";
+import { gameboyType } from "./gameboy/type";
+import { gamepadType } from "./gamepad/type";
+import { joyStickType } from "./joystick/type";
+import { keyBoardToolTipType } from "./keyBoardToolTip/type";
+import { minimapType } from "./minimap/type";
+
+export type keyboardMapType = { name: string; keys: string[] }[];
+export type gaesupToolsPropType = {
+  keyboardToolTip: keyBoardToolTipType;
+  joystick: joyStickType;
+  minimap: minimapType;
+  gameboy: gameboyType;
+  gamepad: gamepadType;
+};
+
+export type dispatchType<T> = Dispatch<{
+  type: string;
+  payload?: Partial<T>;
+}>;
+
+export type gaesupToolsPartialPropType = Partial<gaesupToolsPropType>;
+export type gaesupDisptachType = Dispatch<{
+  type: string;
+  payload?: Partial<gaesupToolsPropType>;
+}>;

package/src/gaesup/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./ray";
+export * from "./ref";
+export * from "./vector";

package/src/gaesup/world/context/index.ts

@@ -0,0 +1,124 @@
+import { euler, quat, vec3 } from "@react-three/rapier";
+import { createContext } from "react";
+import { animationTagType } from "../../controller/type";
+import { V3 } from "../../utils/vector";
+import { dispatchType, gaesupWorldPropType } from "./type";
+
+export const gaesupWorldDefault: gaesupWorldPropType = {
+  activeState: {
+    position: V3(0, 1, 5),
+    impulse: vec3(),
+    velocity: vec3(),
+    acceleration: vec3(),
+    quat: quat(),
+    euler: euler(),
+    dir: vec3(),
+    direction: vec3(),
+    axisX: V3(1, 0, 0),
+    axisY: V3(0, 1, 0),
+    axisZ: V3(0, 0, 1),
+    yaw: 0,
+    pitch: 0,
+    roll: 0,
+  },
+  characterCollider: {
+    halfHeight: 0.35,
+    height: 0.7,
+    radius: 0.3,
+    diameter: 0.6,
+  },
+  vehicleCollider: {
+    wheelSizeX: 0.5,
+    wheelSizeY: 0.5,
+    wheelSizeZ: 0.5,
+    vehicleSizeX: 1,
+    vehicleSizeY: 1,
+    vehicleSizeZ: 1,
+    vehicleX: 0.5,
+    vehicleY: 0.5,
+    vehicleZ: 0.5,
+  },
+  airplaneCollider: {
+    airplaneSizeX: 1,
+    airplaneSizeY: 1,
+    airplaneSizeZ: 1,
+    airplaneX: 0.5,
+    airplaneY: 0.5,
+    airplaneZ: 0.5,
+  },
+  mode: {
+    type: "character",
+    controller: "keyboard",
+  },
+  url: {
+    characterUrl: null,
+    vehicleUrl: null,
+    airplaneUrl: null,
+    wheelUrl: null,
+  },
+  characterGltf: null,
+  vehicleGltf: null,
+  wheelGltf: null,
+  airplaneGltf: null,
+  states: {
+    isMoving: false,
+    isNotMoving: false,
+    isOnTheGround: false,
+    isOnMoving: false,
+    isRotated: false,
+    isRunning: false,
+    isJumping: false,
+    isAnimationOuter: false,
+  },
+  debug: false,
+  minimap: {
+    on: true,
+    props: {},
+  },
+  joystick: {
+    on: true,
+    joyStickOrigin: {
+      x: 0,
+      y: 0,
+      angle: Math.PI / 2,
+      currentRadius: 0,
+      originRadius: 0,
+      isIn: true,
+      isOn: false,
+      isUp: true,
+      isCenter: true,
+    },
+    joyStickBall: {
+      top: "50%",
+      left: "50%",
+    },
+  },
+  control: {
+    forward: false,
+    backward: false,
+    leftward: false,
+    rightward: false,
+  },
+  points: [],
+  refs: null,
+  animations: {
+    current: "idle" as keyof animationTagType,
+    animationNames: {
+      idle: "idle",
+      walk: "walk",
+      run: "run",
+      accel: "accel",
+      break: "break",
+      ride: "ride",
+      jump: "jump",
+      jumpIdle: "jumpIdle",
+      jumpLand: "jumpLand",
+      fall: "fall",
+    },
+    keyControl: {},
+  },
+};
+
+export const GaesupWorldContext = createContext<gaesupWorldPropType>(null);
+export const GaesupWorldDispatchContext =
+  createContext<dispatchType<gaesupWorldPropType>>(null);

package/src/gaesup/{stores/context/gaesupworld → world/context}/reducer.ts

@@ -1,6 +1,6 @@
 import { gaesupWorldPartialPropType, gaesupWorldPropType } from "./type";
 
-export function gaesupReducer(
+export function gaesupWorldReducer(
   props: gaesupWorldPropType,
   action: {
     type: string;

package/src/gaesup/world/context/type.ts

@@ -0,0 +1,137 @@
+import { Dispatch } from "react";
+import { GLTFResult } from "../../component/gltf/type";
+import { actionsType, animationTagType, refsType } from "../../controller/type";
+
+import { joyStickInnerType } from "../../tools/joystick/type";
+import { minimapInnerType } from "../../tools/minimap/type";
+
+export type controlType = {
+  forward: boolean;
+  backward: boolean;
+  leftward: boolean;
+  rightward: boolean;
+  [key: string]: boolean;
+};
+
+export type keyControlType = {
+  [key: string]: boolean;
+};
+
+export type pointType = {
+  text: string;
+  position: THREE.Vector3;
+};
+
+export type pointsType = pointType[];
+
+export type statesType = {
+  isMoving: boolean;
+  isNotMoving: boolean;
+  isOnTheGround: boolean;
+  isOnMoving: boolean;
+  isRotated: boolean;
+  isRunning: boolean;
+  isJumping: boolean;
+  isAnimationOuter: boolean;
+};
+
+export type urlType = {
+  characterUrl?: string;
+  vehicleUrl?: string;
+  airplaneUrl?: string;
+  wheelUrl?: string;
+};
+
+export type animationPropType = {
+  current: keyof animationTagType;
+  animationNames: actionsType;
+  keyControl: {
+    [key: string]: boolean;
+  };
+};
+
+export type characterColliderType = {
+  halfHeight?: number;
+  height?: number;
+  radius?: number;
+  diameter?: number;
+};
+
+export type vehicleColliderType = {
+  wheelSizeX?: number;
+  wheelSizeY?: number;
+  wheelSizeZ?: number;
+  vehicleSizeX?: number;
+  vehicleSizeY?: number;
+  vehicleSizeZ?: number;
+  vehicleX?: number;
+  vehicleY?: number;
+  vehicleZ?: number;
+};
+
+export type airplaneColliderType = {
+  airplaneSizeX?: number;
+  airplaneSizeY?: number;
+  airplaneSizeZ?: number;
+  airplaneX?: number;
+  airplaneY?: number;
+  airplaneZ?: number;
+};
+
+export type modeType = {
+  type?: "character" | "vehicle" | "airplane";
+  controller?: "gameboy" | "keyboard" | "joystick";
+};
+
+export type activeStateType = {
+  position: THREE.Vector3;
+  impulse: THREE.Vector3;
+  velocity: THREE.Vector3;
+  acceleration: THREE.Vector3;
+  quat: THREE.Quaternion;
+  euler: THREE.Euler;
+  direction: THREE.Vector3;
+  dir: THREE.Vector3;
+  axisX: THREE.Vector3;
+  axisY: THREE.Vector3;
+  axisZ: THREE.Vector3;
+  yaw: number;
+  pitch: number;
+  roll: number;
+};
+
+type KeyboardControlsState<T extends string = string> = {
+  [K in T]: boolean;
+};
+
+export type gaesupWorldPropType = {
+  activeState: activeStateType;
+  characterCollider: characterColliderType;
+  vehicleCollider: vehicleColliderType;
+  airplaneCollider: airplaneColliderType;
+  mode: modeType;
+  url: urlType;
+  characterGltf: GLTFResult;
+  vehicleGltf: GLTFResult;
+  wheelGltf: GLTFResult;
+  airplaneGltf: GLTFResult;
+  states: statesType;
+  debug: boolean;
+  minimap: minimapInnerType;
+  joystick: joyStickInnerType;
+  control: KeyboardControlsState<string>;
+  points: pointsType;
+  refs: refsType;
+  animations: animationPropType;
+};
+
+export type dispatchType<T> = Dispatch<{
+  type: string;
+  payload?: Partial<T>;
+}>;
+
+export type gaesupWorldPartialPropType = Partial<gaesupWorldPropType>;
+export type gaesupDisptachType = Dispatch<{
+  type: string;
+  payload?: Partial<gaesupWorldPropType>;
+}>;

package/src/gaesup/world/index.tsx

@@ -1,9 +1,6 @@
 import initGaesupWorld from "../initial/gaesupWorld";
 import { initGaesupWorldPropsType } from "../initial/gaesupWorld/type";
-import {
-  GaesupWorldContext,
-  GaesupWorldDispatchContext,
-} from "../stores/context/gaesupworld";
+import { GaesupWorldContext, GaesupWorldDispatchContext } from "./context";
 
 export default function GaesupWorld(props: initGaesupWorldPropsType) {
   const { gaesupProps } = initGaesupWorld(props);

package/src/gaesup/world/type.ts

@@ -1,5 +1,5 @@
 import { Dispatch } from "react";
-import { gaesupWorldPropType } from "../stores/context/gaesupworld/type";
+import { gaesupWorldPropType } from "./context/type";
 
 export type gaesupWorldInitType = {
   value: gaesupWorldPropType;

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./gaesup";

package/tsconfig.json

@@ -22,6 +22,7 @@
 
     /* Other */
   },
-  "include": ["src", "examples"],
+  "include": ["./src", "examples"],
+  "exclude": ["./node_modules/**/*"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/src/gaesup/stores/active/index.ts

@@ -1,19 +0,0 @@
-import { euler, quat, vec3 } from "@react-three/rapier";
-import { V3 } from "../../utils/vector";
-
-export const activeStateDefault = {
-  position: V3(0, 2, 5),
-  impulse: vec3(),
-  velocity: vec3(),
-  acceleration: vec3(),
-  quat: quat(),
-  euler: euler(),
-  dir: vec3(),
-  direction: vec3(),
-  axisX: V3(1, 0, 0),
-  axisY: V3(0, 1, 0),
-  axisZ: V3(0, 0, 1),
-  yaw: 0,
-  pitch: 0,
-  roll: 0,
-};