121 lines
4.0 KiB
JavaScript
121 lines
4.0 KiB
JavaScript
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;
|
|
|