-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
90 lines (80 loc) · 3.07 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ZXScreen - ZX Spectrum Screen Simulator</title>
<style>
body { font-size: 16px; color: #eee; margin: 25px 0; text-align: center; background: darkslategray; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
#zxs, form { display: inline-block; width:512px; }
#zxs { height: 384px; }
form { text-align: left; margin: 0 10px;}
input[type=button] { padding: 0 15px; }
input[type=text] { width:230px; }
a,a:visited { color:#fff; text-decoration:underline; }
</style>
</head>
<body>
<h1>ZX Screen</h1>
<form>
<div id="zxs"></div><br>
<p>To view a Spectrum screen in HTML/CSS, drag and drop an SCR file, enter a URL to load, or load a sample image:</p>
<p><input type="text" placeholder="URL" id="scr_url"> <input id="loadURL" type="button" value="Load from URL"> <input id="loadSample" type="button" value="Load sample 1/8"></p>
<p><input id="random" type="button" value="Random data"></p>
<p>For more information, visit <a href="https://github.com/jonrandy/zxscreen">https://github.com/jonrandy/zxscreen</a></p>
</form>
<script type="module">
import * as zx from './zxscreen.js'
zx.screen(document.getElementById('zxs'), {pixelSize:2})
let sampleNum = 0
document.getElementById('loadSample').addEventListener('click', e=>{
e.preventDefault()
load(`test${sampleNum+1}.scr`)
sampleNum = (sampleNum + 1) % 8
document.getElementById('loadSample').value = `Load sample ${sampleNum+1}/8`
})
document.getElementById('loadURL').addEventListener('click', e=>{
e.preventDefault()
load(window.scr_url.value)
})
document.getElementById('random').addEventListener('click', dump)
window.addEventListener('drop', function(e) {
e.preventDefault()
})
window.addEventListener('dragover', function(e) {
e.preventDefault()
})
document.addEventListener('drop', function(e) {
e.preventDefault()
let fname
if (fname=e.dataTransfer.getData("text/plain")) {
load(fname)
} else if (e.dataTransfer.items.length == 1 && e.dataTransfer.items[0].kind === 'file') {
let file = e.dataTransfer.items[0].getAsFile()
const reader = new FileReader();
reader.onload = e=>{
zx.poke$(16384, new Uint8Array(e.target.result))
}
reader.readAsArrayBuffer(file);
}
})
function dump() {
zx.poke$(16384, Uint8Array.from({length: 6912}, ()=>~~(Math.random()*255)))
}
function load(url) {
let oReq = new XMLHttpRequest()
oReq.open("GET", `${url}`, true)
oReq.responseType = "arraybuffer"
oReq.onload = function () {
let arrayBuffer = oReq.response
if (arrayBuffer) {
let byteArray = new Uint8Array(arrayBuffer)
zx.poke$(16384, byteArray)
}
}
oReq.send(null)
}
window.load = load
</script>
</body>
</html>