Themes: add themes page

src/index.js

@@ -11,6 +11,7 @@ import {
 
 import HomeView from '~/src/views/HomeView/HomeView'
 import GamesView from '~/src/views/GamesView/GamesView'
+import ThemesView from '~/src/views/ThemesView/ThemesView'
 import PlayerView from '~/src/views/PlayerView/PlayerView'
 import NotFoundView from '~/src/views/NotFoundView'
 
@@ -46,6 +47,11 @@ function App () {
           <Route path='/games/'>
             <GamesView />
           </Route>
+          <Route path='/themes/'>
+            <ThemesView {...{
+              themeEngine,
+            }} />
+          </Route>
 
           <Route path='/play/:encodedUrl'>
             { playerView(themeEngine, false) }

src/style/base.css

@@ -22,8 +22,9 @@ html, body {
   justify-content: center;
   align-items: center;
 
-  background-color: var(--bg-color);
   color: var(--main-color);
+  background-color: var(--bg-color);
+  transition: background-color 0.2s ease;
 
   /* Fix for Jumping Scrollbar Issue  */
   padding-left: calc(100vw - 100%);
@@ -72,11 +73,6 @@ summary:hover {
   background: var(--main-color);
 }
 
-input::placeholder {
-  color: var(--main-color);
-  opacity: 0.8;
-}
-
 ul {
   list-style: square;
 }
@@ -89,6 +85,23 @@ hr {
 
 /* */
 
+input::placeholder {
+  color: var(--main-color);
+  opacity: 0.8;
+}
+
+button {
+  border: 2px solid var(--main-color);
+  background-color: var(--bg-color);
+  color: var(--main-color);
+  padding: var(--inner-padding);
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+}
+
+/*  */
+
 .status {
   padding: 8px;
   word-break: break-word;

src/themes/themeList.js

@@ -7,7 +7,6 @@ export const themes = [
   'solarized-dark',
   /* Original */
   'emo',
-  'nord',
   'redrum',
   'toxin',
   'valve',
@@ -120,6 +119,7 @@ export const themes = [
   'nautilus',
   'nebula',
   'night_runner',
+  'nord',
   'nord_light',
   'norse',
   'oblivion',

src/themes/themes.js

@@ -27,5 +27,10 @@ export const useThemeEngine = (initialTheme = getSavedTheme()) => {
     localStorage.setItem(LS_THEME_KEY, newTheme)
   }
 
-  return { currentTheme, setTheme, themes }
+  const setRandomTheme = () => {
+    const randomTheme = themes[Math.floor(Math.random() * themes.length)]
+    setTheme(randomTheme)
+  }
+
+  return { currentTheme, setTheme, setRandomTheme, themes }
 }

src/views/HomeView/HomeView.jsx

@@ -49,6 +49,11 @@ export default function HomeView ({ themeEngine }) {
           themeEngine,
         }} />
 
+        <p>
+          Preview and choose from available themes on the <Link href={'/#/themes/'}>
+            themes page
+          </Link>.
+        </p>
         <p>
           <small>
             Double-click the input field during the game

src/views/ThemesView/ThemesView.css

@@ -0,0 +1,39 @@
+.app > .view.themes {
+  padding: var(--inner-padding);
+  --current-border: var(--main-color);
+}
+
+.themePreview {
+  border: 2px solid var(--current-border);
+  padding: calc(2 * var(--inner-padding));
+  margin-bottom: 16px;
+
+  background-color: var(--bg-color);
+  color: var(--main-color);
+}
+
+.themePreview.current {
+  padding: 0;
+  border: none;
+  margin-bottom: 64px;
+}
+
+.themePreview .output {
+  border: 2px solid var(--main-color);
+  padding: var(--inner-padding);
+  margin-bottom: 8px;
+}
+
+.themePreview .output .message.subheader {
+  font-weight: bold;
+  color: var(--accent-color);
+  text-transform: capitalize;
+}
+
+.themePreview .output .message.input {
+  color: var(--input-color);
+}
+
+.themePreview button {
+  width: 100%;
+}

src/views/ThemesView/ThemesView.jsx

@@ -0,0 +1,73 @@
+import { h } from 'preact'
+import { Link } from 'wouter-preact'
+
+import './ThemesView.css'
+
+const Preview = (themeEngine) => (theme) =>
+  <section key={theme} className={`themePreview ${theme}`}>
+    <div className='output'>
+      <div className='message input'>
+        &gt; look
+      </div>
+      <div><br/></div>
+      <div className='message subheader'>
+        {theme}
+      </div>
+      <div>
+        Observe a vibrant demonstration of colors at work,
+        showcasing their versatile usage right before your eyes.
+      </div>
+      <div><br/></div>
+    </div>
+    <button onClick={() => themeEngine.setTheme(theme)}>
+      Apply this colors
+    </button>
+  </section>
+
+export default function ThemesView ({ themeEngine }) {
+  const themes = themeEngine.themes.map(Preview(themeEngine))
+
+  return (
+    <main className='view themes'>
+      <h1>
+        Themes Page
+      </h1>
+
+      <p>
+        Choose one or <Link href='/'>
+          go back</Link>.
+      </p>
+
+      <h2>
+        Current Theme
+      </h2>
+
+      <section className={'themePreview current'}>
+        <div className='output'>
+          <div className='message input'>
+            &gt; look
+          </div>
+          <div><br/></div>
+          <div className='message subheader'>
+            Selected: {themeEngine.currentTheme}
+          </div>
+          <div>
+            You can set random one with the button below
+            or choose any theme from the list.
+          </div>
+          <div><br/></div>
+        </div>
+        <button onClick={() => themeEngine.setRandomTheme()}>
+          Set a random theme
+        </button>
+      </section>
+
+      <h2>
+        Theme List
+      </h2>
+      <section>
+        {themes}
+      </section>
+    </main>
+  )
+}