|
1 | | -import React, { useState, useEffect } from 'react' |
| 1 | +import { AchievementItem } from '@components/common'; |
2 | 2 | import ActiveH from '@media/Heart_active.png' |
3 | 3 | import InactiveH from '@media/Heart_disabled.png' |
| 4 | +import type { friendshipType } from 'types/displayDataTypes'; |
| 5 | +import './Friendship.css' |
4 | 6 |
|
5 | | -interface FriendshipData { |
6 | | - level: number; |
7 | | - name: string; |
8 | | - lvlup: number; |
9 | | - dateable: boolean; |
10 | | -} |
11 | | - |
12 | | -interface FriendshipProps { |
13 | | - friendship: FriendshipData[]; |
14 | | -} |
15 | | - |
16 | | -const Friendship: React.FC<FriendshipProps> = ({ friendship }) => { |
17 | | - const [five, setFive] = useState(0); |
18 | | - const [ten, setTen] = useState(0); |
19 | | - |
| 7 | +const Friendship = ({ friendship, achievements }: friendshipType) => { |
20 | 8 | const displayHearts = (numHearts: number) => { |
21 | 9 | let hearts = [] |
22 | 10 | for(let i = 0; i < 10; i++){ |
23 | | - hearts.push(<img key={i} src={(i < numHearts) ? ActiveH : InactiveH } alt={(i <= numHearts) ? "owned":"missing"} width="18"></img>) |
| 11 | + hearts.push( |
| 12 | + <img |
| 13 | + key={i} |
| 14 | + className="heart-ico" |
| 15 | + src={(i < numHearts) ? ActiveH : InactiveH } |
| 16 | + alt={(i <= numHearts) ? "owned":"missing"} |
| 17 | + />) |
24 | 18 | } |
25 | 19 | return hearts; |
26 | 20 | }; |
27 | 21 |
|
28 | | - const getFriendAchievements = () => { |
29 | | - let totalFive = 0 |
30 | | - let totalTen = 0 |
31 | | - friendship.forEach(el => { |
32 | | - if(el.level >= 5){ |
33 | | - totalFive += 1; |
34 | | - } |
35 | | - if(el.level >= 10){ |
36 | | - totalTen += 1; |
37 | | - } |
38 | | - }); |
39 | | - |
40 | | - setFive(totalFive); |
41 | | - setTen(totalTen); |
42 | | - }; |
43 | | - |
44 | | - useEffect(() => { |
45 | | - getFriendAchievements(); |
46 | | - }, [friendship]); |
47 | | - |
48 | 22 | return ( |
49 | 23 | <div className="progress-container-flex"> |
50 | | - |
51 | 24 | <h2>Friendship Achievements</h2> |
52 | | - <ul className="a-List"> |
53 | | - <li>A New Friend: {(five >= 1) ? <span className="completed">You have this achievement</span> : <span className="pending">You need to increase your friendship with {1 - five} Villagers</span> } </li> |
54 | | - <li>Cliques: {(five >= 4) ? <span className="completed">You have this achievement</span> : <span className="pending">You need to increase your friendship with {4 - five} Villagers </span>}</li> |
55 | | - <li>Networking : {(five >= 10) ? <span className="completed">You have this achievement</span> : <span className="pending">You need to increase your friendship with {10 - five} Villagers </span>}</li> |
56 | | - <li>Popular: {(five >= 20) ? <span className="completed">You have this achievement</span> : <span className="pending">You need to increase your friendship with {20 - five} Villagers </span>}</li> |
57 | | - <li>Best Friends: {(ten >= 1) ? <span className="completed">You have this achievement</span> : <span className="pending">You need to increase your friendship with {1 - ten} Villagers </span>} </li> |
58 | | - <li>The Beloved Farmer: {(ten >= 8) ? <span className="completed">You have this achievement</span> : <span className="pending"> You need to increase your friendship with {8 - ten} Villagers </span> }</li> |
59 | | - <li>Introductions quest: TBD </li> |
60 | | - </ul> |
61 | | - |
| 25 | + <div className="section-achievements"> |
| 26 | + {achievements && achievements.map((ach, i) => ( |
| 27 | + <AchievementItem |
| 28 | + key={i} |
| 29 | + done={ach.done} |
| 30 | + image={ach.image} |
| 31 | + achievementName={ach.name} |
| 32 | + achievementDesc={ach.description} |
| 33 | + achievementHoverDesc={ach.hoverDesc} |
| 34 | + />))} |
| 35 | + </div> |
| 36 | + <h2>Friendship Levels</h2> |
| 37 | + <div className="npc-grid"> |
62 | 38 | {friendship.map((d, i) => |
63 | 39 | <div className="npc-data" key={i}> |
64 | 40 | <h2>{d.name}</h2> |
65 | | - <img className="friendship" src={`https://stardew-tracker.s3.amazonaws.com/Friendship/${d.name}.png`} alt={d.name} title={(d.lvlup > 10) ? `You have ${d.level} hearts with this npc` : (d.dateable && d.level === 8) ? `You need to start a relationship with ${d.name} to increase your friendship level` :`you need ${d.lvlup} points to level up`} ></img> |
66 | | - {displayHearts(d.level)} |
| 41 | + <img className="friendship" src={`https://stardew-tracker.s3.amazonaws.com/Friendship/${d.name}.png`} alt={d.name} title={(d.lvlup > 10) ? `You have ${d.level} hearts with ${d.name}` : (d.dateable && d.level === 8) ? `You need to start a relationship with ${d.name} to increase your friendship level` :`you need ${d.lvlup} points to level up`} ></img> |
| 42 | + <div className="heart-display">{displayHearts(d.level)}</div> |
67 | 43 | </div> |
68 | 44 |
|
69 | 45 | )} |
| 46 | + </div> |
70 | 47 | </div> |
71 | 48 | ); |
72 | 49 | }; |
|
0 commit comments