Update the player to work with new versions of the Emglken and the cheap-glkote

package.json

@@ -38,6 +38,6 @@
   },
   "staticFiles": {
     "staticPath": "node_modules/emglken/build",
-    "staticOutPath": "node_modules/emglken/build"
+    "staticOutPath": "emglken"
   }
 }

src/components/Player/Player.jsx

@@ -18,18 +18,23 @@ const INITIAL_STATUS = {
   details: ['Preparing'],
 }
 
-const runMachine = ({ engine: Engine, file, handlers }) => {
+const runMachine = ({ engine: Engine, wasmBinary, storyfile, handlers }) => {
+  const { Dialog, GlkOte, send } = CheapGlkOte(handlers)
   const vm = new Engine()
-  const { glkInterface, sendFn } = CheapGlkOte(handlers)
 
-  vm.prepare(file, glkInterface)
+  vm.init(storyfile, {
+    Dialog,
+    GlkOte,
+    Glk: {},
+    wasmBinary,
+  })
   vm.start()
 
-  return { sendFn, instance: vm }
+  return { send, instance: vm }
 }
 
 export default function Player ({
-  vmParts: { file, engine }, singleWindow,
+  vmParts: { storyfile, engine, wasmBinary }, singleWindow,
 }) {
   const [status, setStatus] = useState(INITIAL_STATUS)
 
@@ -44,7 +49,8 @@ export default function Player ({
   useEffect(() => {
     const vm = runMachine({
       engine,
-      file,
+      wasmBinary,
+      storyfile,
       handlers: Handlers({
         setStatus,
         setWindows,
@@ -55,11 +61,11 @@ export default function Player ({
     })
 
     setVm(vm)
-  }, [file, engine])
+  }, [storyfile, engine, wasmBinary])
 
   useEffect(() => {
     setSendMessage(() => vm
-      ? vm.sendFn
+      ? vm.send
       : null)
   }, [vm])
 

src/components/Player/UrlPlayer.jsx

@@ -22,6 +22,10 @@ const prepareVM = ({ url, setStatus, setParts }) => {
       ? url.replace(/#(.*)$/g, '')
       : url
 
+  const fetchWasm = (wasmBinaryName) =>
+    fetch(wasmBinaryName)
+      .then((response) => response.arrayBuffer())
+
   return Promise.resolve(url)
     .then(st('loading', 'Downloading file'))
     .then(cleanUrl)
@@ -30,9 +34,15 @@ const prepareVM = ({ url, setStatus, setParts }) => {
     .then((response) => response.arrayBuffer())
     .then((arrayBuffer) => new Uint8Array(arrayBuffer))
     .then(st('loading', 'Downloading engine'))
-    .then((file) => setParts({
+    .then((storyfile) => {
-      file,
+      let parts = engineByFilename(url)
-      engine: engineByFilename(url),
+      return [storyfile, parts.engine, parts.wasmBinaryName]
+    })
+    .then(([storyfile, engine, wasmBinaryName]) => Promise.all([
+      storyfile, engine, fetchWasm(wasmBinaryName),
+    ]))
+    .then(([storyfile, engine, wasmBinary]) => setParts({
+      storyfile, engine, wasmBinary,
     }))
     .then(st('loading', 'Running'))
     .catch((e) => {

src/components/Player/common/engines.js

@@ -31,7 +31,11 @@ export const engineByFilename = (filename) => {
     x.extensions.test(filename))
 
   if (format) {
-    return format.engine
+    return {
+      ...format,
+      /* @see staticFiles in package.json */
+      wasmBinaryName: `emglken/${format.id}-core.wasm`,
+    }
   }
   throw new Error('Unsupported file type')
 }