From b44d4efe260124cfe7a4c24a7b882e63a1e7264d Mon Sep 17 00:00:00 2001
From: Christian Semmler <mail@csemmler.com>
Date: Thu, 28 Dec 2023 12:27:17 -0500
Subject: [PATCH] Use undefined

---
 LEGO1/lego3dview.h |   2 +-
 out.html           | 274 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 275 insertions(+), 1 deletion(-)
 create mode 100644 out.html
diff --git a/LEGO1/lego3dview.h b/LEGO1/lego3dview.h
index 9b9edb93..76fa7abc 100644
--- a/LEGO1/lego3dview.h
+++ b/LEGO1/lego3dview.h
@@ -27,7 +27,7 @@ class Lego3DView {
 	TglImpl::RendererImpl* m_renderImpl; // 0x08
 	TglImpl::DeviceImpl* m_deviceImpl;   // 0x0c
 	TglImpl::ViewImpl* m_viewPort;       // 0x10
-	char m_pad[0x78];                    // 0x14
+	undefined m_pad[0x78];               // 0x14
 	ViewManager* m_viewManager;          // 0x88
 	undefined m_unk0x8c[24];             // 0x8c
 };
diff --git a/out.html b/out.html
new file mode 100644
index 00000000..3992a783
--- /dev/null
+++ b/out.html
@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Decompilation Status</title>
+    <style>
+      body {
+        background: #202020;
+        color: #f0f0f0;
+        font-family: sans-serif;
+      }
+
+      h1 {
+        text-align: center;
+      }
+
+      .main {
+        width: 800px;
+        max-width: 100%;
+        margin: auto;
+      }
+
+      #search {
+        width: 100%;
+        box-sizing: border-box;
+        background: #303030;
+        color: #f0f0f0;
+        border: 1px #f0f0f0 solid;
+        padding: 0.5em;
+        border-radius: 0.5em;
+      }
+
+      #search::placeholder {
+        color: #b0b0b0;
+      }
+
+      #listing {
+        width: 100%;
+        border-collapse: collapse;
+        font-family: monospace;
+      }
+
+      .funcrow:hover {
+        background: #404040 !important;
+      }
+
+      .funcrow:nth-child(odd), #listing th {
+        background: #282828;
+      }
+
+      .funcrow:nth-child(even) {
+        background: #383838;
+      }
+
+      #listing td, #listing th {
+        border: 1px #f0f0f0 solid;
+        padding: 0.5em;
+      }
+
+      .diffneg {
+        color: #FF8080;
+      }
+
+      .diffpos {
+        color: #80FF80;
+      }
+
+      .identical {
+        font-style: italic;
+        text-align: center;
+      }
+
+      #sortind {
+        margin: 0 0.5em;
+      }
+
+      .filters {
+        font-size: 10pt;
+        text-align: center;
+        margin: 0.5em 0 1em 0;
+      }
+    </style>
+    <script>
+      var data = [{"address": "0x100ab370", "name": "Lego3DManager::Init", "matching": 0.965034965034965, "diff": ""}];
+
+      function diffCssClass(firstChar) {
+        return firstChar === '-' ? 'diffneg' : (firstChar === '+' ? 'diffpos' : '');
+      }
+
+      function asmLineToDiv(line) {
+        const diff_line = document.createElement('div');
+        diff_line.className = diffCssClass(line[0]);
+        diff_line.innerText = line;
+        return diff_line;
+      }
+
+      function formatAsm(asm) {
+        var lines = asm.split('\n');
+        return lines.filter(line => line.length > 0)
+                    .map(asmLineToDiv);
+      }
+
+      function rowClick() {
+        if (this.dataset.expanded === 'true') {
+          this.nextSibling.remove();
+          this.dataset.expanded = false;
+        } else {
+          var row = this.parentNode.insertBefore(document.createElement('tr'), this.nextSibling);
+          row.classList.add('diff');
+          var decCel = row.appendChild(document.createElement('td'));
+          decCel.colSpan = 3;
+          var diff = data[this.dataset.index].diff;
+          if (diff == '') {
+            diff = document.createElement('div');
+            diff.className = 'identical';
+            diff.innerText = 'Identical function - no diff';
+            decCel.appendChild(diff);
+          } else {
+            diff = formatAsm(diff);
+            for (const el of diff) {
+              decCel.appendChild(el);
+            }
+          }
+          this.dataset.expanded = true;
+        }
+      }
+
+      function closeAllDiffs() {
+        const collection = document.getElementsByClassName("diff");
+        for (var ele of collection) {
+          ele.remove();
+        }
+      }
+
+      const filterOptions = { text: '', hidePerfect: false };
+
+      function filter() {
+        closeAllDiffs();
+
+        var ltext = filterOptions.text.toLowerCase();
+
+        const collection = document.getElementsByClassName("funcrow");
+        var searchCount = 0;
+        for (var ele of collection) {
+          var eledata = data[ele.dataset.index];
+
+          const textOk = (ltext == ''
+            || eledata.address.toLowerCase().includes(ltext)
+            || eledata.name.toLowerCase().includes(ltext));
+
+          const perfOk = (!filterOptions.hidePerfect || (eledata.matching < 1));
+
+          if (textOk && perfOk) {
+            ele.style.display = '';
+            searchCount++;
+          } else {
+            ele.style.display = 'none';
+          }
+        }
+      }
+
+      var lastSortedCol = -1;
+      var ascending = true;
+
+      function sortByColumn(column) {
+        closeAllDiffs();
+
+        if (column == lastSortedCol) {
+          ascending = !ascending;
+        }
+        lastSortedCol = column;
+
+        const collection = document.getElementsByClassName("funcrow");
+
+        var newOrder = [];
+
+        for (var ele of collection) {
+          var inserted = false;
+
+          for (var i = 0; i < newOrder.length; i++) {
+            var cmpEle = newOrder[i];
+
+            var ourCol = ele.childNodes[column];
+            var cmpCol = cmpEle.childNodes[column];
+
+            if ((cmpCol.dataset.value > ourCol.dataset.value) == ascending) {
+              newOrder.splice(i, 0, ele);
+              inserted = true;
+              break;
+            }
+          }
+
+          if (!inserted) {
+            newOrder.push(ele);
+          }
+        }
+
+        for (var i = 1; i < newOrder.length; i++) {
+          newOrder[i - 1].after(newOrder[i]);
+        }
+
+        var sortIndicator = document.getElementById('sortind');
+        if (!sortIndicator) {
+          sortIndicator = document.createElement('span');
+          sortIndicator.id = 'sortind';
+        }
+        sortIndicator.innerHTML = ascending ? '&#9650;' : '&#9660;';
+
+        var th = document.getElementById('listingheader').childNodes[column];
+        th.appendChild(sortIndicator);
+      }
+
+      document.addEventListener("DOMContentLoaded", () => {
+        var listing = document.getElementById('listing');
+
+        const headers = listing.getElementsByTagName('th');
+        var headerCount = 0;
+        for (const header of headers) {
+          header.addEventListener('click', function(){
+            sortByColumn(this.dataset.column, true);
+          });
+
+          header.dataset.column = headerCount;
+          headerCount++;
+        }
+
+        data.forEach((element, index) => {
+          var row = listing.appendChild(document.createElement('tr'));
+          var addrCel = row.appendChild(document.createElement('td'));
+          var nameCel = row.appendChild(document.createElement('td'));
+          var matchCel = row.appendChild(document.createElement('td'));
+
+          addrCel.innerText = addrCel.dataset.value = element.address;
+          nameCel.innerText = nameCel.dataset.value = element.name;
+
+          var effectiveNote = (element.matching == 1 && element.diff != '') ? '*' : '';
+          matchCel.innerHTML = (element.matching * 100).toFixed(2) + '%' + effectiveNote;
+          matchCel.dataset.value = element.matching;
+
+          row.classList.add('funcrow');
+          row.addEventListener('click', rowClick);
+          row.dataset.index = index;
+          row.dataset.expanded = false;
+        });
+
+        var search = document.getElementById('search');
+        search.addEventListener('input', function (evt) {
+          filterOptions.text = search.value;
+          filter();
+        });
+
+        const cbHidePerfect = document.getElementById('cbHidePerfect');
+        cbHidePerfect.addEventListener('change', evt => {
+          filterOptions.hidePerfect = evt.target.checked;
+          filter();
+        })
+
+        sortByColumn(0);
+      });
+    </script>
+  </head>
+  <body>
+    <div class="main">
+      <h1>Decompilation Status</h1>
+      <input id="search" type="search" placeholder="Search for offset or function name...">
+      <div class="filters">
+        <label for="cbHidePerfect">Hide 100% match</label>
+        <input type="checkbox" id="cbHidePerfect" />
+      </div>
+      <table id="listing">
+        <tr id='listingheader'><th style='width: 20%'>Address</th><th style="width:60%">Name</th><th style='width: 20%'>Matching</th></tr>
+      </table>
+    </div>
+  </body>
+</html>
