Add instant game launch

src/components/FileSelector/LocalFileSelector.jsx

@@ -1,11 +1,11 @@
 import { h } from 'preact'
 
-export default function ({ setTargetName, setTargetUrl }) {
+export default function ({ theme, setLocation, buildLink }) {
   const fileInputHandler = ({ target }) => {
     const file = target.files[0]
-    setTargetName(file.name)
-    setTargetUrl(`${URL.createObjectURL(file)}#${file.name}`)
-    target.value = null
+    const url = `${URL.createObjectURL(file)}#${file.name}`
+
+    setLocation(buildLink({ url, theme }))
   }
 
   return (

src/components/FileSelector/TargetURLSelector.jsx

@@ -1,23 +1,21 @@
 import { h } from 'preact'
 
-export default function ({ setTargetName, setTargetUrl }) {
+export default function ({ theme, setLocation, buildLink }) {
   const urlRE = /^(http|https):\/\/[^ "]+$/
 
-  const emit = url => {
-    setTargetName(url)
-    setTargetUrl(url)
-  }
+  const onKeyPress = ({ keyCode, target }) => {
+    if (keyCode !== 13) return
 
-  const urlInputHandler = ({ target }) => {
     const url = target.value
-    emit(urlRE.test(url)
-      ? url
-      : null)
+
+    if (urlRE.test(url)) {
+      setLocation(buildLink({ url, theme }))
+    }
   }
 
   return (
     <input
       type='text'
       placeholder='https://...'
-      onInput={urlInputHandler} />)
+      onKeyPress={onKeyPress} />)
 }

src/utils/utils.routing.js

@@ -20,7 +20,7 @@ export const useHashLocation = () => {
   return [loc, navigate]
 }
 
-export const buildPlayLinkHref = (url, theme) =>
+export const buildPlayLinkHref = ({ url, theme }) =>
   `/#/play/${theme}/${encodeURIComponent(url)}`
 
 export const extractView = location => {

src/views/HomeView.jsx

@@ -1,8 +1,10 @@
 import { h } from 'preact'
-import { useState } from 'preact/hooks'
 import { Link } from 'wouter-preact'
 
-import { buildPlayLinkHref } from '~/src/utils/utils.routing'
+import {
+  useHashLocation,
+  buildPlayLinkHref
+} from '~/src/utils/utils.routing'
 
 import LocalFileSelector from
   '~/src/components/FileSelector/LocalFileSelector'
@@ -13,14 +15,8 @@ import ThemeSelector from
 
 import '~/src/style/views/HomeView.css'
 
-const playButton = (name, url, theme) => (
-  <Link href={buildPlayLinkHref(url, theme)}>
-    Play "{name}"
-  </Link>)
-
 export default function ({ themeEngine }) {
-  const [targetName, setTargetName] = useState(null)
-  const [targetUrl, setTargetUrl] = useState(null)
+  const setLocation = useHashLocation()[1]
 
   return (
     <main className='view home'>
@@ -103,8 +99,9 @@ export default function ({ themeEngine }) {
           <label>
             Local file: <br />
             <LocalFileSelector {...{
-              setTargetName,
-              setTargetUrl
+              setLocation,
+              buildLink: buildPlayLinkHref,
+              theme: themeEngine.currentTheme
             }} />
           </label>
         </p>
@@ -113,15 +110,13 @@ export default function ({ themeEngine }) {
           <label>
             Direct link: <br />
             <TargetURLSelector {...{
-              setTargetName,
-              setTargetUrl
+              setLocation,
+              buildLink: buildPlayLinkHref,
+              theme: themeEngine.currentTheme
             }} />
           </label>
         </p>
       </section>
 
-      { targetUrl
-        ? playButton(targetName, targetUrl, themeEngine.currentTheme)
-        : null }
     </main>)
 }