gaesup-world 0.0.1

package/src/gaesup/stores/context/controller/index.ts

@@ -0,0 +1,36 @@
+import { createContext } from "react";
+import { V3 } from "../../../utils/vector";
+import { airplaneDefault } from "../../airplane";
+import { dispatchType } from "../gaesupworld/type";
+import {
+  gaesupControllerType,
+  orthographicCameraType,
+  perspectiveCameraType,
+} from "./type";
+
+export const gaesupControllerDefault = {
+  cameraMode: {
+    cameraType: "perspective" as "perspective",
+    controlType: "normal" as "normal",
+  } as perspectiveCameraType | orthographicCameraType,
+  cameraOption: {
+    offset: V3(-10, -10, -10),
+  },
+  perspectiveCamera: {
+    isFront: true,
+    XZDistance: 8,
+    YDistance: 1,
+  },
+  orthographicCamera: {
+    zoom: 1,
+    near: 0.1,
+    far: 1000,
+  },
+  airplane: { ...airplaneDefault },
+};
+
+export const GaesupControllerContext = createContext<gaesupControllerType>({
+  ...gaesupControllerDefault,
+});
+export const GaesupControllerDispatchContext =
+  createContext<dispatchType<gaesupControllerType>>(null);

package/src/gaesup/stores/context/controller/reducer.ts

@@ -0,0 +1,18 @@
+import { gaesupControllerType } from "./type";
+
+export function gaesupControllerReducer(
+  props: gaesupControllerType,
+  action: {
+    type: string;
+    payload?: gaesupControllerType;
+  }
+) {
+  switch (action.type) {
+    case "init": {
+      return { ...props };
+    }
+    case "update": {
+      return { ...props, ...action.payload };
+    }
+  }
+}

package/src/gaesup/stores/context/controller/type.ts

@@ -0,0 +1,38 @@
+import { OrthographicCameraProps } from "@react-three/fiber";
+import { Dispatch } from "react";
+
+export type perspectiveCameraType = {
+  cameraType?: "perspective";
+  controlType?: "orbit" | "normal";
+};
+export type orthographicCameraType = {
+  cameraType?: "orthographic";
+  controlType?: "orbit";
+};
+
+export type gaesupCameraPropType =
+  | perspectiveCameraType
+  | orthographicCameraType;
+
+export type gaesupCameraOptionType = {
+  offset?: THREE.Vector3;
+};
+
+export type perspectiveCameraPropType = {
+  isFront: boolean;
+  XZDistance: number;
+  YDistance: number;
+};
+
+export type gaesupControllerType = {
+  cameraMode: gaesupCameraPropType;
+  cameraOption: gaesupCameraOptionType;
+  perspectiveCamera: perspectiveCameraPropType;
+  orthographicCamera: OrthographicCameraProps;
+};
+
+export type gaesupControllerPartialType = Partial<gaesupControllerType>;
+export type gaesupDisptachType = Dispatch<{
+  type: string;
+  payload?: Partial<gaesupControllerType>;
+}>;

package/src/gaesup/stores/context/gaesupworld/index.ts

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+import { dispatchType, gaesupWorldPropType } from "./type";
+
+export const modeDefault = {
+  type: "character",
+  controller: "keyboard",
+};
+
+export const GaesupWorldContext = createContext<gaesupWorldPropType>(null);
+export const GaesupWorldDispatchContext =
+  createContext<dispatchType<gaesupWorldPropType>>(null);

package/src/gaesup/stores/context/gaesupworld/reducer.ts

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

package/src/gaesup/stores/context/gaesupworld/type.ts

@@ -0,0 +1,66 @@
+import { Dispatch } from "react";
+import { GLTFResult } from "../../../component/gltf/type";
+import { refsType } from "../../../controller/type";
+import { activeStateType } from "../../active/type";
+import { animationPropType } from "../../animation/type";
+import {
+  airplaneColliderType,
+  characterColliderType,
+  vehicleColliderType,
+} from "../../collider";
+import { controlType } from "../../control/type";
+import { joyStickType } from "../../joystick/type";
+import { minimapType } from "../../minimap/type";
+import { pointsType } from "../../point/type";
+import { statesType } from "../../states/type";
+import { urlType } from "../../url/type";
+
+export type characterOptionType = {
+  type?: "character";
+  controller?: "gameboy" | "keyboard" | "joystick";
+};
+export type vehicleOptionType = {
+  type?: "vehicle";
+  controller?: "keyboard" | "joystick" | "steeringWheel";
+};
+export type airplaneOptionType = {
+  type?: "airplane";
+  controller?: "keyboard" | "joystick" | "steeringWheel";
+};
+
+export type gaesupControllerPropType =
+  | characterOptionType
+  | vehicleOptionType
+  | airplaneOptionType;
+
+export type gaesupWorldPropType = {
+  activeState: activeStateType;
+  characterCollider: characterColliderType;
+  vehicleCollider: vehicleColliderType;
+  airplaneCollider: airplaneColliderType;
+  mode: gaesupControllerPropType;
+  url: urlType;
+  characterGltf: GLTFResult;
+  vehicleGltf: GLTFResult;
+  wheelGltf: GLTFResult;
+  airplaneGltf: GLTFResult;
+  states: statesType;
+  debug: boolean;
+  minimap: minimapType;
+  joystick: joyStickType;
+  control: controlType;
+  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/stores/control/index.ts

@@ -0,0 +1,33 @@
+import { useContext } from "react";
+import {
+  GaesupWorldContext,
+  GaesupWorldDispatchContext,
+} from "../context/gaesupworld";
+
+export const controlDefault = {
+  forward: false,
+  backward: false,
+  leftward: false,
+  rightward: false,
+};
+
+export function usePushKey() {
+  const { control } = useContext(GaesupWorldContext);
+  const dispatch = useContext(GaesupWorldDispatchContext);
+
+  const pushKey = (key: string, value: boolean) => {
+    control[key] = value;
+    dispatch({
+      type: "update",
+      payload: {
+        control: {
+          ...control,
+        },
+      },
+    });
+  };
+
+  return {
+    pushKey,
+  };
+}

package/src/gaesup/stores/control/type.ts

@@ -0,0 +1,11 @@
+export type controlType = {
+  forward: boolean;
+  backward: boolean;
+  leftward: boolean;
+  rightward: boolean;
+  [key: string]: boolean;
+};
+
+export type keyControlType = {
+  [key: string]: boolean;
+};

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

@@ -0,0 +1,72 @@
+import { useContext } from "react";
+import {
+  GaesupWorldContext,
+  GaesupWorldDispatchContext,
+} from "../context/gaesupworld";
+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)",
+};
+
+export const joyStickOriginDefault = {
+  x: 0,
+  y: 0,
+  angle: Math.PI / 2,
+  currentRadius: 0,
+  originRadius: 0,
+  isIn: true,
+  isOn: false,
+};
+
+export const joyStickDefault = {
+  on: false,
+  joyStickBall: joyStickBallDefault,
+  joyStickOrigin: joyStickOriginDefault,
+};
+
+export default function useJoyStick() {
+  const { joystick } = useContext(GaesupWorldContext);
+  const dispatch = useContext(GaesupWorldDispatchContext);
+  const { joyStickBall, joyStickOrigin } = joystick;
+
+  const setBall = (ball: joyStickBallType) => {
+    joystick.joyStickBall = Object.assign(joyStickBall, ball);
+    dispatch({
+      type: "update",
+      payload: {
+        joystick: {
+          ...joystick,
+          joyStickBall: {
+            ...joystick.joyStickBall,
+          },
+        },
+      },
+    });
+  };
+
+  const setOrigin = (origin: joyStickOriginType) => {
+    joystick.joyStickOrigin = Object.assign(joyStickOrigin, origin);
+    dispatch({
+      type: "update",
+      payload: {
+        joystick: {
+          ...joystick,
+          joyStickOrigin: {
+            ...joystick.joyStickOrigin,
+          },
+        },
+      },
+    });
+  };
+  return {
+    joyStickOrigin,
+    joyStickBall,
+    setBall,
+    setOrigin,
+  };
+}

package/src/gaesup/stores/joystick/type.ts

@@ -0,0 +1,23 @@
+export type joyStickBallType = {
+  x: string;
+  y: string;
+  position: string;
+  background: string;
+  boxShadow: string;
+};
+
+export type joyStickOriginType = {
+  x: number;
+  y: number;
+  angle: number;
+  currentRadius: number;
+  originRadius: number;
+  isIn: boolean;
+  isOn: boolean;
+};
+
+export type joyStickType = {
+  on: boolean;
+  joyStickBall: joyStickBallType;
+  joyStickOrigin: joyStickOriginType;
+};

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

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

package/src/gaesup/stores/minimap/type.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from "react";
+import * as THREE from "three";
+
+export type minimapPropsType = {
+  text: string;
+  center: THREE.Vector3;
+  size: THREE.Vector3;
+};
+
+export type minimapType = {
+  on: boolean;
+  ratio?: number;
+  props: {
+    [key: string]: minimapPropsType;
+  };
+  minimapStyle?: CSSProperties;
+  outerStyle?: CSSProperties;
+  innerStyle?: CSSProperties;
+  textStyle?: CSSProperties;
+  objectStyle?: Omit<CSSProperties, "width" | "height" | "transform">;
+  avatarStyle?: CSSProperties;
+};

package/src/gaesup/stores/point/type.ts

@@ -0,0 +1,6 @@
+export type pointType = {
+  text: string;
+  position: THREE.Vector3;
+};
+
+export type pointsType = pointType[];

package/src/gaesup/stores/states/index.tsx

@@ -0,0 +1,10 @@
+export const statesDefault = {
+  isMoving: false,
+  isNotMoving: false,
+  isOnTheGround: false,
+  isOnMoving: false,
+  isRotated: false,
+  isRunning: false,
+  isJumping: false,
+  isAnimationOuter: false,
+};

package/src/gaesup/stores/states/type.ts

@@ -0,0 +1,10 @@
+export type statesType = {
+  isMoving: boolean;
+  isNotMoving: boolean;
+  isOnTheGround: boolean;
+  isOnMoving: boolean;
+  isRotated: boolean;
+  isRunning: boolean;
+  isJumping: boolean;
+  isAnimationOuter: boolean;
+};

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

@@ -0,0 +1,6 @@
+export const urlDefault = {
+  characterUrl: null,
+  vehicleUrl: null,
+  airplaneUrl: null,
+  wheelUrl: null,
+};

package/src/gaesup/stores/url/type.ts

@@ -0,0 +1,6 @@
+export type urlType = {
+  characterUrl?: string;
+  vehicleUrl?: string;
+  airplaneUrl?: string;
+  wheelUrl?: string;
+};

package/src/gaesup/styles.css.ts

@@ -0,0 +1,26 @@
+import { style } from "@vanilla-extract/css";
+import { fixed } from "../styles/recipe/index.css";
+import { vars } from "../styles/theme.css";
+
+export const debug = style([
+  fixed({
+    south_east: true,
+  }),
+  {
+    overflowY: "scroll",
+    margin: "2rem",
+    width: "40rem",
+    height: "30rem",
+    zIndex: 100000,
+    background: vars.themes.debug,
+    borderRadius: "1rem",
+    boxShadow: "0 0 0.5rem rgba(0, 0, 0, 0.2)",
+  },
+]);
+
+export const debugItem = style({
+  position: "relative",
+  paddingLeft: "1rem",
+  fontSize: "0.8em",
+  color: vars.themes.text.normal,
+});

package/src/gaesup/tools/gameboy/GameBoyButton.tsx

@@ -0,0 +1,38 @@
+import { usePushKey } from "../../stores/control";
+import * as style from "./style.css";
+
+export type gameBoyButtonType = {
+  tag: "up" | "down" | "left" | "right";
+  value: string;
+  icon: JSX.Element;
+};
+
+export default function GameBoyButton({ tag, value, icon }: gameBoyButtonType) {
+  const { pushKey } = usePushKey();
+
+  const onMouseDown = () => {
+    pushKey(value, true);
+  };
+
+  const onMouseLeave = () => {
+    pushKey(value, false);
+  };
+
+  return (
+    <button
+      className={`${style.gameBoyButtonRecipe({
+        tag: tag,
+      })}`}
+      onMouseDown={() => onMouseDown()}
+      onMouseUp={() => onMouseLeave()}
+      onMouseLeave={() => onMouseLeave()}
+      onContextMenu={(e) => {
+        e.preventDefault();
+      }}
+      onPointerDown={() => onMouseDown()}
+      onPointerUp={() => onMouseLeave()}
+    >
+      {icon}
+    </button>
+  );
+}

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

@@ -0,0 +1,36 @@
+import { BiDownArrow } from "@react-icons/all-files/bi/BiDownArrow";
+import { BiLeftArrow } from "@react-icons/all-files/bi/BiLeftArrow";
+import { BiRightArrow } from "@react-icons/all-files/bi/BiRightArrow";
+import { BiUpArrow } from "@react-icons/all-files/bi/BiUpArrow";
+import GameBoyButton, { gameBoyButtonType } from "./GameBoyButton";
+import * as style from "./style.css";
+
+export const GameBoyDirections = [
+  {
+    tag: "up",
+    value: "forward",
+    icon: <BiUpArrow />,
+  },
+  { tag: "down", value: "backward", icon: <BiDownArrow /> },
+  { tag: "left", value: "leftward", icon: <BiLeftArrow /> },
+  { tag: "right", value: "rightward", icon: <BiRightArrow /> },
+];
+
+export default function GameBoy() {
+  return (
+    <div className={style.gameBoy}>
+      <div className={style.gameBoyInner}>
+        {GameBoyDirections.map((item: gameBoyButtonType, key: number) => {
+          return (
+            <GameBoyButton
+              key={key}
+              tag={item.tag}
+              value={item.value}
+              icon={item.icon}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,78 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import {
+  fixed,
+  flex,
+  flex_relative,
+  glass,
+  grid,
+} from "../../../styles/recipe/index.css";
+import { vars } from "../../../styles/theme.css";
+
+export const gameBoy = style([
+  fixed({
+    south: true,
+  }),
+  flex({
+    column: "6",
+  }),
+  {
+    width: "100%",
+  },
+]);
+
+export const gameBoyInner = style([
+  grid({
+    row: "center",
+  }),
+  {
+    margin: "1rem",
+    padding: "1rem",
+    borderRadius: "50%",
+    gridTemplateColumns: "1fr 1fr 1fr",
+    gridTemplateRows: "1fr 1fr 1fr",
+    background: "rgba(0, 0, 0, 0.5)",
+    boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+  },
+]);
+
+export const gameBoyButtonRecipe = recipe({
+  base: [
+    flex_relative({}),
+    glass({}),
+    {
+      all: "unset",
+      width: "3rem",
+      height: "3rem",
+      margin: "0.3rem",
+      borderRadius: "50%",
+      background: vars.gradient.green,
+      boxShadow: "0 0 10px #78ffd6",
+      fontSize: "1.6rem",
+      color: "black",
+      textShadow: "0 0 10px black",
+      cursor: "pointer",
+      transition: "all 0.3s ease-in",
+    },
+  ],
+  variants: {
+    tag: {
+      up: {
+        gridRow: "1/2",
+        gridColumn: "2/3",
+      },
+      left: {
+        gridRow: "2/3",
+        gridColumn: "1/2",
+      },
+      down: {
+        gridRow: "3/4",
+        gridColumn: "2/3",
+      },
+      right: {
+        gridRow: "2/3",
+        gridColumn: "3/4",
+      },
+    },
+  },
+});

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

@@ -0,0 +1,31 @@
+import { usePushKey } from "../../stores/control";
+import * as style from "./style.css";
+
+export default function GamePadButton({ value }: { value: string }) {
+  const { pushKey } = usePushKey();
+
+  const onMouseDown = () => {
+    pushKey(value, true);
+  };
+
+  const onMouseLeave = () => {
+    pushKey(value, false);
+  };
+
+  return (
+    <button
+      className={`${style.gamePadButtonRecipe}`}
+      onMouseDown={() => onMouseDown()}
+      onMouseUp={() => onMouseLeave()}
+      onMouseLeave={() => onMouseLeave()}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        onMouseLeave();
+      }}
+      onPointerDown={() => onMouseDown()}
+      onPointerUp={() => onMouseLeave()}
+    >
+      {value}
+    </button>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { BiDownArrow } from "@react-icons/all-files/bi/BiDownArrow";
+import { BiLeftArrow } from "@react-icons/all-files/bi/BiLeftArrow";
+import { BiRightArrow } from "@react-icons/all-files/bi/BiRightArrow";
+import { BiUpArrow } from "@react-icons/all-files/bi/BiUpArrow";
+import { useContext } from "react";
+import { GaesupWorldContext } from "../../stores/context/gaesupworld";
+
+type gameBoyDirectionType = {
+  tag: string;
+  value: string;
+  icon: JSX.Element;
+};
+
+export const GameBoyDirections = [
+  {
+    tag: "up",
+    value: "forward",
+    icon: <BiUpArrow />,
+  },
+  { tag: "down", value: "backward", icon: <BiDownArrow /> },
+  { tag: "left", value: "leftward", icon: <BiLeftArrow /> },
+  { tag: "right", value: "rightward", icon: <BiRightArrow /> },
+];
+
+export default function GamePad() {
+  const { control } = useContext(GaesupWorldContext);
+  const { mode } = useContext(GaesupWorldContext);
+  const GamePadDirections = Object.keys(control)
+    .map((key) => {
+      if (
+        key !== "forward" &&
+        key !== "backward" &&
+        key !== "leftward" &&
+        key !== "rightward"
+      )
+        return {
+          tag: key,
+          value: key,
+        };
+    })
+    .filter((item) => item !== undefined)
+    .filter(
+      (item: gameBoyDirectionType) =>
+        !(item.tag === "run" && mode.controller === "joystick")
+    );
+
+  return (
+    <></>
+    // <div className={style.gamePad}>
+    //   {GamePadDirections.map((item: gameBoyDirectionType, key: number) => {
+    //     return <GamePadButton key={key} value={item.value} />;
+    //   })}
+    // </div>
+  );
+}