Add file listing

src/components/DiskInfo.vue

@@ -7,10 +7,16 @@ const { data = new ArrayBuffer(0) } = defineProps<{ data: ArrayBuffer }>()
 const floppyDisk = computed(() => {
   return new FloppyDisk(data)
 })
+
+const fileListing = computed(() => {
+  return floppyDisk.value.buildFileListing()
+})
 </script>
 
 <template>
   <section v-if="floppyDisk.bootSectorInfo">
+    <h3>File Listing</h3>
+    <div v-html="fileListing"></div>
     <h3>Boot Sector</h3>
     <pre>{{ floppyDisk.bootSectorInfo }}</pre>
     <h3>Directory Entries</h3>
@@ -31,4 +37,19 @@ pre {
   color: #c0c0c0;
   border: 1px solid rgba(255, 255, 255, 0.3);
 }
+
+:deep(ul) {
+  padding: 0;
+}
+
+:deep(ul ul) {
+  padding: 0 0 0 1.5em;
+}
+
+:deep(li) {
+  list-style: none;
+  line-height: 1.5rem;
+  margin: 0;
+  padding: 0;
+}
 </style>

src/floppy/disk.ts

@@ -184,6 +184,39 @@ export class FloppyDisk {
 
     return chain
   }
+
+  addDirectory(listing: string, entries: TDirEntry[]) {
+    listing += '\n<ul>'
+
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i]
+      if (entry.type !== 'standard-entry') {
+        continue
+      }
+
+      const fullName = `${entry.name}${entry.extension ? '.' + entry.extension : ''}`
+
+      if (entry.name === '.' || entry.name === '..' || entry.attributes.volumeId) {
+        // do nothing
+      } else if (entry.attributes.directory) {
+        listing += `\n<li>${fullName}\\`
+        listing = this.addDirectory(listing, entry.subDirEntries)
+        listing += '</li>\n'
+      } else {
+        listing += `\n<li>${fullName}</li>\n`
+      }
+    }
+
+    listing += '\n</ul>'
+    return listing
+  }
+
+  buildFileListing(): string {
+    let listing = '<ul>A:\\'
+    listing += this.addDirectory('', this.rootDirEntries ?? [])
+    listing += '</ul>'
+    return listing
+  }
 }
 
 function decodeBootSector(data: DataView): IBootSectorInfo | null {