gaesup-world 0.0.782 → 0.1.0

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 jigglypop
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -179,22 +179,291 @@ This is the airplane control in Gaesup World. Characters can board the airplane.
 
 ---
 
-## Tools
+# Tools
 
-#### [Tools](#tools)
+- 개숲월드에서 캐릭터 컨트롤을 도와주는 다양한 도구들입니다.
 
-#### [joystick](#joystick)
+#### 1) [joystick](#joystick)
 
-#### [keyboardtooltip](#keyboard tooltip)
+#### 2) [keyboardtooltip](#keyBoardTooltip)
 
 #### [minimap](#minimap)
 
 #### [gameboy](#gameboy)
 
-## joystick
+1. JoyStick
 
-## keyboard tooltip
+- This component provides a virtual joystick interface. It is recommended for use in mobile environments.
 
-## minimap
+> Caution! Due to position fluctuation in mobile environments, it is recommended to use the scrollBlock option of GaesupWorld.
 
-## gameboy
+### (2) Features
+
+Joystick Interface for Mobile and Other Environments: Provides a joystick interface in environments like mobile.
+Custom Appearance: Receives joyStickBallStyle and joyStickStyle properties for styling the joystick and its ball.
+Responsive and Interactive: Supports mouse and mobile touch events to cater to various devices.
+
+### (3) Props
+
+joyStickBallStyle: Style of the joystick ball (React.CSSProperties object).
+joyStickStyle: Style of the joystick container (React.CSSProperties object).
+
+### (4) How To Use
+
+- Include the JoyStick component in your `GaesupWorld` component tree.
+
+> It is imperative to use it inside the GaesupWorld component
+
+- The component responds to mouse and touch inputs to control movement.
+
+- (Optional) Customize the necessary style using joyStickBallStyle and joyStickStyle.
+
+### (5) Example
+
+```jsx
+const MyComponent = () => {
+  // 커스텀 스타일 정의
+  const joyStickStyle = {
+    /* 여기에 조이스틱 컨테이너 스타일을 정의하세요 */
+  };
+  const joyStickBallStyle = {
+    /* 여기에 조이스틱 공의 스타일을 정의하세요 */
+  };
+
+  return (
+    <JoyStick
+      joyStickStyle={joyStickStyle}
+      joyStickBallStyle={joyStickBallStyle}
+    />
+  );
+};
+```
+
+## 2) keyBoardTooltip
+
+### (1) 개요
+
+- 키보드 컨트롤러 인터페이스를 시각적으로 표시하기 위해 만든 컴포넌트입니다. 키보드의 각 키와 연결된 액션을 시각적으로 나타냅니다.
+
+### (2) 특징
+
+- **키 배열 시각화** : 키보드의 모든 키를 배열 형태로 시각화합니다.
+- **애니메이션 상태 반영** : 현재 활성화된 키와 연관된 액션을 다른 스타일로 표시하여 사용자에게 피드백을 제공합니다.
+- **커스텀 스타일링** : 키 캡의 스타일을 사용자 정의할 수 있도록 다양한 스타일링 속성을 제공합니다.
+
+### (3) How To Use
+
+1. `KeyBoardToolTip` 컴포넌트를 `GaesupWorld` 컴포넌트에 포함시킵니다.
+2. mode의 `control`는 `keyboard` 로 정의합니다.
+3. 컴포넌트는 `KeyBoardAll` 상수에 따라 키보드의 각 키를 시각화하고, 현재 활성화된 키에 대해 다른 스타일을 적용합니다.
+4. (선택) 필요한 스타일을 `keyBoardToolTipInnerStyle`, `selectedKeyCapStyle`, `notSelectedkeyCapStyle`, `keyCapStyle` 속성을 통해 전달합니다.
+
+### (5) Example
+
+```jsx
+import { KeyBoardToolTip } from "./KeyBoardToolTip";
+import { GaesupWorldContext } from "../../world/context";
+
+const MyComponent = () => {
+  const keyBoardToolTipInnerStyle = {
+    /* ... */
+  };
+  const selectedKeyCapStyle = {
+    /* ... */
+  };
+  const notSelectedkeyCapStyle = {
+    /* ... */
+  };
+  const keyCapStyle = {
+    /* ... */
+  };
+
+  return (
+    <GaesupWorld>
+      {/* ... */}
+      <KeyBoardToolTip
+        keyBoardToolTipInnerStyle={keyBoardToolTipInnerStyle}
+        selectedKeyCapStyle={selectedKeyCapStyle}
+        notSelectedkeyCapStyle={notSelectedkeyCapStyle}
+        keyCapStyle={keyCapStyle}
+      />
+      {/* ... */}
+    </GaesupWorld>
+  );
+};
+```
+
+## 3) minimap
+
+### (1) Info
+
+- 3D 월드 내에서 사용자의 위치와 주변 환경을 작은 지도 형태로 보여주는 리액트 컴포넌트입니다. 이 컴포넌트는 `GaesupWorldContext`를 활용하여 사용자의 현재 상태와 모드에 따라 다르게 렌더링됩니다.
+
+### (2) 특징
+
+- **동적 스케일 조절**: 사용자가 지도의 크기를 동적으로 조절할 수 있습니다.
+- **방향 표시**: 동(East), 서(West), 남(South), 북(North) 방향을 시각적으로 표시합니다.
+- **커스텀 스타일링**: 미니맵 및 그 내부 요소들의 스타일을 사용자 정의할 수 있습니다.
+- **마우스 휠 지원**: 마우스 휠을 사용하여 미니맵의 스케일을 조절할 수 있습니다.
+
+### (3) 사용 방법
+
+1. `MiniMap` 컴포넌트를 컴포넌트 트리에 포함시킵니다.
+2. 필요한 스타일을 `minimapStyle`, `innerStyle`, `textStyle`, `objectStyle`, `avatarStyle`, `scaleStyle`, `directionStyle`, `plusMinusStyle` 속성을 통해 전달합니다.
+3. 컴포넌트는 현재 사용자의 위치와 방향에 따라 미니맵을 업데이트합니다.
+
+### (4) Example
+
+```jsx
+import { MiniMap } from "./MiniMap";
+
+const MyComponent = () => {
+  const minimapStyle = {
+    /* ... */
+  };
+  const innerStyle = {
+    /* ... */
+  };
+  // 다른 스타일 속성들도 정의
+
+  return (
+    <GaesupWorld>
+      {/* ... */}
+      <MiniMap
+        minimapStyle={minimapStyle}
+        innerStyle={innerStyle}
+        // 다른 스타일 속성들 전달
+      />
+      {/* ... */}
+    </GaesupWorld>
+  );
+};
+```
+
+## GameBoy
+
+## 개요
+
+- GameBoy 컨트롤러 인터페이스입니다. 게임 4방향 키처럼 사용할 수 있으며, 모바일에서 사용을 권장합니다.
+
+## 특징
+
+- **방향 버튼**: `GameBoyDirections` 배열을 사용하여 방향 입력 (앞으로, 뒤로, 왼쪽으로, 오른쪽으로)을 위한 버튼을 구현합니다.
+- **컨텍스트 인식 렌더링**: `GaesupWorldContext`에서 `mode.controller` 값에 따라 컴포넌트를 렌더링합니다.
+- **커스텀 스타일링**: 스타일링을 위한 `gameboyStyle` 및 `gameboyButtonStyle` 속성을 받습니다.
+
+## 사용 방법
+
+`GameBoy` 컴포넌트를 사용하기 위해:
+
+1. 컴포넌트 트리에 배치합니다.
+2. 필요한 스타일을 `gameboyStyle` 및 `gameboyButtonStyle` 속성을 통해 전달합니다.
+3. 컴포넌트는 `GameBoyDirections` 배열에 기반하여 버튼을 렌더링합니다.
+
+## 예제 코드
+
+```jsx
+import { GameBoy } from "./GameBoy";
+import { GaesupWorldContext } from "../../world/context";
+
+const MyComponent = () => {
+  // 커스텀 스타일 정의
+  const gameboyStyle = {
+    /* ... */
+  };
+  const gameboyButtonStyle = {
+    /* ... */
+  };
+
+  return (
+    <GameBoy
+      gameboyStyle={gameboyStyle}
+      gameboyButtonStyle={gameboyButtonStyle}
+    />
+  );
+};
+```
+
+## GamePad
+
+## 개요
+
+- 게임패드 컨트롤 인터페이스를 제공하는 커스터마이징 가능한 인터페이스입니다. 조이스틱과 GameBoy와 같은 다양한 컨트롤러 모드에 대응할 수 있는 범용성을 가지고 있습니다.
+
+## 특징
+
+- **동적 버튼 렌더링**: `GaesupWorldContext`의 `control` 객체에 기반하여 버튼을 생성합니다.
+- **범용적 사용**: 조이스틱 및 GameBoy와 같은 다양한 컨트롤러 모드와 호환됩니다.
+- **커스텀 스타일링**: `gamePadStyle` 및 `gamePadButtonStyle` 속성을 통해 커스텀 스타일링 가능.
+
+## 속성 (Props)
+
+- `gamePadStyle`: 게임패드 컨테이너의 스타일 (`React.CSSProperties` 객체).
+- `gamePadButtonStyle`: 개별 버튼의 스타일 (`React.CSSProperties` 객체).
+- `label`: 버튼에 대한 커스텀 라벨.
+
+## 사용 방법
+
+1. `GamePad` 컴포넌트를 컴포넌트 트리에 배치합니다.
+2. `gamePadStyle` 및 `gamePadButtonStyle`을 사용하여 외관을 커스터마이즈합니다.
+3. 컴포넌트는 컨트롤러 모드에 맞춰 적절한 버튼을 렌더링합니다.
+
+## 예제 코드
+
+```tsx
+import { GamePad } from "./GamePad";
+import { GaesupWorldContext } from "../../world/context";
+
+const MyComponent = () => {
+  const gamePadStyle = {
+    /* 여기에 커스텀 스타일을 정의하세요 */
+  };
+  const gamePadButtonStyle = {
+    /* 여기에 버튼의 커스텀 스타일을 정의하세요 */
+  };
+
+  return (
+    <GamePad
+      gamePadStyle={gamePadStyle}
+      gamePadButtonStyle={gamePadButtonStyle}
+    />
+  );
+};
+```
+
+## ZoomButton
+
+## 개요
+
+- 특정 위치로 카메라를 이동시키기 위한 버튼이고 카메라의 zoom 컨트롤을 주로 수행합니다. target에 특정 물체를 넣을 수도 있습니다.
+
+## 속성 (Props)
+
+- `position`: 카메라가 이동할 대상 위치 (`THREE.Vector3` 객체).
+- `children`: (선택사항) 버튼 내에 렌더링될 React 노드.
+- `target`: (선택사항) 카메라가 바라볼 대상 위치 (`THREE.Vector3` 객체).
+- `keepBlocking`: (선택사항) 카메라 이동 중 블로킹 상태를 유지할지 여부.
+- `zoomButtonStyle`: (선택사항) 버튼의 스타일 (`React.CSSProperties` 객체).
+
+## 사용 방법
+
+1. `ZoomButton` 컴포넌트를 원하는 위치에 배치합니다.
+2. `position` prop을 통해 카메라가 이동할 위치를 지정합니다.
+3. 버튼을 클릭하면 지정된 위치로 카메라가 이동합니다.
+
+## 예제 코드
+
+```tsx
+import { ZoomButton } from "./ZoomButton";
+import * as THREE from "three";
+
+const App = () => {
+  return (
+    <GaesupWorld>
+      {/* ... */}
+      <ZoomButton position={new THREE.Vector3(0, 0, 5)}>{children}</ZoomButton>
+      {/* ... */}
+    </GaesupWorld>
+  );
+};
+```

package/dist/gaesup/animation/actions.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from "react";
 import { Object3D, Object3DEventMap } from "three";
-import { animationTagType, groundRayType } from "../controller/type";
+import { groundRayType } from "../controller/type";
 export type playActionsType = {
     groundRay: groundRayType;
 };
@@ -11,15 +11,18 @@ export type playResultType = {
     actions: actionsType;
     ref: Ref<Object3D<Object3DEventMap>>;
 };
-export declare function usePlayActions(): {
+export declare function readyAnimation(): {
     resultRef: {
         character: playResultType;
         vehicle: playResultType;
         airplane: playResultType;
     };
-    play: (tag: keyof animationTagType) => void;
-    setAnimationName: (actions: actionsType) => void;
 };
 export default function playCharacterActions({ groundRay }: playActionsType): {
     ref: Ref<Object3D<Object3DEventMap>>;
+    resultRef: {
+        character: playResultType;
+        vehicle: playResultType;
+        airplane: playResultType;
+    };
 };

package/dist/gaesup/animation/actions.js

@@ -12,26 +12,49 @@ var __assign = (this && this.__assign) || function () {
 import { useAnimations, useKeyboardControls } from "@react-three/drei";
 import { useFrame } from "@react-three/fiber";
 import { useContext, useEffect } from "react";
+import { useGaesupAnimation } from "../hooks/useGaesupAnimation";
 import { GaesupWorldContext, GaesupWorldDispatchContext, } from "../world/context";
-export function usePlayActions() {
-    var _a = useContext(GaesupWorldContext), characterGltf = _a.characterGltf, vehicleGltf = _a.vehicleGltf, airplaneGltf = _a.airplaneGltf, animations = _a.animations;
+// 캐릭터 등록, 애니메이션 이름 설정, 애니메이션 실행
+export function readyAnimation() {
+    var _a = useContext(GaesupWorldContext), characterGltf = _a.characterGltf, vehicleGltf = _a.vehicleGltf, airplaneGltf = _a.airplaneGltf;
     var resultRef = {
         character: null,
         vehicle: null,
         airplane: null,
     };
-    if (characterGltf && characterGltf.animations) {
+    if (characterGltf && characterGltf.animations)
         resultRef.character = useAnimations(characterGltf.animations);
-    }
-    if (vehicleGltf && vehicleGltf.animations) {
+    if (vehicleGltf && vehicleGltf.animations)
         resultRef.vehicle = useAnimations(vehicleGltf.animations);
-    }
-    if (airplaneGltf && airplaneGltf.animations) {
+    if (airplaneGltf && airplaneGltf.animations)
         resultRef.airplane = useAnimations(airplaneGltf.animations);
-    }
+    return {
+        resultRef: resultRef,
+    };
+}
+export default function playCharacterActions(_a) {
+    var groundRay = _a.groundRay;
+    var _b = useContext(GaesupWorldContext), states = _b.states, activeState = _b.activeState, animations = _b.animations, mode = _b.mode, characterGltf = _b.characterGltf, vehicleGltf = _b.vehicleGltf, airplaneGltf = _b.airplaneGltf;
     var dispatch = useContext(GaesupWorldDispatchContext);
+    var control = useKeyboardControls()[1]();
+    var _c = useGaesupAnimation(), subscribeAll = _c.subscribeAll, notify = _c.notify, store = _c.store;
+    var resultRef = {
+        character: null,
+        vehicle: null,
+        airplane: null,
+    };
+    if (characterGltf && characterGltf.animations)
+        resultRef.character = useAnimations(characterGltf.animations);
+    if (vehicleGltf && vehicleGltf.animations)
+        resultRef.vehicle = useAnimations(vehicleGltf.animations);
+    if (airplaneGltf && airplaneGltf.animations)
+        resultRef.airplane = useAnimations(airplaneGltf.animations);
     var play = function (tag) {
         animations.current = tag;
+        var currentAnimation = store[tag];
+        if (currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.action) {
+            currentAnimation.action();
+        }
         dispatch({
             type: "update",
             payload: {
@@ -39,39 +62,46 @@ export function usePlayActions() {
             },
         });
     };
-    var setAnimationName = function (actions) {
-        animations.animationNames = Object.assign(animations.animationNames, Object.keys(actions).reduce(function (acc, cur) {
-            var _a;
-            return __assign(__assign({}, acc), (_a = {}, _a[cur] = cur, _a));
-        }, {}));
-        dispatch({
-            type: "update",
-            payload: {
-                animations: __assign({}, animations),
-            },
-        });
-    };
-    return { resultRef: resultRef, play: play, setAnimationName: setAnimationName };
-}
-export default function playCharacterActions(_a) {
-    var groundRay = _a.groundRay;
-    var _b = usePlayActions(), _c = _b.resultRef.character, actions = _c.actions, ref = _c.ref, play = _b.play, setAnimationName = _b.setAnimationName;
-    var _d = useContext(GaesupWorldContext), states = _d.states, activeState = _d.activeState, animations = _d.animations, mode = _d.mode;
-    var isNotMoving = states.isNotMoving, isMoving = states.isMoving, isJumping = states.isJumping, isRunning = states.isRunning, isAnimationOuter = states.isAnimationOuter, isOnTheGround = states.isOnTheGround;
-    var dispatch = useContext(GaesupWorldDispatchContext);
-    var control = useKeyboardControls()[1]();
-    var resetAni = function () { return play("idle"); };
-    var playIdle = function () { return play("idle"); };
-    var playWalk = function () { return play("walk"); };
-    var playRun = function () { return play("run"); };
-    var playJump = function () { return play("jump"); };
-    var playFall = function () { return play("fall"); };
-    var playRide = function () { return play("ride"); };
-    var playLanding = function () { return play("land"); };
+    var _d = resultRef.character, actions = _d.actions, ref = _d.ref;
+    // 초기 기본 애니메이션 등록
     useEffect(function () {
-        return function () {
-            resetAni();
-        };
+        subscribeAll([
+            {
+                tag: "walk",
+                condition: function () { return !states.isRunning && states.isMoving; },
+                action: function () { },
+                animationName: "walk",
+                key: "walk",
+            },
+            {
+                tag: "run",
+                condition: function () { return states.isRunning; },
+                action: function () { },
+                animationName: "run",
+                key: "run",
+            },
+            {
+                tag: "jump",
+                condition: function () { return states.isJumping; },
+                action: function () { },
+                animationName: "jump",
+                key: "jump",
+            },
+            {
+                tag: "fall",
+                condition: function () { return groundRay.hit === null && activeState.velocity.y < 0; },
+                action: function () { },
+                animationName: "fall",
+                key: "fall",
+            },
+            {
+                tag: "ride",
+                condition: function () { return states.isPush["keyR"]; },
+                action: function () { },
+                animationName: "ride",
+                key: "ride",
+            },
+        ]);
     }, []);
     useEffect(function () {
         animations.keyControl = control;
@@ -84,45 +114,17 @@ export default function playCharacterActions(_a) {
     }, [control]);
     useEffect(function () {
         var _a;
-        if (mode.type === "character") {
-            var action_1 = (_a = actions[animations.current]) === null || _a === void 0 ? void 0 : _a.reset().fadeIn(0.2).play();
-            setAnimationName(actions);
-            return function () {
-                action_1 === null || action_1 === void 0 ? void 0 : action_1.fadeOut(0.2);
-            };
-        }
+        var action = (_a = actions[animations.current]) === null || _a === void 0 ? void 0 : _a.reset().fadeIn(0.2).play();
+        return function () {
+            action === null || action === void 0 ? void 0 : action.fadeOut(0.2);
+        };
     }, [animations.current, mode.type]);
     useFrame(function () {
-        if (mode.type === "character") {
-            if (!isAnimationOuter) {
-                if (isJumping) {
-                    playJump();
-                }
-                else if (isNotMoving) {
-                    playIdle();
-                }
-                else if (isRunning) {
-                    playRun();
-                }
-                else if (isMoving) {
-                    playWalk();
-                }
-                // if (groundRay.hit) {
-                //   if (!isJumping && !isOnTheGround) {
-                //     if (groundRay.hit.toi < 5) {
-                //       playLanding();
-                //     } else {
-                //       playFall();
-                //     }
-                //   }
-                // }
-                // if (groundRay.hit === null && activeState.velocity.y < 0) {
-                //   playFall();
-                // }
-            }
-        }
+        var tag = notify();
+        play(tag);
     });
     return {
         ref: ref,
+        resultRef: resultRef,
     };
 }

package/dist/gaesup/camera/control/normal.js

@@ -6,6 +6,6 @@ export default function normal(prop) {
     var cameraPosition = activeState.position
         .clone()
         .add(V3(0, cameraOption.YDistance, cameraOption.XZDistance));
-    state.camera.position.lerp(cameraPosition, 0.9);
+    state.camera.position.lerp(cameraPosition, 1);
     state.camera.lookAt(activeState.position.clone());
 }

package/dist/gaesup/camera/control/orbit.d.ts

@@ -1,2 +1,4 @@
 import { cameraPropType } from "../../physics/type";
+import { activeStateType, cameraOptionType } from "../../world/context/type";
+export declare const makeCameraPosition: (activeState: activeStateType, cameraOption: cameraOptionType) => import("three").Vector3;
 export default function orbit(prop: cameraPropType): void;

package/dist/gaesup/camera/control/orbit.js

@@ -1,14 +1,18 @@
 import { quat } from "@react-three/rapier";
 import { V3 } from "../../utils/vector";
+export var makeCameraPosition = function (activeState, cameraOption) {
+    var XDistance = cameraOption.XDistance, YDistance = cameraOption.YDistance, ZDistance = cameraOption.ZDistance;
+    var cameraPosition = activeState.position.clone().add(V3(Math.sin(activeState.euler.y), 1, Math.cos(activeState.euler.y))
+        .normalize()
+        .clone()
+        .multiply(V3(-XDistance, YDistance, -ZDistance)));
+    return cameraPosition;
+};
 export default function orbit(prop) {
     var state = prop.state, _a = prop.worldContext, activeState = _a.activeState, cameraOption = _a.cameraOption;
     if (!state || !state.camera)
         return;
-    var cameraPosition = activeState.position.clone().add(V3(Math.sin(activeState.euler.y), 0, Math.cos(activeState.euler.y))
-        .normalize()
-        .clone()
-        .multiplyScalar(-cameraOption.XZDistance)
-        .add(V3(0, cameraOption.YDistance, 0)));
+    var cameraPosition = makeCameraPosition(activeState, cameraOption);
     state.camera.position.lerp(cameraPosition, 1);
     state.camera.quaternion.copy(activeState.quat
         .clone()