function MainComponent() { const [isAuthenticated, setIsAuthenticated] = React.useState(false); const [password, setPassword] = React.useState(""); const [passwordError, setPasswordError] = React.useState(""); // Game state variables const [board, setBoard] = React.useState([]); const [startPoint, setStartPoint] = React.useState(null); const [endPoint, setEndPoint] = React.useState(null); const [currentWord, setCurrentWord] = React.useState(""); const [words, setWords] = React.useState([]); const [currentOrientation, setCurrentOrientation] = React.useState("horizontal"); const [gameWon, setGameWon] = React.useState(false); const [error, setError] = React.useState(""); const [previewCells, setPreviewCells] = React.useState([]); const [startSide, setStartSide] = React.useState("top"); const [obstacles, setObstacles] = React.useState([]); const [blueSquares, setBlueSquares] = React.useState([]); // Check authentication on component mount React.useEffect(()=>{ const savedAuth = localStorage.getItem("puzzleAuth"); if (savedAuth === "true") { setIsAuthenticated(true); } }, []); // Initialize the game board (only when authenticated) React.useEffect(()=>{ if (isAuthenticated) { initializeGame(); } }, [ isAuthenticated ]); // Update preview when current word changes React.useEffect(()=>{ if (currentWord && words.length >= 0) { updatePreview(); } else { setPreviewCells([]); } }, [ currentWord, words ]); const initializeGame = ()=>{ // Create 30x30 board const newBoard = Array.from({ length: 20 }).fill().map(()=>Array.from({ length: 20 }).fill("")); // Generate random start point on the outside edge const sides = [ "top", "right", "bottom", "left" ]; const selectedStartSide = sides[Math.floor(Math.random() * sides.length)]; let start, end; switch(selectedStartSide){ case "top": start = { row: 0, col: Math.floor(Math.random() * 20) }; end = { row: 19, col: Math.floor(Math.random() * 20) }; break; case "right": start = { row: Math.floor(Math.random() * 20), col: 19 }; end = { row: Math.floor(Math.random() * 20), col: 0 }; break; case "bottom": start = { row: 19, col: Math.floor(Math.random() * 20) }; end = { row: 0, col: Math.floor(Math.random() * 20) }; break; case "left": start = { row: Math.floor(Math.random() * 20), col: 0 }; end = { row: Math.floor(Math.random() * 20), col: 19 }; break; } // Generate obstacles (gray squares) in 2-3 groups const newObstacles = []; const numGroups = Math.random() < 0.5 ? 2 : 3; // Randomly choose 2 or 3 groups for(let group = 0; group < numGroups; group++){ // Pick a random center point for this group let groupCenter; do { groupCenter = { row: Math.floor(Math.random() * 16) + 2, col: Math.floor(Math.random() * 16) + 2 }; }while (groupCenter.row === start.row && groupCenter.col === start.col || groupCenter.row === end.row && groupCenter.col === end.col || newObstacles.some((obs)=>Math.abs(obs.row - groupCenter.row) <= 3 && Math.abs(obs.col - groupCenter.col) <= 3) // Keep groups separated ) // Add 2-3 obstacles around this center point const obstaclesInGroup = Math.floor(Math.random() * 2) + 2; // 2 or 3 obstacles per group for(let i = 0; i < obstaclesInGroup; i++){ let obstaclePos; let attempts = 0; do { // Place obstacles within 2 cells of the group center obstaclePos = { row: groupCenter.row + Math.floor(Math.random() * 5) - 2, col: groupCenter.col + Math.floor(Math.random() * 5) - 2 }; attempts++; }while (attempts < 20 && (obstaclePos.row < 1 || obstaclePos.row > 18 || obstaclePos.col < 1 || obstaclePos.col > 18 || obstaclePos.row === start.row && obstaclePos.col === start.col || obstaclePos.row === end.row && obstaclePos.col === end.col || newObstacles.some((obs)=>obs.row === obstaclePos.row && obs.col === obstaclePos.col))) if (attempts < 20) { newObstacles.push(obstaclePos); } } } // Generate only one blue square that must be enclosed const newBlueSquares = []; let bluePos; do { bluePos = { row: Math.floor(Math.random() * 14) + 3, col: Math.floor(Math.random() * 14) + 3 }; }while (bluePos.row === start.row && bluePos.col === start.col || bluePos.row === end.row && bluePos.col === end.col || newObstacles.some((obs)=>obs.row === bluePos.row && obs.col === bluePos.col)) newBlueSquares.push(bluePos); // Set initial orientation based on start side let initialOrientation; switch(selectedStartSide){ case "top": initialOrientation = "vertical"; // Point down break; case "right": initialOrientation = "horizontal-reverse"; // Point left break; case "bottom": initialOrientation = "vertical-reverse"; // Point up break; case "left": initialOrientation = "horizontal"; // Point right break; } setBoard(newBoard); setStartPoint(start); setEndPoint(end); setStartSide(selectedStartSide); setObstacles(newObstacles); setBlueSquares(newBlueSquares); setWords([]); setCurrentWord(""); setCurrentOrientation(initialOrientation); setGameWon(false); setError(""); setPreviewCells([]); }; const getNextOrientation = (current)=>{ const orientations = [ "horizontal", "vertical", "horizontal-reverse", "vertical-reverse" ]; const currentIndex = orientations.indexOf(current); return orientations[(currentIndex + 1) % 4]; }; const getWordPositions = (word, startPos, orientation)=>{ const positions = []; const { row, col } = startPos; for(let i = 0; i < word.length; i++){ let newRow = row; let newCol = col; switch(orientation){ case "horizontal": newCol = col + i; break; case "vertical": newRow = row + i; break; case "horizontal-reverse": newCol = col - i; break; case "vertical-reverse": newRow = row - i; break; } if (newRow < 0 || newRow >= 20 || newCol < 0 || newCol >= 20) { return null; // Word goes out of bounds } positions.push({ row: newRow, col: newCol, letter: word[i].toUpperCase() }); } return positions; }; const updatePreview = ()=>{ if (!currentWord || words.length === 0) { if (currentWord && words.length === 0) { // First word starts at start point const positions = getWordPositions(currentWord, startPoint, currentOrientation); setPreviewCells(positions || []); } return; } // Get the last letter position of the previous word const lastWord = words[words.length - 1]; const lastLetterPos = lastWord.positions[lastWord.positions.length - 1]; const positions = getWordPositions(currentWord, lastLetterPos, currentOrientation); setPreviewCells(positions || []); }; const validateWord = (word, positions)=>{ if (!positions) return "Word goes out of bounds"; // Check if first letter matches the last letter of previous word (except for first word) if (words.length > 0) { const lastWord = words[words.length - 1]; const lastLetter = lastWord.positions[lastWord.positions.length - 1].letter; if (word[0].toUpperCase() !== lastLetter) { return `Word must start with '${lastLetter}'`; } } // Check for overlapping letters and obstacles for (const pos of positions){ const existingLetter = board[pos.row][pos.col]; // Check if position conflicts with gray obstacles const isObstacle = obstacles.some((obs)=>obs.row === pos.row && obs.col === pos.col); if (isObstacle) { return `Cannot place word through gray obstacle at row ${pos.row}, col ${pos.col}`; } if (existingLetter && existingLetter !== pos.letter) { return `Letter conflict at row ${pos.row}, col ${pos.col}. Expected '${existingLetter}' but got '${pos.letter}'`; } } return null; }; const checkBlueSquareEnclosure = ()=>{ // Check if all blue squares are enclosed by words return blueSquares.every((blueSquare)=>{ const { row, col } = blueSquare; // Check all 8 surrounding positions const surroundingPositions = [ { row: row - 1, col: col - 1 }, { row: row - 1, col }, { row: row - 1, col: col + 1 }, { row, col: col - 1 }, { row, col: col + 1 }, { row: row + 1, col: col - 1 }, { row: row + 1, col }, { row: row + 1, col: col + 1 } ]; // At least 3 out of 8 surrounding positions should have letters const surroundedCount = surroundingPositions.filter((pos)=>{ if (pos.row < 0 || pos.row >= 20 || pos.col < 0 || pos.col >= 20) return true; // Edge counts as surrounded return board[pos.row][pos.col] !== ""; }).length; return surroundedCount >= 3; }); }; const deleteLastWord = ()=>{ if (words.length === 0) { setError("No words to delete"); return; } // Get the word to be deleted const wordToDelete = words[words.length - 1]; // Remove letters from the board const newBoard = [ ...board ]; wordToDelete.positions.forEach((pos)=>{ // Only remove if no other word uses this position const isUsedByOtherWord = words.slice(0, -1).some((word)=>word.positions.some((otherPos)=>otherPos.row === pos.row && otherPos.col === pos.col)); if (!isUsedByOtherWord) { newBoard[pos.row][pos.col] = ""; } }); // Update state setBoard(newBoard); setWords(words.slice(0, -1)); setGameWon(false); setError(""); setPreviewCells([]); // Reset orientation to what it would have been before this word if (words.length === 1) { // If deleting the first word, reset to initial orientation let initialOrientation; switch(startSide){ case "top": initialOrientation = "vertical"; break; case "right": initialOrientation = "horizontal-reverse"; break; case "bottom": initialOrientation = "vertical-reverse"; break; case "left": initialOrientation = "horizontal"; break; } setCurrentOrientation(initialOrientation); } else { // Set orientation to what the next word after the previous word should be const previousWord = words[words.length - 2]; setCurrentOrientation(getNextOrientation(previousWord.orientation)); } }; const placeWord = ()=>{ if (!currentWord.trim()) { setError("Please enter a word"); return; } const word = currentWord.trim().toUpperCase(); let startPos, positions; if (words.length === 0) { // First word starts at start point startPos = startPoint; positions = getWordPositions(word, startPos, currentOrientation); } else { // Subsequent words start at the last letter of the previous word const lastWord = words[words.length - 1]; startPos = lastWord.positions[lastWord.positions.length - 1]; positions = getWordPositions(word, startPos, currentOrientation); } const validationError = validateWord(word, positions); if (validationError) { setError(validationError); return; } // Place the word on the board const newBoard = [ ...board ]; positions.forEach((pos)=>{ newBoard[pos.row][pos.col] = pos.letter; }); // Check if word ends at the end point const lastPosition = positions[positions.length - 1]; const reachedEnd = lastPosition.row === endPoint.row && lastPosition.col === endPoint.col; setBoard(newBoard); setWords([ ...words, { word, positions, orientation: currentOrientation } ]); setCurrentWord(""); setCurrentOrientation(getNextOrientation(currentOrientation)); setError(""); setPreviewCells([]); if (reachedEnd) { // Check if all blue squares are enclosed setTimeout(()=>{ const allBlueSquaresEnclosed = checkBlueSquareEnclosure(); if (allBlueSquaresEnclosed) { setGameWon(true); } else { setError("You reached the end, but not all blue squares are enclosed by words!"); } }, 100); } }; const handleKeyPress = (e)=>{ if (e.key === "Enter") { placeWord(); } }; const getCellStyle = (row, col)=>{ const isStart = startPoint && startPoint.row === row && startPoint.col === col; const isEnd = endPoint && endPoint.row === row && endPoint.col === col; const isPreview = previewCells.some((cell)=>cell && cell.row === row && cell.col === col); const isObstacle = obstacles.some((obs)=>obs.row === row && obs.col === col); const isBlueSquare = blueSquares.some((blue)=>blue.row === row && blue.col === col); let backgroundColor = "#f8f9fa"; let color = "#333"; if (isStart) backgroundColor = "#28a745"; else if (isEnd) backgroundColor = "#dc3545"; else if (isObstacle) { backgroundColor = "#6c757d"; color = "#fff"; } else if (isBlueSquare) { backgroundColor = "#007bff"; color = "#fff"; } else if (isPreview) { backgroundColor = "#ffeaa7"; color = "#2d3436"; } return { width: "20px", height: "20px", border: "1px solid #dee2e6", backgroundColor, color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "10px", fontWeight: "bold" }; }; const getOrientationDisplay = (orientation)=>{ switch(orientation){ case "horizontal": return "→"; case "vertical": return "↓"; case "horizontal-reverse": return "←"; case "vertical-reverse": return "↑"; default: return "→"; } }; const handlePasswordSubmit = (e)=>{ e.preventDefault(); const correctPassword = "Meander55"; // Updated password if (password === correctPassword) { setIsAuthenticated(true); localStorage.setItem("puzzleAuth", "true"); setPasswordError(""); } else { setPasswordError("Incorrect password. Please try again."); setPassword(""); } }; const handleLogout = ()=>{ setIsAuthenticated(false); localStorage.removeItem("puzzleAuth"); setPassword(""); setPasswordError(""); }; // Login form if (!isAuthenticated) { return /*#__PURE__*/ React.createElement("div", { style: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "#f8f9fa", fontFamily: "Arial, sans-serif" }, __source: { fileName: "", lineNumber: 517, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: "white", padding: "40px", borderRadius: "10px", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", width: "100%", maxWidth: "400px" }, __source: { fileName: "", lineNumber: 527, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { style: { textAlign: "center", color: "#333", marginBottom: "30px", fontSize: "28px" }, __source: { fileName: "", lineNumber: 537, columnNumber: 11 }, __self: this }, "Word Puzzle Game"), /*#__PURE__*/ React.createElement("form", { onSubmit: handlePasswordSubmit, __source: { fileName: "", lineNumber: 548, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "20px" }, __source: { fileName: "", lineNumber: 549, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { style: { display: "block", marginBottom: "8px", color: "#555", fontSize: "14px", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 550, columnNumber: 15 }, __self: this }, "Enter Password:"), /*#__PURE__*/ React.createElement("input", { type: "password", value: password, onChange: (e)=>setPassword(e.target.value), style: { width: "100%", padding: "12px", fontSize: "16px", border: "2px solid #dee2e6", borderRadius: "5px", boxSizing: "border-box" }, placeholder: "Password", required: true, __source: { fileName: "", lineNumber: 561, columnNumber: 15 }, __self: this })), passwordError && /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: "#f8d7da", color: "#721c24", padding: "10px", borderRadius: "5px", marginBottom: "20px", fontSize: "14px" }, __source: { fileName: "", lineNumber: 579, columnNumber: 15 }, __self: this }, passwordError), /*#__PURE__*/ React.createElement("button", { type: "submit", style: { width: "100%", padding: "12px", backgroundColor: "#007bff", color: "white", border: "none", borderRadius: "5px", fontSize: "16px", cursor: "pointer", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 593, columnNumber: 13 }, __self: this }, "Enter Game")))); } return /*#__PURE__*/ React.createElement("div", { style: { padding: "20px", fontFamily: "Arial, sans-serif" }, __source: { fileName: "", lineNumber: 616, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "20px", textAlign: "center" }, __source: { fileName: "", lineNumber: 617, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "10px" }, __source: { fileName: "", lineNumber: 618, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { style: { color: "#333", margin: "0" }, __source: { fileName: "", lineNumber: 626, columnNumber: 11 }, __self: this }, "joshua.hinojosa@gmail.com 956-532-5807"), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, __source: { fileName: "", lineNumber: 629, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://docs.google.com/presentation/d/1GIKH0FmsL_297Ozwd2w444KI5Ka9NNet/export?format=pptx", download: "Game_Description.pptx", style: { padding: "6px 12px", backgroundColor: "#28a745", color: "white", textDecoration: "none", borderRadius: "5px", fontSize: "12px", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 630, columnNumber: 13 }, __self: this }, "📥 Game Description"), /*#__PURE__*/ React.createElement("a", { href: "https://docs.google.com/presentation/d/1M2EWD87SN3A6xtigrpYsDye-w5ZbCQW2/export?format=pptx", download: "Game_Potential_and_Marketing.pptx", style: { padding: "6px 12px", backgroundColor: "#007bff", color: "white", textDecoration: "none", borderRadius: "5px", fontSize: "12px", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 645, columnNumber: 13 }, __self: this }, "📥 Game Potential and Marketing"), /*#__PURE__*/ React.createElement("button", { onClick: handleLogout, style: { padding: "8px 16px", backgroundColor: "#6c757d", color: "white", border: "none", borderRadius: "5px", cursor: "pointer", fontSize: "12px" }, __source: { fileName: "", lineNumber: 660, columnNumber: 13 }, __self: this }, "Logout"))), /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "20px", textAlign: "center" }, __source: { fileName: "", lineNumber: 677, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { style: { color: "#333", marginBottom: "10px" }, __source: { fileName: "", lineNumber: 678, columnNumber: 11 }, __self: this }, "Word Puzzle Game"), /*#__PURE__*/ React.createElement("p", { style: { color: "#666", marginBottom: "15px" }, __source: { fileName: "", lineNumber: 681, columnNumber: 11 }, __self: this }, "Build a path of words from", " ", /*#__PURE__*/ React.createElement("span", { style: { color: "#28a745", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 683, columnNumber: 13 }, __self: this }, "start"), " ", "to ", /*#__PURE__*/ React.createElement("span", { style: { color: "#dc3545", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 684, columnNumber: 16 }, __self: this }, "end"), "! Avoid", " ", /*#__PURE__*/ React.createElement("span", { style: { color: "#6c757d", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 686, columnNumber: 13 }, __self: this }, "gray obstacles"), " ", "and enclose all", " ", /*#__PURE__*/ React.createElement("span", { style: { color: "#007bff", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 690, columnNumber: 13 }, __self: this }, "blue squares"), "!"), gameWon ? /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: "#d4edda", color: "#155724", padding: "15px", borderRadius: "5px", marginBottom: "15px" }, __source: { fileName: "", lineNumber: 697, columnNumber: 13 }, __self: this }, "🎉 Congratulations! You've reached the end point and enclosed all blue squares!") : /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "15px" }, __source: { fileName: "", lineNumber: 710, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "10px" }, __source: { fileName: "", lineNumber: 711, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: currentWord, onChange: (e)=>setCurrentWord(e.target.value), onKeyPress: handleKeyPress, placeholder: words.length === 0 ? "Enter your first word" : `Enter word starting with '${words.length > 0 ? words[words.length - 1].positions[words[words.length - 1].positions.length - 1].letter : ""}'`, style: { padding: "8px 12px", fontSize: "16px", border: "2px solid #dee2e6", borderRadius: "5px", marginRight: "10px", width: "200px" }, disabled: gameWon, __source: { fileName: "", lineNumber: 712, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: placeWord, disabled: gameWon, style: { padding: "8px 16px", backgroundColor: gameWon ? "#6c757d" : "#007bff", color: "white", border: "none", borderRadius: "5px", cursor: gameWon ? "not-allowed" : "pointer", fontSize: "14px", marginRight: "10px" }, __source: { fileName: "", lineNumber: 738, columnNumber: 17 }, __self: this }, "Place Word"), /*#__PURE__*/ React.createElement("button", { onClick: deleteLastWord, disabled: gameWon || words.length === 0, style: { padding: "8px 16px", backgroundColor: gameWon || words.length === 0 ? "#6c757d" : "#dc3545", color: "white", border: "none", borderRadius: "5px", cursor: gameWon || words.length === 0 ? "not-allowed" : "pointer", fontSize: "14px" }, __source: { fileName: "", lineNumber: 754, columnNumber: 17 }, __self: this }, "Delete Last Word")), /*#__PURE__*/ React.createElement("div", { style: { fontSize: "14px", color: "#666" }, __source: { fileName: "", lineNumber: 772, columnNumber: 15 }, __self: this }, "Next direction: ", getOrientationDisplay(currentOrientation), " | Words placed: ", words.length)), error && /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: "#f8d7da", color: "#721c24", padding: "10px", borderRadius: "5px", marginBottom: "15px" }, __source: { fileName: "", lineNumber: 780, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: initializeGame, style: { padding: "10px 20px", backgroundColor: "#28a745", color: "white", border: "none", borderRadius: "5px", cursor: "pointer", fontSize: "14px" }, __source: { fileName: "", lineNumber: 793, columnNumber: 11 }, __self: this }, "New Game")), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "center", overflowX: "auto", overflowY: "auto", maxHeight: "60vh" }, __source: { fileName: "", lineNumber: 809, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(20, 20px)", gap: "1px", backgroundColor: "#dee2e6", padding: "10px", borderRadius: "5px" }, __source: { fileName: "", lineNumber: 818, columnNumber: 11 }, __self: this }, board.map((row, rowIndex)=>row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("div", { key: `${rowIndex}-${colIndex}`, style: getCellStyle(rowIndex, colIndex), title: `Row: ${rowIndex}, Col: ${colIndex}`, __source: { fileName: "", lineNumber: 830, columnNumber: 17 }, __self: this }, board[rowIndex][colIndex] || previewCells.find((p)=>p && p.row === rowIndex && p.col === colIndex)?.letter))))), /*#__PURE__*/ React.createElement("div", { style: { marginTop: "20px", textAlign: "center", color: "#666", fontSize: "12px" }, __source: { fileName: "", lineNumber: 845, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 853, columnNumber: 11 }, __self: this }, "Green = Start | Red = End | Yellow = Preview | Gray = Obstacle | Blue = Must Enclose"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 857, columnNumber: 11 }, __self: this }, "Each word rotates 90° clockwise from the previous word's direction"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 860, columnNumber: 11 }, __self: this }, "Words must connect at matching letters when they overlap"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 861, columnNumber: 11 }, __self: this }, "Cannot place words through gray obstacles. All blue squares must be enclosed by words to win.")))); }