Merge pull request #6 from light-200/fix/update

update fixed and some layout changes 🙂

docs/base.css

@@ -16,6 +16,7 @@
     --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;
     --user-name-limit: 20ch;
     --wrong-word: rgb(255, 50, 77);
@@ -34,7 +35,7 @@
 
 .dark{
     --correct-word: rgb(255, 213, 73);
-    --logo-color: rgb(22, 20, 20);
+    --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);
@@ -46,6 +47,7 @@
 @media only screen and ( max-width: 500px) {
     :root{
         --font-size-normal: .9rem;
+        --font-size-small: .7rem;
         --font-size-heading: 1.5rem;
     }
 }

docs/index.html

@@ -30,17 +30,22 @@
             </div>
 
             <form class="signUp hide">
-                <input type="text" name="username" placeholder="username" />
-                <input type="email" name="email" placeholder="email" />
-                <input type="password" name="password" placeholder="password" />
+                <input type="text" name="username" placeholder="username" required />
+                <input type="email" name="email" placeholder="email" required />
+                <input type="password" name="password" placeholder="password" required />
+                <input type="submit" name="submit" value="submit" class="btn" />
+            </form>
+            <form class="update hide">
+                <input type="text" name="username" placeholder="username" required />
                 <input type="submit" name="submit" value="submit" class="btn" />
             </form>
             <form class="signIn hide">
-                <input type="email" name="email" placeholder="email" />
-                <input type="password" name="password" placeholder="password" />
+                <input type="email" name="email" placeholder="email" required />
+                <input type="password" name="password" placeholder="password" required />
                 <input type="submit" name="submit" value="submit" class="btn" />
             </form>
-            <div class="loader hide">...</div>
+            <div class="loader hide">
+            </div>
             <div class="info hide">
                 sign up or log in to save your score
             </div>
@@ -74,6 +79,7 @@ <h5>Theme</h5>
                 <a href="#leaderBoard" class="leaderBoardBtn">📊</a>
             </div>
         </div>
+
         <div class="container">
             <div class="containerStats">
                 <div class="words">11/0</div>
@@ -83,6 +89,18 @@ <h5>Theme</h5>
             <div class="text">
                 loading...
             </div>
+
+            <div class="info hide fadeOut">
+                next in 5ms
+            </div>
+        </div>
+        <div class="footer">
+            <a class="links" href="https://github.com/light-200/type-master">
+                github
+            </a>
+
+            <div class="username">
+            </div>
         </div>
     </div>
     <div class="leaderBoard hide fadeOut" id="leaderBoard">

docs/style.css

@@ -10,14 +10,21 @@ body{
     transition: 200ms ease-in-out;
 }
 
+a{
+    text-decoration: none;
+    color: var(--correct-word);
+}
+
 .mainBody{
     overflow: hidden;
     width: 100%;
+    max-width: 1200px;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    position: relative;
 }
 
 input{
@@ -28,7 +35,7 @@ input{
     border: none;
     background-color: #ffffff;
     max-width: 300px;
-    font-size: 20px;
+    font-size: var(--font-size-normal);
 }
 
 span{
@@ -52,6 +59,7 @@ span{
 .nav>header{
     color: var(--logo-color);
     font-size: var(--font-size-heading);
+    cursor: pointer;
 }
 
 .nav>.icons>a{
@@ -65,13 +73,45 @@ span{
     border-color: invert;
 }
 
+.footer{
+    position:absolute;
+    bottom: 0px;
+    left: 0px;
+    padding: 2rem;
+
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+}
+/* floating username  */
+.username,.links{
+    opacity: .7;
+    padding: .5rem;
+}
+
+.links{
+    cursor: pointer;
+    font-size: var(--font-size-small);
+}
+
 .container{
-    transform: translateY(-3rem);
+    position: absolute;
+    top: 40vh;    transform: translateY(-3rem);
     min-width: 300px;
     width: 700px;
     max-width: 65%;
 }
 
+.container>.text{
+    min-height: 160px;
+}
+.container>.info{
+    opacity: .6;
+    transition: 500ms ease-in-out;
+    text-align: center;
+}
+
 .containerStats {
     display: flex;
     justify-content: space-between;
@@ -235,7 +275,7 @@ footer{
 }
 
 /* login module  */
-.signUp , .signIn{
+.signUp , .signIn , .update{
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -251,6 +291,13 @@ footer{
     height: 200px;
 }
 
+.loader{
+    background-image: url('https://media0.giphy.com/media/WVTW6vYXZCQWvUhm0N/giphy.gif?cid=790b76110673f2c92124ae1cd66d7411155b5e55ccf21ffe&rid=giphy.gif&ct=s');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 60px;
+}
+
 /* leaderboard */
 .leaderBoard{
     background: inherit;
@@ -358,7 +405,7 @@ footer{
 }
 
 .fadeOut{
-    opacity: 0;
+    opacity: 0 !important;
 }
 
 .hide{

src/firebase/auth.js

@@ -1,8 +1,9 @@
 import { app } from "./firebase";
 import { getAuth, connectAuthEmulator, signInWithEmailAndPassword, createUserWithEmailAndPassword, updateProfile, signOut, onAuthStateChanged } from 'firebase/auth';
-import { getUserData, setUserData } from "../storage/localstorage";
+import { getUserData, setUserData, updateUserData } from "../storage/localstorage";
 import { handleStats } from "../ui/uiListeners";
-import { handleMenu } from "../functions/handleHiding";
+import handleProfile, { handleMenu } from "../functions/handleHiding";
+import { loader, signUpinfo, stats, username } from "../ui/uiElements";
 
 
 const auth = getAuth(app);
@@ -21,7 +22,7 @@ export const signUp = async ({ email, password, username }) => {
     try {
         const userCred = await createUserWithEmailAndPassword(auth, email, password);
         await updateProfile(userCred.user, {
-            displayName: username
+            displayName: username ? username : userCred.email.split('@')[0]
         }).then(() => {
             console.log("updated the name")
             let data = {
@@ -50,15 +51,39 @@ export const logout = () => {
 
 export const authState = () => {
     onAuthStateChanged(auth, async (user) => {
-
         if (user) {
             user = await getUserData();
             handleMenu(user);
             handleStats(user);
+            username.innerText = user.userName;
         } else {
             handleMenu(user);
             handleStats(user);
+            username.innerText = " ";
         }
-
     })
+}
+
+export const updateUser = async (username) => {
+    try {
+        let userCred = auth.currentUser;
+        handleProfile(loader);
+        await updateProfile(userCred, {
+            displayName: username
+        }).then(() => {
+            console.log("updated the name");
+            let data = {
+                uId: userCred.uid,
+                userName: userCred.displayName,
+            };
+            updateUserData(data)
+            getUserData().then(
+                (user) => {
+                    handleStats(user)
+                }
+            )
+        })
+    } catch (error) {
+        alert("check your network")
+    }
 }

src/functions/speed.js

@@ -1,6 +1,6 @@
 import getText from "./getText";
 import { getUserData, setUserData, setUserTheme } from "../storage/localstorage";
-import { speedIndicator } from "../ui/uiElements";
+import { containerInfo, speedIndicator } from "../ui/uiElements";
 
 
 
@@ -24,9 +24,16 @@ const speedCalc = async (totalWords, seconds) => {
         setUserTheme({ ...user, lastSpeed: speed })
     }
 
+
     // add a function to change the text here 
+    containerInfo.classList.toggle('hide')
+    containerInfo.classList.toggle('fadeOut')
     setTimeout(() => {
         getText();
+        containerInfo.classList.toggle('fadeOut')
+        setTimeout(() => {
+            containerInfo.classList.toggle('hide')
+        }, 500)
     }, 500);
 }
 

src/script.js

@@ -17,7 +17,6 @@ window.onload = () => {
         body.classList.add(getUserTheme().theme)
         setSpeed(getUserTheme().lastSpeed)
     };
-
 }
 
 getText();

src/storage/localstorage.js

@@ -28,4 +28,11 @@ function setUserData(data) {
     return data;
 }
 
-export { getUserData, setUserData, getUserTheme, setUserTheme };
+function updateUserData(data) {
+    setData(data)
+    let userLocal = getUserTheme(); // to get the data from the local storage
+    localStorage.setItem(LOCAL_STORAGE_USER_DATA, JSON.stringify({ ...userLocal, userName: data.username }));
+    return data;
+}
+
+export { getUserData, setUserData, getUserTheme, setUserTheme, updateUserData };

src/ui/uiElements.js

@@ -49,6 +49,7 @@ export const speedIndicator = document.querySelector(".speed");
 export const loginBtn = document.querySelector('.loginBtn');
 export const signinForm = document.querySelector('.profile>.routs>.signIn')
 export const updateBtn = document.querySelector('.updateBtn')
+export const updateForm = document.querySelector('.profile>.routs>.update')
 
 //logout
 export const logoutBtn = document.querySelector('.logoutBtn')
@@ -63,4 +64,9 @@ export const options = document.querySelector('.options');
 
 // for leaderBoard
 export const leaderBoard = document.querySelector('.leaderBoard>.content')
-export const leaderBoardBtn = document.querySelector('.leaderBoardBtn')
+export const leaderBoardBtn = document.querySelector('.leaderBoardBtn')
+
+//for info 
+export const containerInfo = document.querySelector('.container>.info')
+
+export const username = document.querySelector('.username')

src/ui/uiListeners.js

@@ -1,9 +1,9 @@
 import { text } from '../functions/getText';
 import handleProfile, { handleMenu } from '../functions/handleHiding';
 import { getUserData, setUserData, setUserTheme } from '../storage/localstorage';
-import { body, theme, signupForm, profileButton, profile, saveStatsBtn, signupBtn, settings, settingsBtn, closeWinBtn, drag, stats, loginBtn, signinForm, logoutBtn, updateBtn, signUpinfo, loader, leaderBoardBtn, leaderBoard } from './uiElements';
+import { body, theme, signupForm, profileButton, profile, saveStatsBtn, signupBtn, settings, settingsBtn, closeWinBtn, drag, stats, loginBtn, signinForm, logoutBtn, updateBtn, signUpinfo, loader, leaderBoardBtn, leaderBoard, updateForm } from './uiElements';
 import saveStats from '../functions/saveStats';
-import { logout, signIn, signUp } from '../firebase/auth';
+import { logout, signIn, signUp, updateUser } from '../firebase/auth';
 
 var totalWords;
 
@@ -87,7 +87,7 @@ const moveElement = (e, element) => {
 
 // for stats 
 
-const handleStats = (user) => {
+const handleStats = async (user) => {
     // console.log(user)
     if (user && !(Object.entries(user).length === 0 && user.constructor === Object)) {
         stats.childNodes.forEach((element) => {
@@ -175,7 +175,16 @@ logoutBtn.addEventListener('click', () => {
 })
 
 updateBtn.addEventListener('click', () => {
-    console.log('update btn clicked')
+    // console.log('update btn clicked')
+    handleProfile(updateForm);
+})
+
+updateForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    let username = e.target.username.value;
+    if (username && username[0] != ' ' && username.length > 0) { updateUser(username) } else {
+        console.log('enter username', username)
+    };
 })