gaesup-world 0.0.651 → 0.0.653

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/gaesup/controller/index.d.ts +1 -1
  2. package/dist/gaesup/controller/index.js +1 -2
  3. package/dist/gaesup/gaesupProps/index.d.ts +1 -1
  4. package/dist/gaesup/gaesupProps/index.js +1 -1
  5. package/dist/gaesup/index.d.ts +4 -4
  6. package/dist/gaesup/index.js +4 -4
  7. package/dist/gaesup/tools/gameboy/index.js +1 -1
  8. package/dist/gaesup/tools/gameboy/style.css.js +1 -0
  9. package/dist/gaesup/tools/gamepad/GamePadButton.js +1 -1
  10. package/dist/gaesup/tools/gamepad/index.js +1 -1
  11. package/dist/gaesup/tools/index.d.ts +1 -1
  12. package/dist/gaesup/tools/index.js +5 -7
  13. package/dist/gaesup/tools/joystick/index.js +1 -1
  14. package/dist/gaesup/tools/joystick/style.css.js +12 -10
  15. package/dist/gaesup/tools/keyBoardToolTip/index.js +3 -14
  16. package/dist/gaesup/tools/minimap/index.js +6 -4
  17. package/dist/gaesup/world/index.d.ts +1 -1
  18. package/dist/gaesup/world/index.js +1 -1
  19. package/package.json +1 -1
  20. package/src/gaesup/controller/index.tsx +1 -3
  21. package/src/gaesup/gaesupProps/index.tsx +1 -1
  22. package/src/gaesup/index.ts +4 -4
  23. package/src/gaesup/tools/gameboy/index.tsx +8 -2
  24. package/src/gaesup/tools/gameboy/style.css.ts +1 -0
  25. package/src/gaesup/tools/gamepad/GamePadButton.tsx +1 -1
  26. package/src/gaesup/tools/gamepad/index.tsx +8 -2
  27. package/src/gaesup/tools/index.tsx +2 -6
  28. package/src/gaesup/tools/joystick/index.tsx +4 -1
  29. package/src/gaesup/tools/joystick/style.css.ts +12 -10
  30. package/src/gaesup/tools/keyBoardToolTip/index.tsx +15 -12
  31. package/src/gaesup/tools/minimap/index.tsx +20 -14
  32. package/src/gaesup/world/index.tsx +1 -1
  33. package/tsconfig.json +1 -1
@@ -1,2 +1,2 @@
1
1
  import { controllerType } from "./type";
2
- export default function GaesupController(props: controllerType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function GaesupController(props: controllerType): import("react/jsx-runtime").JSX.Element;
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  var __assign = (this && this.__assign) || function () {
3
2
  __assign = Object.assign || function(t) {
4
3
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,7 +19,7 @@ import initControllerProps from "../initial/controller";
20
19
  import { GaesupWorldContext } from "../world/context";
21
20
  import { GaesupControllerContext, GaesupControllerDispatchContext, gaesupControllerDefault, } from "./context";
22
21
  import { gaesupControllerReducer } from "./context/reducer";
23
- export default function GaesupController(props) {
22
+ export function GaesupController(props) {
24
23
  var mode = useContext(GaesupWorldContext).mode;
25
24
  var _a = useReducer(gaesupControllerReducer, {
26
25
  cameraMode: Object.assign(gaesupControllerDefault.cameraMode, props.cameraMode || {}),
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- export default function GaeSupProps({ text, position, jumpPoint, children, }: {
2
+ export declare function GaeSupProps({ text, position, jumpPoint, children, }: {
3
3
  text: string;
4
4
  position?: [number, number, number];
5
5
  jumpPoint?: boolean;
@@ -23,7 +23,7 @@ import { vec3 } from "@react-three/rapier";
23
23
  import { useContext, useEffect, useRef } from "react";
24
24
  import * as THREE from "three";
25
25
  import { GaesupWorldContext, GaesupWorldDispatchContext, } from "../world/context/index.js";
26
- export default function GaeSupProps(_a) {
26
+ export function GaeSupProps(_a) {
27
27
  var text = _a.text, position = _a.position, jumpPoint = _a.jumpPoint, children = _a.children;
28
28
  var groupRef = useRef(null);
29
29
  var _b = useContext(GaesupWorldContext), minimap = _b.minimap, points = _b.points;
@@ -1,8 +1,8 @@
1
1
  export { playActions } from "./animation";
2
2
  export * as Camera from "./camera";
3
3
  export { Airplane, Character, Vehicle } from "./component";
4
- export * as GaesupController from "./controller";
5
- export * as GaeSupProps from "./gaesupProps";
4
+ export { GaesupController } from "./controller";
5
+ export { GaeSupProps } from "./gaesupProps";
6
6
  export * from "./initial";
7
- export * as GaeSupTools from "./tools";
8
- export * as GaesupWorld from "./world";
7
+ export { GaeSupTools } from "./tools";
8
+ export { GaesupWorld } from "./world";
@@ -1,8 +1,8 @@
1
1
  export { playActions } from "./animation";
2
2
  export * as Camera from "./camera";
3
3
  export { Airplane, Character, Vehicle } from "./component";
4
- export * as GaesupController from "./controller";
5
- export * as GaeSupProps from "./gaesupProps";
4
+ export { GaesupController } from "./controller";
5
+ export { GaeSupProps } from "./gaesupProps";
6
6
  export * from "./initial";
7
- export * as GaeSupTools from "./tools";
8
- export * as GaesupWorld from "./world";
7
+ export { GaeSupTools } from "./tools";
8
+ export { GaesupWorld } from "./world";
@@ -15,7 +15,7 @@ export var GameBoyDirections = [
15
15
  ];
16
16
  export default function GameBoy() {
17
17
  var _a = useContext(GaesupToolsContext).gameboy, gameboyStyle = _a.gameboyStyle, gameboyInnerStyle = _a.gameboyInnerStyle;
18
- return (_jsx("div", { className: style.gameBoy, style: gameboyStyle, children: _jsx("div", { className: style.gameBoyInner, style: gameboyInnerStyle, children: GameBoyDirections.map(function (item, key) {
18
+ return (_jsx("div", { className: style.gameBoy, children: _jsx("div", { className: style.gameBoyInner, children: GameBoyDirections.map(function (item, key) {
19
19
  return (_jsx(GameBoyButton, { tag: item.tag, value: item.value, icon: item.icon }, key));
20
20
  }) }) }));
21
21
  }
@@ -18,6 +18,7 @@ export var gameBoyInner = style([
18
18
  row: "center",
19
19
  }),
20
20
  {
21
+ display: "grid",
21
22
  margin: "5rem",
22
23
  padding: "1rem",
23
24
  borderRadius: "50%",
@@ -21,5 +21,5 @@ export default function GamePadButton(_a) {
21
21
  }), onMouseDown: function () { return onMouseDown(); }, onMouseUp: function () { return onMouseLeave(); }, onMouseLeave: function () { return onMouseLeave(); }, onContextMenu: function (e) {
22
22
  e.preventDefault();
23
23
  onMouseLeave();
24
- }, onPointerDown: function () { return onMouseDown(); }, onPointerUp: function () { return onMouseLeave(); }, style: gamepadButtonStyle, children: name }));
24
+ }, onPointerDown: function () { return onMouseDown(); }, onPointerUp: function () { return onMouseLeave(); }, children: name }));
25
25
  }
@@ -24,7 +24,7 @@ export default function GamePad() {
24
24
  .filter(function (item) {
25
25
  return !(item.tag === "run" && mode.controller === "joystick");
26
26
  });
27
- return (_jsx("div", { className: style.gamePad, style: gamepadStyle, children: _jsx("div", { className: style.gamePadGrid, style: gamepadGridStyle, children: GamePadDirections.map(function (item, key) {
27
+ return (_jsx("div", { className: style.gamePad, children: _jsx("div", { className: style.gamePadGrid, children: GamePadDirections.map(function (item, key) {
28
28
  return (_jsx(GamePadButton, { value: item.value, name: item.name }, key));
29
29
  }) }) }));
30
30
  }
@@ -1,2 +1,2 @@
1
1
  import { gaesupToolsPartialPropType } from "./type";
2
- export default function GaeSupTools({ keyboardToolTip, joystick, minimap, gameboy, gamepad, }: gaesupToolsPartialPropType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function GaeSupTools({ keyboardToolTip, joystick, minimap, gameboy, gamepad, }: gaesupToolsPartialPropType): import("react/jsx-runtime").JSX.Element;
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
2
  import { useContext, useMemo, useReducer } from "react";
4
3
  import { GaesupWorldContext } from "../world/context";
@@ -9,14 +8,13 @@ import GamePad from "./gamepad";
9
8
  import { gamepadDefault } from "./gamepad/default";
10
9
  import JoyStick from "./joystick";
11
10
  import { joyStickDefault } from "./joystick/default";
12
- import JumpPoint from "./jumpPoint";
13
11
  import KeyBoardToolTip from "./keyBoardToolTip";
14
12
  import { keyboardToolTipDefault } from "./keyBoardToolTip/default";
15
13
  import MiniMap from "./minimap";
16
14
  import { minimapDefault } from "./minimap/default";
17
15
  import { gaesupToolsReducer } from "./reducer";
18
16
  import * as style from "./style.css";
19
- export default function GaeSupTools(_a) {
17
+ export function GaeSupTools(_a) {
20
18
  var keyboardToolTip = _a.keyboardToolTip, joystick = _a.joystick, minimap = _a.minimap, gameboy = _a.gameboy, gamepad = _a.gamepad;
21
19
  var worldContext = useContext(GaesupWorldContext);
22
20
  var mode = worldContext.mode;
@@ -37,8 +35,8 @@ export default function GaeSupTools(_a) {
37
35
  tools.gameboy,
38
36
  tools.gamepad,
39
37
  ]);
40
- 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" ||
41
- mode.controller === "gameboy") &&
42
- 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" &&
43
- gaesupTool.value.keyboardToolTip.on && _jsx(KeyBoardToolTip, {}), gaesupTool.value.minimap.on && _jsx(MiniMap, {})] })] }), _jsx(JumpPoint, {})] }) }));
38
+ 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" ||
39
+ mode.controller === "gameboy") &&
40
+ 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" &&
41
+ gaesupTool.value.keyboardToolTip.on && _jsx(KeyBoardToolTip, {}), gaesupTool.value.minimap.on && _jsx(MiniMap, {})] })] }) }) }));
44
42
  }
@@ -17,7 +17,7 @@ import useJoyStick from "./default";
17
17
  import * as style from "./style.css";
18
18
  export default function JoyStick() {
19
19
  var joyStickStyle = useContext(GaesupToolsContext).joystick.joyStickStyle;
20
- return (_jsx("div", { className: style.joyStick, style: joyStickStyle, children: _jsx(JoyBall, {}) }));
20
+ return (_jsx("div", { className: style.joyStick, children: _jsx(JoyBall, {}) }));
21
21
  }
22
22
  export function JoyBall() {
23
23
  var outerRef = useRef(null);
@@ -1,21 +1,23 @@
1
1
  import { style } from "@vanilla-extract/css";
2
- import { fixed, flex } from "../../../styles/recipe/index.css";
3
2
  export var joyStick = style([
4
- fixed({
5
- south_east: true,
6
- }),
7
- flex({
8
- column: "7",
9
- }),
10
3
  {
4
+ position: "fixed",
5
+ bottom: "0",
6
+ right: "0",
7
+ display: "flex",
8
+ flexDirection: "column",
9
+ justifyContent: "flex-end",
10
+ alignItems: "flex-start",
11
+ textAlign: "center",
11
12
  width: "100%",
12
13
  },
13
14
  ]);
14
15
  export var joyStickInner = style([
15
- flex({
16
- row: "center",
17
- }),
18
16
  {
17
+ display: "flex",
18
+ alignItems: "center",
19
+ justifyContent: "center",
20
+ textAlign: "center",
19
21
  margin: "5rem",
20
22
  padding: "1rem",
21
23
  width: "12rem",
@@ -1,14 +1,3 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
1
  import { jsx as _jsx } from "react/jsx-runtime";
13
2
  import { assignInlineVars } from "@vanilla-extract/dynamic";
14
3
  import { useContext } from "react";
@@ -39,7 +28,7 @@ export default function KeyBoardToolTip() {
39
28
  });
40
29
  return maps;
41
30
  }, {});
42
- return (_jsx("div", { className: style.keyBoardToolTip, style: keyBoardToolTipStyle, children: _jsx("div", { className: style.keyBoardTooInner, style: keyBoardToolTipInnerStyle, children: keyArray.map(function (item, key) {
31
+ return (_jsx("div", { className: style.keyBoardToolTip, children: _jsx("div", { className: style.keyBoardTooInner, children: keyArray.map(function (item, key) {
43
32
  var background = "rgba(0, 0, 0, 0.1)";
44
33
  var boxShadow = "0 0 5px rgba(0, 0, 0, 0.2)";
45
34
  if (codeToActionObj[item.code]) {
@@ -57,12 +46,12 @@ export default function KeyBoardToolTip() {
57
46
  animations.keyControl[codeToActionObj[item.code]]) {
58
47
  color = "black";
59
48
  }
60
- return (_jsx("div", { className: style.keyCap, style: __assign(__assign({}, assignInlineVars({
49
+ return (_jsx("div", { className: style.keyCap, style: assignInlineVars({
61
50
  background: background,
62
51
  boxShadow: boxShadow,
63
52
  color: color,
64
53
  gridRow: item.gridRow,
65
54
  gridColumn: item.gridColumn,
66
- })), keyCapStyle), children: item.name }, key));
55
+ }), children: item.name }, key));
67
56
  }) }) }));
68
57
  }
@@ -42,16 +42,18 @@ export default function MiniMap() {
42
42
  else
43
43
  setRatio(function (prev) { return prev - 0.1; });
44
44
  }, [setRatio, ratio]);
45
- return (_jsxs("div", { className: style.minimap, style: minimap.minimapStyle || {}, onWheel: function (e) {
45
+ return (_jsxs("div", { className: style.minimap,
46
+ // style={assignInlineVars(minimap.minimapStyle || {})}
47
+ onWheel: function (e) {
46
48
  if (e.deltaY > 0)
47
49
  downRatio();
48
50
  else
49
51
  upRatio();
50
- }, 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) {
51
- return (_jsx("div", { className: style.minimapObject, style: __assign(__assign({}, assignInlineVars({
52
+ }, children: [_jsx("div", { className: style.minimapOuter }), _jsxs("div", { className: style.minimapInner, children: [Object.values(minimapInner.props).map(function (obj, key) {
53
+ return (_jsx("div", { className: style.minimapObject, style: assignInlineVars({
52
54
  width: "".concat(obj.size.x, "rem"),
53
55
  height: "".concat(obj.size.z, "rem"),
54
56
  transform: "translate(".concat(-obj.center.x + activeState.position.x * ratio, "rem, ").concat(-obj.center.z + activeState.position.z * ratio, "rem)"),
55
- })), minimap.objectStyle), children: _jsx("div", { className: style.text, style: minimap.textStyle, children: obj.text }) }, key));
57
+ }), children: _jsx("div", { className: style.text, children: obj.text }) }, key));
56
58
  }), _jsx("div", { className: style.avatar, style: minimap.avatarStyle })] })] }));
57
59
  }
@@ -1,2 +1,2 @@
1
1
  import { initGaesupWorldPropsType } from "../initial/gaesupWorld/type";
2
- export default function GaesupWorld(props: initGaesupWorldPropsType): import("react/jsx-runtime").JSX.Element;
2
+ export declare function GaesupWorld(props: initGaesupWorldPropsType): import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import initGaesupWorld from "../initial/gaesupWorld";
3
3
  import { GaesupWorldContext, GaesupWorldDispatchContext } from "./context";
4
- export default function GaesupWorld(props) {
4
+ export function GaesupWorld(props) {
5
5
  var gaesupProps = initGaesupWorld(props).gaesupProps;
6
6
  return (_jsx(GaesupWorldContext.Provider, { value: gaesupProps.value, children: _jsx(GaesupWorldDispatchContext.Provider, { value: gaesupProps.dispatch, children: props.children }) }));
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gaesup-world",
3
- "version": "0.0.651",
3
+ "version": "0.0.653",
4
4
  "description": "Web 3D Character Controller and World Platform Library",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
@@ -1,5 +1,3 @@
1
- "use client";
2
-
3
1
  import { Collider, RevoluteImpulseJoint } from "@dimforge/rapier3d-compat";
4
2
  import { RapierRigidBody } from "@react-three/rapier";
5
3
  import { useContext, useMemo, useReducer, useRef } from "react";
@@ -18,7 +16,7 @@ import {
18
16
  import { gaesupControllerReducer } from "./context/reducer";
19
17
  import { controllerType, propType, refsType } from "./type";
20
18
 
21
- export default function GaesupController(props: controllerType) {
19
+ export function GaesupController(props: controllerType) {
22
20
  const { mode } = useContext(GaesupWorldContext);
23
21
  const [controller, controllerDispatch] = useReducer(gaesupControllerReducer, {
24
22
  cameraMode: Object.assign(
@@ -6,7 +6,7 @@ import {
6
6
  GaesupWorldDispatchContext,
7
7
  } from "../world/context/index.js";
8
8
 
9
- export default function GaeSupProps({
9
+ export function GaeSupProps({
10
10
  text,
11
11
  position,
12
12
  jumpPoint,
@@ -1,8 +1,8 @@
1
1
  export { playActions } from "./animation";
2
2
  export * as Camera from "./camera";
3
3
  export { Airplane, Character, Vehicle } from "./component";
4
- export * as GaesupController from "./controller";
5
- export * as GaeSupProps from "./gaesupProps";
4
+ export { GaesupController } from "./controller";
5
+ export { GaeSupProps } from "./gaesupProps";
6
6
  export * from "./initial";
7
- export * as GaeSupTools from "./tools";
8
- export * as GaesupWorld from "./world";
7
+ export { GaeSupTools } from "./tools";
8
+ export { GaesupWorld } from "./world";
@@ -19,8 +19,14 @@ export default function GameBoy() {
19
19
  gameboy: { gameboyStyle, gameboyInnerStyle },
20
20
  } = useContext(GaesupToolsContext);
21
21
  return (
22
- <div className={style.gameBoy} style={gameboyStyle}>
23
- <div className={style.gameBoyInner} style={gameboyInnerStyle}>
22
+ <div
23
+ className={style.gameBoy}
24
+ // style={gameboyStyle}
25
+ >
26
+ <div
27
+ className={style.gameBoyInner}
28
+ // style={gameboyInnerStyle}
29
+ >
24
30
  {GameBoyDirections.map((item: gameBoyButtonType, key: number) => {
25
31
  return (
26
32
  <GameBoyButton
@@ -26,6 +26,7 @@ export const gameBoyInner = style([
26
26
  row: "center",
27
27
  }),
28
28
  {
29
+ display: "grid",
29
30
  margin: "5rem",
30
31
  padding: "1rem",
31
32
  borderRadius: "50%",
@@ -41,7 +41,7 @@ export default function GamePadButton({
41
41
  }}
42
42
  onPointerDown={() => onMouseDown()}
43
43
  onPointerUp={() => onMouseLeave()}
44
- style={gamepadButtonStyle}
44
+ // style={gamepadButtonStyle}
45
45
  >
46
46
  {name}
47
47
  </button>
@@ -40,8 +40,14 @@ export default function GamePad() {
40
40
  );
41
41
 
42
42
  return (
43
- <div className={style.gamePad} style={gamepadStyle}>
44
- <div className={style.gamePadGrid} style={gamepadGridStyle}>
43
+ <div
44
+ className={style.gamePad}
45
+ // style={gamepadStyle}
46
+ >
47
+ <div
48
+ className={style.gamePadGrid}
49
+ // style={gamepadGridStyle}
50
+ >
45
51
  {GamePadDirections.map((item: gameBoyDirectionType, key: number) => {
46
52
  return (
47
53
  <GamePadButton key={key} value={item.value} name={item.name} />
@@ -1,7 +1,4 @@
1
- "use client";
2
-
3
1
  import { useContext, useMemo, useReducer } from "react";
4
-
5
2
  import { GaesupWorldContext } from "../world/context";
6
3
  import { GaesupToolsContext, GaesupToolsDispatchContext } from "./context";
7
4
  import GameBoy from "./gameboy";
@@ -10,7 +7,6 @@ import GamePad from "./gamepad";
10
7
  import { gamepadDefault } from "./gamepad/default";
11
8
  import JoyStick from "./joystick";
12
9
  import { joyStickDefault } from "./joystick/default";
13
- import JumpPoint from "./jumpPoint";
14
10
  import KeyBoardToolTip from "./keyBoardToolTip";
15
11
  import { keyboardToolTipDefault } from "./keyBoardToolTip/default";
16
12
  import MiniMap from "./minimap";
@@ -18,7 +14,7 @@ import { minimapDefault } from "./minimap/default";
18
14
  import { gaesupToolsReducer } from "./reducer";
19
15
  import * as style from "./style.css";
20
16
  import { gaesupToolsPartialPropType } from "./type";
21
- export default function GaeSupTools({
17
+ export function GaeSupTools({
22
18
  keyboardToolTip,
23
19
  joystick,
24
20
  minimap,
@@ -75,7 +71,7 @@ export default function GaeSupTools({
75
71
  </div>
76
72
  </div>
77
73
 
78
- <JumpPoint />
74
+ {/* <JumpPoint /> */}
79
75
  </GaesupToolsDispatchContext.Provider>
80
76
  </GaesupToolsContext.Provider>
81
77
  );
@@ -17,7 +17,10 @@ export default function JoyStick() {
17
17
  joystick: { joyStickStyle },
18
18
  } = useContext(GaesupToolsContext);
19
19
  return (
20
- <div className={style.joyStick} style={joyStickStyle}>
20
+ <div
21
+ className={style.joyStick}
22
+ // style={joyStickStyle}
23
+ >
21
24
  <JoyBall />
22
25
  </div>
23
26
  );
@@ -1,23 +1,25 @@
1
1
  import { style } from "@vanilla-extract/css";
2
- import { fixed, flex } from "../../../styles/recipe/index.css";
3
2
 
4
3
  export const joyStick = style([
5
- fixed({
6
- south_east: true,
7
- }),
8
- flex({
9
- column: "7",
10
- }),
11
4
  {
5
+ position: "fixed",
6
+ bottom: "0",
7
+ right: "0",
8
+ display: "flex",
9
+ flexDirection: "column",
10
+ justifyContent: "flex-end",
11
+ alignItems: "flex-start",
12
+ textAlign: "center",
12
13
  width: "100%",
13
14
  },
14
15
  ]);
15
16
 
16
17
  export const joyStickInner = style([
17
- flex({
18
- row: "center",
19
- }),
20
18
  {
19
+ display: "flex",
20
+ alignItems: "center",
21
+ justifyContent: "center",
22
+ textAlign: "center",
21
23
  margin: "5rem",
22
24
  padding: "1rem",
23
25
  width: "12rem",
@@ -44,8 +44,14 @@ export default function KeyBoardToolTip() {
44
44
  }, {});
45
45
 
46
46
  return (
47
- <div className={style.keyBoardToolTip} style={keyBoardToolTipStyle}>
48
- <div className={style.keyBoardTooInner} style={keyBoardToolTipInnerStyle}>
47
+ <div
48
+ className={style.keyBoardToolTip}
49
+ // style={keyBoardToolTipStyle}
50
+ >
51
+ <div
52
+ className={style.keyBoardTooInner}
53
+ // style={keyBoardToolTipInnerStyle}
54
+ >
49
55
  {keyArray.map((item: keyArrayItemType, key: number) => {
50
56
  let background = "rgba(0, 0, 0, 0.1)";
51
57
  let boxShadow = "0 0 5px rgba(0, 0, 0, 0.2)";
@@ -70,16 +76,13 @@ export default function KeyBoardToolTip() {
70
76
  return (
71
77
  <div
72
78
  className={style.keyCap}
73
- style={{
74
- ...assignInlineVars({
75
- background,
76
- boxShadow,
77
- color,
78
- gridRow: item.gridRow,
79
- gridColumn: item.gridColumn,
80
- }),
81
- ...keyCapStyle,
82
- }}
79
+ style={assignInlineVars({
80
+ background,
81
+ boxShadow,
82
+ color,
83
+ gridRow: item.gridRow,
84
+ gridColumn: item.gridColumn,
85
+ })}
83
86
  key={key}
84
87
  >
85
88
  {item.name}
@@ -41,31 +41,37 @@ export default function MiniMap() {
41
41
  return (
42
42
  <div
43
43
  className={style.minimap}
44
- style={minimap.minimapStyle || {}}
44
+ // style={assignInlineVars(minimap.minimapStyle || {})}
45
45
  onWheel={(e) => {
46
46
  if (e.deltaY > 0) downRatio();
47
47
  else upRatio();
48
48
  }}
49
49
  >
50
- <div className={style.minimapOuter} style={minimap.objectStyle || {}} />
51
- <div className={style.minimapInner} style={minimap.innerStyle || {}}>
50
+ <div
51
+ className={style.minimapOuter}
52
+ // style={minimap.objectStyle || {}}
53
+ />
54
+ <div
55
+ className={style.minimapInner}
56
+ // style={minimap.innerStyle || {}}
57
+ >
52
58
  {Object.values(minimapInner.props).map((obj, key) => {
53
59
  return (
54
60
  <div
55
61
  key={key}
56
62
  className={style.minimapObject}
57
- style={{
58
- ...assignInlineVars({
59
- width: `${obj.size.x}rem`,
60
- height: `${obj.size.z}rem`,
61
- transform: `translate(${
62
- -obj.center.x + activeState.position.x * ratio
63
- }rem, ${-obj.center.z + activeState.position.z * ratio}rem)`,
64
- }),
65
- ...minimap.objectStyle,
66
- }}
63
+ style={assignInlineVars({
64
+ width: `${obj.size.x}rem`,
65
+ height: `${obj.size.z}rem`,
66
+ transform: `translate(${
67
+ -obj.center.x + activeState.position.x * ratio
68
+ }rem, ${-obj.center.z + activeState.position.z * ratio}rem)`,
69
+ })}
67
70
  >
68
- <div className={style.text} style={minimap.textStyle}>
71
+ <div
72
+ className={style.text}
73
+ // style={minimap.textStyle}
74
+ >
69
75
  {obj.text}
70
76
  </div>
71
77
  </div>
@@ -2,7 +2,7 @@ import initGaesupWorld from "../initial/gaesupWorld";
2
2
  import { initGaesupWorldPropsType } from "../initial/gaesupWorld/type";
3
3
  import { GaesupWorldContext, GaesupWorldDispatchContext } from "./context";
4
4
 
5
- export default function GaesupWorld(props: initGaesupWorldPropsType) {
5
+ export function GaesupWorld(props: initGaesupWorldPropsType) {
6
6
  const { gaesupProps } = initGaesupWorld(props);
7
7
  return (
8
8
  <GaesupWorldContext.Provider value={gaesupProps.value}>
package/tsconfig.json CHANGED
@@ -18,5 +18,5 @@
18
18
  "declaration": true,
19
19
  "outDir": "./dist"
20
20
  },
21
- "include": ["./src/**/*.tsx", "./src/**/*.ts"]
21
+ "include": ["./src/**/*.tsx", "./src/**/*.ts", "./src/**/*.css.ts"]
22
22
  }