Home view

src/index.js

@@ -3,7 +3,7 @@ import { Link, Route, Router, Switch } from 'wouter-preact'
 
 import { useHashLocation } from '~/src/utils/utils.routing'
 
-import Index from '~/src/views/Index'
+import Home from '~/src/views/Home'
 import Player from '~/src/views/Player'
 
 function App () {
@@ -12,15 +12,13 @@ function App () {
       <div className='App'>
         <nav>
           <Link href='/'>Root</Link>
-          <Link href='/#/about'>About</Link>
-          <Link href='/#/404'>404</Link>
         </nav>
 
         <main>
           <Switch>
             <Route
               path='/'
-              component={Index} />
+              component={Home} />
             <Route
               path='/play/:theme/:encodedUrl'
               component={Player} />

src/utils/utils.routing.js

@@ -19,3 +19,6 @@ export const useHashLocation = () => {
     (window.location.hash = to.replace('#/', '')), [])
   return [loc, navigate]
 }
+
+export const buildPlayLinkHref = (url, theme = 'default') =>
+  `/#/play/${theme}/${encodeURIComponent(url)}`

src/views/Home.js

@@ -0,0 +1,41 @@
+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 { buildPlayLinkHref } from '~/src/utils/utils.routing'
+
+export default function () {
+  const [targetName, setTargetName] = useState(null)
+  const [targetURL, setTargetURL] = useState(null)
+
+  const playButton = (
+    <Link href={buildPlayLinkHref(targetURL)}>
+      Play "{targetName}"
+    </Link>)
+
+  return (
+    <main>
+      <p>
+        You can browse some <Link href='/top100'>
+          games from IFDB
+        </Link> or play a game from a file.
+      </p>
+      <ul>
+        <li>
+          <FileSelector
+            emitName={setTargetName}
+            emitURL={setTargetURL} />
+        </li>
+        <li>
+          <URLSelector
+            emitName={setTargetName}
+            emitURL={setTargetURL} />
+        </li>
+      </ul>
+      { targetURL ? playButton : null }
+    </main>)
+}