import React, { useState, useEffect, useRef } from "react"; import { useFireproof } from "use-fireproof"; import { callAI } from "call-ai"; export default function WhoWouldGame() { const { database, useLiveQuery, useDocument } = useFireproof("who-would-together"); const [loading, setLoading] = useState(false); const [friends, setFriends] = useState([]); const [selectedFriend, setSelectedFriend] = useState(""); const [newFriend, setNewFriend] = useState(""); const [friendError, setFriendError] = useState(""); const [currentQuestion, setCurrentQuestion] = useState(null); const [animateIndex, setAnimateIndex] = useState(null); // Refs for the main UI blocks const blockRefs = useRef([]); // Query for all friends const { docs: friendDocs } = useLiveQuery("type", { key: "friend" }); // Query for all questions const { docs: questionDocs } = useLiveQuery("type", { key: "question" }); // Query for all votes const { docs: voteDocs } = useLiveQuery("type", { key: "vote" }); useEffect(() => { setFriends(friendDocs.map(doc => doc.name)); }, [friendDocs]); // Random animation effect useEffect(() => { const triggerRandomAnimation = () => { // Get a random block to animate (0-3 for the main 4 blocks) const randomBlockIndex = Math.floor(Math.random() * 4); setAnimateIndex(randomBlockIndex); // Reset after animation completes setTimeout(() => { setAnimateIndex(null); }, 1000); }; // Set up interval for random animations const intervalId = setInterval(() => { triggerRandomAnimation(); }, 5000 + Math.random() * 2000); // Random interval between 5-7 seconds return () => clearInterval(intervalId); }, []); const addFriend = async () => { if (!newFriend.trim()) { setFriendError("Friend name cannot be empty"); return; } if (friends.includes(newFriend)) { setFriendError("This friend already exists"); return; } await database.put({ type: "friend", name: newFriend, createdAt: Date.now() }); setNewFriend(""); setFriendError(""); }; const generateQuestion = async () => { setLoading(true); try { const response = await callAI( `Generate a fun "who would most likely to..." question that friends can discuss. Make it wild, outrageous but still appropriate for all audiences. Think about scenarios where friends might do something silly, ridiculous, or unexpected. Do not use the phrase "out of your friends".`, { schema: { properties: { question: { type: "string" } } } } ); const result = JSON.parse(response); await database.put({ type: "question", text: result.question, createdAt: Date.now(), active: true }); } catch (error) { console.error("Error generating question:", error); } finally { setLoading(false); } }; const voteForFriend = async (questionId) => { if (!selectedFriend) return; await database.put({ type: "vote", questionId, friendName: selectedFriend, createdAt: Date.now() }); setSelectedFriend(""); }; const getActiveQuestion = () => { const activeQuestions = questionDocs.filter(q => q.active); return activeQuestions.length > 0 ? activeQuestions[0] : null; }; const countVotes = (questionId) => { const votes = voteDocs.filter(vote => vote.questionId === questionId); const voteCounts = {}; votes.forEach(vote => { if (voteCounts[vote.friendName]) { voteCounts[vote.friendName]++; } else { voteCounts[vote.friendName] = 1; } }); return voteCounts; }; const startNewQuestion = async () => { // Deactivate current question if exists const current = getActiveQuestion(); if (current) { await database.put({...current, active: false}); } // Generate new question generateQuestion(); }; const loadDemoData = async () => { setLoading(true); try { // Add demo friends const demoFriends = ["Dex", "Jay", "Tori", "Mack", "Zane"]; for (const name of demoFriends) { await database.put({ type: "friend", name, createdAt: Date.now() }); } // Generate a demo question await generateQuestion(); } catch (error) { console.error("Error loading demo data:", error); } finally { setLoading(false); } }; const activeQuestion = getActiveQuestion(); const voteResults = activeQuestion ? countVotes(activeQuestion._id) : {}; const sortedVotes = activeQuestion ? Object.entries(voteResults).sort((a, b) => b[1] - a[1]) : []; // Animation class generator const getAnimationClass = (index) => { if (animateIndex === index) { return "transform scale-[1.02] rotate-[1deg] transition-all duration-700"; } return "transform transition-all duration-300 hover:scale-[1.01] hover:rotate-[0.5deg]"; }; return (

blockRefs.current[0] = el} className={`mb-6 p-4 bg-yellow-400 rounded-none border-t-4 border-l-4 border-r-4 border-black shadow-[8px_8px_0_0_rgba(0,0,0,1)] ${getAnimationClass(0)}`} >

WHO WOULD...?

THE GET TOGETHER GAME that reveals which of your crew would be most likely to do something wild!

{/* Friends Management */}

blockRefs.current[1] = el} className={`mb-6 p-4 bg-red-500 rounded-none border-4 border-black shadow-[8px_8px_0_0_rgba(0,0,0,1)] ${getAnimationClass(1)}`} >

Your Crew

{ setNewFriend(e.target.value); setFriendError(""); }} placeholder="Add someone" className="flex-grow p-2 border-2 border-black rounded-none font-medium focus:outline-none" />

{friendError &&

{friendError}

} {friends.length > 0 ? (

{friends.map((friend) => ( {friend} ))}

) : (

No crew members yet. Add your squad to start!

)}

{/* Question and Voting */} {activeQuestion ? (

blockRefs.current[2] = el} className={`mb-6 p-4 bg-blue-400 rounded-none border-4 border-black shadow-[8px_8px_0_0_rgba(0,0,0,1)] ${getAnimationClass(2)}`} >

{activeQuestion.text}

{/* Vote Results */}

CURRENT RESULTS

{sortedVotes.length > 0 ? (

{sortedVotes.map(([friend, count]) => (

{friend} {count} votes

v.questionId === activeQuestion._id).length) * 100}%`, }} >

))}

) : (

No votes yet!

)}

) : (

blockRefs.current[2] = el} className={`mb-6 p-4 bg-gray-100 border-4 border-black shadow-[8px_8px_0_0_rgba(0,0,0,1)] text-center ${getAnimationClass(2)}`} >

Start a new round to see a question!

)} {/* Controls */}

{friends.length === 0 && ( )}

{/* Game History */} {questionDocs.filter(q => !q.active).length > 0 && (

blockRefs.current[3] = el} className={`mt-6 p-4 bg-gray-200 rounded-none border-4 border-black shadow-[8px_8px_0_0_rgba(0,0,0,1)] ${getAnimationClass(3)}`} >

Past Questions

{questionDocs .filter(q => !q.active) .sort((a, b) => b.createdAt - a.createdAt) .slice(0, 5) .map(question => (

{question.text}

{Object.entries(countVotes(question._id)) .sort((a, b) => b[1] - a[1]) .slice(0, 1) .map(([friend, count]) => ( Winner: {friend} with {count} votes ))}

))}

)}

); }