Add PlaygroundView and DiskReader components

src/App.vue

@@ -4,15 +4,18 @@ import { type Component, ref } from 'vue'
 import SiteHeader from '@/components/SiteHeader.vue'
 import HomeView from '@/components/HomeView.vue'
 import NotFoundView from '@/components/NotFoundView.vue'
+import PlaygroundView from '@/components/PlaygroundView.vue'
 
 const routes: { [index: string]: Component } = {
   '/': HomeView,
+  play: PlaygroundView,
 }
 
 const currentPath = ref<string>(window.location.hash)
 
 window.addEventListener('hashchange', () => {
   currentPath.value = window.location.hash
+  console.log(currentPath.value)
 })
 </script>
 

src/assets/main.css

@@ -8,6 +8,16 @@ body {
   padding: 0.5em;
 }
 
+input,
+button {
+  font: inherit;
+}
+
+progress::-webkit-progress-bar,
+progress::-moz-progress-bar {
+  background: #ff00ff;
+}
+
 h1,
 h2,
 h3,

src/components/DiskReader.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+const emit = defineEmits<{
+  start: [name: string]
+  progress: [loaded: number, total: number]
+  load: [data: ArrayBuffer]
+  error: [message: string]
+}>()
+
+async function handleFiles(event: Event) {
+  const files = (event.target as HTMLInputElement).files
+  if (!files?.length) {
+    return
+  }
+
+  try {
+    const data = await readFile(files[0])
+    emit('load', data)
+  } catch (error) {
+    emit('error', error as string)
+  }
+}
+
+async function readFile(file: File): Promise<ArrayBuffer> {
+  return await new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onloadstart = () => {
+      emit('start', file.name)
+    }
+
+    reader.onprogress = (event: ProgressEvent) => {
+      emit('progress', event.loaded, event.total)
+    }
+
+    reader.onload = (event: ProgressEvent) => {
+      emit('progress', event.loaded, event.total)
+      const result = (event.target as FileReader).result as ArrayBuffer
+      resolve(result)
+    }
+
+    reader.onerror = () => {
+      reject('load error')
+    }
+
+    reader.onabort = () => {
+      reject('load aborted')
+    }
+
+    reader.readAsArrayBuffer(file)
+  })
+}
+</script>
+
+<template>
+  <form>
+    <input id="disk-file" type="file" @change="handleFiles" />
+  </form>
+</template>
+
+<style scoped></style>

src/components/PlaygroundView.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import DiskReader from '@/components/DiskReader.vue'
+
+const loadName = ref('')
+const loadTotal = ref(0)
+const loadLoaded = ref(0)
+
+function handleStart(name: string) {
+  console.log(`Loading file: ${name}`)
+  loadName.value = name
+  loadLoaded.value = 0
+  loadTotal.value = -1
+}
+
+function handleLoad(data: ArrayBuffer) {
+  console.log('File loaded')
+  console.log(data)
+}
+
+function handleError(message: string) {
+  console.log('Error loading file' + message)
+  loadLoaded.value = -1
+  loadTotal.value = -1
+}
+
+function handleProgress(loaded: number, total: number) {
+  loadLoaded.value = loaded
+  loadTotal.value = total
+}
+</script>
+
+<template>
+  <section>
+    <h2>Playground</h2>
+    <p>This is my playground for testing out my code.</p>
+    <section>
+      <h3>Upload Disk</h3>
+      <DiskReader
+        @error="handleError"
+        @load="handleLoad"
+        @progress="handleProgress"
+        @start="handleStart"
+      />
+      <div v-if="loadName">
+        Loading {{ loadName }}
+        <progress :max="loadTotal" :value="loadLoaded">
+          {{ ((loadLoaded / loadTotal) * 100.0).toFixed(2) }} %
+        </progress>
+        {{ ((loadLoaded / loadTotal) * 100.0).toFixed(2) }} %
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped>
+progress {
+  margin-top: 1em;
+  margin-left: 1em;
+  margin-right: 0.25em;
+}
+</style>