Themes: init

src/components/FileSelector.js

@@ -1,10 +1,10 @@
 import { h } from 'preact'
 
-export default function ({ emitName, emitURL }) {
+export default function ({ setTargetName, setTargetUrl }) {
   const fileInputHandler = ({ target }) => {
     const file = target.files[0]
-    emitName(file.name)
-    emitURL(`${URL.createObjectURL(file)}#${file.name}`)
+    setTargetName(file.name)
+    setTargetUrl(`${URL.createObjectURL(file)}#${file.name}`)
     target.value = null
   }
 

src/components/ThemeSelector.js

@@ -0,0 +1,15 @@
+import { h } from 'preact'
+
+export default function ({ themeList, currentTheme, setTheme }) {
+  const options = themeList.map(theme => (
+    <option value={theme}>
+      {theme}
+    </option>))
+
+  return (
+    <select
+      value={currentTheme}
+      onChange={({ target }) => setTheme(target.value)}>
+      {options}
+    </select>)
+}

src/components/URLSelector.js

@@ -1,16 +1,16 @@
 import { h } from 'preact'
 
-export default function ({ emitName, emitURL }) {
-  const reURL = /^(http|https):\/\/[^ "]+$/
+export default function ({ setTargetName, setTargetUrl }) {
+  const urlRE = /^(http|https):\/\/[^ "]+$/
 
   const emit = url => {
-    emitName(url)
-    emitURL(url)
+    setTargetName(url)
+    setTargetUrl(url)
   }
 
   const urlInputHandler = ({ target }) => {
     const url = target.value
-    emit(reURL.test(url)
+    emit(urlRE.test(url)
       ? url
       : null)
   }

src/index.js

@@ -1,35 +1,50 @@
 import { h, render } from 'preact'
-import { Link, Route, Router, Switch } from 'wouter-preact'
+import { useState } from 'preact/hooks'
+import { Route, Router, Switch } from 'wouter-preact'
 
 import { useHashLocation } from '~/src/utils/utils.routing'
+import {
+  DEFAULT_THEME,
+  themeList,
+  assertTheme
+} from '~/src/themes/themes'
 
 import Home from '~/src/views/Home'
 import Player from '~/src/views/Player'
 
+import '~/src/style/base.css'
+
 function App () {
+  const [currentTheme, setCurrentTheme] =
+    useState(DEFAULT_THEME)
+
+  const setTheme = theme =>
+    setCurrentTheme(assertTheme(theme))
+
   return (
     <Router hook={useHashLocation}>
-      <div className='App'>
-        <nav>
-          <Link href='/'>Root</Link>
-        </nav>
-
-        <main>
-          <Switch>
-            <Route
-              path='/'
-              component={Home} />
-            <Route
-              path='/play/:theme/:encodedUrl'
-              component={Player} />
-            <Route path='/top100'>
-              top100
-            </Route>
-            <Route>
-              404
-            </Route>
-          </Switch>
-        </main>
+      <div className={['app', currentTheme].join(' ')}>
+        <Switch>
+          <Route path='/'>
+            <Home {...{
+              setTheme,
+              themeList,
+              currentTheme
+            }} />
+          </Route>
+          <Route path='/play/:theme/:encodedUrl'>
+            {params => <Player {...{
+              setTheme,
+              ...params
+            }} />}
+          </Route>
+          <Route path='/top100'>
+            top100
+          </Route>
+          <Route>
+            404
+          </Route>
+        </Switch>
       </div>
     </Router>
   )

src/style/base.css

@@ -0,0 +1,3 @@
+html, body {
+  margin: 0;
+}

src/themes/themes.js

@@ -0,0 +1,15 @@
+export const themeList = [
+  'default',
+  'default-dark',
+  'nord',
+  'solarized-dark',
+  'solarized-light',
+  '_raw'
+]
+
+export const DEFAULT_THEME = themeList[0]
+
+export const assertTheme = theme =>
+  themeList.includes(theme)
+    ? theme
+    : DEFAULT_THEME

src/utils/utils.routing.js

@@ -20,7 +20,7 @@ export const useHashLocation = () => {
   return [loc, navigate]
 }
 
-export const buildPlayLinkHref = (url, theme = 'default') =>
+export const buildPlayLinkHref = (url, theme) =>
   `/#/play/${theme}/${encodeURIComponent(url)}`
 
 export const getFileExtension = fileName =>

src/views/Home.js

@@ -5,17 +5,18 @@ import { Link } from 'wouter-preact'
 
 import FileSelector from '~/src/components/FileSelector'
 import URLSelector from '~/src/components/URLSelector'
+import ThemeSelector from '~/src/components/ThemeSelector'
 
 import { buildPlayLinkHref } from '~/src/utils/utils.routing'
 
-export default function () {
-  const [targetName, setTargetName] = useState(null)
-  const [targetURL, setTargetURL] = useState(null)
+const playButton = (name, url, theme) => (
+  <Link href={buildPlayLinkHref(url, theme)}>
+    Play "{name}"
+  </Link>)
 
-  const playButton = (
-    <Link href={buildPlayLinkHref(targetURL)}>
-      Play "{targetName}"
-    </Link>)
+export default function ({ themeList, currentTheme, setTheme }) {
+  const [targetName, setTargetName] = useState(null)
+  const [targetUrl, setTargetUrl] = useState(null)
 
   return (
     <main>
@@ -26,16 +27,27 @@ export default function () {
       </p>
       <ul>
         <li>
-          <FileSelector
-            emitName={setTargetName}
-            emitURL={setTargetURL} />
+          <ThemeSelector {...{
+            currentTheme,
+            themeList,
+            setTheme
+          }} />
         </li>
         <li>
-          <URLSelector
-            emitName={setTargetName}
-            emitURL={setTargetURL} />
+          <FileSelector {...{
+            setTargetName,
+            setTargetUrl
+          }} />
+        </li>
+        <li>
+          <URLSelector {...{
+            setTargetName,
+            setTargetUrl
+          }} />
         </li>
       </ul>
-      { targetURL ? playButton : null }
+      { targetUrl
+        ? playButton(targetName, targetUrl, currentTheme)
+        : null }
     </main>)
 }

src/views/Player.jsx

@@ -2,7 +2,9 @@ import { h } from 'preact'
 
 import { getFileExtension } from '~/src/utils/utils.routing'
 
-export default function ({params: {theme, encodedUrl}}) {
+export default function ({setTheme, theme, encodedUrl}) {
+  setTheme(theme)
+
   const url = decodeURIComponent(encodedUrl)
   const type = getFileExtension(url)