gaesup-world 0.9.3 → 0.9.5

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.
@@ -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,243 @@
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
+
192
+ /* border: 2px solid rgba(88, 88, 88, 0.5); */
193
+ }
194
+
195
+ /* minimapObject style */
196
+ .imageObject {
197
+ position: absolute;
198
+ display: flex;
199
+ align-items: center;
200
+ justify-content: center;
201
+ text-align: center;
202
+ background:
203
+ linear-gradient(to bottom, transparent 95%, rgba(0, 0, 0, 0.2) 20%) 0 0 /
204
+ 100% 40px repeat-y,
205
+ linear-gradient(to right, transparent 38px, rgba(0, 0, 0, 0.2) 38px) 0 0 /
206
+ 40px 100% repeat-x transparent;
207
+ }
208
+
209
+ .textObject {
210
+ position: absolute;
211
+ display: flex;
212
+ align-items: center;
213
+ justify-content: center;
214
+ text-align: center;
215
+ /* border: 2px solid rgba(88, 88, 88, 0.5); */
216
+ }
217
+
218
+ .direction {
219
+ position: absolute;
220
+ color: white;
221
+ font-size: 1.5rem;
222
+ z-index: 2000;
223
+ }
224
+
225
+ .east {
226
+ top: 50%;
227
+ right: 0;
228
+ }
229
+
230
+ .west {
231
+ top: 50%;
232
+ left: 0;
233
+ }
234
+
235
+ .north {
236
+ bottom: 0;
237
+ left: 50%;
238
+ }
239
+
240
+ .south {
241
+ top: 0;
242
+ left: 50%;
243
+ }
@@ -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,61 @@
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 {
41
+ background: radial-gradient(
42
+ circle at center,
43
+ rgba(245, 177, 97, 1) 0.4%,
44
+ rgba(236, 54, 110, 1) 100.2%
45
+ );
46
+ box-shadow: 0 0 1rem rgba(245, 177, 97, 1);
47
+ color: black;
48
+ transition: all 0.3s ease-in;
49
+ }
50
+
51
+ .padButton.isClicked:hover {
52
+ box-shadow: 0 0 2rem rgba(245, 177, 97, 1);
53
+ }
54
+
55
+ .gamePad * {
56
+ -webkit-touch-callout: none;
57
+ -webkit-user-select: none;
58
+ -moz-user-select: none;
59
+ -ms-user-select: none;
60
+ user-select: none;
61
+ }
@@ -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,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
+ }
@@ -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
+ }
@@ -0,0 +1,13 @@
1
+ #leva__root > * {
2
+ top: 25rem;
3
+ left: 1rem;
4
+ width: 30rem;
5
+ }
6
+
7
+ @media (max-width: 1024px) {
8
+ #leva__root > * {
9
+ top: 25rem;
10
+ left: 1rem;
11
+ width: 25rem;
12
+ }
13
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gaesup-world",
3
- "version": "0.9.3",
3
+ "version": "0.9.5",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
13
13
  "build": "vite build",
14
14
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
15
15
  "preview": "vite preview",
16
- "prepare": "rm -rf dist && mkdir dist && tsc -p tsconfig.build.json",
16
+ "prepare": "rm -rf dist && mkdir dist && tsc -p tsconfig.build.json && pnpm copy-files",
17
17
  "predeploy": "vite build",
18
18
  "deploy": "gh-pages -d dist"
19
19
  },