From 58235e18fbca9a041bb6b94abc6bf65b938cd0c4 Mon Sep 17 00:00:00 2001
From: He4eT <He4eTHb1u@gmail.com>
Date: Thu, 25 Feb 2021 00:59:41 +0500
Subject: [PATCH] Deextract prepareVM

---
 package.json                       |  3 +-
 src/components/player/Player.js    |  9 ++++++
 src/components/player/UrlPlayer.js | 51 +++++++++++++++++++++---------
 src/components/player/common/if.js | 26 +--------------
 src/views/PlayerView.jsx           | 10 ++++--
 5 files changed, 56 insertions(+), 43 deletions(-)
 create mode 100644 src/components/player/Player.js

diff --git a/package.json b/package.json
index 633dddc..5ea140b 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "wouter-preact": "^2.7.3"
   },
   "staticFiles": {
-    "staticPath": "node_modules/emglken/build/*.wasm"
+    "staticPath": "node_modules/emglken/build",
+    "excludeGlob": "*.js"
   }
 }
diff --git a/src/components/player/Player.js b/src/components/player/Player.js
new file mode 100644
index 0000000..25c8e62
--- /dev/null
+++ b/src/components/player/Player.js
@@ -0,0 +1,9 @@
+import { h } from 'preact'
+
+export default function ({ vmParts: { file, engine } }) {
+  return (
+    <div>
+      Player
+    </div>
+  )
+}
diff --git a/src/components/player/UrlPlayer.js b/src/components/player/UrlPlayer.js
index 9dfa609..f71f1f0 100644
--- a/src/components/player/UrlPlayer.js
+++ b/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>)
 }
diff --git a/src/components/player/common/if.js b/src/components/player/common/if.js
index 98bf665..70b0c4b 100644
--- a/src/components/player/common/if.js
+++ b/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))
diff --git a/src/views/PlayerView.jsx b/src/views/PlayerView.jsx
index 8eed189..a04461d 100644
--- a/src/views/PlayerView.jsx
+++ b/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} />