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

first release! 0.3.6

Browse Source
This commit is contained in:
cottongin
2025-10-30 19:27:23 -04:00
parent 47db3890e2
commit 6308d99d33
23 changed files with 4156 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,8 +31,8 @@ function History() {
const refreshSessionGames = useCallback(async (sessionId, silent = false) => {
try {
const response = await api.get(`/sessions/${sessionId}/games`);
// Reverse chronological order (most recent first)
setSessionGames(response.data.reverse());
// Reverse chronological order (most recent first) - create new array to avoid mutation
setSessionGames([...response.data].reverse());
} catch (err) {
if (!silent) {
console.error('Failed to load session games', err);
@@ -104,7 +104,8 @@ function History() {
const loadSessionGames = async (sessionId, silent = false) => {
try {
const response = await api.get(`/sessions/${sessionId}/games`);
setSessionGames(response.data);
// Reverse chronological order (most recent first) - create new array to avoid mutation
setSessionGames([...response.data].reverse());
if (!silent) {
setSelectedSession(sessionId);
}
@@ -319,7 +320,7 @@ function History() {
Games Played ({sessionGames.length})
</h3>
<div className="space-y-3">
{[...sessionGames].reverse().map((game, index) => (
{sessionGames.map((game, index) => (
<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>

56
frontend/src/pages/Home.jsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import api from '../api/axios';
import { formatLocalDateTime, formatLocalTime } from '../utils/dateUtils';
@@ -7,9 +7,11 @@ import PopularityBadge from '../components/PopularityBadge';
function Home() {
const { isAuthenticated } = useAuth();
const navigate = useNavigate();
const [activeSession, setActiveSession] = useState(null);
const [sessionGames, setSessionGames] = useState([]);
const [loading, setLoading] = useState(true);
const [creating, setCreating] = useState(false);
const loadSessionGames = useCallback(async (sessionId, silent = false) => {
try {
@@ -56,6 +58,19 @@ function Home() {
return () => clearInterval(interval);
}, [loadActiveSession]);
const handleCreateSession = async () => {
setCreating(true);
try {
await api.post('/sessions');
// Navigate to picker page after creating session
navigate('/picker');
} catch (error) {
console.error('Failed to create session:', error);
alert('Failed to create session. Please try again.');
setCreating(false);
}
};
if (loading) {
return (
<div className="flex justify-center items-center h-64">
@@ -167,12 +182,13 @@ function Home() {
There is currently no game session in progress.
</p>
{isAuthenticated ? (
<Link
to="/picker"
className="inline-block bg-indigo-600 dark:bg-indigo-700 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-800 transition"
<button
onClick={handleCreateSession}
disabled={creating}
className="inline-block bg-indigo-600 dark:bg-indigo-700 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-800 transition disabled:opacity-50 disabled:cursor-not-allowed"
>
Start a New Session
</Link>
{creating ? 'Creating Session...' : 'Start a New Session'}
</button>
) : (
<p className="text-gray-500 dark:text-gray-400">
Admin access required to start a new session.
@@ -184,10 +200,18 @@ function Home() {
<div className="grid md:grid-cols-2 gap-6">
<Link
to="/history"
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition"
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl hover:scale-[1.02] transition-all group"
>
<h3 className="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">
Session History
<h3 className="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 flex items-center justify-between">
<span>Session History</span>
<svg
className="w-5 h-5 text-gray-400 dark:text-gray-500 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 group-hover:translate-x-1 transition-all"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</h3>
<p className="text-gray-600 dark:text-gray-300">
View past gaming sessions and the games that were played
@@ -197,10 +221,18 @@ function Home() {
{isAuthenticated && (
<Link
to="/manager"
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition"
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl hover:scale-[1.02] transition-all group"
>
<h3 className="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">
Game Manager
<h3 className="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 flex items-center justify-between">
<span>Game Manager</span>
<svg
className="w-5 h-5 text-gray-400 dark:text-gray-500 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 group-hover:translate-x-1 transition-all"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</h3>
<p className="text-gray-600 dark:text-gray-300">
Manage games, packs, and view statistics