mirror of
https://github.com/phoboslab/wipeout-rewrite
synced 2024-12-26 09:59:04 +01:00
WASM: add touch controls
This commit is contained in:
Dominic Szablewski
parent
a84982b31e
commit
98bd55a342
2 changed files with 176 additions and 1 deletions
|
|
@ -297,3 +297,11 @@ const char *input_button_to_name(button_t button) {
|
||||||
}
|
}
|
||||||
return button_names[button];
|
return button_names[button];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#if defined(__EMSCRIPTEN__)
|
||||||
|
#include <emscripten/emscripten.h>
|
||||||
|
void EMSCRIPTEN_KEEPALIVE set_button(uint32_t button, uint32_t state) {
|
||||||
|
input_set_button_state(button, state ? 1.0 : 0.0);
|
||||||
|
}
|
||||||
|
#endif
|
||||||
|
|
@ -3,6 +3,9 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
|
<meta name="viewport" content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<title>wipEout</title>
|
<title>wipEout</title>
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
|
|
@ -103,6 +106,132 @@
|
||||||
padding: 1px 2px;
|
padding: 1px 2px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
touch-callout: none;
|
||||||
|
user-drag: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
body.touch .button {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body.touch #head {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
body.touch {
|
||||||
|
user-select: none;
|
||||||
|
touch-callout: none;
|
||||||
|
user-drag: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
}
|
||||||
|
.button.active {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
.button div {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
color: #000;
|
||||||
|
background-color: #ffff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.button-round {
|
||||||
|
width: 12vw;
|
||||||
|
height: 12vw;
|
||||||
|
}
|
||||||
|
.button-round div {
|
||||||
|
width: 7vw;
|
||||||
|
height: 7vw;
|
||||||
|
border-radius: 100%;
|
||||||
|
font-size: 3vw;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 7vw;
|
||||||
|
|
||||||
|
}
|
||||||
|
.button-pill {
|
||||||
|
width: 12vw;
|
||||||
|
height: 6vw;
|
||||||
|
}
|
||||||
|
.button-pill div {
|
||||||
|
font-size: 1.5vw;
|
||||||
|
width: 7vw;
|
||||||
|
height: 3.5vw;
|
||||||
|
border-radius: 3.5vw;
|
||||||
|
line-height: 3.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-dpad {
|
||||||
|
width: 6vw;
|
||||||
|
height: 6vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-dpad div {
|
||||||
|
width: 7;
|
||||||
|
height: 7;
|
||||||
|
}
|
||||||
|
.button-dpad div:after {
|
||||||
|
content: '';
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.button-dpad-up div {
|
||||||
|
border-top-left-radius: 0.5vw;
|
||||||
|
border-top-right-radius: 0.5vw;
|
||||||
|
}
|
||||||
|
.button-dpad-up div:after {
|
||||||
|
left: 0;
|
||||||
|
bottom: -2.85vw;
|
||||||
|
border-left: 3vw solid transparent;
|
||||||
|
border-right: 3vw solid transparent;
|
||||||
|
border-top: 2.9vw solid #fff;
|
||||||
|
}
|
||||||
|
.button-dpad-down div {
|
||||||
|
border-bottom-left-radius: 0.5vw;
|
||||||
|
border-bottom-right-radius: 0.5vw;
|
||||||
|
}
|
||||||
|
.button-dpad-down div:after {
|
||||||
|
left: 0;
|
||||||
|
top: -2.85vw;
|
||||||
|
border-left: 3vw solid transparent;
|
||||||
|
border-right: 3vw solid transparent;
|
||||||
|
border-bottom: 2.9vw solid #fff;
|
||||||
|
}
|
||||||
|
.button-dpad-left div {
|
||||||
|
border-top-left-radius: 0.5vw;
|
||||||
|
border-bottom-left-radius: 0.5vw;
|
||||||
|
}
|
||||||
|
.button-dpad-left div:after {
|
||||||
|
top: 0;
|
||||||
|
right: -2.85vw;
|
||||||
|
border-top: 3vw solid transparent;
|
||||||
|
border-bottom: 3vw solid transparent;
|
||||||
|
border-left: 2.9vw solid #fff;
|
||||||
|
}
|
||||||
|
.button-dpad-right div {
|
||||||
|
border-top-right-radius: 0.5vw;
|
||||||
|
border-bottom-right-radius: 0.5vw;
|
||||||
|
}
|
||||||
|
.button-dpad-right div:after {
|
||||||
|
top: 0;
|
||||||
|
left: -2.85vw;
|
||||||
|
border-top: 3vw solid transparent;
|
||||||
|
border-bottom: 3vw solid transparent;
|
||||||
|
border-right: 2.9vw solid #fff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -143,6 +272,19 @@
|
||||||
no intro, no music ~11mb
|
no intro, no music ~11mb
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- button enums from src/input.h -->
|
||||||
|
<div class="button button-dpad button-dpad-up" style="left: 9vw; bottom: 22.5vw" data-button="82"><div></div></div>
|
||||||
|
<div class="button button-dpad button-dpad-down" style="left: 9vw; bottom: 9.5vw" data-button="81"><div></div></div>
|
||||||
|
<div class="button button-dpad button-dpad-left" style="left: 2vw; bottom: 16vw" data-button="80"><div></div></div>
|
||||||
|
<div class="button button-dpad button-dpad-right" style="left: 16vw; bottom: 16vw" data-button="79"><div></div></div>
|
||||||
|
|
||||||
|
<div class="button button-round" style="right: 2vw; bottom: 10vw" data-button="27"><div>X</div></div>
|
||||||
|
<div class="button button-round" style="right: 14vw; bottom: 10vw" data-button="29"><div>Y</div></div>
|
||||||
|
<div class="button button-pill" style="right: 2vw; bottom: 22vw" data-button="25"><div>br-r</div></div>
|
||||||
|
<div class="button button-pill" style="right: 14vw; bottom: 22vw" data-button="6"><div>br-l</div></div>
|
||||||
|
|
||||||
|
<div class="button button-pill" style="right: 2vw; top: 10vw" data-button="4"><div>view</div></div>
|
||||||
|
<div class="button button-pill" style="left: 68vw; top: 1vw" data-button="40"><div>pause</div></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -164,10 +306,12 @@
|
||||||
audioCtx.resume();
|
audioCtx.resume();
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
var requestFullscreen = (ev) => {
|
var requestFullscreen = (ev) => {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
document.getElementById('game').requestFullscreen();
|
document.getElementById('game').requestFullscreen();
|
||||||
};
|
};
|
||||||
|
|
||||||
document.getElementById('select-version').style.display = 'block';
|
document.getElementById('select-version').style.display = 'block';
|
||||||
document.getElementById('fullscreen').addEventListener('click', (ev) => requestFullscreen(ev, 'wipeout.js'))
|
document.getElementById('fullscreen').addEventListener('click', (ev) => requestFullscreen(ev, 'wipeout.js'))
|
||||||
document.getElementById('load-full-version').addEventListener('click', (ev) => loadScript(ev, 'wipeout.js'));
|
document.getElementById('load-full-version').addEventListener('click', (ev) => loadScript(ev, 'wipeout.js'));
|
||||||
|
|
@ -177,6 +321,29 @@
|
||||||
var progressElement = document.getElementById('progress');
|
var progressElement = document.getElementById('progress');
|
||||||
var spinnerElement = document.getElementById('spinner');
|
var spinnerElement = document.getElementById('spinner');
|
||||||
|
|
||||||
|
let onGameLoad = function() {
|
||||||
|
document.getElementById('loading').style.display = 'none';
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
|
||||||
|
// Setup touch buttons if this is a touch device
|
||||||
|
if ('ontouchstart' in window) {
|
||||||
|
document.getElementById('head').style.display = 'none';
|
||||||
|
document.body.classList.add('touch');
|
||||||
|
let touchButtons = document.getElementsByClassName('button');
|
||||||
|
for (let i = 0; i < touchButtons.length; i++) {
|
||||||
|
let button = touchButtons[i];
|
||||||
|
button.addEventListener('touchstart', (ev) => {
|
||||||
|
Module._set_button(parseInt(ev.currentTarget.dataset.button), 1);
|
||||||
|
ev.currentTarget.classList.add('active');
|
||||||
|
});
|
||||||
|
button.addEventListener('touchend', (ev) => {
|
||||||
|
Module._set_button(parseInt(ev.currentTarget.dataset.button), 0);
|
||||||
|
ev.currentTarget.classList.remove('active');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
var Module = {
|
var Module = {
|
||||||
preRun: [],
|
preRun: [],
|
||||||
postRun: [],
|
postRun: [],
|
||||||
|
|
@ -211,7 +378,7 @@
|
||||||
progressElement.hidden = true;
|
progressElement.hidden = true;
|
||||||
if (!text) {
|
if (!text) {
|
||||||
spinnerElement.hidden = true;
|
spinnerElement.hidden = true;
|
||||||
document.getElementById('loading').style.display = 'none';
|
onGameLoad();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
statusElement.innerHTML = text;
|
statusElement.innerHTML = text;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue