gaesup-world 0.9.58 → 0.9.59

package/README.md

@@ -731,17 +731,17 @@ The **Passive** component defines objects that do not require interaction, such
 
 ---
 
-#### JumpPortal
+#### teleport
 
 - **Description**: Represents a clickable portal that allows users to teleport to a specified location within the 3D world. Ideal for creating interactive teleportation points in your application.
 
 - **Props**:
 
-  | Prop Name         | Type          | Required | Description                                                 | Default Value |
-  | ----------------- | ------------- | -------- | ----------------------------------------------------------- | ------------- |
-  | `text`            | string        | Optional | The text to display on the portal.                          | `undefined`   |
-  | `position`        | THREE.Vector3 | Required | The target position to teleport to using a `THREE.Vector3`. | None          |
-  | `jumpPortalStyle` | CSSProperties | Optional | CSS styles for customizing the appearance of the portal.    | `undefined`   |
+  | Prop Name       | Type          | Required | Description                                                 | Default Value |
+  | --------------- | ------------- | -------- | ----------------------------------------------------------- | ------------- |
+  | `text`          | string        | Optional | The text to display on the portal.                          | `undefined`   |
+  | `position`      | THREE.Vector3 | Required | The target position to teleport to using a `THREE.Vector3`. | None          |
+  | `teleportStyle` | CSSProperties | Optional | CSS styles for customizing the appearance of the portal.    | `undefined`   |
 
 - **Usage Example**:
 
@@ -749,7 +749,7 @@ The **Passive** component defines objects that do not require interaction, such
   import React from 'react';
   import { Canvas } from '@react-three/fiber';
   import { Physics } from '@react-three/rapier';
-  import { GaesupWorld, JumpPortal } from '../../../src';
+  import { GaesupWorld, teleport } from '../../../src';
   import * as THREE from 'three';
 
   export default function App() {
@@ -764,10 +764,10 @@ The **Passive** component defines objects that do not require interaction, such
       >
         <Canvas>
           <Physics>
-            <JumpPortal
+            <teleport
               text="Teleport"
               position={new THREE.Vector3(10, 0, 5)}
-              jumpPortalStyle={{ backgroundColor: "blue", color: "white" }}
+              teleportStyle={{ backgroundColor: "blue", color: "white" }}
             />
             {/* Other components */}
           </Physics>
@@ -779,7 +779,7 @@ The **Passive** component defines objects that do not require interaction, such
 
 - **Key Features**:
   - **Teleport Functionality**: Moves the camera and character to the specified position upon clicking the portal.
-  - **Custom Styling**: Customize the portal's appearance using `jumpPortalStyle`.
+  - **Custom Styling**: Customize the portal's appearance using `teleportStyle`.
   - **Text Display**: Displays text on the portal to guide users.
 
 ---
@@ -1543,17 +1543,17 @@ export default function App() {
 
 ---
 
-#### JumpPortal
+#### teleport
 
 - **설명**: 클릭 가능한 포탈을 통해 사용자를 지정된 위치로 텔레포트할 수 있는 컴포넌트입니다. 인터랙티브한 텔레포테이션 포인트를 생성하는 데 사용됩니다.
   
 - **Props**:
 
-  | Prop Name         | Type          | Required | Description                                    | Default Value |
-  | ----------------- | ------------- | -------- | ---------------------------------------------- | ------------- |
-  | `text`            | string        | Optional | 포탈에 표시할 텍스트                           | `undefined`   |
-  | `position`        | THREE.Vector3 | Required | 텔레포트할 목표 위치                           | None          |
-  | `jumpPortalStyle` | CSSProperties | Optional | 포탈의 외관을 커스터마이징하기 위한 CSS 스타일 | `undefined`   |
+  | Prop Name       | Type          | Required | Description                                    | Default Value |
+  | --------------- | ------------- | -------- | ---------------------------------------------- | ------------- |
+  | `text`          | string        | Optional | 포탈에 표시할 텍스트                           | `undefined`   |
+  | `position`      | THREE.Vector3 | Required | 텔레포트할 목표 위치                           | None          |
+  | `teleportStyle` | CSSProperties | Optional | 포탈의 외관을 커스터마이징하기 위한 CSS 스타일 | `undefined`   |
 
 - **사용 예제**:
 
@@ -1561,7 +1561,7 @@ export default function App() {
   import React from 'react';
   import { Canvas } from '@react-three/fiber';
   import { Physics } from '@react-three/rapier';
-  import { GaesupWorld, JumpPortal } from '../../../src';
+  import { GaesupWorld, teleport } from '../../../src';
   import * as THREE from 'three';
 
   export default function App() {
@@ -1576,10 +1576,10 @@ export default function App() {
       >
         <Canvas>
           <Physics>
-            <JumpPortal
+            <teleport
               text="Teleport"
               position={new THREE.Vector3(10, 0, 5)}
-              jumpPortalStyle={{ backgroundColor: "blue", color: "white" }}
+              teleportStyle={{ backgroundColor: "blue", color: "white" }}
             />
             {/* 다른 컴포넌트 */}
           </Physics>
@@ -1591,7 +1591,7 @@ export default function App() {
 
 - **주요 기능**:
   - **텔레포트 기능**: 버튼 클릭 시 카메라와 캐릭터를 지정된 위치로 이동시킵니다.
-  - **커스터마이징**: `jumpPortalStyle`을 통해 포탈의 외관을 자유롭게 커스터마이징할 수 있습니다.
+  - **커스터마이징**: `teleportStyle`을 통해 포탈의 외관을 자유롭게 커스터마이징할 수 있습니다.
   - **텍스트 표시**: 포탈에 표시할 텍스트를 통해 사용자에게 명확한 안내를 제공합니다.
 
 ---

package/index.py

@@ -0,0 +1,81 @@
+import os
+
+def get_language(extension):
+    """
+    파일 확장자에 따라 코드 블록의 언어를 반환합니다.
+    """
+    mapping = {
+        '.ts': 'typescript',
+        '.tsx': 'tsx',
+        '.css.ts': 'typescript',  # CSS-in-JS 로직을 고려하여 'typescript'로 지정
+    }
+    return mapping.get(extension, '')
+
+def extract_code_separated(folder_path, output_md, supported_extensions):
+    """
+    지정된 폴더 내의 특정 확장자를 가진 파일들을 확장자별로 그룹화하여 Markdown 파일로 저장합니다.
+    """
+    # 확장자별 파일 목록 초기화
+    files_by_extension = {ext: [] for ext in supported_extensions}
+    
+    # 폴더를 재귀적으로 탐색하여 파일 분류
+    for root, dirs, files in os.walk(folder_path):
+        for file in files:
+            for ext in supported_extensions:
+                if file.endswith(ext):
+                    relative_path = os.path.relpath(os.path.join(root, file), folder_path)
+                    files_by_extension[ext].append(relative_path)
+                    break
+    
+    # Markdown 파일 열기
+    with open(output_md, 'w', encoding='utf-8') as md_file:
+        md_file.write('# 코드 추출 결과\n\n')
+        
+        for ext in supported_extensions:
+            if files_by_extension[ext]:
+                # 섹션 제목 작성
+                if ext == '.ts':
+                    section_title = '## TypeScript Files (.ts)'
+                elif ext == '.tsx':
+                    section_title = '## TypeScript React Files (.tsx)'
+                elif ext == '.css.ts':
+                    section_title = '## CSS TypeScript Files (.css.ts)'
+                else:
+                    section_title = f'## {ext} Files'
+                
+                md_file.write(f'{section_title}\n\n')
+                
+                for relative_path in files_by_extension[ext]:
+                    file_path = os.path.join(folder_path, relative_path)
+                    language = get_language(ext)
+                    
+                    # 파일 내용 읽기
+                    try:
+                        with open(file_path, 'r', encoding='utf-8') as f:
+                            code = f.read()
+                    except Exception as e:
+                        print(f"파일을 읽는 중 오류 발생: {file_path}\n오류 내용: {e}")
+                        continue
+                    
+                    # 파일명을 소제목으로 추가
+                    md_file.write(f'### {relative_path}\n\n')
+                    
+                    # 코드 블록 추가
+                    md_file.write(f'```{language}\n{code}\n```\n\n')
+    
+    print(f"코드 추출이 완료되었습니다. 출력 파일: {output_md}")
+
+if __name__ == "__main__":
+    # 파일 확장자를 리스트로 지정
+    supported_extensions = [".css.ts"]  # 필요에 따라 확장자 추가
+    
+    # 폴더 경로와 출력 Markdown 파일 경로 설정
+    folder_path = './src'        # 코드 추출할 폴더 경로
+    output_md = './output.md'    # 출력할 Markdown 파일 경로
+    
+    # 폴더 존재 여부 확인
+    if not os.path.isdir(folder_path):
+        print(f"에러: 지정된 폴더가 존재하지 않습니다: {folder_path}")
+        exit(1)
+    
+    extract_code_separated(folder_path, output_md, supported_extensions)

package/index.ts

@@ -5,9 +5,6 @@ export {
   GaesupController,
   GaesupWorld,
   GamePad,
-  JoyStick,
-  JumpPortal,
-  KeyBoardToolTip,
   MiniMap,
   PassiveAirplane,
   PassiveCharacter,
@@ -17,6 +14,7 @@ export {
   V3,
   V30,
   V31,
+  teleport,
   useClicker,
   useGaesupAnimation,
   useGaesupController,

package/{dist/gaesup/tools/minimap/style.css.ts → output.md}

@@ -1,3 +1,103 @@
+# 코드 추출 결과
+
+## CSS TypeScript Files (.css.ts)
+
+### gaesup/tools/gamepad/style.css.ts
+
+```typescript
+// style.css.ts
+import { globalStyle, style } from "@vanilla-extract/css";
+
+export const gamePad = style({
+  display: "grid",
+  alignItems: "center",
+  justifyContent: "center",
+  gridTemplateColumns: "repeat(3, 1fr)",
+  gridTemplateRows: "repeat(3, 1fr)",
+});
+
+export const padButton = style({
+  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",
+  selectors: {
+    "&: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,
+    },
+  },
+});
+
+export const isClicked = style({
+  background:
+    "radial-gradient(circle at center, rgba(245, 177, 97, 1) 0.4%, rgba(236, 54, 110, 1) 100.2%)",
+  boxShadow: "0 0 1rem rgba(245, 177, 97, 1)",
+  color: "black",
+  transition: "all 0.3s ease-in",
+  selectors: {
+    "&:hover": {
+      boxShadow: "0 0 2rem rgba(245, 177, 97, 1)",
+    },
+  },
+});
+
+// 사용자 선택 방지 글로벌 스타일
+globalStyle(`${gamePad} *`, {
+  WebkitTouchCallout: "none",
+  WebkitUserSelect: "none",
+  MozUserSelect: "none",
+  msUserSelect: "none",
+  userSelect: "none",
+});
+
+```
+
+### gaesup/tools/teleport/style.css.ts
+
+```typescript
+import { style } from "@vanilla-extract/css";
+
+export const teleport = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  textAlign: "center",
+  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",
+});
+
+```
+
+### gaesup/tools/minimap/style.css.ts
+
+```typescript
 // style.css.ts
 import { globalFontFace, keyframes, style } from "@vanilla-extract/css";
 
@@ -222,3 +322,6 @@ export const north = style([
     left: "50%",
   },
 ]);
+
+```
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gaesup-world",
-  "version": "0.9.58",
+  "version": "0.9.59",
   "type": "module",
   "main": "dist/index.ts",
   "types": "dist/index.d.ts",

package/yarnrc.yml

@@ -1 +1 @@
-nodeLinker: node-modules
+nodeLinker: pnp

package/dist/gaesup/animation/actions.ts

@@ -1,161 +0,0 @@
-import { useFrame } from "@react-three/fiber";
-import { Ref, useContext, useEffect } from "react";
-import * as THREE from "three";
-import {
-  AnimationAction,
-  AnimationClip,
-  AnimationMixer,
-  Object3D,
-  Object3DEventMap,
-} from "three";
-import { animationTagType, groundRayType } from "../controller/type";
-import { useGaesupAnimation } from "../hooks/useGaesupAnimation";
-import {
-  GaesupWorldContext,
-  GaesupWorldDispatchContext,
-} from "../world/context";
-
-export type Api<T extends AnimationClip> = {
-  ref: React.MutableRefObject<Object3D | undefined | null>;
-  clips: AnimationClip[];
-  mixer: AnimationMixer;
-  names: T["name"][];
-  actions: {
-    [key in T["name"]]: AnimationAction | null;
-  };
-};
-
-export type playActionsType = {
-  type: "character" | "vehicle" | "airplane";
-  currentAnimation?: string;
-  actions: actionsType;
-  animationRef: Ref<Object3D<Object3DEventMap>>;
-  isActive: boolean;
-};
-
-export type subscribeActionsType = {
-  type: "character" | "vehicle" | "airplane";
-  groundRay: groundRayType;
-  animations: AnimationClip[];
-};
-
-export type actionsType = {
-  [x: string]: THREE.AnimationAction | null;
-};
-
-export type playResultType = {
-  actions: actionsType;
-  ref: Ref<Object3D<Object3DEventMap>>;
-};
-
-export function subscribeActions({ type }: subscribeActionsType) {
-  const { states } = useContext(GaesupWorldContext);
-  const { subscribeAll } = useGaesupAnimation({ type });
-  // 초기 기본 애니메이션 등록
-  useEffect(() => {
-    subscribeAll([
-      {
-        tag: "walk",
-        condition: () => !states.isRunning && states.isMoving,
-        action: () => {},
-        animationName: "walk",
-        key: "walk",
-      },
-      {
-        tag: "run",
-        condition: () => states.isRunning,
-        action: () => {},
-        animationName: "run",
-        key: "run",
-      },
-      {
-        tag: "jump",
-        condition: () => states.isJumping,
-        action: () => {},
-        animationName: "jump",
-        key: "jump",
-      },
-
-      {
-        tag: "ride",
-        condition: () => states.isPush["keyR"],
-        action: () => {},
-        animationName: "ride",
-        key: "ride",
-      },
-      {
-        tag: "land",
-        condition: () => states.isLanding,
-        action: () => {},
-        animationName: "land",
-        key: "land",
-      },
-      {
-        tag: "fall",
-        condition: () => states.isFalling,
-        action: () => {},
-        animationName: "fall",
-        key: "fall",
-      },
-    ]);
-  }, []);
-}
-
-export default function playActions({
-  type,
-  actions,
-  animationRef,
-  currentAnimation,
-  isActive,
-}: playActionsType) {
-  const { mode, animationState, block } = useContext(GaesupWorldContext);
-  const dispatch = useContext(GaesupWorldDispatchContext);
-  const { notify, store } = useGaesupAnimation({ type });
-
-  if (isActive) {
-    currentAnimation = animationState?.[type]?.current;
-  }
-
-  const play = (tag: keyof animationTagType) => {
-    animationState[type].current = tag;
-    const currentAnimation = store[tag];
-    if (currentAnimation?.action) {
-      currentAnimation.action();
-    }
-    dispatch({
-      type: "update",
-      payload: {
-        animationState: {
-          ...animationState,
-        },
-      },
-    });
-  };
-
-  useEffect(() => {
-    let animation = "idle";
-    if (block.animation) {
-      animation = "idle";
-    } else if (currentAnimation) {
-      animation = currentAnimation;
-    } else if (animationState[type].current) {
-      animation = animationState[type].current;
-    }
-    const action = actions[animation]?.reset().fadeIn(0.2).play();
-    return () => {
-      action?.fadeOut(0.2);
-    };
-  }, [currentAnimation, mode.type, block.animation, type]);
-
-  useFrame(() => {
-    if (isActive) {
-      const tag = notify() as keyof animationTagType;
-      play(tag);
-    }
-  });
-
-  return {
-    animationRef,
-    currentAnimation: animationState?.[type]?.current,
-  };
-}

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

@@ -1,27 +0,0 @@
-import { cameraPropType } from "../../physics/type";
-import { V3 } from "../../utils/vector";
-import { activeStateType, cameraOptionType } from "../../world/context/type";
-
-export const makeNormalCameraPosition = (
-  activeState: activeStateType,
-  cameraOption: cameraOptionType
-) => {
-  const { XDistance, YDistance, ZDistance } = cameraOption;
-  const cameraPosition = activeState.position
-    .clone()
-    .add(V3(XDistance, YDistance, ZDistance));
-  return cameraPosition;
-};
-export default function normal(prop: cameraPropType) {
-  const {
-    state,
-    worldContext: { cameraOption },
-    controllerOptions: { lerp },
-  } = prop;
-  if (!state || !state.camera) return;
-  state.camera.position.lerp(
-    cameraOption.position.clone(),
-    lerp.cameraPosition
-  );
-  state.camera.lookAt(cameraOption.target);
-}

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

@@ -1,37 +0,0 @@
-import { quat } from "@react-three/rapier";
-import { cameraPropType } from "../../physics/type";
-import { V3 } from "../../utils/vector";
-import { activeStateType, cameraOptionType } from "../../world/context/type";
-
-export const makeOrbitCameraPosition = (
-  activeState: activeStateType,
-  cameraOption: cameraOptionType
-) => {
-  const { XDistance, YDistance, ZDistance } = cameraOption;
-  const 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: cameraPropType) {
-  const {
-    state,
-    worldContext: { activeState, cameraOption },
-    controllerOptions: { lerp },
-  } = prop;
-
-  if (!state || !state.camera) return;
-  const cameraPosition = makeOrbitCameraPosition(activeState, cameraOption);
-  state.camera.position.lerp(cameraPosition.clone(), lerp.cameraTurn);
-  state.camera.quaternion.copy(
-    activeState.quat
-      .clone()
-      .multiply(quat().setFromAxisAngle(V3(0, 1, 0), Math.PI))
-  );
-  state.camera.rotation.copy(activeState.euler);
-  state.camera.lookAt(activeState.position.clone());
-}

package/dist/gaesup/camera/index.tsx

@@ -1,29 +0,0 @@
-import { useFrame } from "@react-three/fiber";
-import { cameraPropType } from "../physics/type";
-import normal, { makeNormalCameraPosition } from "./control/normal";
-import orbit from "./control/orbit";
-
-export default function Camera(prop: cameraPropType) {
-  useFrame((state) => {
-    prop.state = state;
-    if (!prop.worldContext.block.camera) {
-      if (prop.worldContext.mode.control === "orbit") {
-        orbit(prop);
-      } else if (prop.worldContext.mode.control === "normal") {
-        normal(prop);
-      }
-    }
-  });
-
-  // 포커스가 아닐 때 카메라 activeStae 따라가기
-  useFrame(() => {
-    if (!prop.worldContext.cameraOption.focus) {
-      prop.worldContext.cameraOption.target =
-        prop.worldContext.activeState.position;
-      prop.worldContext.cameraOption.position = makeNormalCameraPosition(
-        prop.worldContext.activeState,
-        prop.worldContext.cameraOption
-      );
-    }
-  });
-}

package/dist/gaesup/camera/type.ts

@@ -1,14 +0,0 @@
-import * as THREE from "three";
-import {} from "three-stdlib";
-
-export type cameraRayType = {
-  origin: THREE.Vector3;
-  hit: THREE.Raycaster;
-  rayCast: THREE.Raycaster | null;
-  length: number;
-  dir: THREE.Vector3;
-  position: THREE.Vector3;
-  intersects: THREE.Intersection<THREE.Mesh>[];
-  detected: THREE.Intersection<THREE.Mesh>[];
-  intersectObjectMap: { [uuid: string]: THREE.Mesh };
-};

package/dist/gaesup/component/active/airplane/index.tsx

@@ -1,17 +0,0 @@
-import { AirplaneInnerRef } from "../../inner/airplane";
-import { activeAirplaneInnerType } from "./type";
-
-export function AirplaneRef(props: activeAirplaneInnerType) {
-  return (
-    <AirplaneInnerRef
-      name={"airplane"}
-      isActive={true}
-      currentAnimation={"idle"}
-      componentType={"airplane"}
-      ridingUrl={props.ridingUrl}
-      {...props}
-    >
-      {props.children}
-    </AirplaneInnerRef>
-  );
-}

package/dist/gaesup/component/active/airplane/type.ts

@@ -1,4 +0,0 @@
-import { passiveAirplanePropsType } from "../../passive/airplane/type";
-import { innerRefType } from "../../passive/type";
-
-export type activeAirplaneInnerType = passiveAirplanePropsType & innerRefType;

package/dist/gaesup/component/active/character/index.tsx

@@ -1,35 +0,0 @@
-import { controllerInnerType, refsType } from "../../../controller/type";
-import { urlsType } from "../../../world/context/type";
-import { CharacterInnerRef } from "../../inner/character";
-
-export function CharacterRef({
-  children,
-  props,
-  refs,
-  urls,
-}: {
-  children: React.ReactNode;
-  props: controllerInnerType;
-  refs: refsType;
-  urls: urlsType;
-}) {
-  return (
-    <CharacterInnerRef
-      url={urls.characterUrl}
-      isActive={true}
-      componentType="character"
-      rigidbodyType={"dynamic"}
-      controllerOptions={props.controllerOptions}
-      groundRay={props.groundRay}
-      onAnimate={props.onAnimate}
-      onFrame={props.onFrame}
-      onReady={props.onReady}
-      onDestory={props.onDestory}
-      rigidBodyProps={props.rigidBodyProps}
-      parts={props.parts}
-      {...refs}
-    >
-      {children}
-    </CharacterInnerRef>
-  );
-}

package/dist/gaesup/component/active/character/type.ts

@@ -1,13 +0,0 @@
-import { RigidBodyTypeString } from "@react-three/rapier";
-import * as THREE from "three";
-import { controllerOptionsType } from "../../../controller/type";
-
-export type activeCharacterPropsType = {
-  characterUrl: string;
-  position?: THREE.Vector3;
-  rotation?: THREE.Euler;
-  controllerOptions?: controllerOptionsType;
-  currentAnimation?: string;
-  children?: React.ReactNode;
-  rigidbodyType?: RigidBodyTypeString;
-};