Skip to content

Commit 47899f1

Browse files
vasystusvasystus
authored
Merge pull request #57 from fac24/setAvatar
Set avatar
2 parents 635e68e + 85ef5ce commit 47899f1

File tree

12 files changed

+118
-29
lines changed

12 files changed

+118
-29
lines changed

‎components/LearnerOnboardingLayout.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,15 @@ export default function LearnerOnboardingLayout({
1111
nextStep,
1212
previousStep,
1313
completed,
14+
avatarNameInLocalStorage,
1415
}) {
1516
return (
1617
<>
17-
<LearnerOnboardingProgressBar stepNumber={stepNumber} totalSteps={5} />
18+
<LearnerOnboardingProgressBar
19+
stepNumber={stepNumber}
20+
totalSteps={5}
21+
avatarNameInLocalStorage={avatarNameInLocalStorage}
22+
/>
1823
<Tts>{ttsTitle}</Tts>
1924
<div>{children}</div>
2025
<Link

‎components/LearnerOnboardingProgressBar.js‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,44 +5,48 @@ import { GiFinishLine, GiCheckeredFlag } from "react-icons/gi";
55
import { FaFlagCheckered } from "react-icons/fa";
66
import { TiArrowRightThick } from "react-icons/ti";
77
import Image from "next/image";
8+
import avatars from "../data/avatars.js";
89

910
export default function LearnerOnboardingProgressBar({
1011
stepNumber,
1112
totalSteps,
13+
avatarNameInLocalStorage,
1214
}) {
13-
// Don't forget the avatar!
14-
1515
const mySteps = [];
1616

1717
// We want to make a list for the total number of steps in the progress indicator.
1818
// So make a loop that counts from 0 to the total number of steps.
19-
for (let i = 1; i <= totalSteps; i++) {
19+
for (let i = 0; i <= totalSteps; i++) {
2020
// If the loop counter is equal to the step that the user is on...
2121
if (i === stepNumber && i !== totalSteps) {
2222
// Then show their avatar in the
2323
mySteps.push(
2424
<>
25-
<LearnerOnboardingProgressBarListItem>
26-
{/* Avatar goes here */}
25+
<LearnerOnboardingProgressBarListItem key={i.toString()}>
2726
<Image
28-
src="/avatars/ladybird.svg"
27+
src={avatars[avatarNameInLocalStorage] || "/avatars/mystery.svg"}
2928
alt="avatar"
3029
width="100"
3130
height="100"
3231
/>
32+
{/* {i.toString()} */}
3333
</LearnerOnboardingProgressBarListItem>
34-
<LearnerOnboardingProgressBarListItem>
34+
<LearnerOnboardingProgressBarListItem
35+
key={(totalSteps + i + 1).toString()}
36+
>
37+
{/* {(totalSteps + i + 1).toString()} */}
3538
<TiArrowRightThick size="5rem" />
3639
</LearnerOnboardingProgressBarListItem>
3740
</>
3841
);
3942
} else if (i === stepNumber && i === totalSteps) {
4043
mySteps.push(
4144
<>
42-
<LearnerOnboardingProgressBarListItemFinal>
45+
<LearnerOnboardingProgressBarListItemFinal key={i.toString()}>
46+
{/* {i.toString()} */}
4347
<GiFinishLine size="8rem" />
4448
<Image
45-
src="/avatars/ladybird.svg"
49+
src={avatars[avatarNameInLocalStorage] || "/avatars/mystery.svg"}
4650
alt="avatar"
4751
width="100"
4852
height="100"
@@ -52,7 +56,8 @@ export default function LearnerOnboardingProgressBar({
5256
);
5357
} else if (i === totalSteps) {
5458
mySteps.push(
55-
<LearnerOnboardingProgressBarListItemFinal>
59+
<LearnerOnboardingProgressBarListItemFinal key={i.toString()}>
60+
{/* {i.toString()} */}
5661
<GiFinishLine size="8rem" />
5762
{/* <GiCheckeredFlag size="5rem" /> */}
5863
{/* <FaFlagCheckered size="5rem" /> */}
@@ -61,8 +66,13 @@ export default function LearnerOnboardingProgressBar({
6166
} else {
6267
mySteps.push(
6368
<>
64-
<LearnerOnboardingProgressBarListItem />
65-
<LearnerOnboardingProgressBarListItem>
69+
<LearnerOnboardingProgressBarListItem key={i.toString()}>
70+
{/* {i.toString()} */}
71+
</LearnerOnboardingProgressBarListItem>
72+
<LearnerOnboardingProgressBarListItem
73+
key={(totalSteps + i + 1).toString()}
74+
>
75+
{/* {(totalSteps + i + 1).toString()} */}
6676
<TiArrowRightThick size="5rem" />
6777
</LearnerOnboardingProgressBarListItem>
6878
</>

‎components/Styled-Components/LearnerOnboardingProgressBarListItemFinal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const LearnerOnboardingProgressBarListItemFinal = styled.li`
77
justify-content: center;
88
position: relative;
99
margin-right: 0.6rem;
10-
width: 12rem;
10+
width: 8rem;
1111
`;
1212

1313
export default LearnerOnboardingProgressBarListItemFinal;

‎pages/_app.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,21 @@ function MyApp({ Component, pageProps }) {
99
null
1010
) || [null, null];
1111
const [font, setFont] = useLocalStorageState("font", null) || [null, null];
12-
const [size, setSize] = useLocalStorageState(
13-
"font-size",
14-
null
15-
) || [null, null];
12+
const [size, setSize] = useLocalStorageState("font-size", null) || [
13+
null,
14+
null,
15+
];
1616
const [background, setBackground] = useLocalStorageState(
1717
"background",
1818
null
1919
) || [null, null];
2020

21+
//the useState local storage inside and handle click function can be inside the initial function.
22+
// key of avatar
23+
// set a key value of particular avatar
24+
const [avatarNameInLocalStorage, setAvatarNameInLocalStorage] =
25+
useLocalStorageState("avatar", null) || [null, null];
26+
2127
return (
2228
<Layout>
2329
<Component
@@ -30,6 +36,8 @@ function MyApp({ Component, pageProps }) {
3036
setSize={setSize}
3137
background={background}
3238
setBackground={setBackground}
39+
avatarNameInLocalStorage={avatarNameInLocalStorage}
40+
setAvatarNameInLocalStorage={setAvatarNameInLocalStorage}
3341
/>
3442
</Layout>
3543
);

‎pages/learner-onboarding/avatar-selection.js‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,23 @@ import styled from "styled-components";
33
import Image from "next/image";
44
import avatars from "../../data/avatars.js";
55

6-
export default function LearnerAvatarSelection() {
6+
export default function LearnerAvatarSelection({
7+
avatarNameInLocalStorage,
8+
setAvatarNameInLocalStorage,
9+
}) {
10+
function handleClick(avatar_name) {
11+
// calling the function for setAvatar to select the avatar name once learner handles that click.
12+
setAvatarNameInLocalStorage(avatar_name);
13+
// console.log(avatar_name);
14+
// console.log("ladyBird");
15+
}
16+
717
return (
818
<LearnerOnboardingLayout
919
ttsTitle="Pick your avatar"
1020
stepNumber={0}
1121
nextStep="name"
22+
avatarNameInLocalStorage={avatarNameInLocalStorage}
1223
// we need to change the previous step!
1324
>
1425
<StyledUnorderedList>
@@ -18,7 +29,13 @@ export default function LearnerAvatarSelection() {
1829
- Render a new StyledListItem component with an Image component for each pair.
1930
*/}
2031
{Object.entries(avatars).map(([avatar_name, avatar_file], index) => (
21-
<StyledListItem key={index}>
32+
<StyledListItem
33+
className={
34+
avatar_name === avatarNameInLocalStorage ? "selected" : ""
35+
}
36+
onClick={() => handleClick(avatar_name)}
37+
key={index}
38+
>
2239
<Image
2340
src={avatar_file}
2441
alt={avatar_name + " avatar"}
@@ -31,6 +48,33 @@ export default function LearnerAvatarSelection() {
3148
);
3249
}
3350

51+
// avatar_name === avatarNameInLocalStorage ? "selected" : ""
52+
53+
// Selecting an Avatar //
54+
55+
// Step One = selecting an avatar by clicking
56+
// set the avatar so that learner may wish to pick an avatar they desire.
57+
58+
// function setAvatar() {
59+
// first part of local storage would be the key picking up the avartar
60+
// the initial value.
61+
// custom hook
62+
// first is the first value set of the avatar.
63+
// second is the function that lets you update the value of the avatar updated
64+
// const [avatar, setAvatar] = useLocalStorageState("avatar", "image") || [
65+
// null,
66+
// null,
67+
// ];
68+
// using || null, null for nextJS to recognise
69+
// useState to be set as null
70+
// onclick so that learner clicks and picks up in the console
71+
// creating a function to handle click.
72+
// li as clickable on function for handling click.
73+
74+
// }
75+
76+
// StepTwo = now setting the avatar inside the progress bar.
77+
3478
const StyledUnorderedList = styled.ul`
3579
list-style-type: none;
3680
display: flex;

‎pages/learner-onboarding/background-selection.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ import { colours } from "../../data/colours.js";
44
import styled from "styled-components";
55
import { useEffect } from "react";
66

7-
export default function LearnerBackgroudSelection({background, setBackground}) {
8-
7+
export default function LearnerBackgroudSelection({
8+
background,
9+
setBackground,
10+
avatarNameInLocalStorage,
11+
}) {
912
const updateColour = (e) => {
1013
setBackground(e.target.value);
1114
};
@@ -20,6 +23,7 @@ export default function LearnerBackgroudSelection({background, setBackground}) {
2023
stepNumber={4}
2124
nextStep="onboarding-done"
2225
previousStep="font-size-selection"
26+
avatarNameInLocalStorage={avatarNameInLocalStorage}
2327
>
2428
<Grid>
2529
{colours.map((colour) => (

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import FontFlex from "../../components/Styled-Components/FontFlex";
33
import styled from "styled-components";
44
import { useState } from "react";
55

6-
export default function LearnerFontsSelection({ font, setFont }) {
7-
6+
export default function LearnerFontsSelection({
7+
font,
8+
setFont,
9+
avatarNameInLocalStorage,
10+
}) {
811
function updateFont(e) {
912
e.preventDefault();
1013
setFont(e.target.value);
1114
console.log(font);
12-
1315
}
1416
let html = (
1517
<>
@@ -35,6 +37,7 @@ export default function LearnerFontsSelection({ font, setFont }) {
3537
nextStep="font-size-selection"
3638
previousStep="name"
3739
children={html}
40+
avatarNameInLocalStorage={avatarNameInLocalStorage}
3841
/>
3942
</>
4043
);

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import LearnerOnboardingLayout from "../../components/LearnerOnboardingLayout";
22
import styled from "styled-components";
33
import FontFlex from "../../components/Styled-Components/FontFlex";
44

5-
export default function LearnerFontSizesSelection({ size, setSize }) {
5+
export default function LearnerFontSizesSelection({
6+
size,
7+
setSize,
8+
avatarNameInLocalStorage,
9+
}) {
610
function updateFontSize(e) {
711
e.preventDefault();
812
setSize(e.target.value);
@@ -33,6 +37,7 @@ export default function LearnerFontSizesSelection({ size, setSize }) {
3337
nextStep="background-selection"
3438
previousStep="font-selection"
3539
children={html}
40+
avatarNameInLocalStorage={avatarNameInLocalStorage}
3641
/>
3742
</>
3843
);

‎pages/learner-onboarding/name.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import styled from "styled-components";
22
import LearnerOnboardingLayout from "../../components/LearnerOnboardingLayout";
33

4-
export default function LearnerChoiceName( {learnerName, setLearnerName}) {
5-
4+
export default function LearnerChoiceName({
5+
learnerName,
6+
setLearnerName,
7+
avatarNameInLocalStorage,
8+
}) {
69
const saveName = (e) => {
710
setLearnerName(e.target.value);
811
console.log(e.target.value);
@@ -14,6 +17,7 @@ export default function LearnerChoiceName( {learnerName, setLearnerName}) {
1417
stepNumber={1}
1518
nextStep="font-selection"
1619
previousStep="avatar-selection"
20+
avatarNameInLocalStorage={avatarNameInLocalStorage}
1721
>
1822
<StyledForm>
1923
<label htmlFor="learnerName"></label>

‎pages/learner-onboarding/onboarding-done.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import LearnerOnboardingLayout from "../../components/LearnerOnboardingLayout";
22

3-
export default function OnboardingDone() {
3+
export default function OnboardingDone({ avatarNameInLocalStorage }) {
44
return (
55
<LearnerOnboardingLayout
66
ttsTitle="Well done! Now you're ready to play a game."
77
stepNumber={5}
88
previousStep="background-selection"
99
nextStep="child-landing"
1010
completed="true"
11+
avatarNameInLocalStorage={avatarNameInLocalStorage}
1112
/>
1213
);
1314
}

0 commit comments

Comments
 (0)