Rename Views

src/index.js

@@ -9,8 +9,8 @@ import {
   assertTheme
 } from '~/src/themes/themes'
 
-import Home from '~/src/views/Home'
-import Player from '~/src/views/Player'
+import HomeView from '~/src/views/HomeView'
+import PlayerView from '~/src/views/PlayerView'
 
 import '~/src/style/base.css'
 
@@ -26,14 +26,14 @@ function App () {
       <div className={['app', currentTheme].join(' ')}>
         <Switch>
           <Route path='/'>
-            <Home {...{
+            <HomeView {...{
               setTheme,
               themeList,
               currentTheme
             }} />
           </Route>
           <Route path='/play/:theme/:encodedUrl'>
-            {params => <Player {...{
+            {params => <PlayerView {...{
               setTheme,
               ...params
             }} />}

src/views/HomeView.js

@@ -0,0 +1,53 @@
+import { h } from 'preact'
+import { useState } from 'preact/hooks'
+
+import { Link } from 'wouter-preact'
+
+import FileSelector from '~/src/components/FileSelector'
+import URLSelector from '~/src/components/URLSelector'
+import ThemeSelector from '~/src/components/ThemeSelector'
+
+import { buildPlayLinkHref } from '~/src/utils/utils.routing'
+
+const playButton = (name, url, theme) => (
+  <Link href={buildPlayLinkHref(url, theme)}>
+    Play "{name}"
+  </Link>)
+
+export default function ({ themeList, currentTheme, setTheme }) {
+  const [targetName, setTargetName] = useState(null)
+  const [targetUrl, setTargetUrl] = useState(null)
+
+  return (
+    <main>
+      <p>
+        You can browse some <Link href='/top100'>
+          games from IFDB
+        </Link> or play a game from a file.
+      </p>
+      <ul>
+        <li>
+          <ThemeSelector {...{
+            currentTheme,
+            themeList,
+            setTheme
+          }} />
+        </li>
+        <li>
+          <FileSelector {...{
+            setTargetName,
+            setTargetUrl
+          }} />
+        </li>
+        <li>
+          <URLSelector {...{
+            setTargetName,
+            setTargetUrl
+          }} />
+        </li>
+      </ul>
+      { targetUrl
+        ? playButton(targetName, targetUrl, currentTheme)
+        : null }
+    </main>)
+}

src/views/PlayerView.jsx

@@ -0,0 +1,31 @@
+import { h } from 'preact'
+
+import { useState, useEffect } from 'preact/hooks'
+import { prepareVM } from '~/src/common/if'
+
+const INITIAL_STATUS = {
+  level: 'loading',
+  details: 'Loading...'
+}
+
+export default function ({setTheme, theme, encodedUrl}) {
+  const [url] = useState(decodeURIComponent(encodedUrl))
+  const [status, setStatus] = useState(INITIAL_STATUS)
+
+  const [vm, setVM] = useState(null)
+
+  useEffect(() => setTheme(theme), [theme])
+  useEffect(prepareVM({
+    url,
+    setStatus,
+    setVM
+  }), [url])
+
+  useEffect(() => {
+    if (vm) console.log('success', vm)
+  }, [vm])
+  return (
+    <main>
+      {status.details}
+    </main>)
+}