Themes: add themes page

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