-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
101 lines (100 loc) · 2.75 KB
/
index.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="javascript:void(0);" id="vr">VR</a>
<div class="rows">
<div id="no-webgl">
<p>Your browser doesn't support WebGL 2.0!</p>
<p>This is an experimental project, and not designed for wide support.</p>
<p>Track support <a href="https://caniuse.com/#feat=webgl2">here</a></p>
</div>
<div id="romload">
<p>Load a Gameboy ROM to get started</p>
<a href="javascript:void(0);" id="upload">
<span>Select ROM</span>
<input disabled type="file" id="rom" />
</a>
</div>
<div id="graphics">
<canvas id="screen" width="320" height="288"></canvas>
</div>
<div id="controls">
<div id="controls_direction">
<a href="#" id="control_up"></a>
<div id="controls_lr">
<a href="javascript:void(0);" id="control_left"></a>
<a href="javascript:void(0);" id="control_right"></a>
</div>
<a href="javascript:void(0);" id="control_down"></a>
</div>
<div id="controls_ab">
<a href="javascript:void(0);" id="control_b">B</a>
<a href="javascript:void(0);" id="control_a">A</a>
</div>
</div>
<div id="controls_ss">
<a href="javascript:void(0);" id="control_select"></a>
<a href="javascript:void(0);" id="control_start"></a>
</div>
</div>
<script src="js/Audio.js"></script>
<script src="js/Controls.js"></script>
<script src="js/Graphics.js"></script>
<script src="js/SaveState.js"></script>
<script src="js/VM.js"></script>
<script src="js/VR.js"></script>
<script>
const screen = document.getElementById('screen');
let gl = null;
try {
gl = screen.getContext('webgl2');
if (gl) {
document.getElementById('romload').style.display = 'block';
}
} catch (e) {}
if (!gl) {
document.getElementById('no-webgl').style.display = 'block';
}
const vm = new VM(gl);
const upload = document.getElementById('rom');
const modal = document.getElementById('romload');
vm.ready().then(() => {
upload.disabled = false;
});
upload.addEventListener('change', function(e) {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function() {
const arrayBuffer = this.result;
const slice = new Uint8Array(arrayBuffer);
vm.reset(slice);
romload.style.display = 'none';
};
reader.readAsArrayBuffer(file);
} else {
vm.reset(null);
}
});
window.addEventListener('blur', function(e) {
if (vm._playing) {
vm.audio.pause();
}
});
window.addEventListener('focus', function(e) {
if (vm._playing) {
vm.audio.play();
}
});
window.addEventListener('contextmenu', function(e) {
e.preventDefault();
e.stopPropagation();
});
</script>
</body>
</html>