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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
module src/renderers/js
import src/renderer
import bytearray
// js ffi
extern type Node
extern io def getElementById(id: String): Node = jsWeb "document.getElementById(${id})"
extern io def addListener(event: String, node: Node) {handler: () => Unit}: Unit = jsWeb "${node}.addEventListener(${event}, () => $effekt.runToplevel((ks) => ${box handler}(ks)))"
// Custom logging function that logs to the console and the page
extern io def log(msg: String): Unit = jsWeb "log(${msg});"
extern io def loadRom(): ByteArray = jsWeb "rom ? rom : new Uint8Array(0)"
extern io def requestAnimationFrame {callback: () => Unit}: Unit = jsWeb "requestAnimationFrame(() => $effekt.runToplevel((ks) => ${box callback}(ks)))"
extern jsWeb """
let rom = undefined;
// Global Log Function
function log(msg) {
const message = new Date().toLocaleTimeString() + ' - ' + msg + ' \n'
console.log(message);
// Logging with timestamp
// document.getElementById('logs').innerText += message;
}
function romCheck() {
document.getElementById('rom').addEventListener('change', async (event) => {
rom = await event.target.files[0].bytes();
document.getElementById('start').removeAttribute('disabled');
});
}
"""
val pageContent = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Effekt8</title>
</head>
<body>
<h1>Effekt8: Chip8 Simulator written in Effekt Language</h1>
<label for="rom">Select a Chip8 ROM:</label>
<input type="file" id="rom" accept=".ch8" />
<button id="start" disabled>Start</button>
<hr />
<canvas id="canvas" width="640" height="320"></canvas>
<hr />
<div>
<h3>Logs:</h3>
<pre id="logs"></pre>
</div>
</body>
</html>
"""
// JS Renderer has 640x320 pixels, so we need to scale the screen by 10x.
val width = 640
val height = 320
val scale = 10
extern io def renderPage(content: String): Unit = jsWeb "document.write(${content}); romCheck();"
// Initialize the screen
def init(run: (ByteArray) => Unit at {io, global}) = {
renderPage(pageContent)
val startButton = getElementById("start")
addListener("click", startButton) {eventHandler {run}}
}
def eventHandler {onClick: (ByteArray) => Unit}: Unit = {
log("Start button clicked! Loading ROM...")
val rom: ByteArray = loadRom()
if (rom.size() != 0) {
log("ROM with size: " ++ show(rom.size()) ++ " loaded!")
onClick(rom)
} else {
log("No ROM loaded! Please select a ROM file.")
}
}
// Clear the screen (set black canvas)
def clear(): Unit = fill("black")
// Draw at (x, y) on the screen
extern io def draw(x: Int, y: Int): Unit = jsWeb """
(() => {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(10 * ${x}, 10 * ${y}, 10, 10);
})();
"""
extern io def fill(color: String): Unit = jsWeb """
(() => {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = ${color};
ctx.fillRect(0, 0, canvas.width, canvas.height);
})();
"""
extern io def get(x: Int, y: Int): Bool = jsWeb """
(() => {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const pixel = ctx.getImageData(10 * ${x}, 10 * ${y}, 1, 1).data;
return pixel[0] === 255;
})();
"""
extern io def update(f: () => Unit at {io, global}): Unit = jsWeb """
setInterval(() => {
$effekt.runToplevel((ks) => ${f}(ks));
}, 1000 / 60);
"""
namespace JSRenderer {
// make JS Renderer
def makeRenderer: Renderer = new Renderer {
def init(run) = init(run)
def clear() = clear()
def draw(x: Int, y: Int) = draw(x, y)
def update(f: () => Unit at {io, global}) = update(f)
def log(msg: String) = log(msg)
def fill(color: String) = fill(color)
def get(x: Int, y: Int) = get(x, y)
}
}
|
