Add HexDump component

src/components/HexDump.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const { buffer } = defineProps<{ buffer: ArrayBuffer }>()
+
+const hexDump = computed(() => {
+  const arr = new Uint8Array(buffer)
+  const lines: string[] = []
+
+  let offset = 0
+  const total = buffer.byteLength
+
+  while (offset < total) {
+    const values = [offset.toString(16).padStart(8, '0')]
+    const asciiValues: string[] = []
+    let cnt = 0
+    while (offset < total && cnt < 16) {
+      if (cnt === 0 || cnt === 8) {
+        values.push('')
+      }
+      if (cnt === 0) {
+        asciiValues.push('  |')
+      }
+
+      const byte = arr[offset++]
+
+      values.push(byte.toString(16).padStart(2, '0'))
+
+      const char = String.fromCharCode(byte)
+      if (char > ' ' && char <= 'a') {
+        asciiValues.push(char)
+      } else {
+        asciiValues.push('.')
+      }
+
+      cnt += 1
+    }
+
+    while (cnt > 0 && cnt < 8) {
+      if (cnt === 7) {
+        values.push('')
+      }
+
+      values.push('  ')
+      asciiValues.push(' ')
+      cnt++
+    }
+
+    while (cnt > 0 && cnt < 16) {
+      values.push('  ')
+      asciiValues.push(' ')
+      cnt++
+    }
+
+    if (cnt) {
+      asciiValues.push('|')
+    }
+
+    lines.push(values.join(' ') + asciiValues.join(''))
+  }
+  lines.push(offset.toString(16).padStart(8, '0').padEnd(80, ' '))
+  return lines.join('\n')
+})
+</script>
+
+<template>
+  <pre v-memo="hexDump">{{ hexDump }}</pre>
+</template>
+
+<style scoped>
+pre {
+  width: fit-content;
+  padding: 0.5em 1em 10em;
+  box-sizing: border-box;
+  overflow: scroll;
+  min-height: 10rem;
+  height: 20rem;
+  max-height: 20rem;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+</style>

src/components/PlaygroundView.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import DiskReader from '@/components/DiskReader.vue'
+import HexDump from '@/components/HexDump.vue'
 
 const loadName = ref('')
 const loadTotal = ref(0)
 const loadLoaded = ref(0)
+const loadData = ref(new ArrayBuffer(0))
 
 function handleStart(name: string) {
   console.log(`Loading file: ${name}`)
@@ -15,7 +17,7 @@ function handleStart(name: string) {
 
 function handleLoad(data: ArrayBuffer) {
   console.log('File loaded')
-  console.log(data)
+  loadData.value = data
 }
 
 function handleError(message: string) {
@@ -35,7 +37,7 @@ function handleProgress(loaded: number, total: number) {
     <h2>Playground</h2>
     <p>This is my playground for testing out my code.</p>
     <section>
-      <h3>Upload Disk</h3>
+      <h3>Disk Upload</h3>
       <DiskReader
         @error="handleError"
         @load="handleLoad"
@@ -50,6 +52,10 @@ function handleProgress(loaded: number, total: number) {
         {{ ((loadLoaded / loadTotal) * 100.0).toFixed(2) }} %
       </div>
     </section>
+    <section>
+      <h3>Disk Hex Dump</h3>
+      <HexDump :buffer="loadData" />
+    </section>
   </section>
 </template>