gaesup-world 0.0.652 → 0.0.653

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, style: gameboyStyle, children: _jsx("div", { className: style.gameBoyInner, style: gameboyInnerStyle, children: GameBoyDirections.map(function (item, key) {
+    return (_jsx("div", { className: style.gameBoy, children: _jsx("div", { className: style.gameBoyInner, 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,6 +18,7 @@ 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(); }, style: gamepadButtonStyle, children: name }));
+        }, onPointerDown: function () { return onMouseDown(); }, onPointerUp: function () { return onMouseLeave(); }, 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, style: gamepadStyle, children: _jsx("div", { className: style.gamePadGrid, style: gamepadGridStyle, children: GamePadDirections.map(function (item, key) {
+    return (_jsx("div", { className: style.gamePad, children: _jsx("div", { className: style.gamePadGrid, children: GamePadDirections.map(function (item, key) {
                 return (_jsx(GamePadButton, { value: item.value, name: item.name }, key));
             }) }) }));
 }

package/dist/gaesup/tools/index.js

@@ -8,7 +8,6 @@ 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";
@@ -36,8 +35,8 @@ export function GaeSupTools(_a) {
         tools.gameboy,
         tools.gamepad,
     ]);
-    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, {})] }) }));
+    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, {})] })] }) }) }));
 }

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, style: joyStickStyle, children: _jsx(JoyBall, {}) }));
+    return (_jsx("div", { className: style.joyStick, children: _jsx(JoyBall, {}) }));
 }
 export function JoyBall() {
     var outerRef = useRef(null);

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

@@ -1,21 +1,23 @@
 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,14 +1,3 @@
-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";
@@ -39,7 +28,7 @@ export default function KeyBoardToolTip() {
         });
         return maps;
     }, {});
-    return (_jsx("div", { className: style.keyBoardToolTip, style: keyBoardToolTipStyle, children: _jsx("div", { className: style.keyBoardTooInner, style: keyBoardToolTipInnerStyle, children: keyArray.map(function (item, key) {
+    return (_jsx("div", { className: style.keyBoardToolTip, children: _jsx("div", { className: style.keyBoardTooInner, 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]) {
@@ -57,12 +46,12 @@ export default function KeyBoardToolTip() {
                     animations.keyControl[codeToActionObj[item.code]]) {
                     color = "black";
                 }
-                return (_jsx("div", { className: style.keyCap, style: __assign(__assign({}, assignInlineVars({
+                return (_jsx("div", { className: style.keyCap, style: assignInlineVars({
                         background: background,
                         boxShadow: boxShadow,
                         color: color,
                         gridRow: item.gridRow,
                         gridColumn: item.gridColumn,
-                    })), keyCapStyle), children: item.name }, key));
+                    }), children: item.name }, key));
             }) }) }));
 }

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

@@ -42,16 +42,18 @@ export default function MiniMap() {
         else
             setRatio(function (prev) { return prev - 0.1; });
     }, [setRatio, ratio]);
-    return (_jsxs("div", { className: style.minimap, style: minimap.minimapStyle || {}, onWheel: function (e) {
+    return (_jsxs("div", { className: style.minimap, 
+        // style={assignInlineVars(minimap.minimapStyle || {})}
+        onWheel: function (e) {
             if (e.deltaY > 0)
                 downRatio();
             else
                 upRatio();
-        }, 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({
+        }, 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({
                                 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)"),
-                            })), minimap.objectStyle), children: _jsx("div", { className: style.text, style: minimap.textStyle, children: obj.text }) }, key));
+                            }), children: _jsx("div", { className: style.text, children: obj.text }) }, key));
                     }), _jsx("div", { className: style.avatar, style: minimap.avatarStyle })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gaesup-world",
-  "version": "0.0.652",
+  "version": "0.0.653",
   "description": "Web 3D Character Controller and World Platform Library",
   "private": false,
   "main": "dist/index.js",

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

@@ -19,8 +19,14 @@ export default function GameBoy() {
     gameboy: { gameboyStyle, gameboyInnerStyle },
   } = useContext(GaesupToolsContext);
   return (
-    <div className={style.gameBoy} style={gameboyStyle}>
-      <div className={style.gameBoyInner} style={gameboyInnerStyle}>
+    <div
+      className={style.gameBoy}
+      // style={gameboyStyle}
+    >
+      <div
+        className={style.gameBoyInner}
+        // style={gameboyInnerStyle}
+      >
         {GameBoyDirections.map((item: gameBoyButtonType, key: number) => {
           return (
             <GameBoyButton

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

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

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

@@ -41,7 +41,7 @@ export default function GamePadButton({
       }}
       onPointerDown={() => onMouseDown()}
       onPointerUp={() => onMouseLeave()}
-      style={gamepadButtonStyle}
+      // style={gamepadButtonStyle}
     >
       {name}
     </button>

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

@@ -40,8 +40,14 @@ export default function GamePad() {
     );
 
   return (
-    <div className={style.gamePad} style={gamepadStyle}>
-      <div className={style.gamePadGrid} style={gamepadGridStyle}>
+    <div
+      className={style.gamePad}
+      // style={gamepadStyle}
+    >
+      <div
+        className={style.gamePadGrid}
+        // style={gamepadGridStyle}
+      >
         {GamePadDirections.map((item: gameBoyDirectionType, key: number) => {
           return (
             <GamePadButton key={key} value={item.value} name={item.name} />

package/src/gaesup/tools/index.tsx

@@ -7,7 +7,6 @@ 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";
@@ -72,7 +71,7 @@ export function GaeSupTools({
           </div>
         </div>
 
-        <JumpPoint />
+        {/* <JumpPoint /> */}
       </GaesupToolsDispatchContext.Provider>
     </GaesupToolsContext.Provider>
   );

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

@@ -17,7 +17,10 @@ export default function JoyStick() {
     joystick: { joyStickStyle },
   } = useContext(GaesupToolsContext);
   return (
-    <div className={style.joyStick} style={joyStickStyle}>
+    <div
+      className={style.joyStick}
+      // style={joyStickStyle}
+    >
       <JoyBall />
     </div>
   );

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

@@ -1,23 +1,25 @@
 import { style } from "@vanilla-extract/css";
-import { fixed, flex } from "../../../styles/recipe/index.css";
 
 export const 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 const joyStickInner = style([
-  flex({
-    row: "center",
-  }),
   {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
     margin: "5rem",
     padding: "1rem",
     width: "12rem",

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

@@ -44,8 +44,14 @@ export default function KeyBoardToolTip() {
   }, {});
 
   return (
-    <div className={style.keyBoardToolTip} style={keyBoardToolTipStyle}>
-      <div className={style.keyBoardTooInner} style={keyBoardToolTipInnerStyle}>
+    <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)";
@@ -70,16 +76,13 @@ export default function KeyBoardToolTip() {
           return (
             <div
               className={style.keyCap}
-              style={{
-                ...assignInlineVars({
-                  background,
-                  boxShadow,
-                  color,
-                  gridRow: item.gridRow,
-                  gridColumn: item.gridColumn,
-                }),
-                ...keyCapStyle,
-              }}
+              style={assignInlineVars({
+                background,
+                boxShadow,
+                color,
+                gridRow: item.gridRow,
+                gridColumn: item.gridColumn,
+              })}
               key={key}
             >
               {item.name}

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

@@ -41,31 +41,37 @@ export default function MiniMap() {
   return (
     <div
       className={style.minimap}
-      style={minimap.minimapStyle || {}}
+      // style={assignInlineVars(minimap.minimapStyle || {})}
       onWheel={(e) => {
         if (e.deltaY > 0) downRatio();
         else upRatio();
       }}
     >
-      <div className={style.minimapOuter} style={minimap.objectStyle || {}} />
-      <div className={style.minimapInner} style={minimap.innerStyle || {}}>
+      <div
+        className={style.minimapOuter}
+        // style={minimap.objectStyle || {}}
+      />
+      <div
+        className={style.minimapInner}
+        // style={minimap.innerStyle || {}}
+      >
         {Object.values(minimapInner.props).map((obj, key) => {
           return (
             <div
               key={key}
               className={style.minimapObject}
-              style={{
-                ...assignInlineVars({
-                  width: `${obj.size.x}rem`,
-                  height: `${obj.size.z}rem`,
-                  transform: `translate(${
-                    -obj.center.x + activeState.position.x * ratio
-                  }rem, ${-obj.center.z + activeState.position.z * ratio}rem)`,
-                }),
-                ...minimap.objectStyle,
-              }}
+              style={assignInlineVars({
+                width: `${obj.size.x}rem`,
+                height: `${obj.size.z}rem`,
+                transform: `translate(${
+                  -obj.center.x + activeState.position.x * ratio
+                }rem, ${-obj.center.z + activeState.position.z * ratio}rem)`,
+              })}
             >
-              <div className={style.text} style={minimap.textStyle}>
+              <div
+                className={style.text}
+                // style={minimap.textStyle}
+              >
                 {obj.text}
               </div>
             </div>

package/tsconfig.json

@@ -18,5 +18,5 @@
     "declaration": true,
     "outDir": "./dist"
   },
-  "include": ["./src/**/*.tsx", "./src/**/*.ts"]
+  "include": ["./src/**/*.tsx", "./src/**/*.ts", "./src/**/*.css.ts"]
 }