hytopia 0.3.33 → 0.3.34
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.
|
@@ -117,6 +117,21 @@
|
|
|
117
117
|
hytopia.registerSceneUITemplate('player-queued', () => {
|
|
118
118
|
return document.getElementById('player-queued').content.cloneNode(true);
|
|
119
119
|
});
|
|
120
|
+
|
|
121
|
+
// MOBILE CONTROLS
|
|
122
|
+
// Handle jump button touch / untouch
|
|
123
|
+
const mobileJumpButton = document.getElementById('mobile-jump-button');
|
|
124
|
+
mobileJumpButton.addEventListener('touchstart', e => {
|
|
125
|
+
e.preventDefault();
|
|
126
|
+
mobileJumpButton.classList.add('active');
|
|
127
|
+
hytopia.pressInput(' ', true);
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
mobileJumpButton.addEventListener('touchend', e => {
|
|
131
|
+
e.preventDefault();
|
|
132
|
+
mobileJumpButton.classList.remove('active');
|
|
133
|
+
hytopia.pressInput(' ', false);
|
|
134
|
+
});
|
|
120
135
|
</script>
|
|
121
136
|
|
|
122
137
|
<!-- Game UI -->
|
|
@@ -153,6 +168,12 @@
|
|
|
153
168
|
</div>
|
|
154
169
|
</div>
|
|
155
170
|
|
|
171
|
+
<div class="mobile-controls">
|
|
172
|
+
<a id="mobile-jump-button" class="mobile-button">
|
|
173
|
+
<img src="{{CDN_ASSETS_URL}}/icons/jump.png" />
|
|
174
|
+
</a>
|
|
175
|
+
</div>
|
|
176
|
+
|
|
156
177
|
<!-- Styles -->
|
|
157
178
|
<style>
|
|
158
179
|
/* Global styles */
|
|
@@ -267,4 +288,51 @@
|
|
|
267
288
|
left: 50%;
|
|
268
289
|
transform: translateX(-50%);
|
|
269
290
|
}
|
|
291
|
+
|
|
292
|
+
/* By default, we hide the mobile controls */
|
|
293
|
+
.mobile-controls {
|
|
294
|
+
display: none;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
/*
|
|
298
|
+
We can use the body.mobile class to detect if we're on a mobile device.
|
|
299
|
+
The HYTOPIA game client will always add this class to the body element when running on a mobile device.
|
|
300
|
+
*/
|
|
301
|
+
body.mobile .mobile-controls { /* If this css selector matches because we're on mobile, show the mobile controls */
|
|
302
|
+
display: flex;
|
|
303
|
+
gap: 14px;
|
|
304
|
+
position: fixed;
|
|
305
|
+
bottom: 40px;
|
|
306
|
+
right: 40px;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
/* You can configure and style your buttons however you'd like. This is a minimalistic starting point. */
|
|
310
|
+
.mobile-button {
|
|
311
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
312
|
+
border-radius: 50%;
|
|
313
|
+
align-items: center;
|
|
314
|
+
justify-content: center;
|
|
315
|
+
display: flex;
|
|
316
|
+
width: 50px;
|
|
317
|
+
height: 50px;
|
|
318
|
+
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
319
|
+
will-change: transform, background-color;
|
|
320
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
321
|
+
font-family: 'Inter', sans-serif;
|
|
322
|
+
font-size: 14px;
|
|
323
|
+
font-weight: bold;
|
|
324
|
+
color: rgba(255, 255, 255, 0.8);
|
|
325
|
+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.mobile-button img {
|
|
329
|
+
width: 22px;
|
|
330
|
+
height: 22px;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.mobile-button.active {
|
|
334
|
+
transform: scale(0.92);
|
|
335
|
+
background-color: rgba(0, 0, 0, 0.75);
|
|
336
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
|
337
|
+
}
|
|
270
338
|
</style>
|