GetNomePlayer funcional e iniciando implementacao do getImagem

williamdlm · Oct 18, 2021 · 83ae422 · 83ae422
1 parent 95276bd
commit 83ae422
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 9 deletions.
diff --git a/pages/index.js b/pages/index.js
@@ -45,6 +45,7 @@ export default function Home(props) {
  pointsBarTypeTwo={props.pointsBarTypeTwo}
  pointsBarTypeTree={props.pointsBarTypeTree}
  isLogged={props.isLogged}
+ playerName={props.playerName}
  >
  <Background>
  <Head>
@@ -78,6 +79,7 @@ export const getServerSideProps = async (ctx) => {
  pointsBarTypeTwo,
  pointsBarTypeTree,
  isLogged,
+ playerName,
  } = ctx.req.cookies;
  return {
  props: {
@@ -89,6 +91,7 @@ export const getServerSideProps = async (ctx) => {
  pointsBarTypeTwo: Number(pointsBarTypeTwo),
  pointsBarTypeTree: Number(pointsBarTypeTree),
  isLogged: Number(isLogged),
+ playerName: String(playerName),
  },
  };
 };
diff --git a/pages/quiz.js b/pages/quiz.js
@@ -208,6 +208,7 @@ export default function QuizPage(props) {
  pointsBarTypeTwo={props.pointsBarTypeTwo}
  pointsBarTypeTree={props.pointsBarTypeTree}
  isLogged={props.isLogged}
+ playerName={props.playerName}
  >
  <Background>
  <QuizContainer>
@@ -240,6 +241,7 @@ export const getServerSideProps = async (ctx) => {
  pointsBarTypeTwo,
  pointsBarTypeTree,
  isLogged,
+ playerName,
  } = ctx.req.cookies;
  return {
  props: {
@@ -251,6 +253,7 @@ export const getServerSideProps = async (ctx) => {
  pointsBarTypeTwo: Number(pointsBarTypeTwo),
  pointsBarTypeTree: Number(pointsBarTypeTree),
  isLogged: Number(isLogged),
+ playerName: String(playerName),
  },
  };
 };
diff --git a/src/components/Facebook/index.js b/src/components/Facebook/index.js
@@ -3,7 +3,7 @@ import FacebookLogin from "react-facebook-login";
 import { ExperienceContext } from "../../contexts/ExperienceContext";
 
 export default function Facebook({ handleStatusLogged }) {
- const { handleIsLogged } = useContext(ExperienceContext);
+ const { handleIsLogged, changePlayerName } = useContext(ExperienceContext);
  const changeStatus = () => {
  handleStatusLogged(1);
  };
@@ -29,6 +29,7 @@ export default function Facebook({ handleStatusLogged }) {
  });
  handleIsLogged();
  changeStatus();
+ changePlayerName(response.name);
  };
 
  const componentClicked = () => console.log("clicked");

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -28,6 +28,7 @@ Header.Stats = styled.div`
 `;
 
 Header.StatsPicture = styled.div`
+ overflow: hidden;
  width: 5rem;
  height: 5rem;
  background-color: white;
@@ -111,9 +112,10 @@ function HeaderComplete() {
  experienceToNextLevel,
  titleUser,
  handleTitles,
- name,
+ playerName,
+ playerImage,
  } = useContext(ExperienceContext);
- const namePart = name.split(" ");
+ const namePart = playerName.split(" ");
  useEffect(() => {
  handleTitles();
  }, []);
@@ -129,10 +131,12 @@ function HeaderComplete() {
  initial="hidden"
  animate="show"
  >
- <Header.StatsPicture />
+ <Header.StatsPicture>
+ <img src={playerImage} style={{ maxWidth: "100%" }} />
+ </Header.StatsPicture>
  <Header.StatsInfo>
- <p className="fullNamePlayer">William Mota</p>
- <p className="firstNamePlayer">William</p>
+ <p className="fullNamePlayer">{playerName}</p>
+ <p className="firstNamePlayer">{namePart[0]}</p>
  <p className="levelPlayer">{`Level ${level}`}</p>
  <p className="experiencePlayer">{`xp ${currentExperience}`}</p>
  </Header.StatsInfo>

diff --git a/src/contexts/ExperienceContext.js b/src/contexts/ExperienceContext.js
@@ -27,11 +27,16 @@ export function ExperienceProvider({ children, ...rest }) {
  rest.pointsBarTypeTree ?? 0
  );
  const [isLogged, setIsLogged] = useState(rest.isLogged ?? 0);
- const name = "William Mota";
+ const [playerName, setPlayerName] = useState(rest.playerName ?? "No Name");
+ const [playerImage, setPlayerImage] = useState(
+ "https://st2.depositphotos.com/1009634/7235/v/950/depositphotos_72350117-stock-illustration-no-user-profile-picture-hand.jpg"
+ );
 
  console.log(rest.isLogged);
 
- function handleIsLogged() {}
+ function changePlayerName(name) {
+ setPlayerName(name);
+ }
 
  function handlePointsStats(type) {
  switch (type) {
@@ -65,6 +70,7 @@ export function ExperienceProvider({ children, ...rest }) {
  Cookies.set("pointsBarTypeTwo", pointsBarTypeTwo);
  Cookies.set("pointsBarTypeTree", pointsBarTypeTree);
  Cookies.set("isLogged", isLogged);
+ Cookies.set("playerName", playerName);
  }, [
  level,
  currentExperience,
@@ -74,6 +80,7 @@ export function ExperienceProvider({ children, ...rest }) {
  pointsBarTypeTwo,
  pointsBarTypeTree,
  isLogged,
+ playerName,
  ]);
 
  // console.log(typeof Cookies.get("pointsBarType"));
@@ -122,7 +129,7 @@ export function ExperienceProvider({ children, ...rest }) {
  completeQuestion,
  levelUp,
  experienceToNextLevel,
- name,
+ playerName,
  titleUser,
  handleTitles,
  handlePointsStats,
@@ -134,6 +141,8 @@ export function ExperienceProvider({ children, ...rest }) {
  pointsBarTypeTree,
  isLogged,
  handleIsLogged,
+ changePlayerName,
+ playerImage,
  }}
  >
  {children}