wee

.gitignore

 .direnv
 /dist
 node_modules
-.parcel-cache
\ No newline at end of file
+.parcel-cache
+main.rom
\ No newline at end of file

app.js

 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);
 }

index.html

+<!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>

nes.js

+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");

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"
   }
 }

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"