diff --git a/src/components/GameEntry/GameEntry.jsx b/src/components/GameEntry/GameEntry.jsx index 738315e..95d03dd 100644 --- a/src/components/GameEntry/GameEntry.jsx +++ b/src/components/GameEntry/GameEntry.jsx @@ -5,7 +5,7 @@ import { buildPlayLinkHref } from '~/src/utils/utils.routing' -export default ({ name, ifdb, url, theme }) => ( +export default ({ name, ifdb, url }) => (

{name}

( | + href={buildPlayLinkHref({ url })}> Play
diff --git a/src/index.js b/src/index.js index f38a08f..a941a52 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import { h, render } from 'preact' -import { Route, Router, Redirect, Switch } from 'wouter-preact' +import { Route, Router, Switch } from 'wouter-preact' import { useHashLocation, @@ -34,17 +34,16 @@ function App () { themeEngine }} /> - - {params => + + + + {params => } - - - - + {params => { + const savedTheme = localStorage.getItem(LS_THEME_KEY) + return savedTheme || DEFAULT_THEME +} + const assertTheme = theme => themes.includes(theme) ? theme - : DEFAULT_THEME + : getSavedTheme() -export const useThemeEngine = (initialTheme = DEFAULT_THEME) => { +export const useThemeEngine = (initialTheme = getSavedTheme()) => { const [currentTheme, setCurrentTheme] = useState(initialTheme) const setTheme = theme => { - setCurrentTheme(assertTheme(theme)) + const newTheme = assertTheme(theme) + + setCurrentTheme(newTheme) + localStorage.setItem(LS_THEME_KEY, newTheme) } return { currentTheme, setTheme, themes } diff --git a/src/utils/utils.routing.js b/src/utils/utils.routing.js index a587694..973ef87 100644 --- a/src/utils/utils.routing.js +++ b/src/utils/utils.routing.js @@ -21,8 +21,8 @@ export const useHashLocation = () => { return [loc, navigate] } -export const buildPlayLinkHref = ({ url, theme }) => - `/#/play/${theme}/${encodeURIComponent(url)}` +export const buildPlayLinkHref = ({ url }) => + `/#/play/${encodeURIComponent(url)}` export const extractView = location => { const currentView = location.split('/').filter(Boolean)[0] diff --git a/src/views/GamesView/GamesView.jsx b/src/views/GamesView/GamesView.jsx index b19ff2b..3d85ca6 100644 --- a/src/views/GamesView/GamesView.jsx +++ b/src/views/GamesView/GamesView.jsx @@ -1,5 +1,4 @@ import { h } from 'preact' -import { useEffect } from 'preact/hooks' import { Link } from 'wouter-preact' import GameEntry from @@ -15,9 +14,7 @@ const tutorialGame = { url: 'http://mirror.ifarchive.org/if-archive/games/zcode/dreamhold.z8' } -export default function ({ setTheme, theme }) { - useEffect(() => setTheme(theme), [theme]) - +export default function () { return (
@@ -32,7 +29,7 @@ export default function ({ setTheme, theme }) {

Choose one or - go back . + go back.

@@ -48,8 +45,7 @@ export default function ({ setTheme, theme }) {
@@ -77,8 +73,7 @@ export default function ({ setTheme, theme }) { {top2019.map(game => (
  • ))} diff --git a/src/views/HomeView/HomeView.jsx b/src/views/HomeView/HomeView.jsx index 589d8ec..9476cbf 100644 --- a/src/views/HomeView/HomeView.jsx +++ b/src/views/HomeView/HomeView.jsx @@ -64,7 +64,7 @@ export default function ({ themeEngine }) {

    - + IFDB games