IDK, it's working and we're moving on
This commit is contained in:
cottongin
120
frontend/src/components/RoomCodeModal.jsx
Normal file
120
frontend/src/components/RoomCodeModal.jsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
function RoomCodeModal({ isOpen, onConfirm, onCancel, gameName }) {
|
||||
const [roomCode, setRoomCode] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const inputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setRoomCode('');
|
||||
setError('');
|
||||
// Focus input when modal opens
|
||||
setTimeout(() => {
|
||||
inputRef.current?.focus();
|
||||
}, 100);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleEscape = (e) => {
|
||||
if (e.key === 'Escape' && isOpen) {
|
||||
onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
return () => document.removeEventListener('keydown', handleEscape);
|
||||
}, [isOpen, onCancel]);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const value = e.target.value.toUpperCase();
|
||||
// Only allow A-Z and 0-9, max 4 characters
|
||||
const filtered = value.replace(/[^A-Z0-9]/g, '').slice(0, 4);
|
||||
setRoomCode(filtered);
|
||||
setError('');
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (roomCode.length !== 4) {
|
||||
setError('Room code must be exactly 4 characters');
|
||||
return;
|
||||
}
|
||||
onConfirm(roomCode);
|
||||
};
|
||||
|
||||
const handleOverlayClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
|
||||
onClick={handleOverlayClick}
|
||||
>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-2xl max-w-md w-full p-6 animate-fade-in">
|
||||
<h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">
|
||||
Enter Room Code
|
||||
</h2>
|
||||
{gameName && (
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
For: <span className="font-semibold">{gameName}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
4-Character Room Code (A-Z, 0-9)
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={roomCode}
|
||||
onChange={handleInputChange}
|
||||
placeholder="ABCD"
|
||||
className="w-full px-4 py-3 text-center text-2xl font-mono font-bold tracking-widest border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 uppercase"
|
||||
maxLength={4}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-500 dark:text-gray-400 font-mono">
|
||||
{roomCode.length}/4
|
||||
</div>
|
||||
</div>
|
||||
{error && (
|
||||
<p className="mt-2 text-sm text-red-600 dark:text-red-400">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="flex-1 px-4 py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition font-semibold"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={roomCode.length !== 4}
|
||||
className="flex-1 px-4 py-3 bg-indigo-600 dark:bg-indigo-700 text-white rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-800 transition font-semibold disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-indigo-600 dark:disabled:hover:bg-indigo-700"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RoomCodeModal;
|
||||
|
||||
@@ -2,7 +2,7 @@ export const branding = {
|
||||
app: {
|
||||
name: 'HSO Jackbox Game Picker',
|
||||
shortName: 'Jackbox Game Picker',
|
||||
version: '0.3.6 - Safari Walkabout Edition',
|
||||
version: '0.4.2 - Safari Walkabout Edition',
|
||||
description: 'Spicing up Hyper Spaceout game nights!',
|
||||
},
|
||||
meta: {
|
||||
|
||||
@@ -144,6 +144,11 @@ function Home() {
|
||||
⏭️ Skipped
|
||||
</span>
|
||||
)}
|
||||
{game.room_code && (
|
||||
<span className="inline-flex items-center gap-1 text-xs bg-indigo-600 dark:bg-indigo-700 text-white px-2 py-1 rounded font-mono font-bold">
|
||||
🎮 {game.room_code}
|
||||
</span>
|
||||
)}
|
||||
<PopularityBadge
|
||||
upvotes={game.upvotes || 0}
|
||||
downvotes={game.downvotes || 0}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import api from '../api/axios';
|
||||
import GamePoolModal from '../components/GamePoolModal';
|
||||
import RoomCodeModal from '../components/RoomCodeModal';
|
||||
import { formatLocalTime } from '../utils/dateUtils';
|
||||
import PopularityBadge from '../components/PopularityBadge';
|
||||
|
||||
@@ -41,6 +42,10 @@ function Picker() {
|
||||
|
||||
// Exclude previously played games
|
||||
const [excludePlayedGames, setExcludePlayedGames] = useState(false);
|
||||
|
||||
// Room code modal
|
||||
const [showRoomCodeModal, setShowRoomCodeModal] = useState(false);
|
||||
const [pendingGameAction, setPendingGameAction] = useState(null);
|
||||
|
||||
const checkActiveSession = useCallback(async () => {
|
||||
try {
|
||||
@@ -194,56 +199,77 @@ function Picker() {
|
||||
const handleAcceptGame = async () => {
|
||||
if (!selectedGame || !activeSession) return;
|
||||
|
||||
// Show room code modal
|
||||
setPendingGameAction({
|
||||
type: 'accept',
|
||||
game: selectedGame
|
||||
});
|
||||
setShowRoomCodeModal(true);
|
||||
};
|
||||
|
||||
const handleRoomCodeConfirm = async (roomCode) => {
|
||||
if (!pendingGameAction || !activeSession) return;
|
||||
|
||||
try {
|
||||
await api.post(`/sessions/${activeSession.id}/games`, {
|
||||
game_id: selectedGame.id,
|
||||
manually_added: false
|
||||
});
|
||||
const { type, game, gameId } = pendingGameAction;
|
||||
|
||||
if (type === 'accept' || type === 'version') {
|
||||
await api.post(`/sessions/${activeSession.id}/games`, {
|
||||
game_id: gameId || game.id,
|
||||
manually_added: false,
|
||||
room_code: roomCode
|
||||
});
|
||||
setSelectedGame(null);
|
||||
} else if (type === 'manual') {
|
||||
await api.post(`/sessions/${activeSession.id}/games`, {
|
||||
game_id: gameId,
|
||||
manually_added: true,
|
||||
room_code: roomCode
|
||||
});
|
||||
setManualGameId('');
|
||||
setShowManualSelect(false);
|
||||
}
|
||||
|
||||
// Trigger games list refresh
|
||||
setGamesUpdateTrigger(prev => prev + 1);
|
||||
setSelectedGame(null);
|
||||
setError('');
|
||||
} catch (err) {
|
||||
setError('Failed to add game to session');
|
||||
} finally {
|
||||
setShowRoomCodeModal(false);
|
||||
setPendingGameAction(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRoomCodeCancel = () => {
|
||||
setShowRoomCodeModal(false);
|
||||
setPendingGameAction(null);
|
||||
};
|
||||
|
||||
const handleAddManualGame = async () => {
|
||||
if (!manualGameId || !activeSession) return;
|
||||
|
||||
try {
|
||||
await api.post(`/sessions/${activeSession.id}/games`, {
|
||||
game_id: parseInt(manualGameId),
|
||||
manually_added: true
|
||||
});
|
||||
|
||||
// Trigger games list refresh
|
||||
setGamesUpdateTrigger(prev => prev + 1);
|
||||
setManualGameId('');
|
||||
setShowManualSelect(false);
|
||||
setError('');
|
||||
} catch (err) {
|
||||
setError('Failed to add game to session');
|
||||
}
|
||||
// Show room code modal
|
||||
const game = allGames.find(g => g.id === parseInt(manualGameId));
|
||||
setPendingGameAction({
|
||||
type: 'manual',
|
||||
gameId: parseInt(manualGameId),
|
||||
game: game
|
||||
});
|
||||
setShowRoomCodeModal(true);
|
||||
};
|
||||
|
||||
const handleSelectVersion = async (gameId) => {
|
||||
if (!activeSession) return;
|
||||
|
||||
try {
|
||||
await api.post(`/sessions/${activeSession.id}/games`, {
|
||||
game_id: gameId,
|
||||
manually_added: false
|
||||
});
|
||||
|
||||
// Trigger games list refresh
|
||||
setGamesUpdateTrigger(prev => prev + 1);
|
||||
setSelectedGame(null);
|
||||
setError('');
|
||||
} catch (err) {
|
||||
setError('Failed to add game to session');
|
||||
}
|
||||
// Show room code modal
|
||||
const game = allGames.find(g => g.id === gameId);
|
||||
setPendingGameAction({
|
||||
type: 'version',
|
||||
gameId: gameId,
|
||||
game: game
|
||||
});
|
||||
setShowRoomCodeModal(true);
|
||||
};
|
||||
|
||||
// Find similar versions of a game based on title patterns
|
||||
@@ -572,6 +598,14 @@ function Picker() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Room Code Modal */}
|
||||
<RoomCodeModal
|
||||
isOpen={showRoomCodeModal}
|
||||
onConfirm={handleRoomCodeConfirm}
|
||||
onCancel={handleRoomCodeCancel}
|
||||
gameName={pendingGameAction?.game?.title}
|
||||
/>
|
||||
|
||||
{/* Results Panel */}
|
||||
<div className="md:col-span-2">
|
||||
{error && (
|
||||
@@ -730,6 +764,8 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [confirmingRemove, setConfirmingRemove] = useState(null);
|
||||
const [showPopularity, setShowPopularity] = useState(true);
|
||||
const [editingRoomCode, setEditingRoomCode] = useState(null);
|
||||
const [newRoomCode, setNewRoomCode] = useState('');
|
||||
|
||||
const loadGames = useCallback(async () => {
|
||||
try {
|
||||
@@ -788,6 +824,39 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditRoomCode = (gameId, currentCode) => {
|
||||
setEditingRoomCode(gameId);
|
||||
setNewRoomCode(currentCode || '');
|
||||
};
|
||||
|
||||
const handleRoomCodeChange = (e) => {
|
||||
const value = e.target.value.toUpperCase();
|
||||
const filtered = value.replace(/[^A-Z0-9]/g, '').slice(0, 4);
|
||||
setNewRoomCode(filtered);
|
||||
};
|
||||
|
||||
const handleSaveRoomCode = async (gameId) => {
|
||||
if (newRoomCode.length !== 4) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await api.patch(`/sessions/${sessionId}/games/${gameId}/room-code`, {
|
||||
room_code: newRoomCode
|
||||
});
|
||||
setEditingRoomCode(null);
|
||||
setNewRoomCode('');
|
||||
loadGames(); // Reload to show updated code
|
||||
} catch (err) {
|
||||
console.error('Failed to update room code', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelEditRoomCode = () => {
|
||||
setEditingRoomCode(null);
|
||||
setNewRoomCode('');
|
||||
};
|
||||
|
||||
const getStatusBadge = (status) => {
|
||||
if (status === 'playing') {
|
||||
return (
|
||||
@@ -857,6 +926,50 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
|
||||
Manual
|
||||
</span>
|
||||
)}
|
||||
{game.room_code && (
|
||||
<div className="flex items-center gap-1">
|
||||
{editingRoomCode === game.id ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<input
|
||||
type="text"
|
||||
value={newRoomCode}
|
||||
onChange={handleRoomCodeChange}
|
||||
className="w-16 px-2 py-1 text-xs font-mono font-bold text-center border border-indigo-400 dark:border-indigo-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 uppercase focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
maxLength={4}
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleSaveRoomCode(game.id)}
|
||||
disabled={newRoomCode.length !== 4}
|
||||
className="text-xs px-2 py-1 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
✓
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancelEditRoomCode}
|
||||
className="text-xs px-2 py-1 bg-gray-500 text-white rounded hover:bg-gray-600"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<span className="inline-flex items-center gap-1 text-xs bg-indigo-600 dark:bg-indigo-700 text-white px-2 py-1 rounded font-mono font-bold">
|
||||
🎮 {game.room_code}
|
||||
</span>
|
||||
{isAuthenticated && (
|
||||
<button
|
||||
onClick={() => handleEditRoomCode(game.id, game.room_code)}
|
||||
className="text-xs text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400"
|
||||
title="Edit room code"
|
||||
>
|
||||
✏️
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{showPopularity && (
|
||||
<PopularityBadge
|
||||
upvotes={game.upvotes || 0}
|
||||
|
||||
Reference in New Issue
Block a user