Rearrange views

src/views/HomeView/HomeView.css

@@ -0,0 +1,38 @@
+.app > .view.home {
+  padding: var(--inner-padding);
+}
+
+.view.home input,
+.view.home select {
+  box-sizing: border-box;
+
+  padding: 4px 8px;
+  color: var(--main-color);
+  background-color: var(--bg-color);
+  border: 2px solid var(--main-color);
+  outline-offset: 0;
+  font: inherit;
+}
+
+.view.home select {
+  cursor: pointer;
+  appearance: none;
+  width: 200px;
+}
+
+.view.home label {
+  display: inline-block;
+  width: 100%;
+  max-width: 400px;
+}
+
+.view.home label input {
+  width: 100%;
+}
+
+.view.home input[type='file'] {
+  position: relative;
+  font-size: 0;
+  text-indent: -100%;
+  cursor: pointer;
+}

src/views/HomeView/HomeView.jsx

@@ -0,0 +1,116 @@
+import { h } from 'preact'
+import { Link } from 'wouter-preact'
+
+import {
+  useHashLocation,
+  buildPlayLinkHref
+} from '~/src/utils/utils.routing'
+
+import LocalFileSelector from
+  '~/src/components/FileSelector/LocalFileSelector'
+import TargetURLSelector from
+  '~/src/components/FileSelector/TargetURLSelector'
+import ThemeSelector from
+  '~/src/components/ThemeSelector/ThemeSelector'
+
+import './HomeView.css'
+
+export default function ({ themeEngine }) {
+  const setLocation = useHashLocation()[1]
+
+  return (
+    <main className='view home'>
+      <h1>
+        ifplayer
+      </h1>
+
+      <section>
+        <p>
+          Interactive Fiction interpreter
+          that runs right in your browser.
+          <br />
+          Source code can be found in this <a
+            target='_blank'
+            href='https://github.com/He4eT/ifplayer'>
+            repository
+          </a>.
+        </p>
+      </section>
+
+      <hr />
+
+      <section>
+        <h3>
+          Interface theme
+        </h3>
+
+        <ThemeSelector {...{
+          themeEngine
+        }} />
+
+        <p>
+          <small>
+            Double-click the input field during the game
+            to enter full-screen mode.
+          </small>
+        </p>
+      </section>
+
+      <hr />
+
+      <section>
+        <h3>
+          Play a game from the list
+        </h3>
+
+        <p>
+          <Link href={`/#/games/${themeEngine.currentTheme}`}>
+            IFDB games
+          </Link>
+        </p>
+      </section>
+
+      <hr />
+
+      <section>
+        <h3>
+          Play the game from a file
+        </h3>
+
+        <p>
+          <details>
+            <summary>Supported formats</summary>
+            <ul>
+              <li>TADS games (.t3, .gam);</li>
+              <li>Z-machine games (.z3, .z4, .z5, .z8, .blorb);</li>
+              <li>Glulx VM games (.gblorb, .ulx);</li>
+              <li>Hugo games (.hex);</li>
+              <li>Text-only games are supported;</li>
+            </ul>
+          </details>
+        </p>
+
+        <p>
+          <label>
+            Local file: <br />
+            <LocalFileSelector {...{
+              setLocation,
+              buildLink: buildPlayLinkHref,
+              theme: themeEngine.currentTheme
+            }} />
+          </label>
+        </p>
+
+        <p>
+          <label>
+            Direct link: <br />
+            <TargetURLSelector {...{
+              setLocation,
+              buildLink: buildPlayLinkHref,
+              theme: themeEngine.currentTheme
+            }} />
+          </label>
+        </p>
+      </section>
+    </main>)
+}