IDK, it's working and we're moving on

2025-11-02 16:06:31 -05:00
parent 6308d99d33
commit 2a75237e90
26 changed files with 5231 additions and 45 deletions
--- a/frontend/src/components/RoomCodeModal.jsx
+++ b/frontend/src/components/RoomCodeModal.jsx
@@ -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;
+