Merge pull request #7 from light-200/update/stats-card

added designed stats card 🦄 designed by @light-200
light-200 · Jan 10, 2022 · 8c8006a · 8c8006a
2 parents f2e7f38 + c009801
commit 8c8006a
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 58 deletions.
diff --git a/docs/base.css b/docs/base.css
@@ -9,12 +9,8 @@
 }
 
 :root{
-    --font-color-dark: rgb(218, 216, 216);
     --wrong-font-color: #ff324d;
-    --background-color-dark: rgb(34, 34, 34);
     --button-bg-color: rgb(255, 221, 70);
-    --font-color-light: rgb(17, 17, 17);
-    --background-color-light: rgb(230, 216, 216);
     --font-size-normal: 1.5rem;
     --font-size-small: 1rem;
     --font-size-heading: 2rem;
@@ -23,9 +19,11 @@
 }
 
 .light{
+    --font-color: rgb(17, 17, 17);
+    --background-color: rgb(230, 216, 216);
     --logo-color: rgba(0, 0, 0, 0.658);
-    background-color: var(--background-color-light);
-    color: var(--font-color-light);
+    background-color: var(--background-color);
+    color: var(--font-color);
     --lb-header-bg-color: rgb(29, 29, 29);
     --lb-header-color: rgb(255, 237, 234);
     --lb-list-item-bg-color: var(--lb-header-color);
@@ -34,14 +32,16 @@
 }
 
 .dark{
+    --font-color: rgb(218, 216, 216);
+    --background-color: rgb(34, 34, 34);
     --correct-word: rgb(255, 213, 73);
     --logo-color: rgba(255, 213, 73, 0.616);
     --lb-header-bg-color: rgb(255, 243, 230);
     --lb-header-color: rgb(24, 25, 26);
     --lb-list-item-bg-color: var(--lb-header-color);
     --lb-list-item-color: var(--lb-header-bg-color);
-    background-color: var(--background-color-dark);
-    color: var(--font-color-dark)
+    background-color: var(--background-color);
+    color: var(--font-color)
 }
 
 @media only screen and ( max-width: 500px) {

diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/style.css b/docs/style.css
@@ -8,6 +8,8 @@ body{
     color: var(--font-color-dark);
     font-size: var(--font-size-normal);
     transition: 200ms ease-in-out;
+    z-index: 0;
+    overflow: hidden;
 }
 
 a{
@@ -116,6 +118,7 @@ span{
     display: flex;
     justify-content: space-between;
     margin-bottom: 2rem;
+
 }
 
 .text{ position: relative}
@@ -164,7 +167,7 @@ footer{
     border-radius: 10px;
     border: solid .5px ;
     border-color: invert;
-
+    padding: 0;
 }
 
 .windowTop{
@@ -196,38 +199,33 @@ footer{
 }
 
 .stats{
-
-
     position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex-grow: 1;
     height: 250px;
     background-color: inherit;
     color: inherit;
 }
 
-.stats::after{
-    content: 'type-master';
+.stats .bg{
+    width: 100%;
     position: absolute;
-    bottom: .2rem;
-    right: .5rem;
-    font-size: 20px;
-    opacity: .3;
+    z-index: 0;
 }
 
-.stats>.name{
-    text-align: center;
-    width: 100%;
-    padding: .5rem 1rem;
+.statsText{
+    display: block;
+    text-transform: capitalize;
+    font-size: 36px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
-.stats>.topSpeed{
+.stats .bg .name{
+    fill: #E8C23F;
+}
+
+.stats .bg .speed{
+    fill: #222222;
     text-align: center;
-    width: 100%;
-    padding: .5rem 1rem;
+    font-weight: 700;
 }
 
 .profile>.footer{
@@ -239,10 +237,13 @@ footer{
 .saveStats{
     width: fit-content;
 }
+
+
 .saveStats:hover{
     cursor: pointer;
 }
 
+
 .theme{
     display: flex;
     flex-direction: column;
@@ -252,28 +253,12 @@ footer{
     width: 100%;
     height: 250px;
 }
-.themeLight::after{
-    content: " ";
-    display: inline-block;
-    border: solid 2px white;
-    min-width: 1rem;
-    min-height: 1rem;
-    border-radius: 50%;
-    margin:  0 2rem;
-    background-color: var(--background-color-light);
-}
-
-.themeDark::after{
-    content: " ";
-    display: inline-block;
-    border: solid 2px white;
-    min-width: 1rem;
-    min-height: 1rem;
-    border-radius: 50%;
-    margin:  0 2rem;
-    background-color: var(--background-color-dark);
+
+.themeLight,.themeDark{
+    color: var(--font-color);
 }
 
+
 /* login module  */
 .signUp , .signIn , .update{
     display: flex;

diff --git a/src/ui/uiListeners.js b/src/ui/uiListeners.js
@@ -90,13 +90,24 @@ const moveElement = (e, element) => {
 const handleStats = async (user) => {
     // console.log(user)
     if (user && !(Object.entries(user).length === 0 && user.constructor === Object)) {
-        stats.childNodes.forEach((element) => {
+        stats.lastElementChild.lastElementChild.childNodes.forEach((element) => {
             if (!element.classList) {
                 return
             } else if (element.classList.contains('name')) {
-                element.innerText = user.userName;
-            } else if (element.classList.contains('topSpeed')) {
-                element.innerText = 'topspeed: ' + user.topSpeed;
+                if (user.userName.length > 10) {
+                    element.style.fontSize = 20;
+                } else if (
+                    user.userName.length > 20
+                ) {
+                    element.style.fontSize = 15;
+
+                }
+                element.innerHTML = user.userName;
+            } else if (element.classList.contains('speed')) {
+                if (user.userName.length > 10) {
+                    element.style.fontSize = 30;
+                }
+                element.innerHTML = user.topSpeed;
             }
         })
         handleProfile(stats, user)

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,7 +1,7 @@
 const path = require('path');
 
 module.exports = {
-    mode: 'development',
+    mode: 'production',
     entry: './src/script.js',
     output: {
         path: path.resolve(__dirname, 'docs'),