Implement VM preparation

src/common/engines.js

@@ -0,0 +1,44 @@
+import bocfel from 'emglken/src/bocfel.js'
+import glulxe from 'emglken/src/glulxe.js'
+import git from 'emglken/src/git.js'
+import hugo from 'emglken/src/hugo.js'
+import tads from 'emglken/src/tads.js'
+
+const formats = [
+  {
+    id: 'bocfel',
+    extensions: /z([3458]|blorb)$/,
+    engine: bocfel
+  },
+  {
+    id: 'glulxe',
+    extensions: /(gblorb|ulx)$/,
+    engine: glulxe
+  },
+  {
+    id: 'git',
+    extensions: /(gblorb|ulx)$/,
+    engine: git
+  },
+  {
+    id: 'hugo',
+    extensions: /hex$/,
+    engine: hugo
+  },
+  {
+    id: 'tads',
+    extensions: /(gam|t3)$/,
+    engine: tads
+  }
+]
+
+export const engineByFilename = filename => {
+  const format = formats.find(x =>
+    x.extensions.test(filename))
+
+  if (format) {
+    return format.engine
+  } else {
+    throw new Error(`Unsupported file type: ${filename}`)
+  }
+}

src/common/if.js

@@ -0,0 +1,45 @@
+// import CheapGlkOte from 'cheap-glkote'
+// import engine from 'emglken/src/tads.js'
+
+import { engineByFilename } from '~/src/common/engines'
+
+export const prepareVM = ({ url, setStatus, setVM }) => _ => {
+  const st = (step, details) => args => {
+    setStatus({ step, details })
+    return args
+  }
+
+  return Promise.resolve()
+    .then(st('loading', 'Downloading file...'))
+    .then(_ => fetch(url))
+    .then(st('loading', 'Processing file...'))
+    .then(response => response.arrayBuffer())
+    .then(arrayBuffer => new Uint8Array(arrayBuffer))
+    .then(st('loading', 'Downloading engine...'))
+    .then(file => setVM({
+      file,
+      engine: engineByFilename(url)
+    }))
+    .then(st('loading', 'Running...'))
+    .catch(e => {
+      console.error(e)
+      setStatus({ level: 'fail', details: e.message })
+    })
+}
+
+// export const fetchGameFile = url => fetch(url)
+//   .then(response => (console.log(response), response))
+//   .then(response => response.blob())
+//   .then(blob => new Response(blob).arrayBuffer())
+//   .then(buffer => new Uint8Array(buffer))
+//   .then(file => {
+//     const { glkInterface, sendFn } = CheapGlkOte({
+//       onUpdateContent: messages => console.log(messages)
+//     })
+//     window.send = sendFn
+
+//     const vm = new engine()
+//     vm.prepare(file, glkInterface)
+//     vm.start()
+//   })
+//   .catch(console.log)

src/views/Player.jsx

@@ -1,42 +1,31 @@
 import { h } from 'preact'
 
-import { getFileExtension } from '~/src/utils/utils.routing'
+import { useState, useEffect } from 'preact/hooks'
+import { prepareVM } from '~/src/common/if'
 
-import CheapGlkOte from 'cheap-glkote'
+const INITIAL_STATUS = {
-import engine from 'emglken/src/tads.js'
+  level: 'loading',
-
+  details: 'Loading...'
-const blobToFile = fileName => theBlob =>{
-  return new File([theBlob], fileName)
 }
 
 export default function ({setTheme, theme, encodedUrl}) {
-  setTheme(theme)
+  const [url] = useState(decodeURIComponent(encodedUrl))
+  const [status, setStatus] = useState(INITIAL_STATUS)
 
-  const url = decodeURIComponent(encodedUrl)
+  const [vm, setVM] = useState(null)
-  const type = getFileExtension(url)
 
-  const fetchGameFile = fetch(url)
+  useEffect(() => setTheme(theme), [theme])
-    .then(response => (console.log(response), response))
+  useEffect(prepareVM({
-    .then(response => response.blob())
+    url,
-    .then(blob => new Response(blob).arrayBuffer())
+    setStatus,
-    .then(buffer => new Uint8Array(buffer))
+    setVM
-    .then(file => {
+  }), [url])
-      console.log(file)
-      const {glkInterface, sendFn} = CheapGlkOte({
-        onUpdateContent: messages => console.log(messages)
-      })
-      window.send = sendFn
-
-      const vm = new engine()
-      vm.prepare(file, glkInterface)
-      vm.start()
-    })
-    .catch(console.log)
 
+  useEffect(() => {
+    if (vm) console.log('success', vm)
+  }, [vm])
   return (
-    <div>
+    <main>
-      {theme} <br/>
+      {status.details}
-      {type} <br/>
+    </main>)
-      {url}
-    </div>)
 }