Store the UI theme in the LocalStorage

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 }) => (
   <div>
     <h4>{name}</h4>
     <a
@@ -15,7 +15,7 @@ export default ({ name, ifdb, url, theme }) => (
     </a>
     <span> | </span>
     <Link
-      href={buildPlayLinkHref({ url, theme })}>
+      href={buildPlayLinkHref({ url })}>
       Play
     </Link>
   </div>

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
             }} />
           </Route>
-          <Route path='/games/:theme'>
-            {params => <GamesView {...{
+          <Route path='/games/'>
+            <GamesView />
+          </Route>
+          <Route path='/play/:encodedUrl'>
+            {params => <PlayerView {...{
               ...themeEngine,
               ...params
             }} />}
           </Route>
-          <Route path='/games'>
-            <Redirect
-              to={`/games/${themeEngine.currentTheme}/`} />
-          </Route>
-          <Route path='/play/:theme/:encodedUrl'>
+          <Route path='/play/:encodedUrl/:theme'>
             {params => <PlayerView {...{
               ...themeEngine,
               ...params

src/themes/themes.js

@@ -16,19 +16,28 @@ const themes = [
   'wasp'
 ]
 
+const LS_THEME_KEY = 'ifplayer/theme'
 const DEFAULT_THEME = themes[0]
 
+const getSavedTheme = () => {
+  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 }

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]

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 (
     <main className='view games'>
 
@@ -32,7 +29,7 @@ export default function ({ setTheme, theme }) {
 
       <p>
         Choose one or <Link href='/'>
-          go back </Link>.
+          go back</Link>.
       </p>
 
       <h3>
@@ -48,8 +45,7 @@ export default function ({ setTheme, theme }) {
       <ul>
         <li>
           <GameEntry {...{
-            ...tutorialGame,
-            theme
+            ...tutorialGame
           }} />
         </li>
       </ul>
@@ -77,8 +73,7 @@ export default function ({ setTheme, theme }) {
         {top2019.map(game => (
           <li>
             <GameEntry {...{
-              ...game,
-              theme
+              ...game
             }} />
           </li>
         ))}

src/views/HomeView/HomeView.jsx

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