gaesup-world 0.0.68 → 0.0.652

package/README.md

@@ -1,13 +1,9 @@
 # Gaesup World
 
-[![Version](https://img.shields.io/npm/v/gaesup-world?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/gaesup-world)
-[![Downloads](https://img.shields.io/npm/dt/gaesup-world.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/gaesup-world)
-
 Web 3D Character Controller and World Platform Library
 
-[![main](https://github.com/jigglypop/gaesup-world/blob/master/image/main_image.png)](https://codesandbox.io/p/github/jigglypop/gaesup-world-examples/master?workspaceId=e8ae627a-af61-415e-aa21-1fe5af422c86)
-
-> click and watch code sandbox example!
+[![Version](https://img.shields.io/npm/v/gaesup-world?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/zustand)
+[![Downloads](https://img.shields.io/npm/dt/gaesup-world.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/gaesup-world)
 
 ---
 
@@ -15,59 +11,6 @@ Web 3D Character Controller and World Platform Library
 
 Gaesup World is a library that uses @react/three-fiber, @react/three-drei, and rapier to provide control tools for characters, airplanes, cars, and more in a web 3D environment. This controller is designed to easily manage character movement, animation, and interaction. It allows for easy manipulation of characters or vehicles in a virtual world, and is also equipped with utilities like minimaps and joysticks.
 
-## How to start
-
-```tsx
-"use client";
-
-import { Environment, KeyboardControls } from "@react-three/drei";
-import { Canvas } from "@react-three/fiber";
-import { Physics, RigidBody } from "@react-three/rapier";
-
-import { GaesupController, GaesupWorld } from "gaesup-world";
-
-export const keyboardMap = [
-  { name: "forward", keys: ["ArrowUp", "KeyW"] },
-  { name: "backward", keys: ["ArrowDown", "KeyS"] },
-  { name: "leftward", keys: ["ArrowLeft", "KeyA"] },
-  { name: "rightward", keys: ["ArrowRight", "KeyD"] },
-  { name: "space", keys: ["Space"] },
-  { name: "shift", keys: ["Shift"] },
-  { name: "keyZ", keys: ["KeyZ"] },
-];
-
-export default function App() {
-  const CHARACTER_URL = "./gaesupyee.glb";
-
-  return (
-    <GaesupWorld
-      url={{
-        characterUrl: CHARACTER_URL,
-      }}
-    >
-      <Canvas shadows style={{ width: "100dvw", height: "100dvh" }}>
-        <Environment background preset="sunset" blur={0.8} />
-        <Physics>
-          <KeyboardControls map={keyboardMap}>
-            <GaesupController
-              groupProps={{
-                rotation: [0, Math.PI, 0],
-              }}
-            />
-          </KeyboardControls>
-          <RigidBody type="fixed">
-            <mesh receiveShadow position={[0, 0, 0]}>
-              <boxGeometry args={[300, 5, 300]} />
-              <meshStandardMaterial />
-            </mesh>
-          </RigidBody>
-        </Physics>
-      </Canvas>
-    </GaesupWorld>
-  );
-}
-```
-
 ### Features
 
 - 3D character control based on React Three Fiber.

package/dist/gaesup/tools/gameboy/index.js

@@ -15,7 +15,7 @@ export var GameBoyDirections = [
 ];
 export default function GameBoy() {
     var _a = useContext(GaesupToolsContext).gameboy, gameboyStyle = _a.gameboyStyle, gameboyInnerStyle = _a.gameboyInnerStyle;
-    return (_jsx("div", { className: style.gameBoy, children: _jsx("div", { className: style.gameBoyInner, children: GameBoyDirections.map(function (item, key) {
+    return (_jsx("div", { className: style.gameBoy, style: gameboyStyle, children: _jsx("div", { className: style.gameBoyInner, style: gameboyInnerStyle, children: GameBoyDirections.map(function (item, key) {
                 return (_jsx(GameBoyButton, { tag: item.tag, value: item.value, icon: item.icon }, key));
             }) }) }));
 }

package/dist/gaesup/tools/gameboy/style.css.js

@@ -18,7 +18,6 @@ export var gameBoyInner = style([
         row: "center",
     }),
     {
-        display: "grid",
         margin: "5rem",
         padding: "1rem",
         borderRadius: "50%",

package/dist/gaesup/tools/gamepad/GamePadButton.js

@@ -21,5 +21,5 @@ export default function GamePadButton(_a) {
         }), onMouseDown: function () { return onMouseDown(); }, onMouseUp: function () { return onMouseLeave(); }, onMouseLeave: function () { return onMouseLeave(); }, onContextMenu: function (e) {
             e.preventDefault();
             onMouseLeave();
-        }, onPointerDown: function () { return onMouseDown(); }, onPointerUp: function () { return onMouseLeave(); }, children: name }));
+        }, onPointerDown: function () { return onMouseDown(); }, onPointerUp: function () { return onMouseLeave(); }, style: gamepadButtonStyle, children: name }));
 }

package/dist/gaesup/tools/gamepad/index.js

@@ -24,7 +24,7 @@ export default function GamePad() {
         .filter(function (item) {
         return !(item.tag === "run" && mode.controller === "joystick");
     });
-    return (_jsx("div", { className: style.gamePad, children: _jsx("div", { className: style.gamePadGrid, children: GamePadDirections.map(function (item, key) {
+    return (_jsx("div", { className: style.gamePad, style: gamepadStyle, children: _jsx("div", { className: style.gamePadGrid, style: gamepadGridStyle, children: GamePadDirections.map(function (item, key) {
                 return (_jsx(GamePadButton, { value: item.value, name: item.name }, key));
             }) }) }));
 }

package/dist/gaesup/tools/index.js

@@ -8,6 +8,7 @@ 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";
@@ -35,8 +36,8 @@ export function GaeSupTools(_a) {
         tools.gameboy,
         tools.gamepad,
     ]);
-    return (_jsx(GaesupToolsContext.Provider, { value: gaesupTool.value, children: _jsx(GaesupToolsDispatchContext.Provider, { value: gaesupTool.dispatch, children: _jsxs("div", { className: style.footer, children: [_jsx("div", { className: style.footerUpper, children: (mode.controller === "joystick" ||
-                            mode.controller === "gameboy") &&
-                            gaesupTool.value.gamepad.on && _jsx(GamePad, {}) }), _jsxs("div", { className: style.footerLower, children: [mode.controller === "joystick" && gaesupTool.value.joystick.on && (_jsx(JoyStick, {})), mode.controller === "gameboy" && gaesupTool.value.gameboy.on && (_jsx(GameBoy, {})), mode.controller === "keyboard" &&
-                                gaesupTool.value.keyboardToolTip.on && _jsx(KeyBoardToolTip, {}), gaesupTool.value.minimap.on && _jsx(MiniMap, {})] })] }) }) }));
+    return (_jsx(GaesupToolsContext.Provider, { value: gaesupTool.value, children: _jsxs(GaesupToolsDispatchContext.Provider, { value: gaesupTool.dispatch, children: [_jsxs("div", { className: style.footer, children: [_jsx("div", { className: style.footerUpper, children: (mode.controller === "joystick" ||
+                                mode.controller === "gameboy") &&
+                                gaesupTool.value.gamepad.on && _jsx(GamePad, {}) }), _jsxs("div", { className: style.footerLower, children: [mode.controller === "joystick" && gaesupTool.value.joystick.on && (_jsx(JoyStick, {})), mode.controller === "gameboy" && gaesupTool.value.gameboy.on && (_jsx(GameBoy, {})), mode.controller === "keyboard" &&
+                                    gaesupTool.value.keyboardToolTip.on && _jsx(KeyBoardToolTip, {}), gaesupTool.value.minimap.on && _jsx(MiniMap, {})] })] }), _jsx(JumpPoint, {})] }) }));
 }

package/dist/gaesup/tools/joystick/index.js

@@ -17,7 +17,7 @@ import useJoyStick from "./default";
 import * as style from "./style.css";
 export default function JoyStick() {
     var joyStickStyle = useContext(GaesupToolsContext).joystick.joyStickStyle;
-    return (_jsx("div", { className: style.joyStick, children: _jsx(JoyBall, {}) }));
+    return (_jsx("div", { className: style.joyStick, style: joyStickStyle, children: _jsx(JoyBall, {}) }));
 }
 export function JoyBall() {
     var outerRef = useRef(null);

package/dist/gaesup/tools/joystick/style.css.js

@@ -1,23 +1,21 @@
 import { style } from "@vanilla-extract/css";
+import { fixed, flex } from "../../../styles/recipe/index.css";
 export var joyStick = style([
+    fixed({
+        south_east: true,
+    }),
+    flex({
+        column: "7",
+    }),
     {
-        position: "fixed",
-        bottom: "0",
-        right: "0",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "flex-end",
-        alignItems: "flex-start",
-        textAlign: "center",
         width: "100%",
     },
 ]);
 export var joyStickInner = style([
+    flex({
+        row: "center",
+    }),
     {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        textAlign: "center",
         margin: "5rem",
         padding: "1rem",
         width: "12rem",

package/dist/gaesup/tools/keyBoardToolTip/index.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useContext } from "react";
@@ -28,7 +39,7 @@ export default function KeyBoardToolTip() {
         });
         return maps;
     }, {});
-    return (_jsx("div", { className: style.keyBoardToolTip, children: _jsx("div", { className: style.keyBoardTooInner, children: keyArray.map(function (item, key) {
+    return (_jsx("div", { className: style.keyBoardToolTip, style: keyBoardToolTipStyle, children: _jsx("div", { className: style.keyBoardTooInner, style: keyBoardToolTipInnerStyle, children: keyArray.map(function (item, key) {
                 var background = "rgba(0, 0, 0, 0.1)";
                 var boxShadow = "0 0 5px rgba(0, 0, 0, 0.2)";
                 if (codeToActionObj[item.code]) {
@@ -46,12 +57,12 @@ export default function KeyBoardToolTip() {
                     animations.keyControl[codeToActionObj[item.code]]) {
                     color = "black";
                 }
-                return (_jsx("div", { className: style.keyCap, style: assignInlineVars({
+                return (_jsx("div", { className: style.keyCap, style: __assign(__assign({}, assignInlineVars({
                         background: background,
                         boxShadow: boxShadow,
                         color: color,
                         gridRow: item.gridRow,
                         gridColumn: item.gridColumn,
-                    }), children: item.name }, key));
+                    })), keyCapStyle), children: item.name }, key));
             }) }) }));
 }

package/dist/gaesup/tools/minimap/index.js

@@ -1,3 +1,4 @@
+"use client";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -41,18 +42,16 @@ export default function MiniMap() {
         else
             setRatio(function (prev) { return prev - 0.1; });
     }, [setRatio, ratio]);
-    return (_jsxs("div", { className: style.minimap, 
-        // style={assignInlineVars(minimap.minimapStyle || {})}
-        onWheel: function (e) {
+    return (_jsxs("div", { className: style.minimap, style: minimap.minimapStyle || {}, onWheel: function (e) {
             if (e.deltaY > 0)
                 downRatio();
             else
                 upRatio();
-        }, children: [_jsx("div", { className: style.minimapOuter }), _jsxs("div", { className: style.minimapInner, children: [Object.values(minimapInner.props).map(function (obj, key) {
-                        return (_jsx("div", { className: style.minimapObject, style: assignInlineVars({
+        }, children: [_jsx("div", { className: style.minimapOuter, style: minimap.objectStyle || {} }), _jsxs("div", { className: style.minimapInner, style: minimap.innerStyle || {}, children: [Object.values(minimapInner.props).map(function (obj, key) {
+                        return (_jsx("div", { className: style.minimapObject, style: __assign(__assign({}, assignInlineVars({
                                 width: "".concat(obj.size.x, "rem"),
                                 height: "".concat(obj.size.z, "rem"),
                                 transform: "translate(".concat(-obj.center.x + activeState.position.x * ratio, "rem, ").concat(-obj.center.z + activeState.position.z * ratio, "rem)"),
-                            }), children: _jsx("div", { className: style.text, children: obj.text }) }, key));
+                            })), minimap.objectStyle), children: _jsx("div", { className: style.text, style: minimap.textStyle, children: obj.text }) }, key));
                     }), _jsx("div", { className: style.avatar, style: minimap.avatarStyle })] })] }));
 }

package/dist/styles/sprinkles/color.css.d.ts

@@ -24,7 +24,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                inherit: {
+                tr: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -33,7 +33,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                gr: {
+                g: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -42,7 +42,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                black: {
+                inherit: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -51,7 +51,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                white: {
+                gr: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -60,7 +60,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                tag: {
+                black: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -69,7 +69,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                bg: {
+                white: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -78,7 +78,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                c: {
+                tag: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -87,7 +87,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                tr: {
+                bg: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -96,7 +96,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                t: {
+                c: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -105,7 +105,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                g: {
+                t: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -396,7 +396,7 @@ export declare const colorProperties: {
         };
         boxShadow: {
             values: {
-                gr: {
+                tr: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -405,7 +405,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                tag: {
+                g: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -414,7 +414,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                bg: {
+                gr: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -423,7 +423,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                c: {
+                tag: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -432,7 +432,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                bg_hover: {
+                bg: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -441,7 +441,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                tr_hover: {
+                c: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -450,7 +450,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                t_hover: {
+                bg_hover: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -459,7 +459,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                g_hover: {
+                tr_hover: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -468,7 +468,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                gr_hover: {
+                t_hover: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -477,7 +477,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                ta_hover: {
+                g_hover: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -486,7 +486,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                sb_hover: {
+                gr_hover: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -495,7 +495,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                sm_hover: {
+                ta_hover: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -504,7 +504,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                c_hover: {
+                sb_hover: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -513,7 +513,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                tag_hover: {
+                sm_hover: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -522,7 +522,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                tr: {
+                c_hover: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -531,7 +531,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                t: {
+                tag_hover: {
                     defaultClass: string;
                     conditions: {
                         default: string;
@@ -540,7 +540,7 @@ export declare const colorProperties: {
                         focus: string;
                     };
                 };
-                g: {
+                t: {
                     defaultClass: string;
                     conditions: {
                         default: string;