From 97cd8aca9e4dc10593c2884e8ded8f99153fa6ae Mon Sep 17 00:00:00 2001
From: He4eT <He4eTHb1u@gmail.com>
Date: Tue, 2 Mar 2021 18:02:34 +0500
Subject: [PATCH] Add instant game launch

---
 .../FileSelector/LocalFileSelector.jsx        |  8 +++---
 .../FileSelector/TargetURLSelector.jsx        | 18 ++++++-------
 src/utils/utils.routing.js                    |  2 +-
 src/views/HomeView.jsx                        | 27 ++++++++-----------
 4 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/components/FileSelector/LocalFileSelector.jsx b/src/components/FileSelector/LocalFileSelector.jsx
index 1cdd8e9..1f73e7f 100644
--- a/src/components/FileSelector/LocalFileSelector.jsx
+++ b/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 (
diff --git a/src/components/FileSelector/TargetURLSelector.jsx b/src/components/FileSelector/TargetURLSelector.jsx
index c64a824..6b42b4b 100644
--- a/src/components/FileSelector/TargetURLSelector.jsx
+++ b/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} />)
 }
diff --git a/src/utils/utils.routing.js b/src/utils/utils.routing.js
index 93aa875..0de9464 100644
--- a/src/utils/utils.routing.js
+++ b/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 => {
diff --git a/src/views/HomeView.jsx b/src/views/HomeView.jsx
index eff123b..ac543de 100644
--- a/src/views/HomeView.jsx
+++ b/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>)
 }