gaesup-world 0.2.2 → 0.2.4
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/camera/index.js +37 -66
- package/dist/gaesup/controller/index.js +1 -0
- package/dist/gaesup/controller/style.css +48 -0
- package/dist/gaesup/tools/gameBoy/style.css +92 -0
- package/dist/gaesup/tools/gamePad/style.css +62 -0
- package/dist/gaesup/tools/joyStick/style.css +38 -0
- package/dist/gaesup/tools/jumpPortal/style.css +16 -0
- package/dist/gaesup/tools/keyBoardToolTip/style.css +24 -0
- package/dist/gaesup/tools/miniMap/style.css +228 -0
- package/dist/gaesup/tools/rideable/style.css +16 -0
- package/dist/gaesup/tools/zoomButton/index.js +1 -1
- package/dist/gaesup/tools/zoomButton/style.css +16 -0
- package/dist/gaesup/world/index.js +1 -0
- package/dist/gaesup/world/style.css +13 -0
- package/index.ts +1 -1
- package/package.json +20 -15
|
@@ -9,42 +9,6 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
-
});
|
|
20
|
-
};
|
|
21
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
-
function step(op) {
|
|
26
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
-
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
28
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
-
switch (op[0]) {
|
|
31
|
-
case 0: case 1: t = op; break;
|
|
32
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
-
default:
|
|
36
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
-
if (t[2]) _.ops.pop();
|
|
41
|
-
_.trys.pop(); continue;
|
|
42
|
-
}
|
|
43
|
-
op = body.call(thisArg, _);
|
|
44
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
49
13
|
import { CameraControls } from "@react-three/drei";
|
|
50
14
|
import { useFrame, useThree } from "@react-three/fiber";
|
|
@@ -57,7 +21,6 @@ import normal from "./control/normal";
|
|
|
57
21
|
import orbit from "./control/orbit";
|
|
58
22
|
import detector from "./detector";
|
|
59
23
|
export default function Camera(_a) {
|
|
60
|
-
var _this = this;
|
|
61
24
|
var refs = _a.refs, prop = _a.prop, control = _a.control;
|
|
62
25
|
var worldContext = useContext(GaesupWorldContext);
|
|
63
26
|
var controllerContext = useContext(GaesupControllerContext);
|
|
@@ -106,34 +69,42 @@ export default function Camera(_a) {
|
|
|
106
69
|
detector(cameraProp);
|
|
107
70
|
}
|
|
108
71
|
});
|
|
109
|
-
// moveTo 함수 정의
|
|
110
|
-
worldContext.moveTo =
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
72
|
+
// // moveTo 함수 정의
|
|
73
|
+
// worldContext.moveTo = async (
|
|
74
|
+
// position: THREE.Vector3,
|
|
75
|
+
// target: THREE.Vector3
|
|
76
|
+
// ) => {
|
|
77
|
+
// camera.position.copy(position);
|
|
78
|
+
// if (mode.control === "orbit") {
|
|
79
|
+
// await Promise.all([
|
|
80
|
+
// cameraRef.current.setPosition(position.x, position.y, position.z, true),
|
|
81
|
+
//
|
|
82
|
+
// camera.rotation.copy(worldContext.activeState.euler),
|
|
83
|
+
// cameraRef.current.setLookAt(
|
|
84
|
+
// position.x,
|
|
85
|
+
// position.y,
|
|
86
|
+
// position.z,
|
|
87
|
+
// target.x,
|
|
88
|
+
// target.y,
|
|
89
|
+
// target.z,
|
|
90
|
+
// true
|
|
91
|
+
// ),
|
|
92
|
+
// ]);
|
|
93
|
+
// } else if (mode.control === "normal") {
|
|
94
|
+
// await Promise.all([
|
|
95
|
+
// cameraRef.current.setPosition(0, position.y, position.z, true),
|
|
96
|
+
// camera.rotation.copy(worldContext.activeState.euler),
|
|
97
|
+
// cameraRef.current.setLookAt(
|
|
98
|
+
// 0,
|
|
99
|
+
// position.y,
|
|
100
|
+
// position.z,
|
|
101
|
+
// target.x,
|
|
102
|
+
// target.y,
|
|
103
|
+
// target.z,
|
|
104
|
+
// true
|
|
105
|
+
// ),
|
|
106
|
+
// ]);
|
|
107
|
+
// }
|
|
108
|
+
// };
|
|
138
109
|
return _jsx(CameraControls, { ref: cameraRef });
|
|
139
110
|
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
@import url("https://rsms.me/inter/inter.css");
|
|
2
|
+
|
|
3
|
+
* {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
html,
|
|
8
|
+
body,
|
|
9
|
+
#root {
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 100%;
|
|
12
|
+
margin: 0;
|
|
13
|
+
padding: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
body {
|
|
17
|
+
background: #f0f0f0;
|
|
18
|
+
font-family: inter;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.container {
|
|
22
|
+
position: relative;
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: 100%;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.canvas {
|
|
28
|
+
pointer-events: none;
|
|
29
|
+
position: absolute !important;
|
|
30
|
+
top: 0px;
|
|
31
|
+
left: 0px;
|
|
32
|
+
width: 100vw;
|
|
33
|
+
height: 100vh;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.view1 {
|
|
37
|
+
position: absolute;
|
|
38
|
+
width: 100%;
|
|
39
|
+
height: 100%;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.view2 {
|
|
43
|
+
position: absolute;
|
|
44
|
+
top: 2em;
|
|
45
|
+
right: 2em;
|
|
46
|
+
width: calc(250px - 2em);
|
|
47
|
+
height: calc(250px - 2em);
|
|
48
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
body {
|
|
2
|
+
-webkit-touch-callout: none;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.gameboy {
|
|
6
|
+
display: grid;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
border-radius: 50%;
|
|
10
|
+
grid-template-columns: 1fr 1fr 1fr;
|
|
11
|
+
grid-template-rows: 1fr 1fr 1fr;
|
|
12
|
+
background: rgba(0, 0, 0, 0.5);
|
|
13
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.gameboy .gameboy-button {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
text-align: center;
|
|
21
|
+
position: relative;
|
|
22
|
+
backdrop-filter: blur(2rem);
|
|
23
|
+
-webkit-backdrop-filter: blur(2rem);
|
|
24
|
+
all: unset;
|
|
25
|
+
width: 3rem;
|
|
26
|
+
height: 3rem;
|
|
27
|
+
margin: 0.3rem;
|
|
28
|
+
border-radius: 50%;
|
|
29
|
+
background: linear-gradient(
|
|
30
|
+
68.4deg,
|
|
31
|
+
rgba(99, 251, 215, 1) -0.4%,
|
|
32
|
+
rgba(5, 222, 250, 1) 100.2%
|
|
33
|
+
);
|
|
34
|
+
box-shadow: 0 0 10px #78ffd6;
|
|
35
|
+
font-size: 1.6rem;
|
|
36
|
+
color: black;
|
|
37
|
+
text-shadow: 0 0 10px black;
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
transition: all 0.3s ease-in;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.gameboy-button.up {
|
|
43
|
+
grid-row: 1/2;
|
|
44
|
+
grid-column: 2/3;
|
|
45
|
+
background: linear-gradient(
|
|
46
|
+
68.4deg,
|
|
47
|
+
rgba(99, 251, 215, 1) -0.4%,
|
|
48
|
+
rgba(5, 222, 250, 1) 100.2%
|
|
49
|
+
);
|
|
50
|
+
box-shadow: 0 0 10px #78ffd6;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.gameboy-button.left {
|
|
54
|
+
grid-row: 2/3;
|
|
55
|
+
grid-column: 1/2;
|
|
56
|
+
background: linear-gradient(
|
|
57
|
+
68.4deg,
|
|
58
|
+
rgba(176, 255, 237, 1) -0.4%,
|
|
59
|
+
rgba(161, 244, 255, 1) 100.2%
|
|
60
|
+
);
|
|
61
|
+
box-shadow: 0 0 10px rgba(176, 255, 237, 1);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.gameboy-button.down {
|
|
65
|
+
grid-row: 3/4;
|
|
66
|
+
grid-column: 2/3;
|
|
67
|
+
background: linear-gradient(
|
|
68
|
+
68.4deg,
|
|
69
|
+
rgba(99, 251, 215, 1) -0.4%,
|
|
70
|
+
rgba(5, 222, 250, 1) 100.2%
|
|
71
|
+
);
|
|
72
|
+
box-shadow: 0 0 10px #78ffd6;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.gameboy-button.right {
|
|
76
|
+
grid-row: 2/3;
|
|
77
|
+
grid-column: 3/4;
|
|
78
|
+
background: linear-gradient(
|
|
79
|
+
68.4deg,
|
|
80
|
+
rgba(176, 255, 237, 1) -0.4%,
|
|
81
|
+
rgba(161, 244, 255, 1) 100.2%
|
|
82
|
+
);
|
|
83
|
+
box-shadow: 0 0 10px rgba(176, 255, 237, 1);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.gameboy * {
|
|
87
|
+
-webkit-touch-callout: none;
|
|
88
|
+
-webkit-user-select: none;
|
|
89
|
+
-moz-user-select: none;
|
|
90
|
+
-ms-user-select: none;
|
|
91
|
+
user-select: none;
|
|
92
|
+
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
.gamePad {
|
|
2
|
+
display: grid;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
grid-template-columns: repeat(3, 1fr);
|
|
6
|
+
grid-template-rows: repeat(3, 1fr);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.padButton {
|
|
10
|
+
display: flex;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
align-items: center;
|
|
13
|
+
position: relative;
|
|
14
|
+
width: 5rem;
|
|
15
|
+
height: 5rem;
|
|
16
|
+
border-radius: 50%;
|
|
17
|
+
font-size: 1rem;
|
|
18
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
19
|
+
color: white;
|
|
20
|
+
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
transition: all 0.3s ease-in;
|
|
23
|
+
margin: 0.5rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.padButton:hover {
|
|
27
|
+
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.padButton::after {
|
|
31
|
+
content: "";
|
|
32
|
+
position: absolute;
|
|
33
|
+
width: 4rem;
|
|
34
|
+
height: 4rem;
|
|
35
|
+
border-radius: 50%;
|
|
36
|
+
background: rgba(0, 0, 0, 0.2);
|
|
37
|
+
z-index: 100000;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* padButton isClicked variant */
|
|
41
|
+
.padButton.isClicked {
|
|
42
|
+
background: radial-gradient(
|
|
43
|
+
circle at center,
|
|
44
|
+
rgba(245, 177, 97, 1) 0.4%,
|
|
45
|
+
rgba(236, 54, 110, 1) 100.2%
|
|
46
|
+
);
|
|
47
|
+
box-shadow: 0 0 1rem rgba(245, 177, 97, 1);
|
|
48
|
+
color: black;
|
|
49
|
+
transition: all 0.3s ease-in;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.padButton.isClicked:hover {
|
|
53
|
+
box-shadow: 0 0 2rem rgba(245, 177, 97, 1);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.gamePad * {
|
|
57
|
+
-webkit-touch-callout: none;
|
|
58
|
+
-webkit-user-select: none;
|
|
59
|
+
-moz-user-select: none;
|
|
60
|
+
-ms-user-select: none;
|
|
61
|
+
user-select: none;
|
|
62
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
.joyStick {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
text-align: center;
|
|
6
|
+
width: 12rem;
|
|
7
|
+
height: 12rem;
|
|
8
|
+
overflow: auto;
|
|
9
|
+
border-radius: 50%;
|
|
10
|
+
background: rgba(0, 0, 0, 0.5);
|
|
11
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* .joyStick::after {
|
|
15
|
+
content: "";
|
|
16
|
+
width: 10rem;
|
|
17
|
+
height: 10rem;
|
|
18
|
+
border-radius: 50%;
|
|
19
|
+
background: rgba(0, 0, 0, 0.2);
|
|
20
|
+
} */
|
|
21
|
+
|
|
22
|
+
.joystickBall {
|
|
23
|
+
width: 5rem;
|
|
24
|
+
height: 5rem;
|
|
25
|
+
transform: translate(-50%, -50%);
|
|
26
|
+
border-radius: 50%;
|
|
27
|
+
background: rgba(0, 0, 0, 0.5);
|
|
28
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
29
|
+
cursor: pointer;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.joyStick * {
|
|
33
|
+
-webkit-touch-callout: none;
|
|
34
|
+
-webkit-user-select: none;
|
|
35
|
+
-moz-user-select: none;
|
|
36
|
+
-ms-user-select: none;
|
|
37
|
+
user-select: none;
|
|
38
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
.jumpPortal {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: center;
|
|
4
|
+
align-items: center;
|
|
5
|
+
text-align: center;
|
|
6
|
+
margin: 1rem;
|
|
7
|
+
font-size: 0.8rem;
|
|
8
|
+
border-radius: 50%;
|
|
9
|
+
width: 5rem;
|
|
10
|
+
height: 5rem;
|
|
11
|
+
color: white;
|
|
12
|
+
background: rgba(0, 0, 0, 0.6);
|
|
13
|
+
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.6);
|
|
14
|
+
transition: all 0.2s ease-in;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.keyBoardToolInner {
|
|
2
|
+
display: grid;
|
|
3
|
+
justify-content: center;
|
|
4
|
+
align-items: center;
|
|
5
|
+
grid-template-columns: repeat(20, 2.5rem);
|
|
6
|
+
grid-template-rows: repeat(10, 2.5rem);
|
|
7
|
+
gap: 0.5rem;
|
|
8
|
+
width: 40rem;
|
|
9
|
+
height: 20rem;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.keyCap {
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
align-items: center;
|
|
16
|
+
font-size: 0.8rem;
|
|
17
|
+
border-radius: 5px;
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: 100%;
|
|
20
|
+
color: white;
|
|
21
|
+
background: rgba(0, 0, 0, 0.2);
|
|
22
|
+
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
|
|
23
|
+
transition: all 0.2s ease-in;
|
|
24
|
+
}
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: "Open Sans", sans-serif;
|
|
3
|
+
src: local("Open Sans"),
|
|
4
|
+
url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap");
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@keyframes pulseWhite {
|
|
8
|
+
0% {
|
|
9
|
+
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
|
|
10
|
+
opacity: 1;
|
|
11
|
+
}
|
|
12
|
+
70% {
|
|
13
|
+
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
|
|
14
|
+
opacity: 0.7;
|
|
15
|
+
}
|
|
16
|
+
100% {
|
|
17
|
+
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
18
|
+
opacity: 1;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* avatar style */
|
|
23
|
+
.avatar {
|
|
24
|
+
position: absolute;
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
text-align: center;
|
|
29
|
+
top: 50%;
|
|
30
|
+
left: 50%;
|
|
31
|
+
transform: translate(-50%, -50%);
|
|
32
|
+
width: 2rem;
|
|
33
|
+
height: 2rem;
|
|
34
|
+
border-radius: 50%;
|
|
35
|
+
background: rgba(5, 222, 250, 1);
|
|
36
|
+
box-shadow: 0 0 10px rgba(5, 222, 250, 1);
|
|
37
|
+
border: 2px solid transparent;
|
|
38
|
+
object-fit: cover;
|
|
39
|
+
z-index: 100;
|
|
40
|
+
animation: pulseWhite 2s infinite;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* plusMinus style */
|
|
44
|
+
.plusMinus {
|
|
45
|
+
position: relative;
|
|
46
|
+
display: flex;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
align-items: center;
|
|
49
|
+
width: 2rem;
|
|
50
|
+
height: 2rem;
|
|
51
|
+
border-radius: 50%;
|
|
52
|
+
background: rgba(0, 0, 0, 0.5);
|
|
53
|
+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
|
54
|
+
transition: all 0.5s ease-in;
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
border: 2px solid transparent;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.plusMinus:hover {
|
|
60
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* border style */
|
|
64
|
+
.border {
|
|
65
|
+
width: 4rem;
|
|
66
|
+
height: 4rem;
|
|
67
|
+
border-radius: 50%;
|
|
68
|
+
box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
|
|
69
|
+
transform: scale(1);
|
|
70
|
+
animation: pulseWhite 2s infinite;
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
transition: all 0.5s ease-in;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.border:hover {
|
|
76
|
+
transform: scale(1.1);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* minimap style */
|
|
80
|
+
.minimap {
|
|
81
|
+
margin: 1rem;
|
|
82
|
+
border-radius: 50%;
|
|
83
|
+
background: rgba(0, 0, 0, 0.6);
|
|
84
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
85
|
+
backdrop-filter: blur(1rem);
|
|
86
|
+
-webkit-backdrop-filter: blur(1rem);
|
|
87
|
+
width: 18rem;
|
|
88
|
+
height: 18rem;
|
|
89
|
+
border: 4px solid rgba(0, 0, 0, 0.5);
|
|
90
|
+
overflow: hidden;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@media (max-width: 1024px) {
|
|
94
|
+
.minimap {
|
|
95
|
+
width: 17rem;
|
|
96
|
+
height: 17rem;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@media (max-width: 768px) {
|
|
101
|
+
.minimap {
|
|
102
|
+
width: 16rem;
|
|
103
|
+
height: 16rem;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* minimapOuter style */
|
|
108
|
+
.minimapOuter {
|
|
109
|
+
position: absolute;
|
|
110
|
+
display: flex;
|
|
111
|
+
align-items: center;
|
|
112
|
+
justify-content: center;
|
|
113
|
+
text-align: center;
|
|
114
|
+
width: 18rem;
|
|
115
|
+
height: 18rem;
|
|
116
|
+
overflow: hidden;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* minimapInner style */
|
|
120
|
+
.minimapInner {
|
|
121
|
+
position: relative;
|
|
122
|
+
display: flex;
|
|
123
|
+
top: 50%;
|
|
124
|
+
left: 50%;
|
|
125
|
+
width: 18rem;
|
|
126
|
+
height: 18rem;
|
|
127
|
+
transform-origin: 50% 50%;
|
|
128
|
+
border-radius: 50%;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
@media (max-width: 1024px) {
|
|
133
|
+
.minimapInner {
|
|
134
|
+
width: 17rem;
|
|
135
|
+
height: 17rem;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
@media (max-width: 768px) {
|
|
140
|
+
.minimapInner {
|
|
141
|
+
width: 16rem;
|
|
142
|
+
height: 16rem;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
/* text style */
|
|
146
|
+
.text {
|
|
147
|
+
position: relative;
|
|
148
|
+
font-size: 1rem;
|
|
149
|
+
color: black;
|
|
150
|
+
padding: 0.5rem;
|
|
151
|
+
border-radius: 0.5rem;
|
|
152
|
+
background: rgba(255, 255, 255, 0.5);
|
|
153
|
+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
|
154
|
+
z-index: 3;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* scale style */
|
|
158
|
+
.scale {
|
|
159
|
+
position: absolute;
|
|
160
|
+
width: 13rem;
|
|
161
|
+
bottom: -5rem;
|
|
162
|
+
left: 50%;
|
|
163
|
+
transform: translateX(-50%);
|
|
164
|
+
display: flex;
|
|
165
|
+
align-items: center;
|
|
166
|
+
justify-content: space-between;
|
|
167
|
+
text-align: center;
|
|
168
|
+
font-size: 1.2rem;
|
|
169
|
+
color: white;
|
|
170
|
+
text-shadow: 0 0 10px black;
|
|
171
|
+
padding: 0.5rem;
|
|
172
|
+
border-radius: 0.5rem;
|
|
173
|
+
box-shadow: 0 0 10px solid black;
|
|
174
|
+
background: rgba(0, 0, 0, 0.5);
|
|
175
|
+
z-index: 3;
|
|
176
|
+
-webkit-backdrop-filter: blur(2rem);
|
|
177
|
+
backdrop-filter: blur(2rem);
|
|
178
|
+
font-family: "Open Sans", sans-serif;
|
|
179
|
+
font-weight: 300;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* minimapObject style */
|
|
183
|
+
.minimapObject {
|
|
184
|
+
position: absolute;
|
|
185
|
+
display: flex;
|
|
186
|
+
align-items: center;
|
|
187
|
+
justify-content: center;
|
|
188
|
+
text-align: center;
|
|
189
|
+
border-radius: 2px;
|
|
190
|
+
background: rgba(0, 0, 0, 0.3);
|
|
191
|
+
/* border: 2px solid rgba(88, 88, 88, 0.5); */
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.textObject {
|
|
195
|
+
position: absolute;
|
|
196
|
+
display: flex;
|
|
197
|
+
align-items: center;
|
|
198
|
+
justify-content: center;
|
|
199
|
+
text-align: center;
|
|
200
|
+
/* border: 2px solid rgba(88, 88, 88, 0.5); */
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.direction {
|
|
204
|
+
position: absolute;
|
|
205
|
+
color: white;
|
|
206
|
+
font-size: 1.5rem;
|
|
207
|
+
z-index: 2000;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.east {
|
|
211
|
+
top: 50%;
|
|
212
|
+
right: 0;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.west {
|
|
216
|
+
top: 50%;
|
|
217
|
+
left: 0;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.north {
|
|
221
|
+
bottom: 0;
|
|
222
|
+
left: 50%;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.south {
|
|
226
|
+
top: 0;
|
|
227
|
+
left: 50%;
|
|
228
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
.ridable {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: center;
|
|
4
|
+
align-items: center;
|
|
5
|
+
text-align: center;
|
|
6
|
+
margin: 1rem;
|
|
7
|
+
font-size: 0.8rem;
|
|
8
|
+
border-radius: 50%;
|
|
9
|
+
width: 5rem;
|
|
10
|
+
height: 5rem;
|
|
11
|
+
color: white;
|
|
12
|
+
background: rgba(0, 0, 0, 0.6);
|
|
13
|
+
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.6);
|
|
14
|
+
transition: all 0.2s ease-in;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
}
|
|
@@ -133,7 +133,7 @@ export function useZoom() {
|
|
|
133
133
|
export function ZoomButton(props) {
|
|
134
134
|
var _this = this;
|
|
135
135
|
var _a = useZoom(), setZoom = _a.setZoom, isZoom = _a.isZoom;
|
|
136
|
-
return (_jsx("div", { className: "zoomButton", style: props.zoomButtonStyle, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
|
|
136
|
+
return (_jsx("div", { className: "zoomButton", style: __assign({}, props.zoomButtonStyle), onClick: function () { return __awaiter(_this, void 0, void 0, function () {
|
|
137
137
|
return __generator(this, function (_a) {
|
|
138
138
|
switch (_a.label) {
|
|
139
139
|
case 0: return [4 /*yield*/, setZoom(props.position, isZoom)];
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
.zoomButton {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: center;
|
|
4
|
+
align-items: center;
|
|
5
|
+
text-align: center;
|
|
6
|
+
margin: 1rem;
|
|
7
|
+
font-size: 1.2rem;
|
|
8
|
+
border-radius: 50%;
|
|
9
|
+
width: 5rem;
|
|
10
|
+
height: 5rem;
|
|
11
|
+
color: white;
|
|
12
|
+
background: rgba(0, 0, 0, 0.6);
|
|
13
|
+
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.6);
|
|
14
|
+
transition: all 0.2s ease-in;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
}
|
package/index.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gaesup-world",
|
|
3
|
-
"version": "0.2.
|
|
4
|
-
"type": "
|
|
3
|
+
"version": "0.2.4",
|
|
4
|
+
"type": "commonjs",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"homepage": "https://jigglypop.github.io/gaesup-world/",
|
|
8
8
|
"scripts": {
|
|
9
9
|
"dev": "vite",
|
|
10
|
-
"
|
|
10
|
+
"clean": "rimraf dist/",
|
|
11
|
+
"copy-files": "copyfiles -u 1 src/**/*.html src/**/*.css dist/",
|
|
12
|
+
"build": "vite build",
|
|
11
13
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
12
14
|
"preview": "vite preview",
|
|
13
|
-
"prepare": "rm -rf dist && mkdir dist && tsc -p tsconfig.build.json",
|
|
14
|
-
"predeploy": "
|
|
15
|
+
"prepare": "rm -rf dist && mkdir dist && yarn clean && tsc -p tsconfig.build.json && yarn copy-files",
|
|
16
|
+
"predeploy": "vite build",
|
|
15
17
|
"deploy": "gh-pages -d dist"
|
|
16
18
|
},
|
|
17
19
|
"dependencies": {
|
|
18
20
|
"@dimforge/rapier3d": "^0.11.2",
|
|
19
21
|
"@react-icons/all-files": "^4.1.0",
|
|
20
|
-
"@react-three/drei": "9.
|
|
21
|
-
"@react-three/fiber": "8.15.
|
|
22
|
+
"@react-three/drei": "9.96.5",
|
|
23
|
+
"@react-three/fiber": "8.15.15",
|
|
22
24
|
"@react-three/rapier": "^1.2.1",
|
|
23
25
|
"@types/three": "^0.160.0",
|
|
24
26
|
"gh-pages": "^6.1.1",
|
|
@@ -27,28 +29,31 @@
|
|
|
27
29
|
"react": "^18.2.0",
|
|
28
30
|
"react-device-detect": "^2.2.3",
|
|
29
31
|
"react-dom": "^18.2.0",
|
|
30
|
-
"react-icons": "^
|
|
32
|
+
"react-icons": "^5.0.1",
|
|
31
33
|
"react-use-refs": "^1.0.1",
|
|
32
|
-
"three": "^0.160.
|
|
34
|
+
"three": "^0.160.1"
|
|
33
35
|
},
|
|
34
36
|
"devDependencies": {
|
|
35
|
-
"@types/react": "^18.2.
|
|
37
|
+
"@types/react": "^18.2.48",
|
|
36
38
|
"@types/react-dom": "^18.2.18",
|
|
37
|
-
"@typescript-eslint/eslint-plugin": "^6.
|
|
38
|
-
"@typescript-eslint/parser": "^6.
|
|
39
|
+
"@typescript-eslint/eslint-plugin": "^6.19.1",
|
|
40
|
+
"@typescript-eslint/parser": "^6.19.1",
|
|
39
41
|
"@vanilla-extract/css": "^1.14.0",
|
|
40
42
|
"@vanilla-extract/dynamic": "^2.1.0",
|
|
41
43
|
"@vanilla-extract/recipes": "^0.5.1",
|
|
42
44
|
"@vanilla-extract/sprinkles": "^1.6.1",
|
|
43
|
-
"@vanilla-extract/vite-plugin": "^3.9.
|
|
45
|
+
"@vanilla-extract/vite-plugin": "^3.9.4",
|
|
44
46
|
"@vitejs/plugin-react-swc": "^3.5.0",
|
|
47
|
+
"copyfiles": "^2.4.1",
|
|
48
|
+
"css-loader": "^6.9.1",
|
|
45
49
|
"eslint": "^8.56.0",
|
|
46
50
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
47
51
|
"eslint-plugin-react-refresh": "^0.4.5",
|
|
48
52
|
"path": "^0.12.7",
|
|
49
|
-
"prettier": "^3.
|
|
53
|
+
"prettier": "^3.2.4",
|
|
54
|
+
"rimraf": "^5.0.5",
|
|
50
55
|
"typescript": "^5.3.3",
|
|
51
|
-
"vite": "^5.0.
|
|
56
|
+
"vite": "^5.0.12",
|
|
52
57
|
"vite-plugin-svgr": "^4.2.0"
|
|
53
58
|
},
|
|
54
59
|
"description": "Web 3D Character Controller and World Platform Library",
|