HyperSpaceOut/jackboxpartypack-gamepicker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

we're about to port the chrome-extension. everything else mostly works

Browse Source
This commit is contained in:
cottongin
2025-10-30 13:27:55 -04:00
parent 2db707961c
commit db2a8abe66
29 changed files with 2490 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

329
frontend/src/pages/History.jsx
View File

@@ -1,20 +1,50 @@
import React, { useState, useEffect } from 'react';
import { useAuth } from '../context/AuthContext';
import { useToast } from '../components/Toast';
import api from '../api/axios';
import { formatLocalDateTime, formatLocalDate, formatLocalTime } from '../utils/dateUtils';
function History() {
const { isAuthenticated } = useAuth();
const { error, success } = useToast();
const [sessions, setSessions] = useState([]);
const [selectedSession, setSelectedSession] = useState(null);
const [sessionGames, setSessionGames] = useState([]);
const [loading, setLoading] = useState(true);
const [showChatImport, setShowChatImport] = useState(false);
const [closingSession, setClosingSession] = useState(null);
const [showAllSessions, setShowAllSessions] = useState(false);
const [deletingSession, setDeletingSession] = useState(null);
useEffect(() => {
loadSessions();
}, []);
// Auto-select active session if navigating from picker
useEffect(() => {
if (sessions.length > 0 && !selectedSession) {
const activeSession = sessions.find(s => s.is_active === 1);
if (activeSession) {
loadSessionGames(activeSession.id);
}
}
}, [sessions]);
// Poll for updates on active session
useEffect(() => {
if (!selectedSession) return;
const currentSession = sessions.find(s => s.id === selectedSession);
if (!currentSession || currentSession.is_active !== 1) return;
// Refresh games every 3 seconds for active session
const interval = setInterval(() => {
loadSessionGames(selectedSession, true); // silent refresh
}, 3000);
return () => clearInterval(interval);
}, [selectedSession, sessions]);
const loadSessions = async () => {
try {
const response = await api.get('/sessions');
@@ -26,13 +56,17 @@ function History() {
}
};
const loadSessionGames = async (sessionId) => {
const loadSessionGames = async (sessionId, silent = false) => {
try {
const response = await api.get(`/sessions/${sessionId}/games`);
setSessionGames(response.data);
setSelectedSession(sessionId);
if (!silent) {
setSelectedSession(sessionId);
}
} catch (err) {
console.error('Failed to load session games', err);
if (!silent) {
console.error('Failed to load session games', err);
}
}
};
@@ -41,74 +75,123 @@ function History() {
await api.post(`/sessions/${sessionId}/close`, { notes });
await loadSessions();
setClosingSession(null);
if (selectedSession === sessionId) {
// Reload the session details to show updated state
loadSessionGames(sessionId);
}
success('Session ended successfully');
} catch (err) {
error('Failed to close session');
}
};
const handleDeleteSession = async (sessionId) => {
try {
await api.delete(`/sessions/${sessionId}`);
await loadSessions();
setDeletingSession(null);
if (selectedSession === sessionId) {
setSelectedSession(null);
setSessionGames([]);
}
success('Session deleted successfully');
} catch (err) {
alert('Failed to close session');
error('Failed to delete session: ' + (err.response?.data?.error || err.message));
}
};
if (loading) {
return (
<div className="flex justify-center items-center h-64">
<div className="text-xl text-gray-600">Loading...</div>
<div className="text-xl text-gray-600 dark:text-gray-400">Loading...</div>
</div>
);
}
return (
<div className="max-w-7xl mx-auto">
<h1 className="text-4xl font-bold mb-8 text-gray-800">Session History</h1>
<h1 className="text-4xl font-bold mb-8 text-gray-800 dark:text-gray-100">Session History</h1>
<div className="grid md:grid-cols-3 gap-6">
{/* Sessions List */}
<div className="md:col-span-1">
<div className="bg-white rounded-lg shadow-lg p-6">
<h2 className="text-2xl font-semibold mb-4 text-gray-800">Sessions</h2>
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<div className="flex justify-between items-center mb-4">
<h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100">Sessions</h2>
{sessions.length > 3 && (
<button
onClick={() => setShowAllSessions(!showAllSessions)}
className="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition"
>
{showAllSessions ? 'Show Recent' : `Show All (${sessions.length})`}
</button>
)}
</div>
{sessions.length === 0 ? (
<p className="text-gray-500">No sessions found</p>
<p className="text-gray-500 dark:text-gray-400">No sessions found</p>
) : (
<div className="space-y-2 max-h-[600px] overflow-y-auto">
{sessions.map(session => (
<div className="space-y-1 max-h-[600px] overflow-y-auto">
{(showAllSessions ? sessions : sessions.slice(0, 3)).map(session => (
<div
key={session.id}
onClick={() => loadSessionGames(session.id)}
className={`p-4 border rounded-lg cursor-pointer transition ${
className={`border rounded-lg transition ${
selectedSession === session.id
? 'border-indigo-500 bg-indigo-50'
: 'border-gray-300 hover:border-indigo-300'
? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/30'
: 'border-gray-300 dark:border-gray-600 hover:border-indigo-300 dark:hover:border-indigo-600'
}`}
>
<div className="flex justify-between items-start mb-2">
<div className="font-semibold text-gray-800">
Session #{session.id}
{/* Main session info - clickable */}
<div
onClick={() => loadSessionGames(session.id)}
className="p-3 cursor-pointer"
>
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<span className="font-semibold text-sm text-gray-800 dark:text-gray-100">
Session #{session.id}
</span>
{session.is_active === 1 && (
<span className="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs px-2 py-0.5 rounded flex-shrink-0">
Active
</span>
)}
</div>
<div className="flex flex-wrap gap-x-2 text-xs text-gray-500 dark:text-gray-400">
<span>{formatLocalDate(session.created_at)}</span>
<span>•</span>
<span>{session.games_played} game{session.games_played !== 1 ? 's' : ''}</span>
</div>
</div>
</div>
{session.is_active === 1 && (
<span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
Active
</span>
)}
</div>
<div className="text-sm text-gray-600">
{new Date(session.created_at).toLocaleDateString()}
</div>
<div className="text-sm text-gray-500">
{session.games_played} game{session.games_played !== 1 ? 's' : ''} played
</div>
{isAuthenticated && session.is_active === 1 && (
<button
onClick={(e) => {
e.stopPropagation();
setClosingSession(session.id);
}}
className="mt-2 w-full bg-yellow-600 text-white px-3 py-1 rounded text-sm hover:bg-yellow-700 transition"
>
Close Session
</button>
{/* Action buttons for authenticated users */}
{isAuthenticated && (
<div className="px-3 pb-3 pt-0 flex gap-2">
{session.is_active === 1 ? (
<button
onClick={(e) => {
e.stopPropagation();
setClosingSession(session.id);
}}
className="w-full bg-orange-600 dark:bg-orange-700 text-white px-4 py-2 rounded text-sm hover:bg-orange-700 dark:hover:bg-orange-800 transition"
>
End Session
</button>
) : (
<button
onClick={(e) => {
e.stopPropagation();
setDeletingSession(session.id);
}}
className="w-full bg-red-600 dark:bg-red-700 text-white px-4 py-2 rounded text-sm hover:bg-red-700 dark:hover:bg-red-800 transition"
>
Delete Session
</button>
)}
</div>
)}
</div>
))}
@@ -120,22 +203,34 @@ function History() {
{/* Session Details */}
<div className="md:col-span-2">
{selectedSession ? (
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex justify-between items-start mb-6">
<div>
<h2 className="text-2xl font-semibold text-gray-800">
Session #{selectedSession}
</h2>
<p className="text-gray-600">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 sm:p-6">
<div className="flex flex-col gap-4 mb-6">
<div className="flex-1">
<div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-2">
<h2 className="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100">
Session #{selectedSession}
</h2>
{sessions.find(s => s.id === selectedSession)?.is_active === 1 && (
<span className="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs sm:text-sm px-2 sm:px-3 py-1 rounded-full font-semibold animate-pulse inline-flex items-center gap-1 w-fit">
🟢 Active
</span>
)}
</div>
<p className="text-sm sm:text-base text-gray-600 dark:text-gray-400">
{sessions.find(s => s.id === selectedSession)?.created_at &&
new Date(sessions.find(s => s.id === selectedSession).created_at).toLocaleString()}
formatLocalDateTime(sessions.find(s => s.id === selectedSession).created_at)}
</p>
{sessions.find(s => s.id === selectedSession)?.is_active === 1 && (
<p className="text-xs sm:text-sm text-gray-500 dark:text-gray-500 mt-1 italic">
Games update automatically
</p>
)}
</div>
{isAuthenticated && sessions.find(s => s.id === selectedSession)?.is_active === 1 && (
<button
onClick={() => setShowChatImport(true)}
className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"
className="bg-indigo-600 dark:bg-indigo-700 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-800 transition text-sm sm:text-base w-full sm:w-auto"
>
Import Chat Log
</button>
@@ -154,35 +249,35 @@ function History() {
)}
{sessionGames.length === 0 ? (
<p className="text-gray-500">No games played in this session</p>
<p className="text-gray-500 dark:text-gray-400">No games played in this session</p>
) : (
<div>
<h3 className="text-xl font-semibold mb-4 text-gray-700">
<h3 className="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">
Games Played ({sessionGames.length})
</h3>
<div className="space-y-3">
{sessionGames.map((game, index) => (
<div key={game.id} className="border border-gray-200 rounded-lg p-4">
<div key={game.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gray-50 dark:bg-gray-700/50">
<div className="flex justify-between items-start mb-2">
<div>
<div className="font-semibold text-lg text-gray-800">
<div className="font-semibold text-lg text-gray-800 dark:text-gray-100">
{index + 1}. {game.title}
</div>
<div className="text-gray-600">{game.pack_name}</div>
<div className="text-gray-600 dark:text-gray-400">{game.pack_name}</div>
</div>
<div className="text-right">
<div className="text-sm text-gray-500">
{new Date(game.played_at).toLocaleTimeString()}
<div className="text-sm text-gray-500 dark:text-gray-400">
{formatLocalTime(game.played_at)}
</div>
{game.manually_added === 1 && (
<span className="inline-block mt-1 text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
<span className="inline-block mt-1 text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded">
Manual
</span>
)}
</div>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm text-gray-600">
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm text-gray-600 dark:text-gray-400">
<div>
<span className="font-semibold">Players:</span> {game.min_players}-{game.max_players}
</div>
@@ -191,7 +286,7 @@ function History() {
</div>
<div>
<span className="font-semibold">Popularity:</span>{' '}
<span className={game.popularity_score >= 0 ? 'text-green-600' : 'text-red-600'}>
<span className={game.popularity_score >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}>
{game.popularity_score > 0 ? '+' : ''}{game.popularity_score}
</span>
</div>
@@ -203,41 +298,105 @@ function History() {
)}
</div>
) : (
<div className="bg-white rounded-lg shadow-lg p-6 flex items-center justify-center h-64">
<p className="text-gray-500 text-lg">Select a session to view details</p>
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex items-center justify-center h-64">
<p className="text-gray-500 dark:text-gray-400 text-lg">Select a session to view details</p>
</div>
)}
</div>
</div>
{/* Close Session Modal */}
{/* End Session Modal */}
{closingSession && (
<CloseSessionModal
<EndSessionModal
sessionId={closingSession}
sessionGames={closingSession === selectedSession ? sessionGames : []}
onClose={() => setClosingSession(null)}
onConfirm={handleCloseSession}
onShowChatImport={() => {
setShowChatImport(true);
if (closingSession !== selectedSession) {
loadSessionGames(closingSession);
}
}}
/>
)}
{/* Delete Confirmation Modal */}
{deletingSession && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white dark:bg-gray-800 rounded-lg p-8 max-w-md w-full">
<h2 className="text-2xl font-bold mb-4 text-red-600 dark:text-red-400">Delete Session?</h2>
<p className="text-gray-700 dark:text-gray-300 mb-6">
Are you sure you want to delete Session #{deletingSession}?
This will permanently delete all games and chat logs associated with this session. This action cannot be undone.
</p>
<div className="flex gap-4">
<button
onClick={() => handleDeleteSession(deletingSession)}
className="flex-1 bg-red-600 dark:bg-red-700 text-white py-3 rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition font-semibold"
>
Delete Permanently
</button>
<button
onClick={() => setDeletingSession(null)}
className="flex-1 bg-gray-600 dark:bg-gray-700 text-white py-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition"
>
Cancel
</button>
</div>
</div>
</div>
)}
</div>
);
}
function CloseSessionModal({ sessionId, onClose, onConfirm }) {
function EndSessionModal({ sessionId, sessionGames, onClose, onConfirm, onShowChatImport }) {
const [notes, setNotes] = useState('');
// Check if any games have been voted on (popularity != 0)
const hasPopularityData = sessionGames.some(game => game.popularity_score !== 0);
const showPopularityWarning = sessionGames.length > 0 && !hasPopularityData;
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg p-8 max-w-md w-full">
<h2 className="text-2xl font-bold mb-4">Close Session #{sessionId}</h2>
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white dark:bg-gray-800 rounded-lg p-8 max-w-md w-full">
<h2 className="text-2xl font-bold mb-4 dark:text-gray-100">End Session #{sessionId}</h2>
{/* Popularity Warning */}
{showPopularityWarning && (
<div className="mb-4 p-4 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-300 dark:border-yellow-700 rounded-lg">
<div className="flex items-start gap-2">
<span className="text-yellow-600 dark:text-yellow-400 text-xl">⚠️</span>
<div className="flex-1">
<p className="font-semibold text-yellow-800 dark:text-yellow-200 mb-1">
No Popularity Data
</p>
<p className="text-sm text-yellow-700 dark:text-yellow-300 mb-3">
You haven't imported chat reactions yet. Import now to track which games your players loved!
</p>
<button
onClick={() => {
onClose();
onShowChatImport();
}}
className="text-sm bg-yellow-600 dark:bg-yellow-700 text-white px-4 py-2 rounded hover:bg-yellow-700 dark:hover:bg-yellow-800 transition"
>
Import Chat Log
</button>
</div>
</div>
</div>
)}
<div className="mb-4">
<label className="block text-gray-700 font-semibold mb-2">
<label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">
Session Notes (optional)
</label>
<textarea
value={notes}
onChange={(e) => setNotes(e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-lg h-32"
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg h-32 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
placeholder="Add any notes about this session..."
/>
</div>
@@ -245,13 +404,13 @@ function CloseSessionModal({ sessionId, onClose, onConfirm }) {
<div className="flex gap-4">
<button
onClick={() => onConfirm(sessionId, notes)}
className="flex-1 bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition"
className="flex-1 bg-orange-600 dark:bg-orange-700 text-white py-3 rounded-lg hover:bg-orange-700 dark:hover:bg-orange-800 transition"
>
Close Session
End Session
</button>
<button
onClick={onClose}
className="flex-1 bg-gray-600 text-white py-3 rounded-lg hover:bg-gray-700 transition"
className="flex-1 bg-gray-600 dark:bg-gray-700 text-white py-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition"
>
Cancel
</button>
@@ -265,10 +424,11 @@ function ChatImportPanel({ sessionId, onClose, onImportComplete }) {
const [chatData, setChatData] = useState('');
const [importing, setImporting] = useState(false);
const [result, setResult] = useState(null);
const { error, success } = useToast();
const handleImport = async () => {
if (!chatData.trim()) {
alert('Please enter chat data');
error('Please enter chat data');
return;
}
@@ -281,45 +441,46 @@ function ChatImportPanel({ sessionId, onClose, onImportComplete }) {
chatData: parsedData
});
setResult(response.data);
success('Chat log imported successfully');
setTimeout(() => {
onImportComplete();
}, 2000);
} catch (err) {
alert('Import failed: ' + (err.response?.data?.error || err.message));
error('Import failed: ' + (err.response?.data?.error || err.message));
} finally {
setImporting(false);
}
};
return (
<div className="bg-gray-50 border border-gray-300 rounded-lg p-6 mb-6">
<h3 className="text-xl font-semibold mb-4">Import Chat Log</h3>
<div className="bg-gray-50 dark:bg-gray-700/50 border border-gray-300 dark:border-gray-600 rounded-lg p-6 mb-6">
<h3 className="text-xl font-semibold mb-4 dark:text-gray-100">Import Chat Log</h3>
<p className="text-sm text-gray-600 mb-4">
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
Paste JSON array with format: [{"{"}"username": "...", "message": "...", "timestamp": "..."{"}"}]
<br />
The system will detect "thisgame++" and "thisgame--" patterns and update game popularity.
</p>
<div className="mb-4">
<label className="block text-gray-700 font-semibold mb-2">Chat JSON Data</label>
<label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Chat JSON Data</label>
<textarea
value={chatData}
onChange={(e) => setChatData(e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-lg h-48 font-mono text-sm"
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg h-48 font-mono text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
placeholder='[{"username":"Alice","message":"thisgame++","timestamp":"2024-01-01T12:00:00Z"}]'
disabled={importing}
/>
</div>
{result && (
<div className="mb-4 p-4 bg-green-50 border border-green-300 rounded-lg">
<p className="font-semibold text-green-800">Import Successful!</p>
<p className="text-sm text-green-700">
<div className="mb-4 p-4 bg-green-50 dark:bg-green-900/30 border border-green-300 dark:border-green-700 rounded-lg">
<p className="font-semibold text-green-800 dark:text-green-200">Import Successful!</p>
<p className="text-sm text-green-700 dark:text-green-300">
Imported {result.messagesImported} messages, processed {result.votesProcessed} votes
</p>
{result.votesByGame && Object.keys(result.votesByGame).length > 0 && (
<div className="mt-2 text-sm">
<div className="mt-2 text-sm text-green-700 dark:text-green-300">
<p className="font-semibold">Votes by game:</p>
<ul className="list-disc list-inside">
{Object.values(result.votesByGame).map((vote, i) => (
@@ -337,13 +498,13 @@ function ChatImportPanel({ sessionId, onClose, onImportComplete }) {
<button
onClick={handleImport}
disabled={importing}
className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition disabled:bg-gray-400"
className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition disabled:bg-gray-400 dark:disabled:bg-gray-600"
>
{importing ? 'Importing...' : 'Import'}
</button>
<button
onClick={onClose}
className="bg-gray-600 text-white px-6 py-2 rounded-lg hover:bg-gray-700 transition"
className="bg-gray-600 dark:bg-gray-700 text-white px-6 py-2 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition"
>
Close
</button>