-
Notifications
You must be signed in to change notification settings - Fork 1
/
controller.html
72 lines (65 loc) · 2.47 KB
/
controller.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>Termination Controller</title>
</head>
<body style="margin: 0; background: rgb(25,25,25);">
<div style="position: absolute; width: 100%; height: 99%; background: rgb(25,25,25);">
<img id="gunimage" src="img/gun.png" style="height: 100%; width: 100%;" />
<div id="infotext" style="position: absolute; top: 30vh; font-size: 1.5em; background: rgba(0,0,0,.8); color: white; text-align: center; padding: 1em;">
Hold phone like a gun and "shoot" at the game display<br />(Tap screen to shoot)
</div>
</div>
<script type="application/javascript">
var socket = new WebSocket("wss://"+window.location.host);
var currentOrientation = [];
var initialized = false;
socket.onmessage = function(evt) {
var num = parseInt(evt.data);
document.getElementById('gunimage').style.filter = 'hue-rotate(' + (num * 90) + 'deg)';
}
socket.onopen = function(evt) {
socket.send('INIT c ' + window.location.hash.substr(1)); // send info that this is a viewer
window.addEventListener("deviceorientation", function(evt) {
var beta;
if(evt.beta < 0) {
beta = Math.max(evt.beta, -180 - evt.beta);
} else {
beta = Math.min(evt.beta, 180 - evt.beta);
}
currentOrientation[0] = (evt.alpha % 180);
currentOrientation[1] = -beta;
if (initialized) {
var normalized = (currentOrientation[0] - initialized[0]);
if(normalized > 90) {
normalized -= 180;
}
if(normalized < -90) {
normalized += 180;
}
socket.send('POS ' + -normalized.toPrecision(5) + ' ' + -beta.toPrecision(5));
}
}, true);
}
window.addEventListener('touchstart', (evt) => {
if(!initialized) {
initialized = [currentOrientation[0], currentOrientation[1]];
document.getElementById('infotext').style.display = 'none';
} else {
var normalized = (currentOrientation[0] - initialized[0]);
if(normalized > 90) {
normalized -= 180;
}
if(normalized < -90) {
normalized += 180;
}
socket.send('BAM ' + -normalized.toPrecision(5) + ' ' + currentOrientation[1].toPrecision(5));
if(window.navigator && typeof window.navigator.vibrate === 'function') {
window.navigator.vibrate(30);
}
}
});
</script>
</body>
</html>