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

@@ -6,25 +6,32 @@ 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={`/#/play/default/${encodeURIComponent(targetURL)}`}>
+    <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>
-          <URLSelector
+          <FileSelector
             emitName={setTargetName}
             emitURL={setTargetURL} />
         </li>
         <li>
-          <FileSelector
+          <URLSelector
             emitName={setTargetName}
             emitURL={setTargetURL} />
         </li>