RPG Text Quest: Text Adventures

{"name":"Text Adventure 8-19-2024","description":"Embark on an epic text-based journey in this medieval RPG adventure! Shape your destiny with your choices and immerse yourself in a visually delightful text quest filled with captivating fonts and stunning backgrounds.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/pgltkkbvw2zjuvsxqhdy","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-08-19T19:05:41.765975Z","updated_at":"2024-08-19T19:05:41.765979Z","user_id":5,"status":"PRIVATE","parent_id":1640,"id":2824,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// NEXT STEPS:\n// Idea 1: Change the story to make it your own, or add more to the story provided here!\n// Idea 2: Add a back button to allow users to go back to the previous choice.\n// Idea 3: Swap out the medieval themed font and background for something else, like sci-fi or modern!\n\n// TEXT ADVENTURE TEMPLATE\n// ————— by Kristen —————\n\n// Define story paths and choices. These can be changed and you can add more!\nconst story = {\n start: {\n text: \"You are a young adventurer in a medieval kingdom. One day, you receive a mysterious letter inviting you on a quest.\\nDo you accept the quest or stay in the village?\",\n choices: [\n { text: \"Accept the quest\", nextState: \"forestPath\" },\n { text: \"Stay in the village\", nextState: \"villagePath\" }\n ]\n },\n forestPath: {\n text: \"You chose to accept the quest and head to the forest. As you venture deeper, you encounter a wise old hermit who offers you guidance.\\nDo you follow the hermit's advice or continue on the main path?\",\n choices: [\n { text: \"Follow the hermit's advice\", nextState: \"hiddenPath\" },\n { text: \"Continue on the main path\", nextState: \"mainPath\" }\n ]\n },\n villagePath: {\n text: \"You chose to stay in the village. As you walk through the market, you encounter a suspicious merchant offering a magical item.\\nDo you buy the magical item or refuse the offer?\",\n choices: [\n { text: \"Buy the magical item\", nextState: \"buyItem\" },\n { text: \"Refuse the offer\", nextState: \"refuseItem\" }\n ]\n },\n hiddenPath: {\n text: \"You followed the hermit's advice and took the hidden path. After a long journey, you discover a hidden treasure chest filled with gold and jewels!\",\n choices: []\n },\n mainPath: {\n text: \"You ignored the hermit's advice and continued on the main path. Suddenly, a dangerous beast appears and attacks you!\",\n choices: []\n },\n buyItem: {\n text: \"You bought the magical item from the merchant. The item grants you incredible powers, making you the most powerful adventurer in the kingdom!\",\n choices: []\n },\n refuseItem: {\n text: \"You refused the merchant's offer and missed out on an opportunity. You continue your life as a regular villager.\",\n choices: []\n }\n};\n\nlet gameState = 'start'; // This is the current game state in the story \nconst buttonWidth = 200;\nconst buttonHeight = 50;\nconst buttonPadding = 20;\n\nfunction setup() {\n const maxCanvasWidth = 800;\n const aspectRatio = 2 / 1;\n\n let canvasWidth = windowWidth < maxCanvasWidth ? windowWidth : maxCanvasWidth;\n let canvasHeight = canvasWidth / aspectRatio;\n\n createCanvas(canvasWidth, canvasHeight);\n textFont('MedievalSharp');\n textSize(22);\n}\n\nfunction draw() {\n drawBackground();\n\n // Draw the current story state\n const currentState = story[gameState];\n drawUIBox(currentState.text);\n\n // Draw buttons if there are choices\n if (currentState.choices.length > 0) {\n drawButtons(currentState.choices.map(choice => choice.text));\n }\n}\n\nfunction drawBackground() {\n // Gradient background\n for (let y = 0; y < height; y++) {\n let inter = map(y, 0, height, 0, 1);\n let c = lerpColor(color(139, 69, 19), color(245, 222, 179), inter);\n stroke(c);\n line(0, y, width, y);\n }\n\n // Decorative elements\n fill(160, 82, 45);\n noStroke();\n\n // Draw some \"wood\" beams\n rect(100, 50, 20, height - 100); // Left beam\n rect(width - 120, 50, 20, height - 100); // Right beam\n rect(100, 50, width - 200, 20); // Top beam\n rect(100, height - 70, width - 200, 20); // Bottom beam\n\n // Draw some \"iron\" rivets\n fill(105, 105, 105);\n for (let i = 130; i < width - 120; i += 50) {\n circle(i, 60, 10); // Top rivets\n circle(i, height - 60, 10); // Bottom rivets\n }\n}\n\n// Check which choice button was pressed when the user clicks\nfunction mousePressed() {\n const currentState = story[gameState];\n if (currentState.choices.length > 0) {\n const x1 = width / 2 - buttonWidth - buttonPadding / 2;\n const x2 = width / 2 + buttonPadding / 2;\n const y = height / 2 + 100;\n if (isMouseOverButton(x1, y)) {\n gameState = currentState.choices[0].nextState;\n } else if (isMouseOverButton(x2, y)) {\n gameState = currentState.choices[1].nextState;\n }\n }\n}\n\nfunction isMouseOverButton(x, y) {\n return mouseX > x && mouseX < x + buttonWidth && mouseY > y && mouseY < y + buttonHeight;\n}\n\n// This is the large main box that contains the story text\nfunction drawUIBox(textContent) {\n const boxX = 50;\n const boxY = 50;\n const boxWidth = width - 100;\n const boxHeight = 200;\n\n fill(248, 244, 227);\n stroke(0);\n strokeWeight(5);\n rect(boxX, boxY, boxWidth, boxHeight, 10);\n\n fill(0);\n noStroke();\n textAlign(LEFT, TOP);\n\n const wrappedText = wrapText(textContent, boxWidth - 40);\n let textY = boxY + 20;\n for (let line of wrappedText) {\n text(line, boxX + 20, textY);\n textY += textAscent() + textDescent();\n }\n}\n\nfunction drawButtons(labels) {\n const x1 = width / 2 - buttonWidth - buttonPadding / 2;\n const x2 = width / 2 + buttonPadding / 2;\n const y = height - 40 - buttonHeight; // Centered over the bottom wood beam\n\n drawButton(x1, y, labels[0]);\n drawButton(x2, y, labels[1]);\n}\n\nfunction drawButton(x, y, label) {\n fill(248, 244, 227);\n stroke(0);\n strokeWeight(2);\n rect(x, y, buttonWidth, buttonHeight, 5);\n\n fill(0);\n noStroke();\n textAlign(CENTER, CENTER);\n\n // Calculate and set the appropriate text size for the button text\n const adjustedTextSize = calculateTextSize(label, buttonWidth - 20);\n textSize(adjustedTextSize);\n\n text(label, x + buttonWidth / 2, y + buttonHeight / 2);\n}\n\nfunction wrapText(textContent, maxWidth) {\n const sentences = textContent.split(/(?<=[.!?])/); // Split text into sentences based on ., !, and ?\n let lines = [];\n\n for (let sentence of sentences) {\n if (sentence.trim() === '') continue; // Skip empty sentences\n const words = sentence.trim().split(' ');\n let currentLine = '';\n\n for (let word of words) {\n let testLine = currentLine + word + ' ';\n if (textWidth(testLine) > maxWidth) {\n lines.push(currentLine.trim());\n currentLine = word + ' ';\n } else {\n currentLine = testLine;\n }\n }\n lines.push(currentLine.trim()); // Add the last line of the sentence\n }\n\n return lines;\n}\n\nfunction calculateTextSize(textContent, maxWidth) {\n let size = 24;\n textSize(size);\n while (textWidth(textContent) > maxWidth && size > 10) {\n size--;\n textSize(size);\n }\n return size;\n}","style.css":"/* style.css */\n\n/* Apply medieval font to the entire body */\nbody {\n font-family: 'MedievalSharp', cursive;\n}\n\n/* Style for UI boxes */\n.ui-box {\n border: 5px solid #000; /* Black border */\n padding: 15px;\n margin: 10px;\n border-radius: 10px; /* Rounded corners */\n background-color: #f8f4e3; /* Light parchment background */\n box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Shadow for depth */\n}","index.html":"\n\n\n\n \n \n RPG Text Quest: Text Adventures\n \n \n \n\n\n\n \n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"pgltkkbvw2zjuvsxqhdy","name":"medieval-cover","deleted":false,"id":18136,"created_at":"2024-08-19T19:05:41.775733Z","project_id":2824,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[{"instruction":"Tell Jippity whether you want to completely change the story to make it your own, or if you want to add more to the story provided here. Either way, tell Jippity more about what storyline, theme, and choices you want the story to have!","title":"Change or Update the Story!","created_at":"2024-06-08T18:41:27.133281","project_id":2824,"complete":false,"step_number":1,"updated_at":"2024-08-19T19:05:41.770204","id":10585}]}