Delete index.html

index.html

@@ -1,786 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Volume2, VolumeX, Power, Camera, X, Lightbulb, Upload } from 'lucide-react';
-
-export default function FNAFGame() {
-  const [gameState, setGameState] = useState('upload');
-  const [currentView, setCurrentView] = useState('office');
-  const [selectedCamera, setSelectedCamera] = useState('CAM1');
-  const [power, setPower] = useState(100);
-  const [hour, setHour] = useState(0);
-  const [soundEnabled, setSoundEnabled] = useState(true);
-  const [animatronicPositions, setAnimatronicPositions] = useState({
-    char1: 'CAM1', // Starts in Left Hall
-    char2: 'CAM1', // Starts in Left Hall
-    char3: 'CAM3', // Starts in Left Corner
-    char4: 'CAM2'  // Invisible - doesn't show in cameras
-  });
-  const [leftLightOn, setLeftLightOn] = useState(false);
-  const [rightLightOn, setRightLightOn] = useState(false);
-  const [leftDoorClosed, setLeftDoorClosed] = useState(false);
-  const [rightDoorClosed, setRightDoorClosed] = useState(false);
-  const [jumpscareCharacter, setJumpscareCharacter] = useState(null);
-  const [showTryAgain, setShowTryAgain] = useState(false);
-
-  const [images, setImages] = useState({
-    officeLeft: null,
-    officeRight: null,
-    officeBoth: null,
-    jumpscare1: null,
-    jumpscare2: null,
-    jumpscare3: null,
-    jumpscare4: null,
-    cam1: null,
-    cam2: null,
-    cam3: null,
-    // Specific animatronic in camera images
-    char1_cam1: null, // Character 1 in Left Hall
-    char2_cam1: null, // Character 2 in Left Hall
-    char3_cam3: null  // Character 3 in Left Corner
-    // Character 4 doesn't appear in cameras (invisible/teleporter)
-  });
-
-  const cameras = {
-    CAM1: { name: 'Left Hall' },
-    CAM2: { name: 'Right Hall' },
-    CAM3: { name: 'Left Corner' }
-  };
-
-  const handleImageUpload = (key, file) => {
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        setImages(prev => ({ ...prev, [key]: e.target.result }));
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const playJumpscareSound = () => {
-    if (!soundEnabled) return;
-    const ctx = new (window.AudioContext || window.webkitAudioContext)();
-    const oscillator = ctx.createOscillator();
-    const gainNode = ctx.createGain();
-    
-    oscillator.connect(gainNode);
-    gainNode.connect(ctx.destination);
-    
-    oscillator.type = 'sawtooth';
-    oscillator.frequency.value = 80;
-    gainNode.gain.setValueAtTime(0.8, ctx.currentTime);
-    gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 2);
-    oscillator.start(ctx.currentTime);
-    oscillator.stop(ctx.currentTime + 2);
-  };
-
-  const playSound = (type) => {
-    if (!soundEnabled) return;
-    const ctx = new (window.AudioContext || window.webkitAudioContext)();
-    const oscillator = ctx.createOscillator();
-    const gainNode = ctx.createGain();
-    
-    oscillator.connect(gainNode);
-    gainNode.connect(ctx.destination);
-    
-    switch(type) {
-      case 'camera':
-        oscillator.frequency.value = 800;
-        gainNode.gain.setValueAtTime(0.2, ctx.currentTime);
-        gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.2);
-        oscillator.start(ctx.currentTime);
-        oscillator.stop(ctx.currentTime + 0.2);
-        break;
-      case 'door':
-        oscillator.frequency.value = 400;
-        gainNode.gain.setValueAtTime(0.2, ctx.currentTime);
-        gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3);
-        oscillator.start(ctx.currentTime);
-        oscillator.stop(ctx.currentTime + 0.3);
-        break;
-      case 'light':
-        oscillator.frequency.value = 600;
-        gainNode.gain.setValueAtTime(0.15, ctx.currentTime);
-        gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.1);
-        oscillator.start(ctx.currentTime);
-        oscillator.stop(ctx.currentTime + 0.1);
-        break;
-      case 'move':
-        oscillator.frequency.value = 200;
-        gainNode.gain.setValueAtTime(0.15, ctx.currentTime);
-        gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5);
-        oscillator.start(ctx.currentTime);
-        oscillator.stop(ctx.currentTime + 0.5);
-        break;
-    }
-  };
-
-  useEffect(() => {
-    if (gameState !== 'playing') return;
-    
-    const interval = setInterval(() => {
-      setPower(prev => {
-        let drain = 0.15;
-        if (currentView === 'camera') drain += 0.25;
-        if (leftDoorClosed) drain += 0.15;
-        if (rightDoorClosed) drain += 0.15;
-        if (leftLightOn) drain += 0.1;
-        if (rightLightOn) drain += 0.1;
-        
-        const newPower = Math.max(0, prev - drain);
-        if (newPower === 0) {
-          setGameState('gameover');
-        }
-        return newPower;
-      });
-    }, 1000);
-    
-    return () => clearInterval(interval);
-  }, [gameState, currentView, leftDoorClosed, rightDoorClosed, leftLightOn, rightLightOn]);
-
-  useEffect(() => {
-    if (gameState !== 'playing') return;
-    
-    const interval = setInterval(() => {
-      setHour(prev => {
-        const newHour = prev + 1;
-        if (newHour >= 6) {
-          setGameState('win');
-        }
-        return newHour;
-      });
-    }, 90000);
-    
-    return () => clearInterval(interval);
-  }, [gameState]);
-
-  useEffect(() => {
-    if (gameState !== 'playing') return;
-    
-    const interval = setInterval(() => {
-      const moveChance = currentView === 'office' ? 0.3 : 0.1;
-      
-      setAnimatronicPositions(prev => {
-        const updated = { ...prev };
-        const characters = ['char1', 'char2', 'char3', 'char4'];
-        
-        characters.forEach(char => {
-          if (Math.random() < moveChance) {
-            const currentPos = updated[char];
-            
-            if (currentPos === 'CAM5') {
-              if (!leftDoorClosed && currentView === 'office' && Math.random() < 0.6) {
-                triggerJumpscare(char);
-                return;
-              }
-              updated[char] = leftDoorClosed ? 'CAM1' : 'CAM5';
-            } else if (currentPos === 'CAM6') {
-              if (!rightDoorClosed && currentView === 'office' && Math.random() < 0.6) {
-                triggerJumpscare(char);
-                return;
-              }
-              updated[char] = rightDoorClosed ? 'CAM1' : 'CAM6';
-            } else {
-              const possibleMoves = ['CAM1', 'CAM2', 'CAM3', 'CAM4', 'CAM5', 'CAM6'];
-              const validMoves = possibleMoves.filter(cam => cam !== currentPos);
-              updated[char] = validMoves[Math.floor(Math.random() * validMoves.length)];
-              playSound('move');
-            }
-          }
-        });
-        
-        return updated;
-      });
-    }, 6000);
-    
-    return () => clearInterval(interval);
-  }, [gameState, currentView, leftDoorClosed, rightDoorClosed]);
-
-  const triggerJumpscare = (character) => {
-    playJumpscareSound();
-    setJumpscareCharacter(character);
-    setGameState('jumpscare');
-    
-    setTimeout(() => {
-      setShowTryAgain(true);
-    }, 2000);
-  };
-
-  const startGame = () => {
-    setGameState('playing');
-    setPower(100);
-    setHour(0);
-    setCurrentView('office');
-    setLeftDoorClosed(false);
-    setRightDoorClosed(false);
-    setLeftLightOn(false);
-    setRightLightOn(false);
-    setShowTryAgain(false);
-    setJumpscareCharacter(null);
-    setAnimatronicPositions({
-      char1: 'CAM1',
-      char2: 'CAM1',
-      char3: 'CAM3',
-      char4: 'CAM2'
-    });
-  };
-
-  const toggleCamera = () => {
-    if (currentView === 'office') {
-      setCurrentView('camera');
-      playSound('camera');
-    } else {
-      setCurrentView('office');
-      playSound('camera');
-    }
-  };
-
-  const toggleDoor = (side) => {
-    playSound('door');
-    if (side === 'left') {
-      setLeftDoorClosed(!leftDoorClosed);
-    } else {
-      setRightDoorClosed(!rightDoorClosed);
-    }
-  };
-
-  const toggleLight = (side) => {
-    playSound('light');
-    if (side === 'left') {
-      setLeftLightOn(!leftLightOn);
-    } else {
-      setRightLightOn(!rightLightOn);
-    }
-  };
-
-  const getOfficeImage = () => {
-    if (leftLightOn && rightLightOn && images.officeBoth) return images.officeBoth;
-    if (leftLightOn && images.officeLeft) return images.officeLeft;
-    if (rightLightOn && images.officeRight) return images.officeRight;
-    return images.officeBoth || images.officeLeft || images.officeRight;
-  };
-
-  const getJumpscareImage = () => {
-    switch(jumpscareCharacter) {
-      case 'char1': return images.jumpscare1;
-      case 'char2': return images.jumpscare2;
-      case 'char3': return images.jumpscare3;
-      case 'char4': return images.jumpscare4;
-      default: return images.jumpscare1;
-    }
-  };
-
-  // Upload screen
-  if (gameState === 'upload') {
-    return (
-      <div className="w-full min-h-screen bg-gradient-to-b from-gray-900 to-black p-6 overflow-y-auto">
-        <div className="max-w-6xl mx-auto">
-          <h1 className="text-5xl font-bold text-red-600 mb-2 text-center">NIGHT SHIFT</h1>
-          <p className="text-gray-400 mb-8 text-center text-lg">Upload Your Images (Drag & Drop)</p>
-          
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {/* Office Images */}
-            <div className="bg-gray-800 rounded-lg p-4">
-              <h3 className="text-white font-bold mb-2">Office - Left Light</h3>
-              <input
-                type="file"
-                accept="image/*"
-                onChange={(e) => handleImageUpload('officeLeft', e.target.files[0])}
-                className="hidden"
-                id="officeLeft"
-              />
-              <label htmlFor="officeLeft" className="cursor-pointer block">
-                {images.officeLeft ? (
-                  <img src={images.officeLeft} alt="Office Left" className="w-full h-32 object-cover rounded mb-2" />
-                ) : (
-                  <div className="w-full h-32 bg-gray-700 rounded mb-2 flex items-center justify-center">
-                    <Upload className="text-gray-500" size={32} />
-                  </div>
-                )}
-                <p className="text-gray-400 text-sm text-center">Click to upload</p>
-              </label>
-            </div>
-
-            <div className="bg-gray-800 rounded-lg p-4">
-              <h3 className="text-white font-bold mb-2">Office - Right Light</h3>
-              <input
-                type="file"
-                accept="image/*"
-                onChange={(e) => handleImageUpload('officeRight', e.target.files[0])}
-                className="hidden"
-                id="officeRight"
-              />
-              <label htmlFor="officeRight" className="cursor-pointer block">
-                {images.officeRight ? (
-                  <img src={images.officeRight} alt="Office Right" className="w-full h-32 object-cover rounded mb-2" />
-                ) : (
-                  <div className="w-full h-32 bg-gray-700 rounded mb-2 flex items-center justify-center">
-                    <Upload className="text-gray-500" size={32} />
-                  </div>
-                )}
-                <p className="text-gray-400 text-sm text-center">Click to upload</p>
-              </label>
-            </div>
-
-            <div className="bg-gray-800 rounded-lg p-4">
-              <h3 className="text-white font-bold mb-2">Office - Both Lights</h3>
-              <input
-                type="file"
-                accept="image/*"
-                onChange={(e) => handleImageUpload('officeBoth', e.target.files[0])}
-                className="hidden"
-                id="officeBoth"
-              />
-              <label htmlFor="officeBoth" className="cursor-pointer block">
-                {images.officeBoth ? (
-                  <img src={images.officeBoth} alt="Office Both" className="w-full h-32 object-cover rounded mb-2" />
-                ) : (
-                  <div className="w-full h-32 bg-gray-700 rounded mb-2 flex items-center justify-center">
-                    <Upload className="text-gray-500" size={32} />
-                  </div>
-                )}
-                <p className="text-gray-400 text-sm text-center">Click to upload</p>
-              </label>
-            </div>
-
-            {/* Jumpscare Images */}
-            {[1, 2, 3, 4].map(num => (
-              <div key={num} className="bg-gray-800 rounded-lg p-4">
-                <h3 className="text-white font-bold mb-2">Jumpscare {num}</h3>
-                <input
-                  type="file"
-                  accept="image/*"
-                  onChange={(e) => handleImageUpload(`jumpscare${num}`, e.target.files[0])}
-                  className="hidden"
-                  id={`jumpscare${num}`}
-                />
-                <label htmlFor={`jumpscare${num}`} className="cursor-pointer block">
-                  {images[`jumpscare${num}`] ? (
-                    <img src={images[`jumpscare${num}`]} alt={`Jumpscare ${num}`} className="w-full h-32 object-cover rounded mb-2" />
-                  ) : (
-                    <div className="w-full h-32 bg-gray-700 rounded mb-2 flex items-center justify-center">
-                      <Upload className="text-gray-500" size={32} />
-                    </div>
-                  )}
-                  <p className="text-gray-400 text-sm text-center">Click to upload</p>
-                </label>
-              </div>
-            ))}
-
-            {/* Camera Images */}
-            {[1, 2, 3].map(num => (
-              <div key={num} className="bg-gray-800 rounded-lg p-4">
-                <h3 className="text-white font-bold mb-2">CAM{num} - {cameras[`CAM${num}`].name} (Empty)</h3>
-                <input
-                  type="file"
-                  accept="image/*"
-                  onChange={(e) => handleImageUpload(`cam${num}`, e.target.files[0])}
-                  className="hidden"
-                  id={`cam${num}`}
-                />
-                <label htmlFor={`cam${num}`} className="cursor-pointer block">
-                  {images[`cam${num}`] ? (
-                    <img src={images[`cam${num}`]} alt={`Camera ${num}`} className="w-full h-32 object-cover rounded mb-2" />
-                  ) : (
-                    <div className="w-full h-32 bg-gray-700 rounded mb-2 flex items-center justify-center">
-                      <Upload className="text-gray-500" size={32} />
-                    </div>
-                  )}
-                  <p className="text-gray-400 text-sm text-center">Click to upload</p>
-                </label>
-              </div>
-            ))}
-
-            {/* Animatronic in Camera Images */}
-            <div className="col-span-full">
-              <h2 className="text-2xl font-bold text-red-500 mb-4 mt-6">Animatronics in Cameras</h2>
-            </div>
-
-            <div className="bg-gray-700 rounded-lg p-4">
-              <h3 className="text-xl font-bold text-yellow-400 mb-4">Animatronic 1 (in Left Hall)</h3>
-              <input
-                type="file"
-                accept="image/*"
-                onChange={(e) => handleImageUpload('char1_cam1', e.target.files[0])}
-                className="hidden"
-                id="char1_cam1"
-              />
-              <label htmlFor="char1_cam1" className="cursor-pointer block">
-                {images.char1_cam1 ? (
-                  <img src={images.char1_cam1} alt="Char 1 CAM1" className="w-full h-40 object-cover rounded mb-2" />
-                ) : (
-                  <div className="w-full h-40 bg-gray-800 rounded mb-2 flex items-center justify-center">
-                    <Upload className="text-gray-500" size={32} />
-                  </div>
-                )}
-                <p className="text-gray-400 text-sm text-center">Click to upload</p>
-              </label>
-            </div>
-
-            <div className="bg-gray-700 rounded-lg p-4">
-              <h3 className="text-xl font-bold text-yellow-400 mb-4">Animatronic 2 (in Left Hall)</h3>
-              <input
-                type="file"
-                accept="image/*"
-                onChange={(e) => handleImageUpload('char2_cam1', e.target.files[0])}
-                className="hidden"
-                id="char2_cam1"
-              />
-              <label htmlFor="char2_cam1" className="cursor-pointer block">
-                {images.char2_cam1 ? (
-                  <img src={images.char2_cam1} alt="Char 2 CAM1" className="w-full h-40 object-cover rounded mb-2" />
-                ) : (
-                  <div className="w-full h-40 bg-gray-800 rounded mb-2 flex items-center justify-center">
-                    <Upload className="text-gray-500" size={32} />
-                  </div>
-                )}
-                <p className="text-gray-400 text-sm text-center">Click to upload</p>
-              </label>
-            </div>
-
-            <div className="bg-gray-700 rounded-lg p-4">
-              <h3 className="text-xl font-bold text-yellow-400 mb-4">Animatronic 3 (in Left Corner)</h3>
-              <input
-                type="file"
-                accept="image/*"
-                onChange={(e) => handleImageUpload('char3_cam3', e.target.files[0])}
-                className="hidden"
-                id="char3_cam3"
-              />
-              <label htmlFor="char3_cam3" className="cursor-pointer block">
-                {images.char3_cam3 ? (
-                  <img src={images.char3_cam3} alt="Char 3 CAM3" className="w-full h-40 object-cover rounded mb-2" />
-                ) : (
-                  <div className="w-full h-40 bg-gray-800 rounded mb-2 flex items-center justify-center">
-                    <Upload className="text-gray-500" size={32} />
-                  </div>
-                )}
-                <p className="text-gray-400 text-sm text-center">Click to upload</p>
-              </label>
-            </div>
-
-            <div className="bg-gray-700 rounded-lg p-4">
-              <h3 className="text-xl font-bold text-yellow-400 mb-4">Animatronic 4 (Doesn't Show in Cameras)</h3>
-              <div className="w-full h-40 bg-gray-800 rounded flex items-center justify-center">
-                <p className="text-gray-500 text-center">This character is invisible<br/>and never appears in cameras!</p>
-              </div>
-            </div>
-          </div>
-
-          <div className="mt-8 text-center">
-            <button
-              onClick={() => setGameState('menu')}
-              className="bg-red-600 hover:bg-red-700 text-white px-12 py-4 rounded-lg text-2xl font-bold"
-            >
-              START GAME →
-            </button>
-            <p className="text-gray-500 mt-4">You can skip images - placeholders will be used</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Menu
-  if (gameState === 'menu') {
-    return (
-      <div className="w-full h-screen bg-black flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-6xl font-bold text-red-600 mb-4 animate-pulse">
-            NIGHT SHIFT
-          </h1>
-          <p className="text-gray-400 mb-8 text-xl">Survive Until 6 AM</p>
-          <div className="space-y-4">
-            <button
-              onClick={startGame}
-              className="block mx-auto bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded text-2xl font-bold"
-            >
-              START NIGHT
-            </button>
-            <button
-              onClick={() => setGameState('upload')}
-              className="block mx-auto bg-gray-700 hover:bg-gray-600 text-white px-8 py-3 rounded text-lg"
-            >
-              Change Images
-            </button>
-          </div>
-          <div className="mt-8">
-            <button
-              onClick={() => setSoundEnabled(!soundEnabled)}
-              className="text-gray-400 hover:text-white"
-            >
-              {soundEnabled ? <Volume2 size={32} /> : <VolumeX size={32} />}
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Jumpscare
-  if (gameState === 'jumpscare') {
-    const jumpImg = getJumpscareImage();
-    return (
-      <div className="w-full h-screen bg-black flex items-center justify-center relative overflow-hidden">
-        {jumpImg ? (
-          <img 
-            src={jumpImg}
-            alt="Jumpscare" 
-            className="absolute inset-0 w-full h-full object-contain animate-pulse"
-            style={{
-              filter: 'blur(2px)',
-              imageRendering: 'pixelated',
-              animation: 'shake 0.1s infinite'
-            }}
-          />
-        ) : (
-          <div className="text-9xl animate-pulse">💀</div>
-        )}
-        {showTryAgain && (
-          <>
-            <div 
-              className="absolute inset-0 bg-red-600"
-              style={{ animation: 'fadeIn 1s ease-in' }}
-            />
-            <div className="relative z-20 text-center">
-              <h1 className="text-6xl font-bold text-white mb-8">
-                TRY AGAIN
-              </h1>
-              <button
-                onClick={() => {
-                  setShowTryAgain(false);
-                  setGameState('menu');
-                }}
-                className="bg-white text-black px-8 py-4 rounded text-xl font-bold hover:bg-gray-200"
-              >
-                Back to Menu
-              </button>
-            </div>
-          </>
-        )}
-        <style>{`
-          @keyframes shake {
-            0%, 100% { transform: translate(0, 0) rotate(0deg); }
-            25% { transform: translate(-5px, 5px) rotate(-2deg); }
-            50% { transform: translate(5px, -5px) rotate(2deg); }
-            75% { transform: translate(-5px, -5px) rotate(-1deg); }
-          }
-          @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-          }
-        `}</style>
-      </div>
-    );
-  }
-
-  // Game over
-  if (gameState === 'gameover') {
-    return (
-      <div className="w-full h-screen bg-black flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-5xl font-bold text-red-600 mb-4">POWER OUT</h1>
-          <p className="text-gray-400 mb-8 text-xl">You ran out of power...</p>
-          <button
-            onClick={() => setGameState('menu')}
-            className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded text-xl"
-          >
-            Main Menu
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  // Win
-  if (gameState === 'win') {
-    return (
-      <div className="w-full h-screen bg-black flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-5xl font-bold text-green-500 mb-4">6 AM</h1>
-          <p className="text-gray-400 mb-8 text-xl">You survived the night!</p>
-          <button
-            onClick={() => setGameState('menu')}
-            className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded text-xl"
-          >
-            Main Menu
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  // Office view
-  if (currentView === 'office') {
-    const officeImg = getOfficeImage();
-    return (
-      <div className="w-full h-screen bg-black relative overflow-hidden">
-        {officeImg ? (
-          <img 
-            src={officeImg}
-            alt="Office" 
-            className="absolute inset-0 w-full h-full object-cover"
-          />
-        ) : (
-          <div className="absolute inset-0 bg-gradient-to-b from-gray-800 to-black" />
-        )}
-
-        <div className="absolute top-4 left-4 text-white z-10">
-          <div className="bg-black bg-opacity-75 p-3 rounded">
-            <div className="flex items-center gap-2 mb-2">
-              <Power size={20} />
-              <span className="font-mono text-xl">{Math.floor(power)}%</span>
-            </div>
-            <div className="text-sm text-gray-400">
-              {hour} AM - {6 - hour} hours left
-            </div>
-          </div>
-        </div>
-
-        <div className="absolute left-4 top-1/2 transform -translate-y-1/2 z-10 space-y-4">
-          <button
-            onClick={() => toggleLight('left')}
-            className={`px-4 py-3 rounded font-bold flex items-center gap-2 ${
-              leftLightOn ? 'bg-yellow-500 text-black' : 'bg-gray-700 text-white'
-            }`}
-          >
-            <Lightbulb size={20} />
-            Light
-          </button>
-          <button
-            onClick={() => toggleDoor('left')}
-            className={`px-4 py-3 rounded font-bold ${
-              leftDoorClosed ? 'bg-red-600 text-white' : 'bg-green-600 text-white'
-            }`}
-          >
-            Door<br/>{leftDoorClosed ? 'CLOSED' : 'OPEN'}
-          </button>
-        </div>
-
-        <div className="absolute right-4 top-1/2 transform -translate-y-1/2 z-10 space-y-4">
-          <button
-            onClick={() => toggleLight('right')}
-            className={`px-4 py-3 rounded font-bold flex items-center gap-2 ${
-              rightLightOn ? 'bg-yellow-500 text-black' : 'bg-gray-700 text-white'
-            }`}
-          >
-            <Lightbulb size={20} />
-            Light
-          </button>
-          <button
-            onClick={() => toggleDoor('right')}
-            className={`px-4 py-3 rounded font-bold ${
-              rightDoorClosed ? 'bg-red-600 text-white' : 'bg-green-600 text-white'
-            }`}
-          >
-            Door<br/>{rightDoorClosed ? 'CLOSED' : 'OPEN'}
-          </button>
-        </div>
-
-        <button
-          onClick={toggleCamera}
-          className="absolute bottom-8 left-1/2 transform -translate-x-1/2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-lg text-xl font-bold flex items-center gap-2 z-10"
-        >
-          <Camera size={24} />
-          CAMERAS
-        </button>
-      </div>
-    );
-  }
-
-  // Camera view
-  const animatronicsInView = Object.entries(animatronicPositions)
-    .filter(([char, pos]) => pos === selectedCamera)
-    .map(([char]) => char);
-
-  return (
-    <div className="w-full h-screen bg-black relative">
-      <div className="absolute inset-0 flex items-center justify-center p-8">
-        <div className="w-full max-w-4xl">
-          <div className="bg-gray-900 border-4 border-green-500 rounded-lg overflow-hidden aspect-video relative">
-            {/* Base camera background */}
-            {images[`cam${selectedCamera.slice(-1)}`] ? (
-              <img 
-                src={images[`cam${selectedCamera.slice(-1)}`]}
-                alt={`Camera ${selectedCamera}`}
-                className="absolute inset-0 w-full h-full object-cover"
-              />
-            ) : (
-              <div className="absolute inset-0 bg-gray-800" />
-            )}
-
-            {/* Show animatronic image if present */}
-            {animatronicsInView.length > 0 && animatronicsInView.map(char => {
-              const animImage = images[`${char}_${selectedCamera.toLowerCase()}`];
-              return animImage ? (
-                <img 
-                  key={char}
-                  src={animImage}
-                  alt={`${char} in ${selectedCamera}`}
-                  className="absolute inset-0 w-full h-full object-cover"
-                />
-              ) : null;
-            })}
-
-            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-green-500 to-transparent opacity-10 animate-pulse pointer-events-none" />
-            
-            <div className="absolute top-4 left-4 text-green-400 font-mono z-20">
-              {selectedCamera}
-            </div>
-            <div className="absolute top-4 right-4 text-green-400 font-mono animate-pulse z-20">
-              REC ●
-            </div>
-            
-            {animatronicsInView.length > 0 && (
-              <div className="absolute bottom-4 left-4 right-4 text-center z-20">
-                <p className="text-red-500 text-xl font-bold animate-pulse">
-                  ⚠️ MOVEMENT DETECTED
-                </p>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div className="absolute bottom-8 left-8 right-8">
-        <div className="grid grid-cols-3 gap-4">
-          {Object.keys(cameras).map(cam => {
-            const count = Object.values(animatronicPositions).filter(pos => pos === cam).length;
-            return (
-              <button
-                key={cam}
-                onClick={() => {
-                  setSelectedCamera(cam);
-                  playSound('camera');
-                }}
-                className={`p-4 rounded ${
-                  selectedCamera === cam
-                    ? 'bg-green-600 text-white'
-                    : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
-                } ${count > 0 ? 'border-2 border-red-500' : ''}`}
-              >
-                <div className="font-bold">{cam}</div>
-                {count > 0 && <div className="text-xs text-red-400 mt-1">{count} here</div>}
-              </button>
-            );
-          })}
-        </div>
-      </div>
-
-      <button
-        onClick={toggleCamera}
-        className="absolute top-4 right-4 bg-red-600 hover:bg-red-700 text-white p-3 rounded-full"
-      >
-        <X size={24} />
-      </button>
-
-      <div className="absolute top-4 left-4 text-white">
-        <div className="bg-black bg-opacity-75 p-3 rounded">
-          <div className="flex items-center gap-2 mb-2">
-            <Power size={20} />
-            <span className="font-mono text-xl">{Math.floor(power)}%</span>
-          </div>
-          <div className="text-sm text-gray-400">{hour} AM</div>
-        </div>
-      </div>
-    </div>
-  );
-}