Add GameEntry component

src/components/GameEntry/GameEntry.jsx

@@ -0,0 +1,22 @@
+import { h } from 'preact'
+import { Link } from 'wouter-preact'
+
+import {
+  buildPlayLinkHref
+} from '~/src/utils/utils.routing'
+
+export default ({ name, ifdb, url, theme }) => (
+  <div>
+    <h4>{name}</h4>
+    <a
+      target='_blank'
+      href={ifdb}>
+      IFDB page
+    </a>
+    <span> | </span>
+    <Link
+      href={buildPlayLinkHref({ url, theme })}>
+      Play
+    </Link>
+  </div>
+)

src/index.js

@@ -10,6 +10,7 @@ import {
 } from '~/src/themes/themes'
 
 import HomeView from '~/src/views/HomeView'
+import GamesView from '~/src/views/GamesView'
 import PlayerView from '~/src/views/PlayerView'
 import NotFoundView from '~/src/views/NotFoundView'
 
@@ -33,15 +34,18 @@ function App () {
               themeEngine
             }} />
           </Route>
+          <Route path='/games/:theme'>
+            {params => <GamesView {...{
+              ...themeEngine,
+              ...params
+            }} />}
+          </Route>
           <Route path='/play/:theme/:encodedUrl'>
             {params => <PlayerView {...{
               ...themeEngine,
               ...params
             }} />}
           </Route>
-          <Route path='/top100'>
-            top100
-          </Route>
           <Route>
             <NotFoundView />
           </Route>

src/views/GamesView.jsx

@@ -0,0 +1,58 @@
+import { h } from 'preact'
+import { useEffect } from 'preact/hooks'
+import { Link } from 'wouter-preact'
+
+import GameEntry from
+  '~/src/components/GameEntry/GameEntry'
+
+import './style/GamesView.css'
+
+const tutorialGame = {
+  name: 'The Dreamhold',
+  ifdb: 'https://ifdb.org/viewgame?id=3myqnrs64nbtwdaz',
+  url: 'http://mirror.ifarchive.org/if-archive/games/zcode/dreamhold.z8'
+}
+
+export default function ({ setTheme, theme }) {
+  useEffect(() => setTheme(theme), [theme])
+
+  return (
+    <main className='view games'>
+
+      <h1>
+        <a
+          target='_blank'
+          href='https://ifdb.org/'
+          title='The Interactive Fiction Database'>
+          IFDB
+        </a> games
+      </h1>
+
+      <p>
+        Choose one or <Link href='/'>
+          go back
+        </Link>.
+      </p>
+
+      <h2>
+        Tutorial
+      </h2>
+
+      <p>
+        If you are not familiar with Interactive Fiction,
+        you should start with this tutorial game
+        by&nbsp;Andrew&nbsp;Plotkin.
+      </p>
+
+      <ul>
+        <li>
+          <GameEntry {...{
+            ...tutorialGame,
+            theme
+          }} />
+        </li>
+      </ul>
+
+    </main>
+  )
+}

src/views/HomeView.jsx

@@ -64,8 +64,8 @@ export default function ({ themeEngine }) {
         </h3>
 
         <p>
-          <Link href='/top100'>
+          <Link href={`/games/${themeEngine.currentTheme}`}>
-            IFDB Top 100 games
+            IFDB games
           </Link>
         </p>
       </section>

src/views/style/GamesView.css

@@ -0,0 +1,7 @@
+.app > .view.games {
+  padding: var(--inner-padding);
+}
+
+h4 {
+  margin: 0;
+}