alessandrocuzzocrea/chip-8-emulator-js

View on GitHub
src/ui.js

Summary

Maintainability
A
2 hrs
Test Coverage
const chip8 = require("./chip8");

let lastPc = 0;

let instructionsDiv;
let pcDiv,
  iDiv,
  spDiv,
  dtDiv,
  stDiv,
  v0Div,
  v1Div,
  v2Div,
  v3Div,
  v4Div,
  v5Div,
  v6Div,
  v7Div,
  v8Div,
  v9Div,
  vaDiv,
  vbDiv,
  vcDiv,
  vdDiv,
  veDiv,
  vfDiv;

function init() {
  instructionsDiv = document.querySelector(".instructions");

  pcDiv = document.querySelector("#pc");
  iDiv = document.querySelector("#i");
  spDiv = document.querySelector("#sp");
  dtDiv = document.querySelector("#dt");
  stDiv = document.querySelector("#st");
  v0Div = document.querySelector("#v0");
  v1Div = document.querySelector("#v1");
  v2Div = document.querySelector("#v2");
  v3Div = document.querySelector("#v3");
  v4Div = document.querySelector("#v4");
  v5Div = document.querySelector("#v5");
  v6Div = document.querySelector("#v6");
  v7Div = document.querySelector("#v7");
  v8Div = document.querySelector("#v8");
  v9Div = document.querySelector("#v9");
  vaDiv = document.querySelector("#va");
  vbDiv = document.querySelector("#vb");
  vcDiv = document.querySelector("#vc");
  vdDiv = document.querySelector("#vd");
  veDiv = document.querySelector("#ve");
  vfDiv = document.querySelector("#vf");
}

function reset() {
  lastPc = 0;
}

function update(chip) {
  function formatDebugString(str, digits, val) {
    return `${str}: ${val
      .toString(16)
      .padStart(digits, "0")
      .toUpperCase()}`;
  }

  function formatHex(num) {
    return num
      .toString(16)
      .padStart(4, "0")
      .toUpperCase();
  }

  // Instructions
  while (instructionsDiv.firstChild) {
    instructionsDiv.removeChild(instructionsDiv.firstChild);
  }

  const currentPc = chip.pc;
  const lastPcDiff = currentPc - lastPc;
  if (lastPcDiff > 18 * 2 || lastPcDiff < 0) {
    lastPc = currentPc;
  }
  let pc = Math.max(lastPc - 2, 0);
  for (let i = 0; i < 20; i++) {
    const el = document.createElement("div");
    el.innerHTML = `${formatHex(pc)}| ${chip8.decode2(chip, pc)}`;

    if (pc === currentPc) {
      el.classList.add("current-instruction");
    }

    instructionsDiv.appendChild(el);
    pc += 2;
  }

  // Registers
  pcDiv.innerHTML = formatDebugString("PC", 4, chip.pc);
  iDiv.innerHTML = formatDebugString("I", 4, chip.i);
  spDiv.innerHTML = formatDebugString("SP", 2, chip.stack.length);
  dtDiv.innerHTML = formatDebugString("DT", 2, chip.delayTimer);
  stDiv.innerHTML = formatDebugString("ST", 2, chip.soundTimer);

  v0Div.innerHTML = formatDebugString("V0", 2, chip.v[0]);
  v1Div.innerHTML = formatDebugString("V1", 2, chip.v[1]);
  v2Div.innerHTML = formatDebugString("V2", 2, chip.v[2]);
  v3Div.innerHTML = formatDebugString("V3", 2, chip.v[3]);
  v4Div.innerHTML = formatDebugString("V4", 2, chip.v[4]);
  v5Div.innerHTML = formatDebugString("V5", 2, chip.v[5]);
  v6Div.innerHTML = formatDebugString("V6", 2, chip.v[6]);
  v7Div.innerHTML = formatDebugString("V7", 2, chip.v[7]);
  v8Div.innerHTML = formatDebugString("V8", 2, chip.v[8]);
  v9Div.innerHTML = formatDebugString("V9", 2, chip.v[9]);
  vaDiv.innerHTML = formatDebugString("VA", 2, chip.v[10]);
  vbDiv.innerHTML = formatDebugString("VB", 2, chip.v[11]);
  vcDiv.innerHTML = formatDebugString("VC", 2, chip.v[12]);
  vdDiv.innerHTML = formatDebugString("VD", 2, chip.v[13]);
  veDiv.innerHTML = formatDebugString("VE", 2, chip.v[14]);
  vfDiv.innerHTML = formatDebugString("VF", 2, chip.v[15]);
}

module.exports = { init, update, reset };