cyberdeck-matrix.js

/*!
 * cyberdeck-matrix.js — the single source of truth for the
 * "PulseSensor CyberDeck Matrix" comparison table.
 *
 * Hosted at:
 *   https://worldfamouselectronics.github.io/esp32-s3-RLCD-4.2/cyberdeck-matrix.js
 *
 * Any page that wants the matrix includes:
 *   <div id="cyberdeck-matrix"> ...static fallback table... </div>
 *   <script defer src="https://worldfamouselectronics.github.io/esp32-s3-RLCD-4.2/cyberdeck-matrix.js"></script>
 *
 * The page ships a static <table> inside the div (so no-JS readers, crawlers,
 * and AI agents still see the full matrix). This script REPLACES that table
 * with the canonical render below — so the data here is the one place to edit.
 *
 * TO ADD A BOARD: append one object to MATRIX.boards (a column) and, if you
 * like the fallback to match, regenerate each page's static table from this
 * file. Every page that embeds the script updates automatically.
 *
 * No styling here on purpose — the host page's <table> CSS (Shopify theme or
 * the installer page) styles it.
 *
 * Made by World Famous Electronics · MIT.
 */
(function () {
  "use strict";

  // ----------------------------------------------------------------------
  // DATA — the only thing you edit to change the matrix.
  // Boards are columns (left to right). Rows render top to bottom.
  // Pin fields are arrays: each entry renders as its own <code> chip,
  // joined by " / " (e.g. ["GP1", "GPIO1"] -> <code>GP1</code> / <code>GPIO1</code>).
  // ----------------------------------------------------------------------
  var MATRIX = {
    cornerLabel: "CyberDeck",
    boards: [
      {
        name: "PulseSensor CyberDeck (CYD)",
        url: "https://pulsesensor.com/pages/cyd",
        board: 'ESP32-2432S028 "Cheap Yellow Display"',
        screen: "320 × 240 color touchscreen (backlit)",
        bestFor: "Indoors, color & touch",
        extras: "Touch, speaker beep, rear LED",
        powerPin: ["IO21"],
        groundPin: ["GND"],
        signalPin: ["IO35"],
        flash: "Browser (ESP Web Tools)"
      },
      {
        name: "PulseSensor RLCD — LiveCyberDeck",
        url: "https://pulsesensor.com/pages/waveshare-rlcd",
        board: "Waveshare ESP32-S3-RLCD-4.2",
        screen: "400 × 300 reflective (no backlight)",
        bestFor: "Daylight, outdoors, eye comfort",
        extras: "Battery %, temperature & humidity, sparklines",
        powerPin: ["3V3"],
        groundPin: ["GND"],
        signalPin: ["GP1", "GPIO1"],
        flash: "Browser (ESP Web Tools)"
      }
    ],
    // Row order + which field each row pulls. `pins: true` wraps values in <code>.
    rows: [
      { label: "Board",      key: "board" },
      { label: "Screen",     key: "screen" },
      { label: "Best for",   key: "bestFor" },
      { label: "Extras",     key: "extras" },
      { label: "Power pin",  key: "powerPin",  pins: true },
      { label: "Ground pin", key: "groundPin", pins: true },
      { label: "Signal pin", key: "signalPin", pins: true },
      { label: "Flash",      key: "flash" }
    ]
  };

  // ----------------------------------------------------------------------
  // RENDER — emits the same markup as the static fallback table.
  // ----------------------------------------------------------------------
  function esc(s) {
    return String(s)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
  }

  function cellValue(row, board) {
    var v = board[row.key];
    if (row.pins) {
      return v
        .map(function (p) { return "<code>" + esc(p) + "</code>"; })
        .join(" / ");
    }
    return esc(v);
  }

  function renderHTML() {
    var boards = MATRIX.boards;
    var i, j;

    var head = "<tr><th>" + esc(MATRIX.cornerLabel) + "</th>";
    for (i = 0; i < boards.length; i++) {
      head += '<th><a href="' + esc(boards[i].url) + '">' +
        esc(boards[i].name) + "</a></th>";
    }
    head += "</tr>";

    var body = "";
    for (i = 0; i < MATRIX.rows.length; i++) {
      var row = MATRIX.rows[i];
      body += "<tr><th>" + esc(row.label) + "</th>";
      for (j = 0; j < boards.length; j++) {
        body += "<td>" + cellValue(row, boards[j]) + "</td>";
      }
      body += "</tr>";
    }

    return "<table><thead>" + head + "</thead><tbody>" + body + "</tbody></table>";
  }

  function mount() {
    var el = document.getElementById("cyberdeck-matrix");
    if (!el || el.getAttribute("data-cyberdeck-matrix") === "rendered") return;
    el.innerHTML = renderHTML();
    el.setAttribute("data-cyberdeck-matrix", "rendered");
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", mount);
  } else {
    mount();
  }
})();