Skip to content

Commit

Permalink
fix: toast position
Browse files Browse the repository at this point in the history
  • Loading branch information
@Raspincel
Raspincel committed Sep 6, 2024
1 parent 6020b5e commit a7b5b13
Showing 1 changed file with 73 additions and 45 deletions.
118 changes: 73 additions & 45 deletions src/components/UsersDashboard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function UsersDashboard() {
const engineRef = useRef<Matter.Engine | null>(null);
const ballsRef = useRef<Ball[]>([]);
const [windowWidth, setWindowWidth] = useState<number>(window.innerWidth);
const [ballsFiltered, setBallsFiltered] = useState<Ball[]>([])
const [ballsFiltered, setBallsFiltered] = useState<Ball[]>([]);
const started = useRef<boolean>(false);

useEffect(() => {
Expand All @@ -51,61 +51,76 @@ export default function UsersDashboard() {

useEffect(() => {
const interval = setInterval(() => {
filterBalls()
filterBalls();
}, 10 * 1000);

return () => {
clearInterval(interval);
};
}, []);

const filterBalls = () => {
const filtered = ballsRef.current
.sort((a, b) => {
if (a?.user?.isOnline && !b?.user?.isOnline) return -1;
if (!a.user?.isOnline && b.user?.isOnline) return 1;

const aIncompleteActivations = a.user.activations.filter(
(activation) => !activation.completed
).length;
const bIncompleteActivations = b.user.activations.filter(
(activation) => !activation.completed
).length;

if (aIncompleteActivations >= 2 && bIncompleteActivations < 2) return 1;
if (aIncompleteActivations < 2 && bIncompleteActivations >= 2) return -1;
return 0;
})
.filter((ball, index) => index < 80 && ball.user);

.sort((a, b) => {
if (a?.user?.isOnline && !b?.user?.isOnline) return -1;
if (!a.user?.isOnline && b.user?.isOnline) return 1;

const aIncompleteActivations = a.user.activations.filter(
(activation) => !activation.completed
).length;
const bIncompleteActivations = b.user.activations.filter(
(activation) => !activation.completed
).length;

if (aIncompleteActivations >= 2 && bIncompleteActivations < 2) return 1;
if (aIncompleteActivations < 2 && bIncompleteActivations >= 2)
return -1;
return 0;
})
.filter((ball, index) => index < 80 && ball.user);

ballsRef.current.forEach((ball) => {
const body = Matter.Composite.get(engineRef.current!.world, ball.id, 'body') as Matter.Body;
if (!filtered.some((filteredBall) => filteredBall.id === ball.id) && body) {
const body = Matter.Composite.get(
engineRef.current!.world,
ball.id,
"body"
) as Matter.Body;
if (
!filtered.some((filteredBall) => filteredBall.id === ball.id) &&
body
) {
Matter.Composite.remove(engineRef.current!.world, body);
}
});


filtered.forEach((ball) => {
const body = Matter.Composite.get(engineRef.current!.world, ball.id, 'body') as Matter.Body;
const body = Matter.Composite.get(
engineRef.current!.world,
ball.id,
"body"
) as Matter.Body;
if (!body) {
const newBody = Matter.Bodies.circle(ball.position.x, ball.position.y, ball.size / 2, {
restitution: 0.8,
friction: 0,
frictionAir: 0,
mass: 1,
});
Matter.Body.set(newBody, 'id', ball.id);
const newBody = Matter.Bodies.circle(
ball.position.x,
ball.position.y,
ball.size / 2,
{
restitution: 0.8,
friction: 0,
frictionAir: 0,
mass: 1,
}
);
Matter.Body.set(newBody, "id", ball.id);
Matter.Composite.add(engineRef.current!.world, newBody);
}
});

ballsRef.current = filtered;
setBallsFiltered(filtered);

console.log('Filtering...')
}
console.log("Filtering...");
};

const createBall = (user: IUser) => {
const containerWidth = containerRef.current!.clientWidth;
Expand Down Expand Up @@ -246,7 +261,7 @@ export default function UsersDashboard() {
setBalls(newBalls);
Matter.Runner.run(engine);
animate();
filterBalls()
filterBalls();
};

// Set up animation loop
Expand Down Expand Up @@ -381,7 +396,7 @@ export default function UsersDashboard() {
style: {
transform: "scale(3)",
top: "50px",
right: "250px",
right: "350px",
},
}
);
Expand All @@ -404,7 +419,9 @@ export default function UsersDashboard() {
// Update balls state and ballsRef in a single operation
const updatedBalls = ballsRef.current.map((ball) => {
if (ball?.user?.id === userFromMessage?.id) {
const updatedUser = updatedUsers.find(u => u.id === userFromMessage.id)!;
const updatedUser = updatedUsers.find(
(u) => u.id === userFromMessage.id
)!;
return { ...ball, user: updatedUser };
}
return ball;
Expand All @@ -425,7 +442,7 @@ export default function UsersDashboard() {

const updatedBalls = ballsRef.current.map((ball) => {
if (ball?.user?.id === userId) {
const updatedUser = updatedUsers.find(u => u.id === userId)!;
const updatedUser = updatedUsers.find((u) => u.id === userId)!;
return { ...ball, user: updatedUser };
}
return ball;
Expand Down Expand Up @@ -466,12 +483,22 @@ export default function UsersDashboard() {
});
}

const user = message?.data;

setUsers(prevUsers => prevUsers.map(u => u.id === user?.id ? user : u));
setBalls(prevBalls => prevBalls.map(ball => ball?.user?.id === user?.id ? { ...ball, user } : ball));
ballsRef.current = ballsRef.current.map(ball => ball?.user?.id === user?.id ? { ...ball, user } : ball);
}, [users, balls, ballsRef])
const user = message?.data;

setUsers((prevUsers) =>
prevUsers.map((u) => (u.id === user?.id ? user : u))
);
setBalls((prevBalls) =>
prevBalls.map((ball) =>
ball?.user?.id === user?.id ? { ...ball, user } : ball
)
);
ballsRef.current = ballsRef.current.map((ball) =>
ball?.user?.id === user?.id ? { ...ball, user } : ball
);
},
[users, balls, ballsRef]
);

function createUser(user: IUser) {
const ball = createBall(user);
Expand Down Expand Up @@ -564,7 +591,9 @@ export default function UsersDashboard() {
className="walls relative overflow-hidden w-full h-full"
>
{balls
.filter(ball => ballsFiltered.some(ballVisible => ballVisible.id === ball.id))
.filter((ball) =>
ballsFiltered.some((ballVisible) => ballVisible.id === ball.id)
)
.map((ball) => (
<div
key={ball.id}
Expand All @@ -579,7 +608,6 @@ export default function UsersDashboard() {
<TVUser user={ball.user} />
</div>
))}

</div>
);
}

0 comments on commit a7b5b13

Please sign in to comment.