Skip to content

Commit

Permalink
feat:added animation for the turn winner
Browse files Browse the repository at this point in the history
  • Loading branch information
Paribesh01 committed Nov 20, 2024
1 parent 610eede commit 13835bb
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 49 deletions.
25 changes: 25 additions & 0 deletions client/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"class-variance-authority": "^0.7.0",
"client": "file:",
"clsx": "^2.1.1",
"framer-motion": "^11.11.17",
"lucide-react": "^0.456.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
Expand Down
49 changes: 7 additions & 42 deletions client/src/components/PlayGround.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { PlayerList } from "./PlayerList";
import { Whiteboard } from "./Whiteboard";
import { useEffect, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";

export default function Playground() {
const socket = useSocket();
Expand Down Expand Up @@ -230,56 +229,18 @@ export default function Playground() {
);
};

const WinnerOverlay = ({
winner,
word,
isOpen,
onClose,
}: {
winner: string | null;
word: string;
isOpen: boolean;
onClose: () => void;
}) => {
// Automatically close after 4 seconds when the overlay is opened
useEffect(() => {
if (isOpen) {
const timer = setTimeout(() => {
onClose();
}, 4000); // 4 seconds

return () => clearTimeout(timer); // Clear timeout if component unmounts or isOpen changes
}
}, [isOpen, onClose]);
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent>
<DialogHeader>
<DialogTitle>
🎉 Winner of this Round is
{Turnwinner} 🎉
</DialogTitle>
</DialogHeader>
<p>
Congratulations, <strong>{winner}</strong>!
</p>
<p>
The word was: <strong>{word}</strong>
</p>
</DialogContent>
</Dialog>
);
};

if (!socket) return <div>Connecting...</div>;

return (
<div className="min-h-screen bg-gradient-to-b from-yellow-300 to-orange-400 p-4 overflow-auto">
<WinnerOverlay
{/* <WinnerOverlay
winner={Turnwinner}
word={TurnWord}
isOpen={isOverlayOpen}
onClose={() => setIsOverlayOpen(false)}
/>
/> */}
<div className="container mx-auto grid grid-cols-1 md:grid-cols-12 gap-4 h-[calc(100vh-2rem)]">
{/* Chat Section */}
<div className="col-span-12 md:col-span-3">
Expand All @@ -294,6 +255,10 @@ export default function Playground() {
{/* Whiteboard Section */}
<div className="col-span-12 md:col-span-6">
<Whiteboard
setIsOverlayOpen={setIsOverlayOpen}
winner={Turnwinner}
Turnword={TurnWord}
isOpen={isOverlayOpen}
clear={clear}
word={word}
canvasRef={canvasRef}
Expand Down
74 changes: 67 additions & 7 deletions client/src/components/Whiteboard.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,30 @@
import { Pencil, Eraser, Trash2 } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { useEffect } from "react";
import { Pencil, Eraser, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { AnimatePresence, motion } from "framer-motion";

export const Whiteboard = ({
setIsOverlayOpen,
winner,
Turnword,
isOpen,
clear,
word,
canvasRef,
startDrawing,
draw,
stopDrawing,
}: any) => {
useEffect(() => {
if (isOpen) {
const timeout = setTimeout(() => {
setIsOverlayOpen(false);
}, 4000);

return () => clearTimeout(timeout);
}
}, [isOpen, setIsOverlayOpen]);

export const Whiteboard = ({ clear, word, canvasRef, startDrawing, draw, stopDrawing }: any) => {
return (
<div className="bg-white rounded-lg shadow-lg p-4 flex flex-col h-full max-w-full">
<div className="flex flex-col md:flex-row justify-between mb-4 space-y-2 md:space-y-0">
Expand All @@ -21,7 +44,7 @@ export const Whiteboard = ({ clear, word, canvasRef, startDrawing, draw, stopDra
</Button>
</div>
</div>
<div className="flex-grow bg-gray-100 rounded-lg overflow-hidden">
<div className="relative flex-grow bg-gray-100 rounded-lg overflow-hidden">
<canvas
ref={canvasRef}
width={700}
Expand All @@ -32,8 +55,45 @@ export const Whiteboard = ({ clear, word, canvasRef, startDrawing, draw, stopDra
onMouseUp={stopDrawing}
onMouseLeave={stopDrawing}
/>

<AnimatePresence>
{isOpen && (
<motion.div
className="absolute inset-0 bg-black bg-opacity-75 flex items-center justify-center text-white text-lg font-bold"
initial={{ y: -100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: 300, opacity: 0 }}
transition={{ duration: 1, ease: "easeInOut" }}
>
<div className="text-center">
<motion.div
initial={{ scale: 0.8 }}
animate={{ scale: 1 }}
transition={{ duration: 0.5 }}
className="text-4xl md:text-5xl font-extrabold text-yellow-400 shadow-lg"
>
🎉 Winner of this Round is {winner}! 🎉
</motion.div>
<motion.div
initial={{ scale: 0.8 }}
animate={{ scale: 1 }}
transition={{ duration: 0.5 }}
className="text-3xl md:text-4xl font-bold text-pink-500 mt-2"
>
The word was: <span className="italic text-teal-300">{Turnword}</span>
</motion.div>
<motion.div
className="mt-4 text-lg text-white font-bold animate-bounce"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1 }}
>
🎨 Keep drawing! 🎨
</motion.div>
</div>
</motion.div>
)}
</AnimatePresence>
</div>
</div>
)
}
);
};

0 comments on commit 13835bb

Please sign in to comment.