From fd49342e1280c2f7247cfb7e11d08930ed2983c8 Mon Sep 17 00:00:00 2001 From: He4eT Date: Sun, 28 May 2023 02:22:05 +0300 Subject: [PATCH] Themes: add themes page --- src/index.js | 6 +++ src/style/base.css | 25 +++++++--- src/themes/themeList.js | 2 +- src/themes/themes.js | 7 ++- src/views/HomeView/HomeView.jsx | 5 ++ src/views/ThemesView/ThemesView.css | 39 +++++++++++++++ src/views/ThemesView/ThemesView.jsx | 73 +++++++++++++++++++++++++++++ 7 files changed, 149 insertions(+), 8 deletions(-) create mode 100644 src/views/ThemesView/ThemesView.css create mode 100644 src/views/ThemesView/ThemesView.jsx diff --git a/src/index.js b/src/index.js index a0c0b2a..2bf1fe4 100644 --- a/src/index.js +++ b/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 () { + + + { playerView(themeEngine, false) } diff --git a/src/style/base.css b/src/style/base.css index e17b06a..0156284 100644 --- a/src/style/base.css +++ b/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; } @@ -87,6 +83,23 @@ hr { border-top: 2px solid var(--main-color); } +/* */ + +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 { diff --git a/src/themes/themeList.js b/src/themes/themeList.js index 800d03e..31fd1dc 100644 --- a/src/themes/themeList.js +++ b/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', diff --git a/src/themes/themes.js b/src/themes/themes.js index 8671c99..a287f2c 100644 --- a/src/themes/themes.js +++ b/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 } } diff --git a/src/views/HomeView/HomeView.jsx b/src/views/HomeView/HomeView.jsx index 8630447..b3fe2c1 100644 --- a/src/views/HomeView/HomeView.jsx +++ b/src/views/HomeView/HomeView.jsx @@ -49,6 +49,11 @@ export default function HomeView ({ themeEngine }) { themeEngine, }} /> +

+ Preview and choose from available themes on the + themes page + . +

Double-click the input field during the game diff --git a/src/views/ThemesView/ThemesView.css b/src/views/ThemesView/ThemesView.css new file mode 100644 index 0000000..273ac46 --- /dev/null +++ b/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%; +} diff --git a/src/views/ThemesView/ThemesView.jsx b/src/views/ThemesView/ThemesView.jsx new file mode 100644 index 0000000..cf07db5 --- /dev/null +++ b/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) => +

+
+
+ > look +
+

+
+ {theme} +
+
+ Observe a vibrant demonstration of colors at work, + showcasing their versatile usage right before your eyes. +
+

+
+ +
+ +export default function ThemesView ({ themeEngine }) { + const themes = themeEngine.themes.map(Preview(themeEngine)) + + return ( +
+

+ Themes Page +

+ +

+ Choose one or + go back. +

+ +

+ Current Theme +

+ +
+
+
+ > look +
+

+
+ Selected: {themeEngine.currentTheme} +
+
+ You can set random one with the button below + or choose any theme from the list. +
+

+
+ +
+ +

+ Theme List +

+
+ {themes} +
+
+ ) +}