Add FloppyDisk class to start consolidating disk image decoding

src/components/DiskInfo.vue

@@ -1,18 +1,18 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { decodeBootSector } from '@/floppy/disk.ts'
+import { FloppyDisk } from '@/floppy/disk.ts'
 
 const { data = new ArrayBuffer(0) } = defineProps<{ data: ArrayBuffer }>()
 
-const bootSector = computed(() => {
+const floppyDisk = computed(() => {
-  return decodeBootSector(data)
+  return new FloppyDisk(data)
 })
 </script>
 
 <template>
-  <section v-if="bootSector">
+  <section v-if="floppyDisk.bootSectorInfo">
     <h3>Boot Sector</h3>
-    <pre>{{ bootSector }}</pre>
+    <pre>{{ floppyDisk.bootSectorInfo }}</pre>
   </section>
 </template>
 

src/floppy/disk.ts

@@ -30,7 +30,20 @@ export interface IBiosParameterBlock {
   totalSectorsLarge: number
 }
 
-export function decodeBootSector(buffer: ArrayBuffer): IBootSectorInfo | null {
+export class FloppyDisk {
+  private readonly _buffer = new ArrayBuffer(0)
+  private _bootSector: IBootSectorInfo | null = null
+
+  constructor(buffer: ArrayBuffer) {
+    this._buffer = buffer
+  }
+
+  get bootSectorInfo() {
+    return (this._bootSector = this._bootSector ?? decodeBootSector(this._buffer))
+  }
+}
+
+function decodeBootSector(buffer: ArrayBuffer): IBootSectorInfo | null {
   if (buffer.byteLength < 512) {
     return null
   }