- {/* Left side - Cables */}
-
-
CÂBLES
- {connections.map((conn, index) => (
-
-
-
- {conn.terminal && (
-
- )}
-
-
- {conn.terminal || '?'}
-
+ {/* PHASE 0: Saisie des 6 mots */}
+ {!wordsUnlocked && (
+
+
+ SAISISSEZ LES 6 MOTS
+
+
+
+ Owen vous dicte les 6 mots présents dans la grille.
+ Saisissez-les ci-dessous pour débloquer la grille.
+
+
+
+ {inputWords.map((word, index) => (
+
+
+ {
+ const newWords = [...inputWords];
+ newWords[index] = e.target.value.toUpperCase();
+ setInputWords(newWords);
+ }}
+ className="w-full px-4 py-3 bg-gray-900 border-2 border-blue-600 text-blue-300 text-center text-xl font-bold uppercase focus:outline-none focus:border-blue-400"
+ placeholder="______"
+ />
))}
- {/* Right side - Terminals */}
-
-
TERMINAUX
- {terminals.map((terminal) => (
+
+
+
+
+ )}
+
+ {/* PHASE 1: Recherche dans la grille */}
+ {wordsUnlocked && !allWordsFound && (
+ <>
+ {/* Progress */}
+
+
+ Mots trouvés :
+
+ {foundWords.filter(w => w.found).length} / {foundWords.length}
+
+
+
+
+
+
+ GRILLE DE LETTRES
+
+
+
+
+ {grid.map((row, rowIndex) => (
+
+ {row.map((letter, colIndex) => (
+
+ ))}
+
+ ))}
+
+
+
+
- ))}
+
+
+
+
+ {foundWords.map((wordObj, index) => (
+
+
+ {wordObj.found ? '✓' : '○'} {wordObj.word}
+
+ {wordObj.found && (
+
+ Couleur: {wordObj.color}
+
+ )}
+
+ ))}
+
+
+
+ )}
+
+ {/* PHASE 2: Ordre des couleurs et code final */}
+ {allWordsFound && !solved && (
+
+
+ ÉTAPE 1 : ORDONNEZ LES COULEURS
+
+
+ {/* Available colors - NO LETTERS SHOWN */}
+
+
Couleurs disponibles :
+
+ {foundWords.map((wordObj, index) => (
+
+ ))}
+
+
+
+ {/* Current order - NO LETTERS SHOWN */}
+
+
Ordre actuel des couleurs :
+
+ {colorOrder.length === 0 ? (
+
Owen vous dicte l'ordre des couleurs...
+ ) : (
+ colorOrder.map((color, index) => {
+ const wordObj = foundWords.find(w => w.color === color);
+ return (
+
+ );
+ })
+ )}
+
+
+
+ {/* Code input - Phase 2 step 2 */}
+
+
+ ÉTAPE 2 : ENTREZ LE CODE FINAL
+
+
+ Owen possède la correspondance Couleur → Lettre.
+ Il vous dicte les 6 lettres correspondant à votre ordre de couleurs.
+
+
+
+ setFinalCode(e.target.value.toUpperCase())}
+ className="w-full px-4 py-3 bg-gray-900 border-2 border-yellow-600 text-yellow-400 text-center text-3xl font-bold uppercase focus:outline-none focus:border-yellow-400 placeholder-yellow-700 tracking-widest"
+ placeholder="_ _ _ _ _ _"
+ maxLength={6}
+ />
+
-
- {!solved && (
- )}
+
+ )}
- {solved && (
-
-
- ⚡ CIRCUIT ACTIVÉ! ⚡
-
-
-
Tous les câbles sont correctement connectés!
-
Séquence: B-D-A-E-C
-
Code révélé: CABLES-BDAEC
-
-
-
- TRANSMETTRE LE CODE →
-
+ {/* Success message */}
+ {solved && (
+
+
+ 🎉 CODE DÉCOUVERT ! 🎉
+
+
+
Tous les mots ont été trouvés et le code validé !
+
+ {colorOrder.map((color, index) => {
+ const wordObj = foundWords.find(w => w.color === color);
+ return (
+
+
{color}
+
{wordObj?.letter}
+
+ );
+ })}
+
+ Code final : {finalCode}
+
+
La collaboration parfaite révèle tous les secrets...
- )}
-
+
+ )}
-
- ⚡ "L'électricité suit toujours le bon chemin..."
+
+ 🔍 "Seuls ensemble vous découvrirez la vérité..."
diff --git a/resources/js/pages/rooms/room-7.tsx b/resources/js/pages/rooms/room-7.tsx
index f3c971d..f4cc729 100644
--- a/resources/js/pages/rooms/room-7.tsx
+++ b/resources/js/pages/rooms/room-7.tsx
@@ -1,101 +1,116 @@
import { Head, Link } from '@inertiajs/react';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
import ChatPanel from '@/components/ChatPanel';
import CompleteRoomButton from '@/components/CompleteRoomButton';
import { Message } from '@/types';
-// 6x6 grid with rainbow colored letters spelling SOLEIL
-const grid = [
- [
- { letter: 'A', color: '' },
- { letter: 'B', color: '' },
- { letter: 'S', color: 'text-red-500' }, // Rouge - S
- { letter: 'D', color: '' },
- { letter: 'E', color: '' },
- { letter: 'F', color: '' }
- ],
- [
- { letter: 'G', color: '' },
- { letter: 'H', color: '' },
- { letter: 'I', color: '' },
- { letter: 'O', color: 'text-orange-500' }, // Orange - O
- { letter: 'K', color: '' },
- { letter: 'M', color: '' }
- ],
- [
- { letter: 'N', color: '' },
- { letter: 'P', color: '' },
- { letter: 'Q', color: '' },
- { letter: 'R', color: '' },
- { letter: 'L', color: 'text-yellow-400' }, // Jaune - L
- { letter: 'T', color: '' }
- ],
- [
- { letter: 'U', color: '' },
- { letter: 'E', color: 'text-green-500' }, // Vert - E
- { letter: 'W', color: '' },
- { letter: 'X', color: '' },
- { letter: 'Y', color: '' },
- { letter: 'Z', color: '' }
- ],
- [
- { letter: 'A', color: '' },
- { letter: 'B', color: '' },
- { letter: 'I', color: 'text-blue-500' }, // Bleu - I
- { letter: 'D', color: '' },
- { letter: 'E', color: '' },
- { letter: 'F', color: '' }
- ],
- [
- { letter: 'G', color: '' },
- { letter: 'H', color: '' },
- { letter: 'J', color: '' },
- { letter: 'L', color: 'text-purple-500' }, // Violet - L
- { letter: 'M', color: '' },
- { letter: 'N', color: '' }
- ]
+const colors = [
+ { name: 'red', bg: 'bg-red-600', active: 'bg-red-400', label: 'ROUGE' },
+ { name: 'blue', bg: 'bg-blue-600', active: 'bg-blue-400', label: 'BLEU' },
+ { name: 'green', bg: 'bg-green-600', active: 'bg-green-400', label: 'VERT' },
+ { name: 'yellow', bg: 'bg-yellow-500', active: 'bg-yellow-300', label: 'JAUNE' },
];
-const rainbowOrder = ['Rouge', 'Orange', 'Jaune', 'Vert', 'Bleu', 'Violet'];
-
export default function Room7({ messages, sessionId, emojiOnly = false }: { messages: Message[]; sessionId: string; emojiOnly?: boolean }) {
+ const [sequence, setSequence] = useState
([]);
+ const [playerSequence, setPlayerSequence] = useState([]);
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [activeButton, setActiveButton] = useState(null);
+ const [gameStarted, setGameStarted] = useState(false);
const [solved, setSolved] = useState(false);
- const [userInput, setUserInput] = useState('');
+ const [failed, setFailed] = useState(false);
+ const [owenCodeRevealed, setOwenCodeRevealed] = useState(false);
+ const [wilsonCodeInput, setWilsonCodeInput] = useState('');
+
+ // Séquence unique de 8 signaux
+ const SEQUENCE_LENGTH = 8;
+ const CORRECT_CODE = 'SIMON-1978';
+
+ const generateSequence = (length: number) => {
+ const newSequence = [];
+ for (let i = 0; i < length; i++) {
+ newSequence.push(Math.floor(Math.random() * 4));
+ }
+ return newSequence;
+ };
+
+ const playSequence = async (seq: number[]) => {
+ setIsPlaying(true);
+ setPlayerSequence([]);
+
+ await new Promise(resolve => setTimeout(resolve, 1000));
+
+ for (const color of seq) {
+ setActiveButton(color);
+ await new Promise(resolve => setTimeout(resolve, 800));
+ setActiveButton(null);
+ await new Promise(resolve => setTimeout(resolve, 400));
+ }
+
+ setIsPlaying(false);
+ };
+
+ const startGame = () => {
+ const newSequence = generateSequence(SEQUENCE_LENGTH);
+ setSequence(newSequence);
+ setGameStarted(true);
+ setFailed(false);
+ setPlayerSequence([]);
+ playSequence(newSequence);
+ };
+
+ const handleButtonClick = (index: number) => {
+ if (isPlaying || solved || !gameStarted) return;
+
+ const newPlayerSequence = [...playerSequence, index];
+ setPlayerSequence(newPlayerSequence);
- const handleSubmit = (e: React.FormEvent) => {
- e.preventDefault();
- if (userInput.toUpperCase() === 'SOLEIL') {
+ // Flash the button
+ setActiveButton(index);
+ setTimeout(() => setActiveButton(null), 300);
+
+ // Check if player's move is correct
+ if (newPlayerSequence[newPlayerSequence.length - 1] !== sequence[newPlayerSequence.length - 1]) {
+ setFailed(true);
+ setGameStarted(false);
+ setPlayerSequence([]);
+ setTimeout(() => setFailed(false), 2000);
+ return;
+ }
+
+ // Check if sequence is complete
+ if (newPlayerSequence.length === sequence.length) {
+ // Owen a réussi ! Révéler le code
+ setOwenCodeRevealed(true);
+ }
+ };
+
+ const validateWilsonCode = () => {
+ if (wilsonCodeInput.toUpperCase() === CORRECT_CODE) {
setSolved(true);
} else {
- alert('Mot incorrect ! Suivez l\'ordre de l\'arc-en-ciel.');
- setUserInput('');
+ alert('Code incorrect ! Owen doit vous dicter le bon code.');
+ setWilsonCodeInput('');
}
};
return (
<>
-
+
- {/* Rainbow gradient background */}
-
-
- {/* Floating rainbow symbols */}
-
- {Array.from({ length: 12 }, (_, i) => (
+ {/* Pulsing rings background */}
+
+ {Array.from({ length: 5 }, (_, i) => (
- 🌈
-
+ />
))}
@@ -103,9 +118,9 @@ export default function Room7({ messages, sessionId, emojiOnly = false }: { mess