From 9e4e1014958ebb0b58ec0507e894a654300bc0fb Mon Sep 17 00:00:00 2001
From: He4eT <He4eTHb1u@gmail.com>
Date: Thu, 4 Mar 2021 03:16:20 +0500
Subject: [PATCH] Add GameEntry component

---
 src/components/GameEntry/GameEntry.jsx | 22 ++++++++++
 src/index.js                           | 10 +++--
 src/views/GamesView.jsx                | 58 ++++++++++++++++++++++++++
 src/views/HomeView.jsx                 |  4 +-
 src/views/style/GamesView.css          |  7 ++++
 5 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 src/components/GameEntry/GameEntry.jsx
 create mode 100644 src/views/GamesView.jsx
 create mode 100644 src/views/style/GamesView.css

diff --git a/src/components/GameEntry/GameEntry.jsx b/src/components/GameEntry/GameEntry.jsx
new file mode 100644
index 0000000..738315e
--- /dev/null
+++ b/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>
+)
diff --git a/src/index.js b/src/index.js
index 9648c43..4055d4a 100644
--- a/src/index.js
+++ b/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>
diff --git a/src/views/GamesView.jsx b/src/views/GamesView.jsx
new file mode 100644
index 0000000..13b7bcd
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/views/HomeView.jsx b/src/views/HomeView.jsx
index e3c6689..d8b03b7 100644
--- a/src/views/HomeView.jsx
+++ b/src/views/HomeView.jsx
@@ -64,8 +64,8 @@ export default function ({ themeEngine }) {
         </h3>
 
         <p>
-          <Link href='/top100'>
-            IFDB Top 100 games
+          <Link href={`/games/${themeEngine.currentTheme}`}>
+            IFDB games
           </Link>
         </p>
       </section>
diff --git a/src/views/style/GamesView.css b/src/views/style/GamesView.css
new file mode 100644
index 0000000..a2c41c7
--- /dev/null
+++ b/src/views/style/GamesView.css
@@ -0,0 +1,7 @@
+.app > .view.games {
+  padding: var(--inner-padding);
+}
+
+h4 {
+  margin: 0;
+}