Skip to content

Commit 9da08c3

Browse files
bkbCodesbkbCodes
authored
Merge branch 'webdevcody:main' into webdevcody#648-invalid-race-post-request
2 parents ae7f22f + 8b4c207 commit 9da08c3

8 files changed

Lines changed: 245 additions & 203 deletions

File tree

‎packages/app/src/app/dashboard/_components/achievementProgress.tsx‎

Lines changed: 59 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,76 @@
1-
"use client"
1+
"use client";
22

3-
import React, { useEffect, useRef, useState } from "react";
3+
import React from "react";
44
import { ScrollArea } from "@/components/ui/scroll-area";
55
import { Avatar, AvatarImage } from "@/components/ui/avatar";
66
import { BanIcon } from "lucide-react";
77
import { Achievement as PrsimaAchievement } from "@prisma/client";
88
import { Achievement } from "@/types/achievement";
9-
import "../timeline.css";
109

1110
interface Props {
12-
userAchievements: PrsimaAchievement[];
13-
allAchievements: Achievement[];
11+
userAchievements: PrsimaAchievement[];
12+
allAchievements: Achievement[];
1413
}
1514

1615
export default function AchievementProgress({
17-
userAchievements,
18-
allAchievements,
16+
userAchievements,
17+
allAchievements,
1918
}: Props) {
20-
const updatedAllAch = [
21-
...allAchievements,
22-
{
23-
type: "MORE_TO_COME",
24-
image: "/static/first.png",
25-
name: "More to come!",
26-
},
27-
{
28-
type: "MORE_TO_COME_2",
29-
image: "/static/first.png",
30-
name: "More to come!",
31-
},
32-
];
19+
const updatedAllAch = [
20+
...allAchievements,
21+
{
22+
type: "MORE_TO_COME",
23+
image: "/static/first.png",
24+
name: "More to come!",
25+
},
26+
{
27+
type: "MORE_TO_COME_2",
28+
image: "/static/first.png",
29+
name: "More to come!",
30+
},
31+
];
3332

34-
const timelineRef = useRef<HTMLDivElement>(null);
35-
const [animatedItems, setAnimatedItems] = useState<string[]>([]);
33+
return (
34+
<ScrollArea className="rounded-md h-[300px] border-2 border-primary p-4 mt-10">
35+
<h3 className="text-primary font-special">Achievement Progress</h3>
36+
<div className="relative my-[20px] flex flex-col justify-center items-center">
37+
{updatedAllAch.map((achievement) => {
38+
const isUnlocked = userAchievements.some(
39+
(userAchievement) =>
40+
userAchievement.achievementType === achievement.type
41+
);
3642

37-
useEffect(() => {
38-
const observer = new IntersectionObserver(
39-
(entries) => {
40-
const inViewItems = entries
41-
.filter((entry) => entry.isIntersecting)
42-
.map((entry) => entry.target.id);
43+
const itemId = `achievement-${achievement.type}`;
4344

44-
setAnimatedItems((prevItems) => [...prevItems, ...inViewItems]);
45-
},
46-
{
47-
root: null,
48-
rootMargin: "0px",
49-
threshold: 0.5, // Adjust this threshold as per your needs
50-
}
51-
);
52-
53-
const timelineItems = timelineRef.current?.querySelectorAll(".timeline-item");
54-
if (timelineItems) {
55-
timelineItems.forEach((item) => observer.observe(item));
56-
}
57-
58-
return () => {
59-
if (timelineItems) {
60-
timelineItems.forEach((item) => observer.unobserve(item));
61-
}
62-
};
63-
}, []);
64-
65-
66-
return (
67-
<ScrollArea className="rounded-md h-[300px] border-2 border-primary p-4">
68-
<h3 className="text-primary font-special">Achievement Progress</h3>
69-
<div className="timeline" ref={timelineRef}>
70-
{updatedAllAch.map((achievement) => {
71-
const isUnlocked = userAchievements.some(
72-
(userAchievement) => userAchievement.achievementType === achievement.type
73-
);
74-
75-
const itemId = `achievement-${achievement.type}`;
76-
77-
return (
78-
<div
79-
key={achievement.type}
80-
id={itemId}
81-
className={`timeline-item
82-
${isUnlocked ? "unlocked" : "locked"
83-
} shadow-lg shadow-accent opacity-100
84-
${animatedItems.includes(itemId) ? "animate-fade" : ""} hover:animate-bounce hover:cursor-pointer`}
85-
>
86-
<div className="timeline-content">
87-
{isUnlocked ? (
88-
<Avatar>
89-
<AvatarImage src={achievement.image} />
90-
</Avatar>
91-
) : (
92-
<BanIcon className="text-primary" />
93-
)}
94-
<p>{achievement.name}</p>
95-
</div>
96-
</div>
97-
);
98-
})}
45+
return (
46+
<div
47+
key={achievement.type}
48+
id={itemId}
49+
style={
50+
isUnlocked
51+
? {
52+
backgroundImage: "var(--achievement-progress-gradient)",
53+
}
54+
: {}
55+
}
56+
className={`relative h-[62px] p-[3px] mb-[20px] rounded-sm cursor-pointer w-1/2 lg:w-1/4 ${
57+
isUnlocked ? "animate-gradient bg-achievement" : "bg-red-500"
58+
} shadow-lg shadow-accent even:ml-[50%] odd:mr-[50%]`}
59+
>
60+
<div className="flex items-center justify-center text-center w-full h-full bg-accent rounded-md">
61+
{isUnlocked ? (
62+
<Avatar>
63+
<AvatarImage src={achievement.image} />
64+
</Avatar>
65+
) : (
66+
<BanIcon className="text-primary" />
67+
)}
68+
<p className="m-0 pl-[3px]">{achievement.name}</p>
69+
</div>
9970
</div>
100-
</ScrollArea>
101-
);
71+
);
72+
})}
73+
</div>
74+
</ScrollArea>
75+
);
10276
}

‎packages/app/src/app/dashboard/timeline.css‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎packages/app/src/app/race/_components/race/code.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { cn } from "@/lib/utils";
2+
import React from "react";
23

34
type CodeProps = {
45
code: string;
56
input: string;
7+
preRef?: React.MutableRefObject<HTMLPreElement | null>;
68
};
79

8-
export default function Code({
9-
code,
10-
input,
11-
}: CodeProps) {
10+
export default function Code({ code, input, preRef }: CodeProps) {
1211
const array: number[] = [];
1312
const currentCharacter = input.slice(-1);
1413
const expectedCharacter = code.charAt(input.length - 1);
@@ -20,8 +19,9 @@ export default function Code({
2019
return (
2120
<>
2221
<pre
23-
className="text-monochrome mb-4 overflow-auto font-medium px-2 w-full"
22+
className="text-monochrome mb-4 overflow-auto font-medium w-full"
2423
data-cy="code-snippet-preformatted"
24+
ref={preRef}
2525
>
2626
{code.split("").map((char, index) => (
2727
<span
@@ -31,8 +31,7 @@ export default function Code({
3131
code[index] !== " " && array.includes(index),
3232
"border-red-500 opacity-100":
3333
code[index] === " " && array.includes(index),
34-
"bg-yellow-200 opacity-80 text-black":
35-
input.length === index,
34+
"bg-yellow-200 opacity-80 text-black": input.length === index,
3635
"opacity-100": input.length !== index && input[index] === char,
3736
})}
3837
>

0 commit comments

Comments
 (0)