diff --git a/.gitignore b/.gitignore
index 764c6e5891095933f6385c999636bc2bf4bd5115..307f9e2c9add070a2c9bfbcc5d442544aa286fa5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
.direnv
/dist
node_modules
-.parcel-cache
\ No newline at end of file
+.parcel-cache
+main.rom
\ No newline at end of file
diff --git a/app.js b/app.js
index 881bcf43d6bc6604b251960dc5125e2d2fd36c94..eb7d573f60abbcb96f984ab6d7150eb63323eb39 100644
--- a/app.js
+++ b/app.js
@@ -1,8 +1,34 @@
import jsQR from "./jsQR/";
+var SCREEN_WIDTH = 256;
+var SCREEN_HEIGHT = 240;
+
+const nesCanvas = document.getElementById("nes-canvas");
+canvas_ctx = nesCanvas.getContext("2d");
+let image = canvas_ctx.getImageData(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+
+canvas_ctx.fillStyle = "black";
+canvas_ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+
+const nesWorker = new Worker(new URL("nes.js", import.meta.url), {
+ type: "module",
+});
+
+nesWorker.onmessage = (buffer) => {
+ image.data.set(buffer["data"]);
+};
+
+function onAnimationFrame() {
+ window.requestAnimationFrame(onAnimationFrame);
+
+ canvas_ctx.putImageData(image, 0, 0);
+}
+
+onAnimationFrame();
+
var video = document.createElement("video");
var canvasElement = document.getElementById("canvas");
-var canvas = canvasElement.getContext("2d");
+var canvas = canvasElement.getContext("2d", { willReadFrequently: true });
var loadingMessage = document.getElementById("loadingMessage");
var outputContainer = document.getElementById("output");
var outputData = document.getElementById("outputData");
@@ -10,6 +36,112 @@ var outputData = document.getElementById("outputData");
const latencyDiv = document.getElementById("latency");
const latencyScan = document.getElementById("scan");
+// buttons
+const up = document.getElementById("up");
+const down = document.getElementById("down");
+const left = document.getElementById("left");
+const right = document.getElementById("right");
+const a = document.getElementById("a");
+const b = document.getElementById("b");
+const select = document.getElementById("select");
+const start = document.getElementById("start");
+
+let pressedButtons = {};
+
+// SO BAD AAAAAAA
+up.onpointerdown = () => {
+ pressedButtons.up = true;
+ checkButtonStatus();
+};
+
+up.onpointerup = () => {
+ pressedButtons.up = false;
+ checkButtonStatus();
+};
+
+down.onpointerdown = () => {
+ pressedButtons.down = true;
+ checkButtonStatus();
+};
+
+down.onpointerup = () => {
+ pressedButtons.down = false;
+ checkButtonStatus();
+};
+
+left.onpointerdown = () => {
+ pressedButtons.left = true;
+ checkButtonStatus();
+};
+
+left.onpointerup = () => {
+ pressedButtons.left = false;
+ checkButtonStatus();
+};
+
+right.onpointerdown = () => {
+ pressedButtons.right = true;
+ checkButtonStatus();
+};
+
+right.onpointerup = () => {
+ pressedButtons.right = false;
+ checkButtonStatus();
+};
+
+a.onpointerdown = () => {
+ pressedButtons.a = true;
+ checkButtonStatus();
+};
+
+a.onpointerup = () => {
+ pressedButtons.a = false;
+ checkButtonStatus();
+};
+
+b.onpointerdown = () => {
+ pressedButtons.b = true;
+ checkButtonStatus();
+};
+
+b.onpointerup = () => {
+ pressedButtons.b = false;
+ checkButtonStatus();
+};
+
+start.onpointerdown = () => {
+ pressedButtons.start = true;
+ checkButtonStatus();
+};
+
+start.onpointerup = () => {
+ pressedButtons.start = false;
+ checkButtonStatus();
+};
+
+select.onpointerdown = () => {
+ pressedButtons.select = true;
+ checkButtonStatus();
+};
+
+select.onpointerup = () => {
+ pressedButtons.select = false;
+ checkButtonStatus();
+};
+
+function checkButtonStatus() {
+ up.style = pressedButtons.up ? "background-color: red;" : "";
+ down.style = pressedButtons.down ? "background-color: red;" : "";
+ left.style = pressedButtons.left ? "background-color: red;" : "";
+ right.style = pressedButtons.right ? "background-color: red;" : "";
+ a.style = pressedButtons.a ? "background-color: red;" : "";
+ b.style = pressedButtons.b ? "background-color: red;" : "";
+ start.style = pressedButtons.start ? "background-color: red;" : "";
+ select.style = pressedButtons.select ? "background-color: red;" : "";
+
+ nesWorker.postMessage({ keys: pressedButtons });
+}
+
let datas = {};
function renderData() {
@@ -75,6 +207,11 @@ function tick() {
if (code?.data.length > 0) {
latencyScan.innerText = `Scan latency: ${delta}ms`;
+ // TODO Spencer
+ //if code.data.length {
+
+ //}
+
drawLine(
code.location.topLeftCorner,
code.location.topRightCorner,
@@ -102,5 +239,6 @@ function tick() {
renderData();
}
}
+
requestAnimationFrame(tick);
}
diff --git a/index.html b/index.html
index cdbe00db4749e00c085a5acbb2061ce0ecf9b51f..66f2cf451e5cce0d0f9d36a8589c6179627fb735 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,20 @@
+<!DOCTYPE html>
<html>
<body>
- <h1>jsQR Demo</h1>
- <a id="githubLink" href="https://github.com/cozmo/jsQR">View documentation on Github</a>
- <p>Pure JavaScript QR code decoding library.</p>
+ <h1>QRCade</h1>
+ <p>Spencer Kee & Stephen Downward</p>
+
<div id="loadingMessage">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
<canvas id="canvas" hidden></canvas>
+ <canvas id="nes-canvas" width="256" height="240" style="width: 50%"></canvas>
+ <button id="up">Up</button>
+ <button id="down">Down</button>
+ <button id="left">Left</button>
+ <button id="right">Right</button>
+ <button id="a">A</button>
+ <button id="b">B</button>
+ <button id="start">Start</button>
+ <button id="select">Select</button>
<div id="output" hidden>
<div id="latency"></div>
<div id="scan"></div>
diff --git a/nes.js b/nes.js
new file mode 100644
index 0000000000000000000000000000000000000000..17c81272e11574094de5a1e5a61b38e01dc2b5df
--- /dev/null
+++ b/nes.js
@@ -0,0 +1,88 @@
+import jsnes from "jsnes";
+
+var SCREEN_WIDTH = 256;
+var SCREEN_HEIGHT = 240;
+var FRAMEBUFFER_SIZE = SCREEN_WIDTH * SCREEN_HEIGHT;
+
+var framebuffer_u8, framebuffer_u32;
+
+var nes = new jsnes.NES({
+ onFrame: function (framebuffer_24) {
+ for (var i = 0; i < FRAMEBUFFER_SIZE; i++)
+ framebuffer_u32[i] = 0xff000000 | framebuffer_24[i];
+
+ postMessage(framebuffer_u8);
+ },
+});
+
+var pressedKeys = {};
+
+onmessage = (msg) => {
+ const keys = {
+ up: jsnes.Controller.BUTTON_UP,
+ down: jsnes.Controller.BUTTON_DOWN,
+ left: jsnes.Controller.BUTTON_LEFT,
+ right: jsnes.Controller.BUTTON_RIGHT,
+ a: jsnes.Controller.BUTTON_A,
+ b: jsnes.Controller.BUTTON_B,
+ start: jsnes.Controller.BUTTON_START,
+ select: jsnes.Controller.BUTTON_SELECT,
+ };
+
+ for (let i = 0; i < Object.keys(keys).length; i++) {
+ const key = Object.keys(keys)[i];
+ const val = keys[key];
+ if (pressedKeys[key] && !msg.data.keys[key]) {
+ // key was pressed and no longer is pressed
+ nes.buttonUp(1, val);
+ } else if (!pressedKeys[key] && msg.data.keys[key]) {
+ // key was not pressed but now it is
+ nes.buttonDown(1, val);
+ }
+ }
+
+ pressedKeys = msg.data.keys;
+};
+
+function nes_init() {
+ // Allocate framebuffer array.
+ var buffer = new ArrayBuffer(SCREEN_WIDTH * SCREEN_HEIGHT * 4);
+ framebuffer_u8 = new Uint8ClampedArray(buffer);
+ framebuffer_u32 = new Uint32Array(buffer);
+}
+
+function nes_boot(rom_data) {
+ nes.loadROM(rom_data);
+}
+
+function nes_load_url(path) {
+ nes_init();
+
+ var req = new XMLHttpRequest();
+ req.open("GET", path);
+ req.overrideMimeType("text/plain; charset=x-user-defined");
+ req.onerror = () => console.log(`Error loading ${path}: ${req.statusText}`);
+
+ req.onload = function () {
+ if (this.status === 200) {
+ nes_boot(this.responseText);
+
+ function doit() {
+ setTimeout(() => {
+ doit();
+ nes.frame();
+ }, 1000.0 / 60);
+ }
+
+ doit();
+ } else if (this.status === 0) {
+ // Aborted, so ignore error
+ } else {
+ req.onerror();
+ }
+ };
+
+ req.send();
+}
+
+nes_load_url("main.rom");
diff --git a/package.json b/package.json
index 1bf54c0e87a50548ec45c14ff8f38a1661754fea..54e7360139477ef3ac03b3f35fae9517cba2351a 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,11 @@
"license": "MIT",
"scripts": {
"start": "parcel index.html",
- "build": "parcel build index.html"
+ "build": "parcel build index.html",
+ "postbuild": "cp -r main.rom dist/"
},
"dependencies": {
+ "jsnes": "^1.2.1",
"parcel": "^2.13.3"
}
}
diff --git a/yarn.lock b/yarn.lock
index b32701202c1a8669de170d3c2cdfdc7be5d4907a..4f83949998653b233385b29fbdc11da24c16d06f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1172,6 +1172,11 @@ js-yaml@^4.1.0:
dependencies:
argparse "^2.0.1"
+jsnes@^1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/jsnes/-/jsnes-1.2.1.tgz#ca3718b7b28c00741142a73b88e39e177d14b1ce"
+ integrity sha512-Gn+lnv5B5c/TVwFSc8vzo7amiSogRyfMI9UL7VjYgKDrlTLf7GKuK2WD+t0gEcLbzh/NfMpkIlopzN/3cq760A==
+
json-parse-even-better-errors@^2.3.0:
version "2.3.1"
resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"