Merge pull request #57 from fac24/setAvatar

Set avatar

components/LearnerOnboardingLayout.js

@@ -11,10 +11,15 @@ export default function LearnerOnboardingLayout({
   nextStep,
   previousStep,
   completed,
+  avatarNameInLocalStorage,
 }) {
   return (
     <>
-      <LearnerOnboardingProgressBar stepNumber={stepNumber} totalSteps={5} />
+      <LearnerOnboardingProgressBar
+        stepNumber={stepNumber}
+        totalSteps={5}
+        avatarNameInLocalStorage={avatarNameInLocalStorage}
+      />
       <Tts>{ttsTitle}</Tts>
       <div>{children}</div>
       <Link

components/LearnerOnboardingProgressBar.js

@@ -5,44 +5,48 @@ import { GiFinishLine, GiCheckeredFlag } from "react-icons/gi";
 import { FaFlagCheckered } from "react-icons/fa";
 import { TiArrowRightThick } from "react-icons/ti";
 import Image from "next/image";
+import avatars from "../data/avatars.js";
 
 export default function LearnerOnboardingProgressBar({
   stepNumber,
   totalSteps,
+  avatarNameInLocalStorage,
 }) {
-  // Don't forget the avatar!
-
   const mySteps = [];
 
   // We want to make a list for the total number of steps in the progress indicator.
   // So make a loop that counts from 0 to the total number of steps.
-  for (let i = 1; i <= totalSteps; i++) {
+  for (let i = 0; i <= totalSteps; i++) {
     // If the loop counter is equal to the step that the user is on...
     if (i === stepNumber && i !== totalSteps) {
       // Then show their avatar in the
       mySteps.push(
         <>
-          <LearnerOnboardingProgressBarListItem>
-            {/* Avatar goes here */}
+          <LearnerOnboardingProgressBarListItem key={i.toString()}>
             <Image
-              src="/avatars/ladybird.svg"
+              src={avatars[avatarNameInLocalStorage] || "/avatars/mystery.svg"}
               alt="avatar"
               width="100"
               height="100"
             />
+            {/* {i.toString()} */}
           </LearnerOnboardingProgressBarListItem>
-          <LearnerOnboardingProgressBarListItem>
+          <LearnerOnboardingProgressBarListItem
+            key={(totalSteps + i + 1).toString()}
+          >
+            {/* {(totalSteps + i + 1).toString()} */}
             <TiArrowRightThick size="5rem" />
           </LearnerOnboardingProgressBarListItem>
         </>
       );
     } else if (i === stepNumber && i === totalSteps) {
       mySteps.push(
         <>
-          <LearnerOnboardingProgressBarListItemFinal>
+          <LearnerOnboardingProgressBarListItemFinal key={i.toString()}>
+            {/* {i.toString()} */}
             <GiFinishLine size="8rem" />
             <Image
-              src="/avatars/ladybird.svg"
+              src={avatars[avatarNameInLocalStorage] || "/avatars/mystery.svg"}
               alt="avatar"
               width="100"
               height="100"
@@ -52,7 +56,8 @@ export default function LearnerOnboardingProgressBar({
       );
     } else if (i === totalSteps) {
       mySteps.push(
-        <LearnerOnboardingProgressBarListItemFinal>
+        <LearnerOnboardingProgressBarListItemFinal key={i.toString()}>
+          {/* {i.toString()} */}
           <GiFinishLine size="8rem" />
           {/* <GiCheckeredFlag size="5rem" /> */}
           {/* <FaFlagCheckered size="5rem" /> */}
@@ -61,8 +66,13 @@ export default function LearnerOnboardingProgressBar({
     } else {
       mySteps.push(
         <>
-          <LearnerOnboardingProgressBarListItem />
-          <LearnerOnboardingProgressBarListItem>
+          <LearnerOnboardingProgressBarListItem key={i.toString()}>
+            {/* {i.toString()} */}
+          </LearnerOnboardingProgressBarListItem>
+          <LearnerOnboardingProgressBarListItem
+            key={(totalSteps + i + 1).toString()}
+          >
+            {/* {(totalSteps + i + 1).toString()} */}
             <TiArrowRightThick size="5rem" />
           </LearnerOnboardingProgressBarListItem>
         </>

components/Styled-Components/LearnerOnboardingProgressBarListItemFinal.js

@@ -7,7 +7,7 @@ const LearnerOnboardingProgressBarListItemFinal = styled.li`
   justify-content: center;
   position: relative;
   margin-right: 0.6rem;
-  width: 12rem;
+  width: 8rem;
 `;
 
 export default LearnerOnboardingProgressBarListItemFinal;

pages/_app.js

@@ -9,15 +9,21 @@ function MyApp({ Component, pageProps }) {
     null
   ) || [null, null];
   const [font, setFont] = useLocalStorageState("font", null) || [null, null];
-  const [size, setSize] = useLocalStorageState(
-    "font-size",
-    null
-  ) || [null, null];
+  const [size, setSize] = useLocalStorageState("font-size", null) || [
+    null,
+    null,
+  ];
   const [background, setBackground] = useLocalStorageState(
     "background",
     null
   ) || [null, null];
 
+  //the useState local storage inside and handle click function can be inside the initial function.
+  // key of avatar
+  // set a key value of particular avatar
+  const [avatarNameInLocalStorage, setAvatarNameInLocalStorage] =
+    useLocalStorageState("avatar", null) || [null, null];
+
   return (
     <Layout>
       <Component
@@ -30,6 +36,8 @@ function MyApp({ Component, pageProps }) {
         setSize={setSize}
         background={background}
         setBackground={setBackground}
+        avatarNameInLocalStorage={avatarNameInLocalStorage}
+        setAvatarNameInLocalStorage={setAvatarNameInLocalStorage}
       />
     </Layout>
   );

pages/learner-onboarding/avatar-selection.js

@@ -3,12 +3,23 @@ import styled from "styled-components";
 import Image from "next/image";
 import avatars from "../../data/avatars.js";
 
-export default function LearnerAvatarSelection() {
+export default function LearnerAvatarSelection({
+  avatarNameInLocalStorage,
+  setAvatarNameInLocalStorage,
+}) {
+  function handleClick(avatar_name) {
+    // calling the function for setAvatar to select the avatar name once learner handles that click.
+    setAvatarNameInLocalStorage(avatar_name);
+    // console.log(avatar_name);
+    // console.log("ladyBird");
+  }
+
   return (
     <LearnerOnboardingLayout
       ttsTitle="Pick your avatar"
       stepNumber={0}
       nextStep="name"
+      avatarNameInLocalStorage={avatarNameInLocalStorage}
       // we need to change the previous step!
     >
       <StyledUnorderedList>
@@ -18,7 +29,13 @@ export default function LearnerAvatarSelection() {
           - Render a new StyledListItem component with an Image component for each pair.
         */}
         {Object.entries(avatars).map(([avatar_name, avatar_file], index) => (
-          <StyledListItem key={index}>
+          <StyledListItem
+            className={
+              avatar_name === avatarNameInLocalStorage ? "selected" : ""
+            }
+            onClick={() => handleClick(avatar_name)}
+            key={index}
+          >
             <Image
               src={avatar_file}
               alt={avatar_name + " avatar"}
@@ -31,6 +48,33 @@ export default function LearnerAvatarSelection() {
   );
 }
 
+// avatar_name === avatarNameInLocalStorage ? "selected" : ""
+
+// Selecting an Avatar //
+
+// Step One = selecting an avatar by clicking
+// set the avatar so that learner may wish to pick an avatar they desire.
+
+// function setAvatar() {
+// first part of local storage would be the key picking up the avartar
+// the initial value.
+// custom hook
+// first is the first value set of the avatar.
+// second is the function that lets you update the value of the avatar updated
+// const [avatar, setAvatar] = useLocalStorageState("avatar", "image") || [
+//   null,
+//   null,
+// ];
+// using || null, null for nextJS to recognise
+// useState to be set as null
+// onclick so that learner clicks and picks up in the console
+// creating a function to handle click.
+// li as clickable on function for handling click.
+
+// }
+
+// StepTwo = now setting the avatar inside the progress bar.
+
 const StyledUnorderedList = styled.ul`
   list-style-type: none;
   display: flex;

pages/learner-onboarding/background-selection.js

@@ -4,8 +4,11 @@ import { colours } from "../../data/colours.js";
 import styled from "styled-components";
 import { useEffect } from "react";
 
-export default function LearnerBackgroudSelection({background, setBackground}) {
-
+export default function LearnerBackgroudSelection({
+  background,
+  setBackground,
+  avatarNameInLocalStorage,
+}) {
   const updateColour = (e) => {
     setBackground(e.target.value);
   };
@@ -20,6 +23,7 @@ export default function LearnerBackgroudSelection({background, setBackground}) {
       stepNumber={4}
       nextStep="onboarding-done"
       previousStep="font-size-selection"
+      avatarNameInLocalStorage={avatarNameInLocalStorage}
     >
       <Grid>
         {colours.map((colour) => (

pages/learner-onboarding/font-selection.js

@@ -3,13 +3,15 @@ import FontFlex from "../../components/Styled-Components/FontFlex";
 import styled from "styled-components";
 import { useState } from "react";
 
-export default function LearnerFontsSelection({ font, setFont }) {
-
+export default function LearnerFontsSelection({
+  font,
+  setFont,
+  avatarNameInLocalStorage,
+}) {
   function updateFont(e) {
     e.preventDefault();
     setFont(e.target.value);
     console.log(font);
-
   }
   let html = (
     <>
@@ -35,6 +37,7 @@ export default function LearnerFontsSelection({ font, setFont }) {
         nextStep="font-size-selection"
         previousStep="name"
         children={html}
+        avatarNameInLocalStorage={avatarNameInLocalStorage}
       />
     </>
   );

pages/learner-onboarding/font-size-selection.js

@@ -2,7 +2,11 @@ import LearnerOnboardingLayout from "../../components/LearnerOnboardingLayout";
 import styled from "styled-components";
 import FontFlex from "../../components/Styled-Components/FontFlex";
 
-export default function LearnerFontSizesSelection({ size, setSize }) {
+export default function LearnerFontSizesSelection({
+  size,
+  setSize,
+  avatarNameInLocalStorage,
+}) {
   function updateFontSize(e) {
     e.preventDefault();
     setSize(e.target.value);
@@ -33,6 +37,7 @@ export default function LearnerFontSizesSelection({ size, setSize }) {
         nextStep="background-selection"
         previousStep="font-selection"
         children={html}
+        avatarNameInLocalStorage={avatarNameInLocalStorage}
       />
     </>
   );

pages/learner-onboarding/name.js

@@ -1,8 +1,11 @@
 import styled from "styled-components";
 import LearnerOnboardingLayout from "../../components/LearnerOnboardingLayout";
 
-export default function LearnerChoiceName( {learnerName, setLearnerName}) {
-
+export default function LearnerChoiceName({
+  learnerName,
+  setLearnerName,
+  avatarNameInLocalStorage,
+}) {
   const saveName = (e) => {
     setLearnerName(e.target.value);
     console.log(e.target.value);
@@ -14,6 +17,7 @@ export default function LearnerChoiceName( {learnerName, setLearnerName}) {
       stepNumber={1}
       nextStep="font-selection"
       previousStep="avatar-selection"
+      avatarNameInLocalStorage={avatarNameInLocalStorage}
     >
       <StyledForm>
         <label htmlFor="learnerName"></label>

pages/learner-onboarding/onboarding-done.js

@@ -1,13 +1,14 @@
 import LearnerOnboardingLayout from "../../components/LearnerOnboardingLayout";
 
-export default function OnboardingDone() {
+export default function OnboardingDone({ avatarNameInLocalStorage }) {
   return (
     <LearnerOnboardingLayout
       ttsTitle="Well done! Now you're ready to play a game."
       stepNumber={5}
       previousStep="background-selection"
       nextStep="child-landing"
       completed="true"
+      avatarNameInLocalStorage={avatarNameInLocalStorage}
     />
   );
 }

public/avatars/mystery.svg:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.iconfinder.com/search/icons?family=lineal-color-10&price=free
+HostUrl=https://www.iconfinder.com/icons/7625308/download/svg/4096