Linting

package.json

@@ -27,7 +27,6 @@
     "wouter-preact": "^2.7.3"
   },
   "staticFiles": {
-    "staticPath": "node_modules/emglken/build",
+    "staticPath": "node_modules/emglken/build/*.wasm"
-    "excludeGlob": "*.js"
   }
 }

src/components/player/UrlPlayer.js

@@ -1,14 +1,14 @@
 import { h } from 'preact'
 import { useState, useEffect } from 'preact/hooks'
 
-import { prepareVM } from '~/src/common/if'
+import { prepareVM } from './common/if'
 
 const INITIAL_STATUS = {
   stage: 'loading',
   details: 'Loading...'
 }
 
-export default function ({url}) {
+export default function ({ url }) {
   const [status, setStatus] = useState(INITIAL_STATUS)
 
   const [vm, setVM] = useState(null)
@@ -25,7 +25,6 @@ export default function ({url}) {
 
   return (
     <main>
-      {url}
       {status.details}
     </main>)
 }

src/components/player/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/components/player/common/if.js

@@ -0,0 +1,45 @@
+// import CheapGlkOte from 'cheap-glkote'
+// import engine from 'emglken/src/tads.js'
+
+import { engineByFilename } from './engines'
+
+export const prepareVM = ({ url, setStatus, setVM }) => _ => {
+  const st = (stage, details) => args => {
+    setStatus({ stage, 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({ stage: '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/themes/themes.js

@@ -18,13 +18,13 @@ const assertTheme = theme =>
     ? theme
     : DEFAULT_THEME
 
-export const useThemeEngine = (defaultTheme = DEFAULT_THEME) => {
+export const useThemeEngine = (initialTheme = DEFAULT_THEME) => {
   const [currentTheme, setCurrentTheme] =
-    useState(DEFAULT_THEME)
+    useState(initialTheme)
 
-    const setTheme = useCallback(theme => {
+  const setTheme = useCallback(theme => {
-      setCurrentTheme(assertTheme(theme))
+    setCurrentTheme(assertTheme(theme))
-    }, [currentTheme]);
+  }, [currentTheme])
 
-  return { currentTheme, setTheme, themes };
+  return { currentTheme, setTheme, themes }
 }

src/utils/utils.routing.js

@@ -22,6 +22,3 @@ export const useHashLocation = () => {
 
 export const buildPlayLinkHref = (url, theme) =>
   `/#/play/${theme}/${encodeURIComponent(url)}`
-
-export const getFileExtension = fileName =>
-  fileName.split('.').pop()