Proximo nivel =D

src/components/NavBar/index.tsx

@@ -1,31 +1,30 @@
 import Link from 'next/link';
-import { useState } from 'react';
+import { useAuth } from '../../hooks/useAuth';
 import styles from './styles.module.scss';
 
 export function NavBar(){
- const [ selectedPage, setSelectedPage ] = useState('home');
+ const { currentPage } = useAuth();
 
  return(
-
  <nav className={styles.nav}>
  <img src="/icons/small-logo.svg" alt="logo" />
 
  <div>
  <Link href="/">
- <div className={selectedPage === 'home'? styles.selected : ''} onClick={()=>setSelectedPage('home')}>
+ <div className={currentPage === 'home'? styles.selected : ''}>
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http:https://www.w3.org/2000/svg">
- <path d="M4 12L16 2.66663L28 12V26.6666C28 27.3739 27.719 28.0522 27.219 28.5522C26.7189 29.0523 26.0406 29.3333 25.3333 29.3333H6.66667C5.95942 29.3333 5.28115 29.0523 4.78105 28.5522C4.28095 28.0522 4 27.3739 4 26.6666V12Z" stroke={selectedPage === 'home'? '#5965E0': '#aaaaaa'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
- <path d="M12 29.3333V16H20V29.3333" stroke={selectedPage === 'home'? '#5965E0': '#aaaaaa'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+ <path d="M4 12L16 2.66663L28 12V26.6666C28 27.3739 27.719 28.0522 27.219 28.5522C26.7189 29.0523 26.0406 29.3333 25.3333 29.3333H6.66667C5.95942 29.3333 5.28115 29.0523 4.78105 28.5522C4.28095 28.0522 4 27.3739 4 26.6666V12Z" stroke={currentPage === 'home'? '#5965E0': '#aaaaaa'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+ <path d="M12 29.3333V16H20V29.3333" stroke={currentPage === 'home'? '#5965E0': '#aaaaaa'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
  </div>
  </Link>
 
  <Link href="/leaderboard">
- <div className={selectedPage === 'ranking'? styles.selected : ''} onClick={()=>setSelectedPage('ranking')}>
+ <div className={currentPage === 'leaderboard'? styles.selected : ''} >
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http:https://www.w3.org/2000/svg">
  <g>
- <path d="M16.0001 20C21.1547 20 25.3334 15.8214 25.3334 10.6667C25.3334 5.51205 21.1547 1.33337 16.0001 1.33337C10.8454 1.33337 6.66675 5.51205 6.66675 10.6667C6.66675 15.8214 10.8454 20 16.0001 20Z" stroke={selectedPage === 'ranking'? '#5965E0': '#aaaaaa'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
- <path d="M10.9466 18.52L9.33325 30.6667L15.9999 26.6667L22.6666 30.6667L21.0533 18.5067" stroke={selectedPage === 'ranking'? '#5965E0': '#aaaaaa'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+ <path d="M16.0001 20C21.1547 20 25.3334 15.8214 25.3334 10.6667C25.3334 5.51205 21.1547 1.33337 16.0001 1.33337C10.8454 1.33337 6.66675 5.51205 6.66675 10.6667C6.66675 15.8214 10.8454 20 16.0001 20Z" stroke={currentPage === 'leaderboard'? '#5965E0': '#aaaaaa'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+ <path d="M10.9466 18.52L9.33325 30.6667L15.9999 26.6667L22.6666 30.6667L21.0533 18.5067" stroke={currentPage === 'leaderboard'? '#5965E0': '#aaaaaa'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
  </g>
  </svg>
  </div>

src/components/Profile/Profile.module.scss

@@ -28,4 +28,15 @@
  }
  }
  }
+
+ .githubButton {
+ margin-left: auto;
+ cursor: pointer;
+
+ p {
+ margin: 0;
+ font-size: 0.875rem;
+ text-align: center;
+ }
+ }
 }

src/components/Profile/index.tsx

@@ -1,23 +1,32 @@
 
+import { useRouter } from 'next/dist/client/router';
 import { useAuth } from '../../hooks/useAuth';
 import useChallenge from '../../hooks/useChallenge';
 import styles from './Profile.module.scss';
 
 
 export default function Profile(){
  const { level } = useChallenge();
- const { user } = useAuth();
+ const { user, name } = useAuth();
+ const router = useRouter();
 
  return(
  <div className={styles.profileContainer}>
- <img src={user? user.avatar: 'icons/avatar.svg'} alt={user? user.name: 'avatar'} />
+ <img src={user? user.avatar: 'icons/avatar.svg'} alt={user? user.name: name? name:'Player 404'} />
  <div>
- <strong>{user? user.name:'Player 1'}</strong>
+ <strong>{user? user.name: name? name:'Player 404'}</strong>
  <p>
  <img src="icons/Up.svg" alt="Up" /> 
  Level {level}
  </p>
  </div>
+
+ {!user && 
+ <div onClick={()=>router.push('/login')} className={styles.githubButton} title="Login ou Mudar nome do usuário"> 
+ <img src="icons/github-icon.svg" alt="github" />
+ <p>Login</p>
+ </div>
+ }
  </div>
  );
 }

src/context/AuthContext.tsx

@@ -13,13 +13,19 @@ type UserProps = {
 
 type AuthContextProps = {
  user: UserProps;
+ name: string | null;
+ currentPage: string;
+ setCurrentPage: (value:string)=>void;
+ setName:(value:string)=>void
  signInWithGithub: ()=>void;
 }
 
 const AuthContext = createContext({}as AuthContextProps);
 
 function AuthContextProvider({children}:ReactChildren){
- const [user, setUser] = useState<UserProps>()
+ const [ user, setUser ] = useState<UserProps>();
+ const [ name, setName ] = useState('');
+ const [ currentPage, setCurrentPage ] = useState(null); 
 
  async function signInWithGithub(){
  try {
@@ -60,6 +66,10 @@ function AuthContextProvider({children}:ReactChildren){
  return(
  <AuthContext.Provider value={{
  user,
+ name,
+ currentPage,
+ setCurrentPage,
+ setName,
  signInWithGithub
  }}>
  {children}

src/context/ChallengeContext.tsx

@@ -17,6 +17,13 @@ type ChallengeProps = {
  amount: number;
 }
 
+type LocalStorageProps = {
+ name: string;
+ level: number;
+ currentXP: number;
+ challengesCompleted: number;
+}
+
 type ChallengeContextProps = {
  level: number;
  currentXP: number;
@@ -33,7 +40,6 @@ type ChallengeContextProps = {
  resetChallenge: ()=>void;
  completeChallenge: ()=>void;
 }
-
 type FirestoreUserProps = Record<string,number>;
 
 const ChallengeContext = createContext({} as ChallengeContextProps);
@@ -44,7 +50,7 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
  const [challengesCompleted, setChallengesCompleted] = useState(0);
  const [currentChallenge, setCurrentChallenge] = useState<ChallengeProps>(null);
  const [ isLevelUpModalOpen, setIsLevelUpModalOpen ] = useState(false);
- const { user } = useAuth();
+ const { user, name, setName } = useAuth();
  const experienceToNextLevel = Math.pow((level + 1) * 4, 2);
 
  const [isFirstLoad, setIsFirstLoad] = useState(true);
@@ -53,6 +59,8 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
  Notification.requestPermission();
  }, [])
 
+
+ // Usuário autenticado, informações são retiradas do banco de dados
  useEffect(() => {
  if(isFirstLoad){
  return;
@@ -94,27 +102,35 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
  })();
  }, [user]);
 
+
+
+ // Usuário não atenticado, toda informação é guardada no localStorage
  useEffect(() => {
  if(user) return;
 
- const storage:FirestoreUserProps = JSON.parse(localStorage.getItem('userScore'));
+
+ const storage:LocalStorageProps = JSON.parse(localStorage.getItem('userScore'));
+ if(!storage) return;
+ setName(storage.name);
  setLevel(storage.level);
  setCurrentXP(storage.currentXP);
  setChallengesCompleted(storage.challengesCompleted);
-
  }, []);
 
  useEffect(() => {
  if(user) return;
 
  localStorage.setItem('userScore',JSON.stringify({
+ name,
  level,
  currentXP,
  challengesCompleted
  }));
 
  }, [level, currentXP, challengesCompleted])
 
+
+ // Funções contendo a regra do jogo
  function levelUp(){
  setLevel(prev=>(prev+1));
  setIsLevelUpModalOpen(true);

src/context/CountdownContext.tsx

@@ -20,7 +20,7 @@ const CountdownContext = createContext({} as CountdownContextProviderProps);
 function CountdownContextProvider({children}:Record<string,ReactNode>){
 
  const { startNewChallenge } = useChallenge();
- const [ time, setTime ] = useState(25 * 60);
+ const [ time, setTime ] = useState(0.25 * 60);
  const [ isActive, setIsActive ] = useState(false);
  const [ hasFinish, setHasFinish ] = useState(false);
  const [ initialTime, setInitialTime ] = useState(time);

src/pages/_app.tsx

@@ -9,7 +9,6 @@ function MyApp({ Component, pageProps }) {
  <AuthContextProvider>
  <ChallengeContextProvider>
  <CountdownContextProvider>
- <NavBar />
  <Component {...pageProps} />
  </CountdownContextProvider>
  </ChallengeContextProvider>

src/pages/index.tsx

@@ -4,27 +4,39 @@ import CompletedChallenges from '../components/CompletedChallenges';
 import Countdown from '../components/Countdown';
 import ChallengeBox from '../components/ChallengeBox';
 import Head from 'next/head';
+import { NavBar } from '../components/NavBar';
 import styles from '../styles/pages/Home.module.scss';
+import { useEffect } from 'react';
+import { useAuth } from '../hooks/useAuth';
 
 
 export default function Home() {
+ const { setCurrentPage } = useAuth();
+
+ useEffect(() => {
+ setCurrentPage('home');
+ }, []);
+
  return (
- <div className={styles.container}>
- <Head>
- <title>Home | MoveIt</title>
- </Head>
+ <>
+ <NavBar />
+ <div className={styles.container}>
+ <Head>
+ <title>Home | MoveIt</title>
+ </Head>
 
- <ExperienceBar />
- <section>
- <div>
- <Profile />
- <CompletedChallenges />
- <Countdown />
- </div>
- <div>
- <ChallengeBox />
- </div>
- </section>
- </div>
+ <ExperienceBar />
+ <section>
+ <div>
+ <Profile />
+ <CompletedChallenges />
+ <Countdown />
+ </div>
+ <div>
+ <ChallengeBox />
+ </div>
+ </section>
+ </div>
+ </>
  )
 }