Initial commitHEAD master

author: Oxore <oxore@protonmail.com> 2024-12-08 14:16:58 +0300
committer: Oxore <oxore@protonmail.com> 2024-12-08 14:16:58 +0300
commit: d2f0c72ee1f196f109316278d9c13f2b18b15140 (patch)
tree: 6d7498afe9e6eec30fe51d1542a04b9addf134a8
2 files changed, 476 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7e11a50
--- /dev/null
+++ b/index.html
@@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Text file reading</title>
+  <meta charset="utf-8">
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1.0">
+</head>
+<style type="text/css">
+html {
+  background-color: #1d2021;
+  color: #fbf1c7;
+  --c00: #000;
+  --c01: #ceae77;
+  --c02: #ae9257;
+  --c03: #927731;
+  --c04: #775700;
+  --c05: #573131;
+  --c06: #ce7700;
+  --c07: #ae3100;
+  --c08: #575757;
+  --c09: #ffffff;
+  --c0a: #9292ae;
+  --c0b: #313157;
+  --c0c: #000000;
+  --c0d: #ffae00;
+  --c0e: #ae0000;
+  --c0f: #310000;
+  --c10: #000000;
+  --c11: #aeae92;
+  --c12: #575731;
+  --c13: #313100;
+  --c14: #ffceae;
+  --c15: #925700;
+  --c16: #573100;
+  --c17: #ffce00;
+  --c18: #ae7700;
+  --c19: #ffffff;
+  --c1a: #9292ae;
+  --c1b: #313157;
+  --c1c: #000000;
+  --c1d: #00ffff;
+  --c1e: #0057ce;
+  --c1f: #000031;
+  --c20: #000000;
+  --c21: #ffff00;
+  --c22: #ffae00;
+  --c23: #ce5700;
+  --c24: #920000;
+  --c25: #570000;
+  --c26: #00ae00;
+  --c27: #0057ce;
+  --c28: #777792;
+  --c29: #ffffff;
+  --c2a: #9292ae;
+  --c2b: #313157;
+  --c2c: #000000;
+  --c2d: #9200ce;
+  --c2e: #570092;
+  --c2f: #310031;
+  --c30: #000000;
+  --c31: #ae0000;
+  --c32: #570000;
+  --c33: #777757;
+  --c34: #313100;
+  --c35: #ffce92;
+  --c36: #ce9257;
+  --c37: #775731;
+  --c38: #0057ae;
+  --c39: #ffffff;
+  --c3a: #9292ae;
+  --c3b: #313157;
+  --c3c: #000000;
+  --c3d: #ceff00;
+  --c3e: #00ae00;
+  --c3f: #003100;
+}
+
+html, body, .image {
+  height: 100%;
+}
+
+#texture-view {
+  font-family: monospace;
+}
+
+.scrollBox {
+  overflow-y: scroll;
+  height: 100%;
+  position: relative;
+}
+
+.c00 {
+  background-color: var(--c00);
+  color: var(--c00);
+}
+.c01 {
+  background-color: var(--c01);
+  color: var(--c01);
+}
+.c02 {
+  background-color: var(--c02);
+  color: var(--c02);
+}
+.c03 {
+  background-color: var(--c03);
+  color: var(--c03);
+}
+.c04 {
+  background-color: var(--c04);
+  color: var(--c04);
+}
+.c05 {
+  background-color: var(--c05);
+  color: var(--c05);
+}
+.c06 {
+  background-color: var(--c06);
+  color: var(--c06);
+}
+.c07 {
+  background-color: var(--c07);
+  color: var(--c07);
+}
+.c08 {
+  background-color: var(--c08);
+  color: var(--c08);
+}
+.c09 {
+  background-color: var(--c09);
+  color: var(--c09);
+}
+.c0a {
+  background-color: var(--c0a);
+  color: var(--c0a);
+}
+.c0b {
+  background-color: var(--c0b);
+  color: var(--c0b);
+}
+.c0c {
+  background-color: var(--c0c);
+  color: var(--c0c);
+}
+.c0d {
+  background-color: var(--c0d);
+  color: var(--c0d);
+}
+.c0e {
+  background-color: var(--c0e);
+  color: var(--c0e);
+}
+.c0f {
+  background-color: var(--c0f);
+  color: var(--c0f);
+}
+
+.c10 {
+  background-color: var(--c10);
+  color: var(--c10);
+}
+.c11 {
+  background-color: var(--c11);
+  color: var(--c11);
+}
+.c12 {
+  background-color: var(--c12);
+  color: var(--c12);
+}
+.c13 {
+  background-color: var(--c13);
+  color: var(--c13);
+}
+.c14 {
+  background-color: var(--c14);
+  color: var(--c14);
+}
+.c15 {
+  background-color: var(--c15);
+  color: var(--c15);
+}
+.c16 {
+  background-color: var(--c16);
+  color: var(--c16);
+}
+.c17 {
+  background-color: var(--c17);
+  color: var(--c17);
+}
+.c18 {
+  background-color: var(--c18);
+  color: var(--c18);
+}
+.c19 {
+  background-color: var(--c19);
+  color: var(--c19);
+}
+.c1a {
+  background-color: var(--c1a);
+  color: var(--c1a);
+}
+.c1b {
+  background-color: var(--c1b);
+  color: var(--c1b);
+}
+.c1c {
+  background-color: var(--c1c);
+  color: var(--c1c);
+}
+.c1d {
+  background-color: var(--c1d);
+  color: var(--c1d);
+}
+.c1e {
+  background-color: var(--c1e);
+  color: var(--c1e);
+}
+.c1f {
+  background-color: var(--c1f);
+  color: var(--c1f);
+}
+
+.c20 {
+  background-color: var(--c20);
+  color: var(--c20);
+}
+.c21 {
+  background-color: var(--c21);
+  color: var(--c21);
+}
+.c22 {
+  background-color: var(--c22);
+  color: var(--c22);
+}
+.c23 {
+  background-color: var(--c23);
+  color: var(--c23);
+}
+.c24 {
+  background-color: var(--c24);
+  color: var(--c24);
+}
+.c25 {
+  background-color: var(--c25);
+  color: var(--c25);
+}
+.c26 {
+  background-color: var(--c26);
+  color: var(--c26);
+}
+.c27 {
+  background-color: var(--c27);
+  color: var(--c27);
+}
+.c28 {
+  background-color: var(--c28);
+  color: var(--c28);
+}
+.c29 {
+  background-color: var(--c29);
+  color: var(--c29);
+}
+.c2a {
+  background-color: var(--c2a);
+  color: var(--c2a);
+}
+.c2b {
+  background-color: var(--c2b);
+  color: var(--c2b);
+}
+.c2c {
+  background-color: var(--c2c);
+  color: var(--c2c);
+}
+.c2d {
+  background-color: var(--c2d);
+  color: var(--c2d);
+}
+.c2e {
+  background-color: var(--c2e);
+  color: var(--c2e);
+}
+.c2f {
+  background-color: var(--c2f);
+  color: var(--c2f);
+}
+
+.c30 {
+  background-color: var(--c30);
+  color: var(--c30);
+}
+.c31 {
+  background-color: var(--c31);
+  color: var(--c31);
+}
+.c32 {
+  background-color: var(--c32);
+  color: var(--c32);
+}
+.c33 {
+  background-color: var(--c33);
+  color: var(--c33);
+}
+.c34 {
+  background-color: var(--c34);
+  color: var(--c34);
+}
+.c35 {
+  background-color: var(--c35);
+  color: var(--c35);
+}
+.c36 {
+  background-color: var(--c36);
+  color: var(--c36);
+}
+.c37 {
+  background-color: var(--c37);
+  color: var(--c37);
+}
+.c38 {
+  background-color: var(--c38);
+  color: var(--c38);
+}
+.c39 {
+  background-color: var(--c39);
+  color: var(--c39);
+}
+.c3a {
+  background-color: var(--c3a);
+  color: var(--c3a);
+}
+.c3b {
+  background-color: var(--c3b);
+  color: var(--c3b);
+}
+.c3c {
+  background-color: var(--c3c);
+  color: var(--c3c);
+}
+.c3d {
+  background-color: var(--c3d);
+  color: var(--c3d);
+}
+.c3e {
+  background-color: var(--c3e);
+  color: var(--c3e);
+}
+.c3f {
+  background-color: var(--c3f);
+  color: var(--c3f);
+}
+
+</style>
+
+<body>
+  <input type="file" id="file">
+  <input type="text" id="offset" pattern="[0-9a-fA-F]*">
+  <button id="go">Go</button>
+  <button id="down">Down</button>
+  <button id="up">Up</button>
+  <table id="texture-view" cellspacing="0" cellpadding="0">
+  </table>
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e3bb175
--- /dev/null
+++ b/script.js
@@ -0,0 +1,109 @@
+let g_viewOffset = 100
+let g_data = new Uint8Array()
+let g_viewWidth = 4
+let g_viewHeight = 24
+
+function toHexString(value) {
+  let hex = value.toString(16)
+  while (hex.length < 8) {
+    hex = "0" + hex;
+  }
+  return hex
+}
+
+function updateTextureView(textureView, data, viewOffset) {
+  if (viewOffset == undefined) {
+    viewOffset = 0
+  }
+  viewSize = g_viewWidth * g_viewHeight
+  endOffset = viewOffset + viewSize
+  textureView.textContent = '' // Clear
+  let textureViewBody = document.createElement('tbody')
+  textureView.appendChild(textureViewBody)
+  for (let offset = viewOffset; offset < endOffset; offset += g_viewWidth) {
+    let tr = document.createElement('tr')
+    let tdOffset = document.createElement('td')
+    let offsetText = document.createTextNode(toHexString(offset))
+    tdOffset.appendChild(offsetText)
+    tr.appendChild(tdOffset)
+    for (let i = 0; i < g_viewWidth; i++) {
+      if (offset + i >= data.length) {
+        break;
+      }
+      const value = data[offset + i]
+      const color1 = ((value & 0xf0) >> 4)
+      const color2 = ((value & 0x0f))
+      let td1 = document.createElement('td')
+      td1.classList.add('c1' + color1.toString(16))
+      td1.appendChild(document.createTextNode(color1.toString(16) + '.'))
+      tr.appendChild(td1)
+      let td2 = document.createElement('td')
+      td2.classList.add('c1' + color2.toString(16))
+      td2.appendChild(document.createTextNode(color2.toString(16) + '.'))
+      tr.appendChild(td2)
+    }
+    textureViewBody.appendChild(tr)
+  }
+}
+
+function viewMoveDown(step) {
+  g_viewOffset = Math.max(0, Math.min(g_data.length, g_viewOffset + step))
+  updateTextureView(document.querySelector('table#texture-view'), g_data, g_viewOffset)
+}
+
+function viewGoToOffset() {
+  g_viewOffset = parseInt(document.querySelector('input#offset').value, 16)
+  updateTextureView(document.querySelector('table#texture-view'), g_data, g_viewOffset)
+}
+
+document.querySelector('button#down').addEventListener('click', (event) => {
+  viewMoveDown(g_viewWidth)
+})
+
+document.querySelector('button#up').addEventListener('click', (event) => {
+  viewMoveDown(-g_viewWidth)
+})
+
+document.querySelector('button#go').addEventListener('click', (event) => {
+  viewGoToOffset()
+})
+
+document.querySelector('input#offset').addEventListener('change', (event) => {
+  viewGoToOffset()
+})
+
+addEventListener("keypress", (event) => {
+  if (event.altKey || event.ctrlKey) {
+    return
+  }
+  switch (event.code) {
+  case 'KeyJ':
+    viewMoveDown(g_viewWidth * (event.shiftKey ? g_viewHeight : 1))
+    break
+  case 'KeyK':
+    viewMoveDown(g_viewWidth * -(event.shiftKey ? g_viewHeight : 1))
+    break
+  case 'KeyL':
+    viewMoveDown((event.shiftKey ? g_viewWidth : 1))
+    break
+  case 'KeyH':
+    viewMoveDown(-(event.shiftKey ? g_viewWidth : 1))
+    break
+  }
+});
+
+document.querySelector('input#file').addEventListener('change', (event) => {
+  let files = event.target.files
+  if (files.length == 0) {
+    return
+  }
+  const file = files[0]
+  let reader = new FileReader()
+  reader.onload = (e) => {
+    let arrayBuffer = e.target.result
+    g_data = new Uint8Array(arrayBuffer)
+    updateTextureView(document.querySelector('table#texture-view'), g_data, g_viewOffset)
+  }
+  reader.onerror = (e) => alert(e.target.error.name)
+  reader.readAsArrayBuffer(file)
+})
author	Oxore <oxore@protonmail.com>	2024-12-08 14:16:58 +0300
committer	Oxore <oxore@protonmail.com>	2024-12-08 14:16:58 +0300
commit	d2f0c72ee1f196f109316278d9c13f2b18b15140 (patch)
tree	6d7498afe9e6eec30fe51d1542a04b9addf134a8