gaesup-world 0.0.652 → 0.0.661

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

@@ -1,4 +1,3 @@
-"use client";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -42,16 +41,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/index.ts

@@ -0,0 +1,7 @@
+export {
+  GaeSupProps,
+  GaeSupTools,
+  GaesupController,
+  GaesupWorld,
+  playActions,
+} from "./src";

package/package.json

@@ -1,56 +1,35 @@
 {
   "name": "gaesup-world",
-  "version": "0.0.652",
-  "description": "Web 3D Character Controller and World Platform Library",
-  "private": false,
+  "version": "0.0.661",
+  "type": "commonjs",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "author": "jigglypop <donghwanyeom@gmail.com>",
-  "license": "MIT",
-  "type": "commonjs",
   "homepage": "https://jigglypop.github.io/gaesup-world/",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/jigglypop/gaesup-world.git"
-  },
-  "keywords": [
-    "three.js",
-    "@react-three/fiber",
-    "@react-three/drei"
-  ],
-  "bugs": {
-    "url": "https://github.com/jigglypop/gaesup-world/issues"
-  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "prepare": "rm -rf dist && mkdir dist && tsc",
     "preview": "vite preview",
     "predeploy": "npm run build",
+    "prepare": "rm -rf dist && mkdir dist && tsc -p tsconfig.build.json",
     "deploy": "gh-pages -d dist"
   },
   "dependencies": {
     "@dimforge/rapier3d": "^0.11.2",
-    "@mdx-js/loader": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
     "@react-three/drei": "9.88.11",
     "@react-three/fiber": "8.15.9",
     "@react-three/rapier": "^1.1.2",
     "@types/three": "^0.158.1",
-    "@types/uuid": "^9.0.6",
     "@vanilla-extract/babel-plugin": "^1.2.0",
     "@vanilla-extract/css": "^1.13.0",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/next-plugin": "^2.3.1",
     "@vanilla-extract/recipes": "^0.5.0",
     "@vanilla-extract/sprinkles": "^1.6.1",
-    "css-loader": "^6.8.1",
     "gh-pages": "^6.1.0",
     "leva": "0.9.35",
     "node-fetch": "3.3.2",
-    "pluralize": "^8.0.0",
-    "r3f-perf": "7.1.2",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
@@ -58,7 +37,6 @@
     "three": "^0.158.0"
   },
   "devDependencies": {
-    "@types/pluralize": "^0.0.33",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
@@ -72,5 +50,20 @@
     "prettier": "^3.1.1",
     "typescript": "^5.2.2",
     "vite": "^5.0.0"
+  },
+  "description": "Web 3D Character Controller and World Platform Library",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jigglypop/gaesup-world.git"
+  },
+  "keywords": [
+    "three.js",
+    "@react-three/fiber",
+    "@react-three/drei"
+  ],
+  "author": "jigglypop",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jigglypop/gaesup-world/issues"
   }
 }

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>
   );
@@ -227,203 +230,3 @@ export function JoyBall() {
     </div>
   );
 }
-
-// import {
-//   MouseEvent,
-//   MouseEventHandler,
-//   TouchEvent,
-//   TouchEventHandler,
-//   useCallback,
-//   useContext,
-//   useEffect,
-//   useRef,
-//   useState,
-// } from "react";
-// import { vars } from "../../../styles/theme.css";
-// import { GaesupToolsContext } from "../context";
-// import useJoyStick from "./default";
-// import * as style from "./style.css";
-//
-// export default function JoyStick() {
-//   return <JoyBall />;
-// }
-//
-// export function JoyBall() {
-//   const outerRef = useRef<HTMLDivElement>(null);
-//   const childRef = useRef<HTMLDivElement>(null);
-//   const {
-//     joystick: { joyStickBallStyle, joyStickInnerStyle, joyStickStyle },
-//   } = useContext(GaesupToolsContext);
-//   const { joyStickBall, joyStickOrigin, setBall, setOrigin } = useJoyStick();
-//   const [mouseDown, setMouseDown] = useState(false);
-//   const [touchDown, setTouchDown] = useState(false);
-//   const [background, setBackground] = useState("rgba(0, 0, 0, 0.5)");
-//   const [boxShadow, setBoxShadow] = useState("0 0 10px  rgba(0, 0, 0, 0.5)");
-//
-//   const calcOriginBall = <T extends MouseEvent | TouchEvent>(
-//     e: T,
-//     X: number,
-//     Y: number
-//   ) => {
-//     const outer = e.target as HTMLDivElement;
-//     const parent = outer.parentElement as HTMLDivElement;
-//     console.log(parent.getBoundingClientRect());
-//     const { top, left, bottom, right, width, height } =
-//       parent.getBoundingClientRect();
-//
-//     if (top > Y || bottom < Y || left > X || right < X) return;
-//     const normX = (joyStickOrigin.x - X) ** 2;
-//     const normY = (joyStickOrigin.y - Y) ** 2;
-//     const currentRadius = Math.sqrt(normX + normY);
-//     const originRadius = Math.sqrt((width / 2) ** 2 + (height / 2) ** 2);
-//     setOrigin({
-//       x: left,
-//       y: bottom,
-//       angle: Math.atan2(Y - (bottom - height / 2), X - (left + width / 2)),
-//       currentRadius,
-//       originRadius,
-//       isIn: currentRadius > originRadius / 2,
-//       isOn: true,
-//       isCenter: currentRadius < originRadius / 4,
-//       isUp: top > Y - height / 2,
-//     });
-//     setBoxShadow("0 0 10px rgba(99,251,215,1)");
-//     setBackground(
-//       currentRadius > originRadius / 2
-//         ? vars.gradient.lightGreen
-//         : vars.gradient.green
-//     );
-//     setBall({
-//       top: `${top}px`,
-//       left: `${left}px`,
-//     });
-//   };
-//
-//   const initialize = (e) => {
-//     const outer = e.target as HTMLDivElement;
-//     const parent = outer.parentElement as HTMLDivElement;
-//     const { left, bottom, width, height } = parent.getBoundingClientRect();
-//     const x = left;
-//     const y = bottom;
-//
-//     setOrigin({
-//       x: x,
-//       y: y,
-//       angle: Math.PI / 2,
-//       currentRadius: 0,
-//       originRadius: 0,
-//       isIn: true,
-//       isOn: false,
-//       isCenter: true,
-//       isUp: true,
-//     });
-//     initBall();
-//   };
-//
-//   const handleMouseOver: MouseEventHandler = useCallback(
-//     (e) => {
-//       if (!mouseDown) return;
-//       console.log(e.clientX, e.clientY);
-//       calcOriginBall<MouseEvent<Element>>(e, e.pageX, e.pageY);
-//     },
-//     [
-//       joyStickBall,
-//       joyStickOrigin,
-//       setBall,
-//       setOrigin,
-//       mouseDown,
-//       boxShadow,
-//       background,
-//       setBoxShadow,
-//       setBackground,
-//     ]
-//   );
-//
-//   const handleTouchMove: TouchEventHandler = useCallback(
-//     (e) => {
-//       if (!touchDown) return;
-//       calcOriginBall<TouchEvent<Element>>(
-//         e,
-//         e.touches[0].pageX,
-//         e.touches[0].pageY
-//       );
-//     },
-//     [touchDown, boxShadow, background, setBoxShadow, setBackground]
-//   );
-//
-//   const handleTouchEnd: TouchEventHandler = useCallback(
-//     (e) => {
-//       setTouchDown(false);
-//       return initialize(e);
-//     },
-//     [
-//       touchDown,
-//       setTouchDown,
-//       boxShadow,
-//       background,
-//       setBoxShadow,
-//       setBackground,
-//     ]
-//   );
-//   const handleMouseOut: MouseEventHandler = useCallback(
-//     (e) => {
-//       setMouseDown(false);
-//       return initialize(e);
-//     },
-//     [
-//       setBall,
-//       setMouseDown,
-//       setOrigin,
-//       mouseDown,
-//       boxShadow,
-//       background,
-//       setBoxShadow,
-//       setBackground,
-//     ]
-//   );
-//
-//   const initBall = () => {
-//     const { top, left, width, height } = outerRef.current.getClientRects()[0];
-//     setBoxShadow("0 0 10px  rgba(0, 0, 0, 0.5)");
-//     setBackground("rgba(0, 0, 0, 0.5)");
-//     setBall({
-//       top: `${top + height / 2}px`,
-//       left: `${left + width / 2}px`,
-//     });
-//   };
-//   // window.addEventListener("resize", () => setScreenSize());
-//
-//   useEffect(() => {
-//     initBall();
-//   }, []);
-//
-//   return (
-//     <div className={style.joyStick}>
-//       <div
-//         className={style.joyStickInner}
-//         style={joyStickInnerStyle}
-//         ref={outerRef}
-//         onMouseDown={() => setMouseDown(true)}
-//         onMouseUp={() => setMouseDown(false)}
-//         onMouseMove={handleMouseOver}
-//         onMouseLeave={(e) => handleMouseOut(e)}
-//         onTouchStart={() => setTouchDown(true)}
-//         onTouchEnd={(e) => handleTouchEnd(e)}
-//         onTouchMove={handleTouchMove}
-//         onTouchCancel={handleTouchEnd}
-//       >
-//         <div
-//           className={`${style.joystickBall}`}
-//           ref={childRef}
-//           style={{
-//             background: joyStickBallStyle?.background || background,
-//             boxShadow: joyStickBallStyle?.boxShadow || boxShadow,
-//             top: joyStickBall.top,
-//             left: joyStickBall.left,
-//             ...joyStickBallStyle,
-//           }}
-//         />
-//       </div>
-//     </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

@@ -1,5 +1,3 @@
-"use client";
-
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useCallback, useContext, useEffect, useState } from "react";
 
@@ -41,31 +39,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/vite.config.ts

@@ -0,0 +1,9 @@
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: "/gaesup-world/",
+  plugins: [react(), vanillaExtractPlugin()],
+});

package/lib/index.ts

@@ -1,10 +0,0 @@
-import * as pluralize from "pluralize";
-
-/**
- * @Method: Returns the plural form of any noun.
- * @Param: {string}
- * @Return: {string}
- */
-export function getPlural(str: any): string {
-  return pluralize.plural(str);
-}

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    // publish options
-    "jsx": "react-jsx",
-    "noEmit": false,
-    "declaration": true,
-    "outDir": "./dist"
-  },
-  "include": ["./src/**/*.tsx", "./src/**/*.ts"]
-}