Cryptographic Puzzle Quest

{"name":"Whispering Forest - Part 1","description":"You find yourself in a mysterious forest. Looks like there are some cryptic puzzles to solve here...","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/ilbiayvtzwxedfdtyhfc","view_count":26,"fork_count":4,"expires_at":null,"created_at":"2026-01-07T06:40:51.045035Z","updated_at":"2026-01-07T06:40:51.045036Z","user_id":166,"status":"PRIVATE","parent_id":null,"id":11546,"user":{"username":"m_ivlev","id":166,"password_hash":"$2b$12$lM.SwMhsrEJrs7ZjNyj9e.FOyWqAZgNBSeOEkB8gCGEsXkmGPZLu6","created_at":"2024-08-05T03:36:08.774307Z","reset_token":null,"stripe_customer_id":null,"seats":null,"photo":null,"email":"markivlev@gmail.com","recess_id":"38a987b1-569d-47cc-ae61-0c84198aa65c","updated_at":"2024-08-05T03:36:08.774314Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let currentScreen = \"main\";\n\nlet arrowEmoji = \"➡️\";\n\nlet grove, cabin, door;\n\nlet gridLetters = [];\n\nlet currentGridIndex = 0;\n\nconst grids = [\"grove_puzzle\", \"some_other_puzzle\", \"another_puzzle\"];\n\nlet inputBoxesDisplayed = false;\n\nlet inputContainer;\n\nfunction preload() {\n // Load the background image assets\n bg = loadImage(\"@asset('bg')\");\n grove = loadImage(\"@asset('grove')\"); // Load grove background\n cabin = loadImage(\"@asset('cabin')\"); // Load cabin background\n door = loadImage(\"@asset('door')\"); // Load door background\n journal = loadImage(\"@asset('journal')\");\n stone = loadImage(\"@asset('stone')\"); // Load stone background\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n // Set the initial background to the loaded image\n background(bg);\n}\n\nfunction draw() {\n if (currentScreen === \"main\") {\n image(bg, 0, 0, width, height);\n document.getElementById(\"cabinPuzzleText\").style.display = \"none\"; // Hide cabin puzzle text\n document.getElementById(\"journalImage\").style.display = \"none\"; // Hide journal image\n } else if (currentScreen === \"grove\") {\n displayImage(grove);\n drawReturnArrow();\n document.getElementById(\"cabinPuzzleText\").style.display = \"none\"; // Hide cabin puzzle text\n document.getElementById(\"journalImage\").style.display = \"none\"; // Hide journal image\n } else if (currentScreen === \"cabin\") {\n displayImage(cabin);\n drawReturnArrow();\n document.getElementById(\"cabinPuzzleText\").style.display = \"none\"; // Hide cabin puzzle text\n document.getElementById(\"journalImage\").style.display = \"none\"; // Hide journal image\n } else if (currentScreen === \"door\") {\n displayImage(door);\n drawReturnArrow();\n document.getElementById(\"cabinPuzzleText\").style.display = \"none\"; // Hide cabin puzzle text\n document.getElementById(\"journalImage\").style.display = \"none\"; // Hide journal image\n } else if (currentScreen === \"grove_puzzle\") {\n // Set 'stone' as the background for grove puzzle\n background(stone); // Use stone as the background\n\n // Initialize the grid only once when entering this screen\n if (gridLetters.length === 0) {\n initializeGrid(); // Initialize the grid\n }\n\n drawGrid(); // Draw the 3x3 grid of random letters\n drawReturnArrow(); // Add return arrow\n document.getElementById(\"cabinPuzzleText\").style.display = \"none\"; // Hide cabin puzzle text\n document.getElementById(\"journalImage\").style.display = \"none\"; // Hide journal image\n } else if (currentScreen === \"cabin_puzzle\") {\n // Use 'journal' as the background for cabin puzzle\n document.getElementById(\"journalImage\").style.display = \"block\"; // Show journal image\n document.getElementById(\"cabinPuzzleText\").style.display = \"block\"; // Show cabin puzzle text\n drawReturnArrow(); // Add return arrow\n }\n\n // The input boxes are now managed solely by the mousePressed function.\n}\n\nfunction displayImage(img) {\n // Fill the background with black\n background(0);\n\n if (img === cabin || img === grove) {\n // Stretch to fit screen for cabin and grove\n image(img, 0, 0, width, height);\n } else {\n // Maintain aspect ratio for door\n const aspectRatio = img.width / img.height;\n let imgWidth, imgHeight;\n\n if (width / height > aspectRatio) {\n imgHeight = height;\n imgWidth = imgHeight * aspectRatio;\n } else {\n imgWidth = width;\n imgHeight = imgWidth / aspectRatio;\n }\n\n image(img, (width - imgWidth) / 2, (height - imgHeight) / 2, imgWidth, imgHeight);\n }\n}\n\nfunction drawReturnArrow() {\n textSize(32); // Set the text size for the emoji\n fill(0); // Black color for the emoji\n text(arrowEmoji, width - 50, height - 20); // Position the emoji in the bottom right\n}\n\nfunction initializeGrid() {\n const letters3x3 = [\n ['A', 'B', 'C'],\n ['R', '★', 'D'],\n ['O', 'T', 'E']\n ];\n\n const letters5x5 = [\n ['A', 'B', 'C', 'D', 'F'],\n ['G', 'H', 'J', 'R', 'K'],\n ['M', 'O', '★', 'E', 'T'],\n ['Q', 'U', 'S', 'V', 'N'],\n ['W', 'X', 'P', 'L', 'I']\n ];\n\n const letters7x7 = [\n ['A', 'B', 'C', 'D', 'F', 'H', 'J'],\n ['K', 'P', 'Q', 'S', 'T', 'U', 'V'],\n ['W', 'X', 'Y', 'Z', 'A', 'C', 'D'],\n ['F', 'H', 'J', '★', 'G', 'K', 'P'],\n ['R', 'E', 'Q', 'S', 'L', 'O', 'T'],\n ['U', 'G', 'V', 'B', 'M', 'O', 'W'],\n ['X', 'N', 'I', 'R', 'Y', 'Z', 'A']\n ];\n\n // Set the grid based on the current grid index\n if (grids[currentGridIndex] === \"grove_puzzle\") {\n gridLetters = letters3x3; // 3x3 grid\n } else if (grids[currentGridIndex] === \"some_other_puzzle\") {\n gridLetters = letters5x5; // 5x5 grid\n } else if (grids[currentGridIndex] === \"another_puzzle\") {\n gridLetters = letters7x7; // 7x7 grid\n }\n}\n\nfunction drawGrid() {\n const gridSize = gridLetters.length; // Dynamic size based on the gridLetters array\n const gridWidth = width * 0.3; // Set the grid width to 30% of the canvas width\n const cellSize = gridWidth / gridSize; // Calculate cell size based on grid width\n\n const startX = (width - gridWidth) / 2; // Calculate starting X position to center the grid\n const startY = (height - gridWidth) / 2; // Calculate starting Y position to center the grid\n\n // Loop to draw the grid\n for (let row = 0; row < gridSize; row++) {\n for (let col = 0; col < gridSize; col++) {\n // Calculate position for each cell\n const x = startX + col * cellSize; // Starting X position of the cell\n const y = startY + row * cellSize; // Starting Y position of the cell\n\n fill(0); // Set fill color to black for the grid square\n rect(x, y, cellSize, cellSize); // Draw the cell rectangle\n\n stroke(255); // Set stroke color to white for the grid lines\n noFill(); // No fill for the rectangles\n rect(x, y, cellSize, cellSize); // Draw the outline rectangle\n\n textSize(32); // Set font size\n fill(255); // Set text color to white\n\n // Center the text in the cell, adjusting for text height\n let textWidthVal = textWidth(gridLetters[row][col]); // Get the width of the letter\n let textHeightVal = textAscent() + textDescent(); // Get the height of the text\n text(gridLetters[row][col], x + (cellSize - textWidthVal) / 2, y + (cellSize + textHeightVal) / 2); // Draw the letter centered\n }\n }\n\n // Draw the right arrow emoji next to the grid\n textSize(48); // Set a larger size for the arrow emoji\n fill(0); // Set text color to black\n text(\"➡️\", startX + gridWidth + 20, startY + gridWidth / 2); // Position the arrow to the right of the grid and centered vertically\n}\n\nfunction mousePressed() {\n // Check if clicked within three sections\n if (currentScreen === \"main\") {\n if (mouseX < width / 3) {\n currentScreen = \"grove\"; // Change to grove screen\n } else if (mouseX < (2 * width) / 3) {\n currentScreen = \"door\"; // Change to cabin screen\n inputBoxesDisplayed = false; // Reset the flag when entering the door screen\n } else {\n currentScreen = \"cabin\"; // Change to door screen\n }\n } else if (currentScreen === \"grove\") {\n // Check for middle click area in grove\n if (mouseX > width / 3 && mouseX < (2 * width) / 3 && mouseY > height / 3 && mouseY < (2 * height) / 3) {\n currentScreen = \"grove_puzzle\";\n } else if (mouseX > width - 50 && mouseY > height - 40) {\n currentScreen = \"main\"; // Return to main screen\n }\n } else if (currentScreen === \"cabin\") {\n // Check for middle click area in cabin\n if (mouseX > width / 3 - 20 && mouseX < (2 * width) / 3 - 20 && mouseY > height / 3 + 20 && mouseY < (2 * height) / 3 + 20) {\n currentScreen = \"cabin_puzzle\";\n } else if (mouseX > width - 50 && mouseY > height - 40) {\n currentScreen = \"main\"; // Return to main screen\n }\n } else if (currentScreen === \"door\") {\n // Check if the center of the door screen is clicked and input boxes are not already displayed\n if (mouseX > width / 3 && mouseX < (2 * width) / 3 && mouseY > height / 3 && mouseY < (2 * height) / 3 && !inputBoxesDisplayed) {\n displayPuzzleInputs(); // Show the puzzle input boxes\n inputBoxesDisplayed = true; // Set flag to true after displaying\n }\n else if (mouseX > width - 50 && mouseY > height - 40) {\n // Hide input container if it exists\n if (inputContainer) {\n inputContainer.style.display = 'none';\n inputBoxesDisplayed = false; // Reset the displayed flag\n }\n currentScreen = \"main\"; // Return to main screen\n }\n } else if (currentScreen === \"grove_puzzle\") {\n // Check if the return arrow emoji is clicked\n if (mouseX > width - 50 && mouseY > height - 40) {\n currentScreen = \"grove\"; // Return to grove screen\n }\n // Check if the right arrow emoji is clicked\n const gridWidth = width * 0.3; // Same width as defined in drawGrid\n const arrowX = (width - gridWidth) / 2 + gridWidth + 50; // Move X position slightly right\n const arrowY = (height - gridWidth) / 2 + gridWidth / 2 - 15; // Move Y position slightly up\n const arrowSize = 60; // Set clickable area size to 60px (3x larger)\n\n // Adjusted clickable area for the arrow emoji\n if (mouseX > arrowX - arrowSize / 2 && mouseX < arrowX + arrowSize / 2 && mouseY > arrowY - arrowSize / 2 && mouseY < arrowY + arrowSize / 2) {\n currentGridIndex = (currentGridIndex + 1) % grids.length; // Increment the grid index (looping back to 0)\n initializeGrid(); // Reinitialize the grid based on the new index\n }\n } else if (currentScreen === \"cabin_puzzle\") {\n // Check if the return arrow emoji is clicked\n if (mouseX > width - 50 && mouseY > height - 40) {\n currentScreen = \"cabin\"; // Return to cabin screen\n }\n } else {\n // Check if the return arrow emoji is clicked\n if (mouseX > width - 50 && mouseY > height - 40) {\n currentScreen = \"main\"; // Return to main screen\n }\n }\n}\n\nfunction displayPuzzleInputs() {\n // Create a container for the input boxes\n inputContainer = document.createElement('div'); // Assign to global variable\n inputContainer.style.position = 'absolute';\n inputContainer.style.left = '50%';\n inputContainer.style.top = '50%';\n inputContainer.style.transform = 'translate(-50%, -50%)';\n inputContainer.style.zIndex = '10'; // Ensure it appears above other elements\n\n // Array to hold input elements\n const inputElements = [];\n\n // Create and append input boxes with labels\n for (let i = 1; i <= 3; i++) {\n const label = document.createElement('label');\n label.textContent = `Puzzle ${i}: `;\n label.style.color = 'white'; // Set label text color to white\n inputContainer.appendChild(label); // Append label to the container\n\n const input = document.createElement('input');\n input.type = 'text';\n input.style.display = 'block'; // Make each input box appear on a new line\n input.style.width = '300px'; // Set a larger width for the input boxes\n input.style.height = '40px'; // Set a larger height for the input boxes\n input.style.color = 'white'; // Set text color to white\n input.style.backgroundColor = 'black'; // Set background color to black for contrast\n input.style.border = '1px solid white'; // Optional: Add a white border for visibility\n inputElements.push(input); // Store input element for later use\n inputContainer.appendChild(input); // Append input to the container\n }\n\n // Create a div for displaying the success message\n const successMessage = document.createElement('div');\n successMessage.style.color = '#006400'; // Set text color to a darker green\n successMessage.style.display = 'none'; // Hide by default\n successMessage.style.fontSize = '36px'; // Set font size to make it larger\n successMessage.style.fontWeight = 'bold'; // Make the text bold\n successMessage.style.textAlign = 'center'; // Center the text\n successMessage.style.marginTop = '20px'; // Add some space above the message\n inputContainer.appendChild(successMessage); // Add the message to the container\n\n // Create a div for displaying feedback messages\n const feedbackMessage = document.createElement('div');\n feedbackMessage.style.color = 'red'; // Set text color to red\n feedbackMessage.style.display = 'none'; // Hide by default\n feedbackMessage.style.fontSize = '36px'; // Set font size to make it larger\n feedbackMessage.style.fontWeight = 'bold'; // Make the text bold\n feedbackMessage.style.textAlign = 'center'; // Center the text\n feedbackMessage.style.marginTop = '20px'; // Add some space above the message\n inputContainer.appendChild(feedbackMessage); // Add the message to the container\n\n // Create and append the 'check' button\n const checkButton = document.createElement('button');\n checkButton.textContent = 'Check'; // Set button text\n checkButton.style.marginTop = '10px'; // Add some space above the button\n checkButton.style.color = 'white'; // Set button text color to white\n checkButton.style.backgroundColor = 'black'; // Set button background color\n checkButton.style.border = '1px solid white'; // Optional: Add a white border for visibility\n checkButton.style.padding = '10px'; // Add padding for better appearance\n checkButton.style.cursor = 'pointer'; // Change cursor on hover\n inputContainer.appendChild(checkButton); // Add the button to the container\n\n // Add event listener to the check button\n checkButton.addEventListener('click', function () {\n const answers = ['rot', 'splinter', 'gloombringer']; // Correct answers\n const userAnswers = inputElements.map(input => input.value.trim().toLowerCase()); // Get user answers, convert to lowercase\n\n // Check if the user's answers match the correct answers\n const isCorrect = userAnswers.every((answer, index) => answer === answers[index]);\n\n // Display feedback\n if (isCorrect) {\n successMessage.textContent = \"Congratulations! You have opened the first door of the whispering forest.\"; // Set success message\n successMessage.style.display = 'block'; // Show success message\n\n // Hide input boxes, labels, and the check button\n inputElements.forEach(input => input.style.display = 'none'); // Hide the input boxes\n const labels = inputContainer.getElementsByTagName('label'); // Get all labels\n Array.from(labels).forEach(label => label.style.display = 'none'); // Hide labels\n checkButton.style.display = 'none'; // Hide the check button\n\n feedbackMessage.style.display = 'none'; // Hide feedback message\n\n // Optionally clear the input fields after correct answers\n inputElements.forEach(input => input.value = '');\n\n // Hide the success message after 5 seconds\n // setTimeout(() => {\n // successMessage.style.display = 'none'; // Hide the success message\n // }, 5000);\n } else {\n feedbackMessage.textContent = \"Incorrect\"; // Set feedback message\n feedbackMessage.style.display = 'block'; // Show feedback message\n\n // Reset input boxes after showing incorrect message\n inputElements.forEach(input => input.value = '');\n\n // Hide message after 2 seconds\n setTimeout(() => {\n feedbackMessage.style.display = 'none'; // Hide the feedback message\n }, 2000);\n }\n });\n\n // Append the input container to the body\n document.body.appendChild(inputContainer);\n}\n\n","style.css":"canvas {\r\n display: block;\r\n}\r\n\r\n.italianno-regular {\r\n font-family: \"Italianno\", cursive;\r\n font-weight: 400;\r\n font-style: normal;\r\n}\r\n\r\n#journalImage {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n display: none;\r\n z-index: 5;\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\nhtml,\r\nbody {\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n font-family: fantasy;\r\n}\r\n\r\n#cabinPuzzleText {\r\n position: absolute;\r\n left: 60%;\r\n top: 29%;\r\n transform: translate(-50%, -50%);\r\n display: none;\r\n z-index: 6;\r\n background: none;\r\n font-size: 1.7vw;\r\n line-height: 1.5;\r\n}","index.html":"\n\n\n\n \n \n Cryptographic Puzzle Quest\n \n \n \n \n \n \n \n\n\n\n

Start at the center

W, S, E

S, S, E, E, N, N, W, N

E, S, E, S, W, W, S, W, W, N, N, W

\n \n\n\n"},"chat_history":[{"code_id":317935,"sender":"client_script","deleted":0,"input_tokens":null,"id":196464,"message":"","project_id":11546,"created_at":"2026-01-07T21:00:33.780751Z","output_tokens":null},{"code_id":317943,"sender":"client_script","deleted":0,"input_tokens":null,"id":196465,"message":"","project_id":11546,"created_at":"2026-01-07T21:00:58.591951Z","output_tokens":null},{"code_id":317946,"sender":"human","deleted":0,"input_tokens":null,"id":196475,"message":"in displayPuzzleInputs, hide all input boxes and text if the 'return' arrow is clicked, and return to the initial door screen","project_id":11546,"created_at":"2026-01-07T21:02:44.648834Z","output_tokens":null},{"code_id":317946,"sender":"ai","deleted":0,"input_tokens":6852,"id":196476,"message":"

\n# Reasoning\nTo satisfy the request, we need to modify the `displayPuzzleInputs` function to hide all input boxes and text when the 'return' arrow is clicked. This involves keeping track of the input container and making sure it is hidden when the arrow is clicked. Additionally, we need to ensure that the screen returns to the initial door screen.\n

\n\n

\n# Answer: \n

\n\nWe can definitely hide all input boxes and text when the 'return' arrow is clicked and return to the initial door screen. Let's make the necessary changes:\n\n```javascript\n// script.js\nlet inputContainer; // Global variable to track the input container\n```\n\n```javascript\n// script.js\nfunction displayPuzzleInputs() {\n // Create a container for the input boxes\n inputContainer = document.createElement('div'); // Assign to global variable\n inputContainer.style.position = 'absolute';\n inputContainer.style.left = '50%';\n inputContainer.style.top = '50%';\n inputContainer.style.transform = 'translate(-50%, -50%)';\n inputContainer.style.zIndex = '10'; // Ensure it appears above other elements\n\n // (rest of the function remains unchanged)\n}\n```\n\n```javascript\n// script.js\nfunction mousePressed() {\n // (existing code)\n\n else if (currentScreen === \"door\") {\n // Check if the center of the door screen is clicked and input boxes are not already displayed\n if (mouseX > width / 3 && mouseX < (2 * width) / 3 && mouseY > height / 3 && mouseY < (2 * height) / 3 && !inputBoxesDisplayed) {\n displayPuzzleInputs(); // Show the puzzle input boxes\n inputBoxesDisplayed = true; // Set flag to true after displaying\n }\n else if (mouseX > width - 50 && mouseY > height - 40) {\n // Hide input container if it exists\n if (inputContainer) {\n inputContainer.style.display = 'none';\n inputBoxesDisplayed = false; // Reset the displayed flag\n }\n currentScreen = \"main\"; // Return to main screen\n }\n }\n\n // (rest of the function remains unchanged)\n}\n```\n\n- Added a global variable `inputContainer` to keep track of the input container element.\n- Modified `displayPuzzleInputs` to assign the created input container to the `inputContainer` variable.\n- Updated `mousePressed` to hide the input container and reset the `inputBoxesDisplayed` flag when the return arrow is clicked, returning to the main screen.","project_id":11546,"created_at":"2026-01-07T21:02:44.851982Z","output_tokens":622}],"assets":[{"created_at":"2026-01-07T07:36:07.038949Z","name":"stone","resource_type":"image","tags":[],"project_id":11546,"creator":"","cloudinary_id":"k6lfgrvruit9s2sdnaxa","deleted":false,"id":90344},{"created_at":"2026-01-07T06:53:02.443369Z","name":"journal","resource_type":"image","tags":[],"project_id":11546,"creator":"","cloudinary_id":"pp9fjb2jf1fustgxwcvr","deleted":false,"id":90343},{"created_at":"2026-01-07T06:27:34.453156Z","name":"cabin","resource_type":"image","tags":[],"project_id":11546,"creator":"","cloudinary_id":"mfclaijqbdjrac6rwjik","deleted":false,"id":90342},{"created_at":"2026-01-07T06:27:13.210339Z","name":"grove","resource_type":"image","tags":[],"project_id":11546,"creator":"","cloudinary_id":"gsxftuch9gyvmzaupmt8","deleted":false,"id":90341},{"created_at":"2026-01-07T06:13:02.825810Z","name":"door","resource_type":"image","tags":[],"project_id":11546,"creator":"","cloudinary_id":"sfw8fz0egbr5oteefv1g","deleted":false,"id":90340},{"created_at":"2026-01-07T06:00:14.796159Z","name":"bg","resource_type":"image","tags":[],"project_id":11546,"creator":"","cloudinary_id":"ilbiayvtzwxedfdtyhfc","deleted":false,"id":90337}],"messages_sent":72,"comments":[],"steps":[]}