Dirty markup

src/components/player/common/engines.js

@@ -1,5 +1,4 @@
 import bocfel from 'emglken/src/bocfel.js'
-import glulxe from 'emglken/src/glulxe.js'
 import git from 'emglken/src/git.js'
 import hugo from 'emglken/src/hugo.js'
 import tads from 'emglken/src/tads.js'
@@ -10,11 +9,6 @@ const formats = [
     extensions: /z([3458]|blorb)$/,
     engine: bocfel
   },
-  {
-    id: 'glulxe',
-    extensions: /(gblorb|ulx)$/,
-    engine: glulxe
-  },
   {
     id: 'git',
     extensions: /(gblorb|ulx)$/,

src/style/base.css

@@ -22,7 +22,6 @@ html, body {
 
   background-color: var(--bg-color);
   color: var(--main-color);
-  padding: var(--outer-padding);
 }
 
 .app > main {
@@ -40,3 +39,54 @@ html, body {
     max-width: 800px;
   }
 }
+
+/* Common */
+
+a {
+  border-bottom: 2px solid currentColor;
+  color: inherit;
+  text-decoration: none;
+}
+
+a:focus {
+  background-color: hsl(0, 0%, 0%, 0.1);
+}
+
+/* Dirty views */
+
+.app > main.home {
+  padding: var(--inner-padding);
+  max-height: unset;
+  height: 200%;
+}
+
+.home input,
+.home select {
+  padding: 4px 8px;
+  color: var(--main-color);
+  background-color: var(--bg-color);
+  border: 2px solid var(--main-color);
+  outline-offset: 0;
+  font: inherit;
+}
+
+.home summary {
+  display: inline-block;
+  padding-right: 4px;
+  cursor: pointer;
+}
+
+.home details > ul {
+  border-left: 4px solid currentColor;
+}
+
+.home .play label {
+  display: block;
+  margin-bottom: 16px;
+}
+
+.home .play input {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 400px;
+}

src/themes/themes.js

@@ -5,16 +5,14 @@ import '~/src/style/themes.css'
 const themes = [
   'default',
   'default-borders',
-  'default-dark',
-  'default-dark-borders',
   'default-dim',
   'default-dim-borders',
+  'default-dark',
+  'default-dark-borders',
   'solarized-light',
   'solarized-light-borders',
   'solarized-dark',
   'solarized-dark-borders',
-  'nord',
-  'nord-borders',
   '_raw'
 ]
 

src/views/HomeView.jsx

@@ -19,31 +19,93 @@ export default function ({ themeEngine }) {
   const [targetUrl, setTargetUrl] = useState(null)
 
   return (
-    <main>
+    <main className='view home'>
+      <h1>
+        ifplayer
+      </h1>
+
       <p>
-        You can browse some <Link href='/top100'>
-          games from IFDB
-        </Link> or play a game from a file.
+        Interactive Fiction interpreter
+        that runs right in your browser.
+        <br />
+        Powered by <a
+          target="_blank"
+          href="https://github.com/He4eT/emglken">
+          Emglken
+        </a> and <a
+          target="_blank"
+          href="https://github.com/He4eT/cheap-glkote">
+          cheap-glkote
+        </a>.
       </p>
-      <ul>
-        <li>
-          <ThemeSelector {...{
-            themeEngine
-          }} />
-        </li>
-        <li>
+      <p>
+        Source code can be found here: <a
+          target="_blank"
+          href="https://github.com/He4eT/ifplayer">
+          ifplayer
+        </a>.
+      </p>
+      <hr />
+      <h3>
+        Interface theme
+      </h3>
+      <p>
+        <ThemeSelector {...{
+          themeEngine
+        }} />
+        <br /><br />
+        <small>
+          Themes without borders
+          are better suited for small screens.
+        </small><br />
+        <small>
+          Double-click on the input field during the game
+          to enter full-screen mode.
+        </small>
+      </p>
+      <hr />
+      <h3>
+        Play a game from the list
+      </h3>
+      <p>
+        <Link href='/top100'>IFDB Top 100 games</Link>
+      </p>
+      <hr />
+      <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 className='play'>
+        <label>
+          <div>
+            Local file:
+          </div>
           <FileSelector {...{
             setTargetName,
             setTargetUrl
           }} />
-        </li>
-        <li>
+        </label>
+        <label>
+          <div>
+            Direct link:
+          </div>
           <URLSelector {...{
             setTargetName,
             setTargetUrl
           }} />
-        </li>
-      </ul>
+        </label>
+      </p>
       { targetUrl
         ? playButton(targetName, targetUrl, themeEngine.currentTheme)
         : null }

src/views/PlayerView.jsx

@@ -15,7 +15,7 @@ export default function ({ setTheme, theme, encodedUrl }) {
   }, [encodedUrl])
 
   return (
-    <main>
+    <main className='view playerView'>
       <UrlPlayer url={targetUrl} />
     </main>
   )