Merge pull request #49 from gamer-ai/feature/web-gl-themes-by-uv-canvas

feature/update webgl based bg new themes

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. Component Library used from [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

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": {

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 (
     <ThemeProvider theme={theme}>
       <>
+        <DynamicBackground theme={theme}></DynamicBackground>
         <div className="canvas">
           <GlobalStyles />
+          <div></div>
           <Logo isFocusedMode={isFocusedMode} isMusicMode={isMusicMode}></Logo>
           {isWordGameMode && (
             <TypeBox
@@ -213,28 +216,30 @@ function App() {
           {isWordsCardMode && !isCoffeeMode && !isTrainerMode && (
             <WordsCard soundMode={soundMode} soundType={soundType}></WordsCard>
           )}
-          <FooterMenu
-            themesOptions={themesOptions}
-            theme={theme}
-            soundMode={soundMode}
-            toggleSoundMode={toggleSoundMode}
-            soundOptions={soundOptions}
-            soundType={soundType}
-            handleSoundTypeChange={handleSoundTypeChange}
-            handleThemeChange={handleThemeChange}
-            toggleFocusedMode={toggleFocusedMode}
-            toggleMusicMode={toggleMusicMode}
-            toggleCoffeeMode={toggleCoffeeMode}
-            isCoffeeMode={isCoffeeMode}
-            isMusicMode={isMusicMode}
-            isFocusedMode={isFocusedMode}
-            gameMode={gameMode}
-            handleGameModeChange={handleGameModeChange}
-            isTrainerMode={isTrainerMode}
-            toggleTrainerMode={toggleTrainerMode}
-            isWordsCardMode={isWordsCardMode}
-            toggleWordsCardMode={toggleWordsCardMode}
-          ></FooterMenu>
+          <div className="bottomBar">
+            <FooterMenu
+              themesOptions={themesOptions}
+              theme={theme}
+              soundMode={soundMode}
+              toggleSoundMode={toggleSoundMode}
+              soundOptions={soundOptions}
+              soundType={soundType}
+              handleSoundTypeChange={handleSoundTypeChange}
+              handleThemeChange={handleThemeChange}
+              toggleFocusedMode={toggleFocusedMode}
+              toggleMusicMode={toggleMusicMode}
+              toggleCoffeeMode={toggleCoffeeMode}
+              isCoffeeMode={isCoffeeMode}
+              isMusicMode={isMusicMode}
+              isFocusedMode={isFocusedMode}
+              gameMode={gameMode}
+              handleGameModeChange={handleGameModeChange}
+              isTrainerMode={isTrainerMode}
+              toggleTrainerMode={toggleTrainerMode}
+              isWordsCardMode={isWordsCardMode}
+              toggleWordsCardMode={toggleWordsCardMode}
+            ></FooterMenu>
+          </div>
           <MusicPlayerSnackbar
             isMusicMode={isMusicMode}
             isFocusedMode={isFocusedMode}

src/components/common/DynamicBackground.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { Opulento, Lumiflex, Tranquiluxe, Novatrix, Velustro, Zenitho} from "uvcanvas";
+
+const DynamicBackground = ({ theme }) => {
+
+    if (theme.label === "Tranquiluxe" ){
+        return       <Tranquiluxe className="dynamicBackground"/>
+    }
+    if (theme.label === "Lumiflex" ){
+        return       <Lumiflex className="dynamicBackground"/>
+    }
+    if (theme.label === "Opulento" ){
+        return       <Opulento className="dynamicBackground"/>
+    }
+    if (theme.label === "Novatrix" ){
+        return       <Novatrix className="dynamicBackground"/>
+    }
+    if (theme.label === "Velustro" ){
+        return       <Velustro className="dynamicBackground"/>
+    }
+    if (theme.label === "Zenitho" ){
+        return       <Zenitho className="dynamicBackground"/>
+    }
+    return null;
+};
+
+export default DynamicBackground;

src/components/common/FooterMenu.js

@@ -75,7 +75,8 @@ const FooterMenu = ({
   };
 
   return (
-    <AppBar position="static" color="transparent">
+    <AppBar position="static"
+    color="transparent" className="bottomBar">
       <Grid container justifyContent="space-between" alignItems="center">
         <Box display="flex" flexDirection="row">
           <Select