Eliminado cookies e implementado contexto para o modo história

.env.local.example

@@ -0,0 +1,9 @@
+# Faça uma cópia desse arquivo alterando o nome para .env.local
+# e insira aqui as suas configurações do firebase
+REACT_APP_API_KEY=
+REACT_APP_AUTH_DOMAIN=
+REACT_APP_DATABASE_URL=
+REACT_APP_PROJECT_ID=
+REACT_APP_STORAGE_BUCKET=
+REACT_APP_MESSAGING_SENDER_ID=
+REACT_APP_APP_ID=

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "react-battle-rpg"
+  }
+}

README.md

@@ -62,6 +62,7 @@ Este projeto está licenciado sob a Licença MIT. Veja o arquivo de [LICENÇA](L
 - react-router-dom @types/react-router-dom
 - @material-ui/core @material-ui/icons @types/material-ui
 - js-cookie @types/js-cookie -D
+- firebase
 
 ---
 <p align="center">História e Jogo criado por 💜 Tiago Ribeiro</p>

firebase.json

@@ -0,0 +1,19 @@
+{
+  "database": {
+    "rules": "database.rules.json"
+  },
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

package.json

@@ -13,6 +13,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "firebase": "^8.7.0",
     "js-cookie": "^2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/components/Fighter.tsx

@@ -5,7 +5,6 @@ import {
     CardMedia,
     Typography,
     CardActions,
-    Tooltip,
     Fab
 } from '@material-ui/core';
 
@@ -68,32 +67,25 @@ const Fighter: React.FC<FighterProps> = (props) => {
                     >
                         {props.turn ? 'Ataque!' : 'Defenda!'}
                     </Fab>
-                    <Tooltip
-                        title="CURAR!"
-                        placement="top"
+                    <Fab
+                        size="small"
+                        color="primary"
+                        variant="extended"
+                        onClick={() => props.useItem('remedy')}
                         style={{
                             marginRight: "15px"
                         }}
                     >
-                        <Fab
-                            size="small"
-                            color="primary"
-                            variant="extended"
-                            onClick={() => props.useItem('remedy')}
-                        >
-                            {props.yourItens!.remedy} <FavoriteBorderIcon fontSize="small"/>
-                        </Fab>
-                    </Tooltip>
-                    <Tooltip title="AUMENTAR ATAQUE!" placement="top">
-                        <Fab
-                            size="small"
-                            color="primary"
-                            variant="extended"
-                            onClick={() => props.useItem('maximumPower')}
-                        >
-                            {props.yourItens!.maximumPower} <OfflineBoltOutlinedIcon fontSize="small"/>
-                        </Fab>
-                    </Tooltip>
+                        {props.yourItens!.remedy} <FavoriteBorderIcon fontSize="small"/>
+                    </Fab>
+                    <Fab
+                        size="small"
+                        color="primary"
+                        variant="extended"
+                        onClick={() => props.useItem('maximumPower')}
+                    >
+                        {props.yourItens!.maximumPower} <OfflineBoltOutlinedIcon fontSize="small"/>
+                    </Fab>
                 </CardActions>
             ) : (<></>)}
         </>

src/contexts/AuthContext.tsx

@@ -0,0 +1,71 @@
+import { createContext, ReactNode, useEffect, useState } from "react";
+import { auth, firebase } from "../services/firebase";
+
+type User = {
+    id: string;
+    name: string;
+    avatar: string;
+}
+
+type AuthContextType = {
+    user: User | undefined;
+    signInWithGoogle: () => Promise<void>;
+}
+
+type AuthContextProviderProps = {
+    children: ReactNode;
+}
+
+export const AuthContext = createContext({} as AuthContextType);
+
+export function AuthContextProvider(props: AuthContextProviderProps) {
+    const [user, setUser ] = useState<User>();
+
+    useEffect(() => {
+        const unsubscribe = auth.onAuthStateChanged(user => {
+            if (user) {
+                const { displayName, photoURL, uid } = user;
+
+                if (!displayName || !photoURL) {
+                    throw new Error('Missing information from Google Account.');
+                }
+
+                setUser({
+                    id: uid,
+                    name: displayName,
+                    avatar: photoURL
+                })
+            }
+        })
+
+        return () => {
+            unsubscribe();
+        }
+    }, []);
+
+    async function signInWithGoogle() {
+        const provider = new firebase.auth.GoogleAuthProvider();
+
+        const result = await auth.signInWithPopup(provider);
+
+        if (result.user) {
+            const { displayName, photoURL, uid } = result.user;
+
+            if (!displayName || !photoURL) {
+                throw new Error('Missing information from Google Account.');
+            }
+
+            setUser({
+                id: uid,
+                name: displayName,
+                avatar: photoURL
+            })
+        }
+    }
+
+    return (
+        <AuthContext.Provider value={{ user, signInWithGoogle }}>
+            {props.children}
+        </AuthContext.Provider>
+    );
+}

src/contexts/StoryContext.tsx

@@ -0,0 +1,50 @@
+import { useState, createContext, ReactNode } from "react";
+
+type StoryType = {
+    remedy: number;
+    maximumPower: number;
+    yourMonsterNumber: number;
+    opponentMonsterNumber: number;
+    storyNumber: number;
+    inGame: boolean;
+}
+
+type UpdateStoryContextType = {
+    storyValue: StoryType
+    updateStoryValue: any //@todo corrigir;
+}
+
+type StoryContextProviderProps = {
+    children: ReactNode;
+}
+
+export const StoryContext = createContext({} as UpdateStoryContextType);
+
+export function StoryContextProvider(props: StoryContextProviderProps) {
+    const [storyValue, setStoryValue] = useState<StoryType>({
+        remedy: 2,
+        maximumPower: 2,
+        yourMonsterNumber: 0,
+        opponentMonsterNumber: 0,
+        storyNumber: 0,
+        inGame: false
+    });
+
+    function updateStoryValue(value: StoryType) {
+        const updateValues = {
+            remedy: value.remedy,
+            maximumPower: value.maximumPower,
+            yourMonsterNumber: value.yourMonsterNumber,
+            opponentMonsterNumber: value.opponentMonsterNumber,
+            storyNumber: value.storyNumber,
+            inGame: value.inGame,
+        };
+        setStoryValue(updateValues);
+    }
+
+    return (
+        <StoryContext.Provider value={{ storyValue, updateStoryValue }}>
+            {props.children}
+        </StoryContext.Provider>
+    );
+}

src/hooks/useAuth.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { AuthContext } from "../contexts/AuthContext";
+
+export function useAuth() {
+    const value = useContext(AuthContext);
+
+    return value;
+}

src/hooks/useStory.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { StoryContext } from "../contexts/StoryContext";
+
+export function useStory() {
+    const value = useContext(StoryContext);
+
+    return value;
+}

src/pages/Landing.tsx

@@ -1,21 +1,32 @@
 import { Link } from 'react-router-dom';
 import { useHistory } from "react-router-dom";
-import Cookies from 'js-cookie';
+// import { useAuth } from '../hooks/useAuth';
+// import { database } from '../services/firebase';
+import { useStory } from '../hooks/useStory';
 
 import { Paper, Grid, Button } from '@material-ui/core';
 
 import GitHubIcon from '@material-ui/icons/GitHub';
 
 export default function Landing() {
+    // const { user, signInWithGoogle } = useAuth();
     const history = useHistory();
+    const { updateStoryValue } = useStory();
 
-    function gameMode(mode: String) {
+    async function gameMode(mode: String) {
         if (mode === 'new-game') { // Parâmetros para novo jogo do modo história
-            Cookies.set('opponentMonsterNumber', String(0));
-            Cookies.set('yourMonsterNumber', String(0));
-            Cookies.set('storyNumber', String(0));
-            Cookies.set('remedy', String(2));
-            Cookies.set('maximumPower', String(2));
+            // if (!user) {
+            //     await signInWithGoogle();
+            // }
+
+            updateStoryValue({
+                opponentMonsterNumber: 0,
+                yourMonsterNumber: 0,
+                storyNumber: 0,
+                remedy: 2,
+                maximumPower: 2,
+                inGame: true
+            })
 
             history.push('/story-mode');
             return;
@@ -47,7 +58,7 @@ export default function Landing() {
                 }}
             >
                 <Paper className="paper">
-                    <Grid container spacing={2} justify="center">
+                    {/* <Grid container spacing={2} justify="center">
                         <Button
                             size="large"
                             color="primary"
@@ -59,25 +70,35 @@ export default function Landing() {
                         >
                             Continuar História
                         </Button>
-                    </Grid>
+                    </Grid> */}
                     <Grid container spacing={2} justify="center">
                         <Button
                             size="large"
                             color="primary"
                             onClick={() => gameMode('new-game')}
                         >
                             Modo História
+                            {/* {!user ? '(Login)' : ''} */}
                         </Button>
                     </Grid>
                     {/* <Grid container spacing={2} justify="center">
-                        <a href="/battle-mode">
-                            <Button
-                                size="large"
-                                color="primary"
-                            >
-                                Batalhar On-Line
-                            </Button>
-                        </a>
+                        <Button
+                            size="large"
+                            color="primary"
+                            disabled={true}
+                        >
+                            Pontuação
+                        </Button>
+                    </Grid>
+                    <Grid container spacing={2} justify="center">
+                        <Button
+                            size="large"
+                            color="primary"
+                            disabled={true}
+                        >
+                            Batalhar On-Line
+                            {!user ? '(Login)' : ''}
+                        </Button>
                     </Grid> */}
                     <Grid container spacing={2} justify="center">
                         <Button
@@ -99,18 +120,15 @@ export default function Landing() {
                         </Link>
                     </Grid>
                     <Grid container spacing={2} justify="center">
-                        <a 
+                        <Button
+                            size="large"
+                            color="primary"
                             href="https://github.com/gonribeiro/React-Battle-Rpg"
                             target="_blank"
                             rel="noopener noreferrer"
                         >
-                            <Button
-                                size="large"
-                                color="primary"
-                            >
-                                <GitHubIcon /> &nbsp; Github
-                            </Button>
-                        </a>
+                            <GitHubIcon /> &nbsp; Github
+                        </Button>
                     </Grid>
                 </Paper>
             </Grid>