Replace usage of IFile with IStandardDirEntry

src/components/DiskExplorer.vue

@@ -29,42 +29,20 @@ const currentFileName = ref<string>('')
 const dataView = ref('hex-dump')
 
 const directories = computed(() => {
-  const fileList = floppyDisk?.getFileList()
+  const fileList = floppyDisk?.getFileEntryList()
 
-  let directories = fileList
+  return fileList
     ?.filter((file) => {
-      return file.isDirectory && arraysEqual(currentPath.value, file.path)
+      return file.attributes.directory && arraysEqual(currentPath.value, file.path)
     })
     .sort()
-
-  if (directories) {
-    directories = [
-      {
-        name: '.',
-        isDirectory: true,
-        path: [],
-        firstCuster: -1,
-        size: 0,
-      },
-      {
-        name: '..',
-        isDirectory: true,
-        path: [],
-        firstCuster: -1,
-        size: 0,
-      },
-      ...directories,
-    ]
-  }
-
-  return directories
 })
 
 const files = computed(() => {
-  const fileList = floppyDisk?.getFileList()
+  const fileList = floppyDisk?.getFileEntryList()
   return fileList
     ?.filter((file) => {
-      return !file.isDirectory && arraysEqual(currentPath.value, file.path)
+      return !file.attributes.directory && arraysEqual(currentPath.value, file.path)
     })
     .sort()
 })
@@ -114,7 +92,7 @@ function loadFile(name: string, firstCluster: number, size: number) {
           <a
             :class="{ current: file.name === currentFileName }"
             href=""
-            @click.prevent="loadFile(file.name, file.firstCuster, file.size)"
+            @click.prevent="loadFile(file.name, file.firstCluster, file.size)"
             >{{ file.name }}</a
           >
         </li>

src/components/DiskInfo.vue

@@ -1,18 +1,15 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
 import { FloppyDisk } from '@/floppy/disk.ts'
 
 const { floppyDisk = null } = defineProps<{ floppyDisk: FloppyDisk | null }>()
-
-const fileListing = computed(() => {
-  return floppyDisk?.buildFileListing()
-})
 </script>
 
 <template>
   <section v-if="floppyDisk">
     <h3>File Listing</h3>
-    <div v-memo="fileListing" v-html="fileListing"></div>
+    <ul>
+      <li v-for="file in floppyDisk?.getFileNameList()" :key="file">{{ file }}</li>
+    </ul>
     <h3>Boot Sector</h3>
     <pre>{{ floppyDisk.bootSectorInfo }}</pre>
     <h3>Directory Entries</h3>

src/floppy/disk.ts

@@ -69,14 +69,6 @@ export interface IUnusedDirEntry {
 
 export type TDirEntry = IStandardDirEntry | ILongFileNameDirEntry | IFinalDirEntry | IUnusedDirEntry
 
-export interface IFile {
-  name: string
-  path: string[]
-  isDirectory: boolean
-  firstCuster: number
-  size: number
-}
-
 export class FloppyDisk {
   buffer = new ArrayBuffer(0)
   private _bootSector: IBootSectorInfo | null = null
@@ -202,7 +194,7 @@ export class FloppyDisk {
     return chain
   }
 
-  addDirectoryListing(listing: string, entries: TDirEntry[]) {
+  addFileNamesFromDirectories(listing: string[], entries: TDirEntry[]) {
     for (let i = 0; i < entries.length; i++) {
       const entry = entries[i]
       if (
@@ -214,63 +206,39 @@ export class FloppyDisk {
         continue
       }
 
-      listing += `${entry.path.join('\\') + '\\'}${entry.name}`
+      listing.push(`${entry.path.join('\\') + '\\'}${entry.name}`)
 
       if (entry.attributes.directory) {
-        listing += '\\<br/>'
-        listing = this.addDirectoryListing(listing, entry.subDirEntries)
-      } else {
-        listing += '<br/>'
+        this.addFileNamesFromDirectories(listing, entry.subDirEntries)
       }
     }
 
     return listing
   }
 
-  buildFileListing(): string {
-    let listing = '<p>\\<br/>'
-    listing += this.addDirectoryListing('', this.rootDirEntries ?? [])
-    listing += '</p>'
+  getFileNameList(): string[] {
+    const listing = ['\\']
+    this.addFileNamesFromDirectories(listing, this.rootDirEntries ?? [])
     return listing
   }
 
-  addDirectory(list: IFile[], entries: TDirEntry[]) {
+  addFileEntriesFromDirectory(list: IStandardDirEntry[], entries: TDirEntry[]) {
     for (let i = 0; i < entries.length; i++) {
       const entry = entries[i]
-      if (
-        entry.type !== 'standard-entry' ||
-        entry.attributes.volumeId ||
-        entry.name === '..' ||
-        entry.name === '.'
-      ) {
+      if (entry.type !== 'standard-entry' || entry.attributes.volumeId || entry.name === '.') {
         continue
       }
 
-      if (entry.attributes.directory) {
-        list.push({
-          name: entry.name,
-          path: entry.path,
-          isDirectory: true,
-          firstCuster: entry.firstCluster,
-          size: 0,
-        })
-        this.addDirectory(list, entry.subDirEntries)
-      } else {
-        list.push({
-          name: entry.name,
-          path: entry.path,
-          isDirectory: false,
-          firstCuster: entry.firstCluster,
-          size: entry.size,
-        })
+      list.push(entry)
+      if (entry.attributes.directory && entry.name !== '..') {
+        this.addFileEntriesFromDirectory(list, entry.subDirEntries)
       }
     }
   }
 
-  getFileList(): IFile[] {
-    const list: IFile[] = []
-
-    this.addDirectory(list, this.rootDirEntries ?? [])
+  getFileEntryList(): IStandardDirEntry[] {
+    const list: IStandardDirEntry[] = []
+    this.addFileEntriesFromDirectory(list, this.rootDirEntries ?? [])
     return list
   }