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.
|
@@ -100,6 +100,21 @@
|
|
|
100
100
|
const clone = template.content.cloneNode(true);
|
|
101
101
|
return clone;
|
|
102
102
|
});
|
|
103
|
+
|
|
104
|
+
// MOBILE CONTROLS
|
|
105
|
+
// Handle jump button touch / untouch
|
|
106
|
+
const mobileJumpButton = document.getElementById('mobile-jump-button');
|
|
107
|
+
mobileJumpButton.addEventListener('touchstart', e => {
|
|
108
|
+
e.preventDefault();
|
|
109
|
+
mobileJumpButton.classList.add('active');
|
|
110
|
+
hytopia.pressInput(' ', true);
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
mobileJumpButton.addEventListener('touchend', e => {
|
|
114
|
+
e.preventDefault();
|
|
115
|
+
mobileJumpButton.classList.remove('active');
|
|
116
|
+
hytopia.pressInput(' ', false);
|
|
117
|
+
});
|
|
103
118
|
</script>
|
|
104
119
|
|
|
105
120
|
<!-- Game Start Countdown -->
|
|
@@ -119,6 +134,13 @@
|
|
|
119
134
|
</div>
|
|
120
135
|
</div>
|
|
121
136
|
|
|
137
|
+
<!-- MOBILE CONTROLS -->
|
|
138
|
+
<div class="mobile-controls">
|
|
139
|
+
<a id="mobile-jump-button" class="mobile-button">
|
|
140
|
+
<img src="{{CDN_ASSETS_URL}}/icons/jump.png" />
|
|
141
|
+
</a>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
122
144
|
<!-- Template for Join NPC Scene UI-->
|
|
123
145
|
<template id="join-npc-message">
|
|
124
146
|
<div class="join-npc-message">
|
|
@@ -246,4 +268,51 @@
|
|
|
246
268
|
.time {
|
|
247
269
|
color: #ffd700;
|
|
248
270
|
}
|
|
271
|
+
|
|
272
|
+
/* By default, we hide the mobile controls */
|
|
273
|
+
.mobile-controls {
|
|
274
|
+
display: none;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
/*
|
|
278
|
+
We can use the body.mobile class to detect if we're on a mobile device.
|
|
279
|
+
The HYTOPIA game client will always add this class to the body element when running on a mobile device.
|
|
280
|
+
*/
|
|
281
|
+
body.mobile .mobile-controls { /* If this css selector matches because we're on mobile, show the mobile controls */
|
|
282
|
+
display: flex;
|
|
283
|
+
gap: 14px;
|
|
284
|
+
position: fixed;
|
|
285
|
+
bottom: 40px;
|
|
286
|
+
right: 40px;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
/* You can configure and style your buttons however you'd like. This is a minimalistic starting point. */
|
|
290
|
+
.mobile-button {
|
|
291
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
292
|
+
border-radius: 50%;
|
|
293
|
+
align-items: center;
|
|
294
|
+
justify-content: center;
|
|
295
|
+
display: flex;
|
|
296
|
+
width: 50px;
|
|
297
|
+
height: 50px;
|
|
298
|
+
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
299
|
+
will-change: transform, background-color;
|
|
300
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
301
|
+
font-family: 'Inter', sans-serif;
|
|
302
|
+
font-size: 14px;
|
|
303
|
+
font-weight: bold;
|
|
304
|
+
color: rgba(255, 255, 255, 0.8);
|
|
305
|
+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.mobile-button img {
|
|
309
|
+
width: 22px;
|
|
310
|
+
height: 22px;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.mobile-button.active {
|
|
314
|
+
transform: scale(0.92);
|
|
315
|
+
background-color: rgba(0, 0, 0, 0.75);
|
|
316
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
|
317
|
+
}
|
|
249
318
|
</style>
|