Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add toast for game log #296

Merged
merged 1 commit into from
Mar 5, 2024
Merged

Add toast for game log #296

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions frontend/app/lib/hooks/game/useGameSocket.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Socket, io } from "socket.io-client";
import { UserMode } from "../useUserMode";
import { UserEntity } from "../../dtos";
import { POINT_TO_WIN } from "@/app/pong/[id]/const";
import { useToast } from "@/components/ui/use-toast";

type Status =
| "too-many-players"
Expand Down Expand Up @@ -59,6 +60,7 @@ export default function useGameSocket(
currentUser?: UserEntity,
) {
const socketRef = useRef<Socket | null>(null); // updated on `id` change
const { toast } = useToast();

const start = useCallback(() => {
if (!userMode) return;
Expand Down Expand Up @@ -151,6 +153,10 @@ export default function useGameSocket(
runSideEffectForStatusUpdate(status, payload);
const log = getLogFromStatus(status);
setLogs((logs) => [...logs, log]);
toast({
title: "Game Log",
description: log,
});
Comment on lines +156 to +159
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The use of toast to display notifications with a title and description based on game log updates is correctly implemented. This feature enhances user engagement by providing real-time feedback on game events.

Consider adding a duration property to the toast notification to control how long the message is displayed. This can help ensure that messages are not too fleeting or overly persistent, depending on their importance.

  toast({
    title: "Game Log",
    description: log,
+   duration: 5000, // Adjust the duration as needed
  });
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
toast({
title: "Game Log",
description: log,
});
toast({
title: "Game Log",
description: log,
duration: 5000, // Adjust the duration as needed
});

};
const handleConnect = () => {
console.log(`Connected: ${socketRef.current?.id}`);
Expand Down
Loading