Deextract prepareVM

src/components/player/Player.js

@@ -0,0 +1,9 @@
+import { h } from 'preact'
+
+export default function ({ vmParts: { file, engine } }) {
+  return (
+    <div>
+      Player
+    </div>
+  )
+}

src/components/player/UrlPlayer.js

@@ -1,30 +1,51 @@
 import { h } from 'preact'
 import { useState, useEffect } from 'preact/hooks'
 
-import { prepareVM } from './common/if'
+import { engineByFilename } from './common/engines'
+
+import Player from './Player'
 
 const INITIAL_STATUS = {
   stage: 'loading',
   details: 'Loading...'
 }
 
+const prepareVM = ({ url, setStatus, setParts }) => {
+  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 => setParts({
+      file,
+      engine: engineByFilename(url)
+    }))
+    .then(st('loading', 'Running...'))
+    .catch(e => {
+      console.error(e)
+      setStatus({ stage: 'fail', details: e.message })
+    })
+}
+
 export default function ({ url }) {
   const [status, setStatus] = useState(INITIAL_STATUS)
-
-  const [vm, setVM] = useState(null)
-
-  useEffect(prepareVM({
-    url,
-    setStatus,
-    setVM
-  }), [url])
+  const [vmParts, setParts] = useState(null)
 
   useEffect(() => {
-    if (vm) console.log('success', vm)
-  }, [vm])
+    setStatus(INITIAL_STATUS)
+    setParts(null)
 
-  return (
-    <main>
-      {status.details}
-    </main>)
+    prepareVM({ url, setStatus, setParts })
+  }, [url])
+
+  return vmParts
+    ? (<Player vmParts={vmParts} />)
+    : (<div>{status.details}</div>)
 }

src/components/player/common/if.js

@@ -1,31 +1,7 @@
 // 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 })
-    })
-}
+// import { engineByFilename } from './engines'
 
 // export const fetchGameFile = url => fetch(url)
 //   .then(response => (console.log(response), response))

src/views/PlayerView.jsx

@@ -3,11 +3,17 @@ import { useState, useEffect } from 'preact/hooks'
 
 import UrlPlayer from '~/src/components/player/UrlPlayer'
 
-export default function ({setTheme, theme, encodedUrl}) {
-  const [url] = useState(decodeURIComponent(encodedUrl))
+const decode = encodedUrl => decodeURIComponent(encodedUrl)
 
+export default function ({setTheme, theme, encodedUrl}) {
   useEffect(() => setTheme(theme), [theme])
 
+  const [url, setUrl] = useState(decode(encodedUrl))
+
+  useEffect(() => {
+    setUrl(decode(encodedUrl))
+  }, [encodedUrl])
+
   return (
     <main>
       <UrlPlayer url={url} />