From 9527838a8bdb44b01b4cbccbd7044719fa2fde0a Mon Sep 17 00:00:00 2001 From: MUYANGGUO Date: Thu, 7 Mar 2024 18:24:24 -0800 Subject: [PATCH 1/2] update webgl based bg new themes --- README.md | 10 ++ package-lock.json | 124 +++++++++++++++++---- package.json | 1 + src/App.js | 49 ++++---- src/components/common/DynamicBackground.js | 27 +++++ src/components/common/FooterMenu.js | 3 +- src/style/global.js | 22 ++-- src/style/theme.js | 59 +++++++++- 8 files changed, 242 insertions(+), 53 deletions(-) create mode 100644 src/components/common/DynamicBackground.js diff --git a/README.md b/README.md index 826836d..c8b53d0 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,8 @@ To join the community, please go to the website and hit "discord" icon. #### 6. Themes Collection +Static Themes + - Dark - Piano - Aluminum @@ -87,6 +89,14 @@ To join the community, please go to the website and hit "discord" icon. - Cool Kid - EdgeRunner (cyberpunk 2077 edgerunners episodes inspired) +Dynamic Themes (WebGL based, may impact performance. experimental feature. Acknowledged [UV canvas](https://uvcanvas.com/)) + + - Tranquiluxe, + - Lumiflex, + - Opulento, + - Velustro + + #### 7. LocalStorage persist for essential settings - Browser refresh will bring back to the localStorage stored settings diff --git a/package-lock.json b/package-lock.json index 87ebe18..a0df879 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-toastify": "^10.0.4", "styled-components": "^5.3.5", "use-sound": "^4.0.1", + "uvcanvas": "^0.2.1", "web-vitals": "^2.1.4" } }, @@ -11791,6 +11792,11 @@ "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==" }, + "node_modules/ogl": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/ogl/-/ogl-1.0.5.tgz", + "integrity": "sha512-3hJKUgrFG3GtEZA4iL25Qe9jTodmXv1K0xXZ3XOpqEeXSi/DlzkJsb+um7ayafZ/BYCfKHl37qXiYKmcBqfYHQ==" + }, "node_modules/on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -13499,9 +13505,9 @@ } }, "node_modules/react": { - "version": "18.0.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz", - "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dependencies": { "loose-envify": "^1.1.0" }, @@ -13643,15 +13649,15 @@ } }, "node_modules/react-dom": { - "version": "18.0.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz", - "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dependencies": { "loose-envify": "^1.1.0", - "scheduler": "^0.21.0" + "scheduler": "^0.23.0" }, "peerDependencies": { - "react": "^18.0.0" + "react": "^18.2.0" } }, "node_modules/react-error-overlay": { @@ -14285,9 +14291,9 @@ } }, "node_modules/scheduler": { - "version": "0.21.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz", - "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "dependencies": { "loose-envify": "^1.1.0" } @@ -15553,6 +15559,14 @@ "react": ">=16.8" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -15593,6 +15607,19 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/uvcanvas": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/uvcanvas/-/uvcanvas-0.2.1.tgz", + "integrity": "sha512-JqhmyYGjHdZ32PgBlu99QVORutO0Avf2tvWfimyCwqG8gnU/IUkwiAexwlMqvD0Wr+C6DHy0vkkCj/KGd8UP9w==", + "dependencies": { + "ogl": "^1.0.5", + "zustand": "^4.5.2" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, "node_modules/v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", @@ -16536,6 +16563,33 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz", + "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==", + "dependencies": { + "use-sync-external-store": "1.2.0" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@types/react": ">=16.8", + "immer": ">=9.0.6", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } } }, "dependencies": { @@ -24924,6 +24978,11 @@ "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==" }, + "ogl": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/ogl/-/ogl-1.0.5.tgz", + "integrity": "sha512-3hJKUgrFG3GtEZA4iL25Qe9jTodmXv1K0xXZ3XOpqEeXSi/DlzkJsb+um7ayafZ/BYCfKHl37qXiYKmcBqfYHQ==" + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -26019,9 +26078,9 @@ } }, "react": { - "version": "18.0.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz", - "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "requires": { "loose-envify": "^1.1.0" } @@ -26126,12 +26185,12 @@ } }, "react-dom": { - "version": "18.0.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz", - "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "requires": { "loose-envify": "^1.1.0", - "scheduler": "^0.21.0" + "scheduler": "^0.23.0" } }, "react-error-overlay": { @@ -26576,9 +26635,9 @@ } }, "scheduler": { - "version": "0.21.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz", - "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "requires": { "loose-envify": "^1.1.0" } @@ -27541,6 +27600,12 @@ "howler": "^2.1.3" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -27572,6 +27637,15 @@ "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" }, + "uvcanvas": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/uvcanvas/-/uvcanvas-0.2.1.tgz", + "integrity": "sha512-JqhmyYGjHdZ32PgBlu99QVORutO0Avf2tvWfimyCwqG8gnU/IUkwiAexwlMqvD0Wr+C6DHy0vkkCj/KGd8UP9w==", + "requires": { + "ogl": "^1.0.5", + "zustand": "^4.5.2" + } + }, "v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", @@ -28311,6 +28385,14 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" + }, + "zustand": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz", + "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==", + "requires": { + "use-sync-external-store": "1.2.0" + } } } } diff --git a/package.json b/package.json index 321f7ed..5676514 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-toastify": "^10.0.4", "styled-components": "^5.3.5", "use-sound": "^4.0.1", + "uvcanvas": "^0.2.1", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index bb75445..a8c4df8 100644 --- a/src/App.js +++ b/src/App.js @@ -22,6 +22,7 @@ import { DEFAULT_SOUND_TYPE, DEFAULT_SOUND_TYPE_KEY, } from "./components/features/sound/sound"; +import DynamicBackground from "./components/common/DynamicBackground"; function App() { // localStorage persist theme setting @@ -174,8 +175,10 @@ function App() { return ( <> +
+
{isWordGameMode && ( )} - +
+ +
{ + + if (theme.label === "Tranquiluxe" ){ + return + } + if (theme.label === "Lumiflex" ){ + return + } + if (theme.label === "Opulento" ){ + return + } + if (theme.label === "Novatrix" ){ + return + } + if (theme.label === "Velustro" ){ + return + } + if (theme.label === "Zenitho" ){ + return + } + return null; +}; + +export default DynamicBackground; diff --git a/src/components/common/FooterMenu.js b/src/components/common/FooterMenu.js index 85cf633..6ee1ad9 100644 --- a/src/components/common/FooterMenu.js +++ b/src/components/common/FooterMenu.js @@ -75,7 +75,8 @@ const FooterMenu = ({ }; return ( - +