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.
- package/dist/gaesup/controller/index.d.ts +1 -1
- package/dist/gaesup/controller/index.js +1 -2
- package/dist/gaesup/gaesupProps/index.d.ts +1 -1
- package/dist/gaesup/gaesupProps/index.js +1 -1
- package/dist/gaesup/index.d.ts +4 -4
- package/dist/gaesup/index.js +4 -4
- package/dist/gaesup/tools/gameboy/index.js +1 -1
- package/dist/gaesup/tools/gameboy/style.css.js +1 -0
- package/dist/gaesup/tools/gamepad/GamePadButton.js +1 -1
- package/dist/gaesup/tools/gamepad/index.js +1 -1
- package/dist/gaesup/tools/index.d.ts +1 -1
- package/dist/gaesup/tools/index.js +5 -7
- package/dist/gaesup/tools/joystick/index.js +1 -1
- package/dist/gaesup/tools/joystick/style.css.js +12 -10
- package/dist/gaesup/tools/keyBoardToolTip/index.js +3 -14
- package/dist/gaesup/tools/minimap/index.js +6 -4
- package/dist/gaesup/world/index.d.ts +1 -1
- package/dist/gaesup/world/index.js +1 -1
- package/package.json +1 -1
- package/src/gaesup/controller/index.tsx +1 -3
- package/src/gaesup/gaesupProps/index.tsx +1 -1
- package/src/gaesup/index.ts +4 -4
- package/src/gaesup/tools/gameboy/index.tsx +8 -2
- package/src/gaesup/tools/gameboy/style.css.ts +1 -0
- package/src/gaesup/tools/gamepad/GamePadButton.tsx +1 -1
- package/src/gaesup/tools/gamepad/index.tsx +8 -2
- package/src/gaesup/tools/index.tsx +2 -6
- package/src/gaesup/tools/joystick/index.tsx +4 -1
- package/src/gaesup/tools/joystick/style.css.ts +12 -10
- package/src/gaesup/tools/keyBoardToolTip/index.tsx +15 -12
- package/src/gaesup/tools/minimap/index.tsx +20 -14
- package/src/gaesup/world/index.tsx +1 -1
- package/tsconfig.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { controllerType } from "./type";
|
|
2
|
-
export
|
|
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
|
|
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
|
|
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
|
|
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;
|
package/dist/gaesup/index.d.ts
CHANGED
|
@@ -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
|
|
5
|
-
export
|
|
4
|
+
export { GaesupController } from "./controller";
|
|
5
|
+
export { GaeSupProps } from "./gaesupProps";
|
|
6
6
|
export * from "./initial";
|
|
7
|
-
export
|
|
8
|
-
export
|
|
7
|
+
export { GaeSupTools } from "./tools";
|
|
8
|
+
export { GaesupWorld } from "./world";
|
package/dist/gaesup/index.js
CHANGED
|
@@ -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
|
|
5
|
-
export
|
|
4
|
+
export { GaesupController } from "./controller";
|
|
5
|
+
export { GaeSupProps } from "./gaesupProps";
|
|
6
6
|
export * from "./initial";
|
|
7
|
-
export
|
|
8
|
-
export
|
|
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,
|
|
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
|
}
|
|
@@ -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(); },
|
|
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,
|
|
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
|
|
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
|
|
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:
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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,
|
|
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,
|
|
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:
|
|
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
|
-
})
|
|
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,
|
|
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
|
|
51
|
-
return (_jsx("div", { className: style.minimapObject, style:
|
|
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
|
-
})
|
|
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
|
|
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
|
|
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,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
|
|
19
|
+
export function GaesupController(props: controllerType) {
|
|
22
20
|
const { mode } = useContext(GaesupWorldContext);
|
|
23
21
|
const [controller, controllerDispatch] = useReducer(gaesupControllerReducer, {
|
|
24
22
|
cameraMode: Object.assign(
|
package/src/gaesup/index.ts
CHANGED
|
@@ -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
|
|
5
|
-
export
|
|
4
|
+
export { GaesupController } from "./controller";
|
|
5
|
+
export { GaeSupProps } from "./gaesupProps";
|
|
6
6
|
export * from "./initial";
|
|
7
|
-
export
|
|
8
|
-
export
|
|
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
|
|
23
|
-
|
|
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
|
|
@@ -40,8 +40,14 @@ export default function GamePad() {
|
|
|
40
40
|
);
|
|
41
41
|
|
|
42
42
|
return (
|
|
43
|
-
<div
|
|
44
|
-
|
|
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
|
|
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
|
|
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
|
|
48
|
-
|
|
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
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
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
|
|
51
|
-
|
|
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
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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
|
|
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
|
|
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