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 }) => ( +
+

{name}

+ + IFDB page + + | + + Play + +
+) 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 }} /> + + {params => } + {params => } - - top100 - 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 ( +
+ +

+ + IFDB + games +

+ +

+ Choose one or + go back + . +

+ +

+ Tutorial +

+ +

+ If you are not familiar with Interactive Fiction, + you should start with this tutorial game + by Andrew Plotkin. +

+ + + +
+ ) +} 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 }) {

- - IFDB Top 100 games + + IFDB games

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; +}