summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--index.html367
-rw-r--r--script.js109
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)
+})
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-18 19:55:32 +0000