[TEMPLATE] Dialogue

{"name":"[TEMPLATE] RPG Dialogue","description":"Embark on an exciting dialogue adventure where every choice you make shapes the story! Interact with characters, make decisions, and see where your journey takes you. Can you navigate through this interactive narrative?","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/pwdihiu1fkwms6xrhgfr","view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-08-16T19:12:36.465182Z","updated_at":"2024-08-16T19:12:36.465184Z","user_id":5,"status":"PRIVATE","parent_id":2481,"id":2735,"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: Get some images in there! Player, NPCs, and other elements.\n// Idea 2: Get characters to talk! Record lines of dialogue or use text-to-speech.\n// Idea 3: Add buildings, doors, rooms... fill out the game world.\n// Idea 4: Have dialogue options trigger game events. Talk to this guy and he opens a door... stuff like that.\n// Idea 5: Come up with a more complex dialogue system. Have characters remember what you said or even use information from one conversation in another.\n\n/*\n DIALOGUE\n-----Template by Jacob-----\n\nChat, argue, and persuade with this dialogue system.\n\nThis template contains a basic setup for branching dialogue in a classic RPG style.\n\nEmails questions or bugs to jacob@jippity.pro.\n*/\n\n// Some variables to keep track of basic game objects.\nlet player;\nlet playerSpeed = 8;\nlet npcs = [];\nlet dialogueBoxVisible = false;\nlet currentNPC = null; // Which NPC are you currently talking to?\nlet selectedOption = 0; // Each dialogue option will correspond to a number (0 = \"Yes\", 1 = \"No\", ...)\n\nlet backgroundMusic;\n\n// Portraits by Loregret: https://loregret.itch.io/pixel-art-portrait-pack\n// There are 200 total portraits if you download that pack!\n\nassets = {};\n// We save assets to a *dictionary* so that we can refer to images with keywords.\nfunction preload() {\n // Add more images using this pattern!\n assets['blondBeardGuy'] = loadImage(\"@asset('portrait1')\");\n assets['mustacheHoodGuy'] = loadImage(\"@asset('portrait2')\");\n assets['mustacheHeadbandGuy'] = loadImage(\"@asset('portrait3')\");\n assets['sheriffGuy'] = loadImage(\"@asset('portrait7')\");\n assets['earringsLady'] = loadImage(\"@asset('portrait82')\");\n assets['blondLady'] = loadImage(\"@asset('portrait98')\");\n assets['blondGirl'] = loadImage(\"@asset('portrait61')\");\n assets['baldPerson'] = loadImage(\"@asset('portrait86')\");\n\n // These NPCs drawn by Leonardo da Vinci\n assets['npcRed'] = loadImage(\"@asset('NPC_Red')\");\n assets['npcBlue'] = loadImage(\"@asset('NPC_Blue')\");\n assets['npcGreen'] = loadImage(\"@asset('NPC_Green')\");\n assets['npcOrange'] = loadImage(\"@asset('NPC_Orange')\");\n assets['npcPurple'] = loadImage(\"@asset('NPC_Purple')\");\n}\n\n/*\n Some other asset packs you can check out:\n Cool animated NPCS: https://chierit.itch.io/lively-npcs\n Tiny Town (check out other asset packs by same creator!): https://kenney.nl/assets/tiny-town\n Another town in a different style: https://opengameart.org/content/rpg-town-pixel-art-assets\n\n Of course you can create your own assets or acquire some from your friends/other Jippity people!\n*/\n\nfunction setup() {\n // Make a canvas and place a player in the middle.\n createCanvas(1200, 750);\n player = new Player(width / 2, height / 2);\n\n // Let's set up five NPCs that we can talk to.\n // Edit these lists and add to them. Keep track of the order!\n\n // NPCs are just colored squares now. Jippity can help you replace them with images!\n\n // First, their X-Y positions in pixels.\n let npcPositions = [\n { x: 200, y: 100 },\n { x: 140, y: 450 },\n { x: 300, y: 100 },\n { x: 750, y: 180 },\n { x: 500, y: 70 },\n ];\n\n // Images for the NPCs\n let npcImages = [\n assets['npcRed'],\n assets['npcGreen'],\n assets['npcBlue'],\n assets['npcOrange'],\n assets['npcPurple']\n ];\n\n // Then, their colors (as a backup, or possibly for more styling).\n let colors = [\n color(255, 0, 0), // Red\n color(0, 255, 0), // Green\n color(0, 0, 255), // Blue\n color(255, 127, 0), // Orange\n color(127, 0, 255), // Purple\n ];\n\n // Their portraits for when you are talking to them.\n let portraits = [\n assets['blondBeardGuy'],\n assets['mustacheHoodGuy'],\n assets['blondGirl'],\n assets['sheriffGuy'],\n assets['earringsLady']\n ];\n\n // With all that data set up, we use a loop to make the NPCs.\n for (let i = 0; i < 5; i++) { // Change the i < {number} depending on how many NPCs you have.\n let { x, y } = npcPositions[i];\n let npcColor = colors[i];\n let npcImage = npcImages[i];\n let npcPortrait = portraits[i];\n // Push NPCs onto the array (list) of all NPCs. createDialogueTree() below will be important too.\n npcs.push(new NPC(x, y, npcColor, `NPC ${i + 1}`, createDialogueTree(i + 1), npcImage, npcPortrait));\n }\n\n // Let's add some music! We'll use the Howler library.\n backgroundMusic = new Howl({\n src: [\"@asset('musicLoop')\"],\n html5: true,\n volume: 0.5\n });\n\n\n // In the setup() function you can add more game elements:\n // terrain, objects, buildings, items, doors, new rooms...\n // Anything *static* will go in here.\n}\n\n// Main game loop\nfunction draw() {\n background(159, 189, 153);\n\n // If the background music is not currently playing, play it.\n if (!backgroundMusic.playing()) {\n backgroundMusic.play();\n }\n\n // translate() makes the camera follow the player.\n translate(-player.pos.x + width / 2, -player.pos.y + height / 2);\n\n\n // Draw all NPCs.\n for (let npc of npcs) {\n npc.display();\n }\n // Move and draw the player.\n player.update();\n player.display();\n\n // Before we draw any dialogue boxes, we reset the translation matrix.\n resetMatrix();\n\n // Draw a text prompt if you're near an NPC and there's not already a dialogue box up.\n let nearNPC = npcs.some(npc => dist(player.pos.x, player.pos.y, npc.pos.x, npc.pos.y) < 100);\n if (nearNPC && !dialogueBoxVisible) {\n drawInteractionPrompt();\n }\n\n // Then display dialogue box if it is visible.\n if (dialogueBoxVisible) {\n drawDialogueBox();\n }\n\n // If you allow movement during dialogue, this automatically closes dialogue when you move away from an NPC.\n if (dialogueBoxVisible && dist(player.pos.x, player.pos.y, currentNPC.pos.x, currentNPC.pos.y) > 100) {\n dialogueBoxVisible = false;\n currentNPC = null;\n }\n\n // In the draw() function, add anything *dynamic* that has to animate or change.\n}\n\n// This is the recipe for the player: how it should look and what it can do.\nclass Player {\n // When you make a (new) player, you must specify its location (X and Y coordinates).\n constructor(x, y) {\n this.pos = createVector(x, y);\n }\n\n update() {\n if (!dialogueBoxVisible) { // If there is *no* dialogue box...\n // ...allow player movement.\n if (keyIsDown(87)) this.pos.y -= playerSpeed; // W key\n if (keyIsDown(83)) this.pos.y += playerSpeed; // S key\n if (keyIsDown(65)) this.pos.x -= playerSpeed; // A key\n if (keyIsDown(68)) this.pos.x += playerSpeed; // D key\n }\n }\n\n // Draw the player — you may want to replace this with an image (or several frames of a walking animation!).\n display() {\n fill(100, 0, 150);\n ellipse(this.pos.x, this.pos.y, 30, 30); // \"Head\"\n\n fill(255);\n\n ellipse(this.pos.x - 5, this.pos.y - 5, 4, 4); // Left eye\n ellipse(this.pos.x + 5, this.pos.y - 5, 4, 4); // Right eye\n\n arc(this.pos.x, this.pos.y + 5, 10, 10, 0, PI); // Smile\n }\n}\n\n// The Recipe for NPCs, including all their dialogue.\nclass NPC {\n // To make an NPC, specify:\n constructor(x, y, color, name, dialogueTree, image, portrait) {\n this.pos = createVector(x, y);\n this.color = color;\n this.name = name;\n this.dialogueTree = dialogueTree;\n this.currentDialogue = dialogueTree[0]; // Makes sure the first dialogue is the default\n this.image = image;\n this.portrait = portrait;\n }\n\n // Draw the NPC.\n display() {\n if (this.image) {\n imageMode(CENTER)\n image(this.image, this.pos.x, this.pos.y, 80, 80); // Display NPC's image if available.\n imageMode(CORNER)\n } else {\n fill(this.color);\n rectMode(CENTER);\n rect(this.pos.x, this.pos.y, 40, 40); // Otherwise, display a colored square.\n imageMode(CORNER)\n }\n }\n getCurrentDialogue() {\n return this.currentDialogue;\n }\n\n // This lets player pick dialogue options.\n selectOption(option) {\n // Keep track of next line based on current choice.\n let nextDialogueId = this.currentDialogue.responses[option].next;\n if (nextDialogueId === null) { // If dialogue is finished...\n // ... close the dialogue box.\n dialogueBoxVisible = false;\n currentNPC = null;\n this.currentDialogue = this.dialogueTree[0]; // This line resets the NPC's dialogue when you're done. Remove it to have them remain on the last dialogue option you saw.\n } else { // Otherwise...\n // Move to the next line of dialogue.\n this.currentDialogue = this.dialogueTree.find(d => d.id === nextDialogueId);\n }\n }\n}\n\n// This is the main function that sets up dialogue *trees* (branching conditional paths).\n// You can also edit dialogue options in here.\n// This function takes one argument: the ID number of the NPC. Each NPC has a unique ID number.\nfunction createDialogueTree(npcId) {\n // switch() directs you down different paths depending on the ID number.\n switch (npcId) {\n // NPC # 1:\n case 1:\n /* Each NPC's dialogue tree will come in chunks.\n Each chunk is one dialogue box.\n One chunk contains: \n An ID number (different than the NPC's ID number!)\n Text: the NPC's dialogue.\n Responses: \n Text for the player response;\n and an ID # for the next dialogue option. This is how you control the flow of the dialogue.\n */\n return [\n\n // For instance,\n {\n // NPC #1's opening dialogue is ID number 0.\n id: 0,\n // This is what they say.\n text: `Hello! I am George`,\n // The player can choose two responses:\n responses: [\n { text: \"Yes.\", next: 2 }, // This choice triggers dialogue 1;\n { text: \"BEANS\", next: 1 } // This choice triggers dialogue 2.\n ]\n },\n // And so on.\n {\n id: 1,\n text: \"BEANS\",\n responses: [\n { text: \"BEANS\", next: 3 }, // next: null means this is the end of dialogue with the player.\n { text: \"Nevermind.\", next: null }\n ]\n },\n {\n id: 2,\n text: \"ok\",\n responses: [\n { text: \"Thanks!\", next: null },\n { text: \"Bye.\", next: null }\n ]\n },\n {\n id: 3,\n text: \"Beans\",\n responses: [\n { text: \"NEVERMIND\", next: null }, // next: null means this is the end of dialogue with the player.\n { text: \"Beans\", next: 4 }\n ]\n },\n {\n id: 4,\n text: \"BBEEEEANNNSSSS\",\n responses: [\n { text: \"NEVERMIND\", next: null }, // next: null means this is the end of dialogue with the player.\n { text: \"Ultra Bean\", next: 5 },\n { text: \"Beans!\", next: 1 }\n ]\n },\n { \n id: 5,\n text: \"BBEEEEANNNSSSS\",\n responses: [\n { text: \"bean\", next: null }, // next: null means this is the end of dialogue with the player.\n { text: \"bean\", next: null }\n ]\n },\n ];\n\n // NPC #2\n case 2:\n return [\n {\n id: 0,\n text: `Hello! I am the math teacher. How can I help you?`,\n responses: [\n { text: \"Math quiz\", next: 1 },\n { text: \" Quit \", next: null },\n \n ]\n },\n {\n id: 1,\n text: \"Ok, whats 2 + 2.\",\n responses: [\n { text: \"bean\", next: 2 },\n { text: \"4.0[i]1[0]01\", next: 0 }\n ]\n },\n {\n id: 2,\n text: \"Sure. ya probably got that from Bean Man. but now, WHAT IS 764 * 64 ^ 13 - 2\",\n responses: [\n { text: \"2.3090483e+26\", next: 3 },\n { text: \"2.3090493e+26\", next: 0 }\n ]\n },\n {\n id: 3,\n text: \"3^^3*2-8+2\",\n responses: [\n \n { text: \"1.5251197e+13\", next: 0 },\n { text: \"1.5251198e+13\", next: 0 },\n { text: \"1.5251191e+13\", next: 0 },\n { text: \"1.5251195e+13\", next: 4 },\n { text: \"1.5251194e+13\", next: 0 },\n { text: \"1.5251193e+13\", next: 0 },\n { text: \"1.5251191e+813\", next: 0 },\n { text: \"1.5251195e+14\", next: 0 },\n \n \n ]\n },{\n id: 4,\n text: \"What comes next in the sequence: 🛝❤️🥵😩🤯☹️🙃😔\",\n responses: [\n { text: \"🐶\", next: 0 },\n { text: \"bean\", next: 0 },\n { text: \"🫤\", next: 5 },\n { text: \"no idea\", next: 0 },\n { text: \"🤑\", next: 0 },\n { text: \"🤯\", next: 0 },\n \n ]\n },{\n id: 5,\n text: \"This i? last quest?on. And its a bean. First, Spam left like 1000 times. then Fir?t, TWO TO T?E RIGHT. right N?NE. DOWN 2. LEFT 7*4-27. +21, and t?at whole res?lt elboud twice and halved.\",\n responses: [\n { text: \"Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark Begin Mark\", next: 0 },\n { text: \"B\", next: 0 },\n { text: \"C\", next: 0 },\n { text: \"D\", next: 0 },\n { text: \"E\", next: 0 },\n { text: \"F\", next: 0 },\n { text: \"G\", next: 0 },\n { text: \"H\", next: 0 },\n { text: \"I\", next: 0 },\n { text: \"J\", next: 0 },\n { text: \"K\", next: 0 },\n { text: \"l\", next: 0 },\n { text: \"M\", next: 0 },\n { text: \"N\", next: 0 },\n { text: \"0\", next: 0 },\n { text: \"P\", next: 0 },\n { text: \"Q\", next: 0 },\n { text: \"RS\", next: 0 },\n { text: \"T\", next: 0 },\n { text: \"U\", next: 0 },\n { text: \"V\", next: 0 },\n { text: \"W\", next: 0 },\n { text: \"X\", next: 0 }, //\n { text: \"Y\", next: 0 },\n { text: \"Z\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 6 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n { text: \"1\", next: 0 },\n { text: \"2\", next: 0 },\n { text: \"3\", next: 0 },\n { text: \"4\", next: 0 },\n \n \n ]\n },\n {\n id: 2,\n text: \"YOU WINNNN!!!!!\",\n responses: [\n { text: \"yay\", next: null },\n \n ]\n },\n ];\n // You will add more cases for more NPCs.\n\n // If an NPC's id number does not have a dialogue tree, it will default to this one:\n default:\n return [\n {\n id: 0,\n text: `Hello! I am BEAN MAN. Need something?`, // The ${npcID} trick will make the ID # correct based on NPC.\n responses: [\n { text: \"Yes.\", next: 1 },\n { text: \"No.\", next: 2 }\n ]\n },\n {\n id: 1,\n text: \"Great! How can I assist you?\",\n responses: [\n { text: \"Talk to me.\", next: null },\n { text: \"Nevermind.\", next: null }\n ]\n },\n {\n id: 2,\n text: \"Alright, see you later.\",\n responses: [\n { text: \"Thanks!\", next: null },\n { text: \"Bye.\", next: null }\n ]\n }\n ];\n }\n}\n\n// Draw the window at the bottom of the screen that shows dialogue.\nfunction drawDialogueBox() {\n fill(230);\n rect(0, height * 3 / 4, width, height / 4); // A Rectangle at the bottom\n\n // NPC's portrait\n image(currentNPC.portrait, 20, height * 3 / 4 + 20, 60, 60);\n\n // NPC's name\n fill(0);\n textSize(16);\n textAlign(CENTER, CENTER);\n text(currentNPC.name, 50, height * 3 / 4 + 90);\n\n // Dialogue text\n fill(0);\n textAlign(LEFT, TOP);\n text(currentNPC.getCurrentDialogue().text, 100, height * 3 / 4 + 20, width / 2 - 140); // Left half for dialogue\n\n // Responses (in boxes)\n let padding = 10;\n let optionSpacing = 20; // Space between option boxes.\n let maxWidth = width / 4; // Limit the width of each option box.\n let startX = width / 2; // Calculate center of canvas to start drawing options.\n let startY = height * 3 / 4 + 60;\n\n // We will use these variables to keep track of the width of the responses.\n let totalWidth = 0;\n let boxWidths = [];\n\n // A bunch of math to calculate the width of responses.\n currentNPC.getCurrentDialogue().responses.forEach((response) => {\n let words = response.text.split(' ');\n let lineHeight = 20;\n let lines = [];\n let currentLine = words[0];\n\n for (let i = 1; i < words.length; i++) {\n let word = words[i];\n let testLine = currentLine + ' ' + word;\n let testWidth = textWidth(testLine);\n if (testWidth > maxWidth) {\n lines.push(currentLine);\n currentLine = word;\n } else {\n currentLine = testLine;\n }\n }\n lines.push(currentLine);\n\n // Use that to get the rectangle width right.\n let rectWidth = lines.reduce((max, line) => max > textWidth(line) ? max : textWidth(line), 0) + 2 * padding;\n boxWidths.push(rectWidth);\n totalWidth += rectWidth + optionSpacing;\n });\n\n // Move startX to the left based on the spacing...\n startX -= totalWidth / 2 - optionSpacing / 2;\n\n // Now, finally, set up the boxes with text reponses.\n // (This is complicated but you should be able to ignore it.)\n currentNPC.getCurrentDialogue().responses.forEach((response, index) => {\n let words = response.text.split(' ');\n let lineHeight = 20;\n let lines = [];\n let currentLine = words[0];\n\n for (let i = 1; i < words.length; i++) {\n let word = words[i];\n let testLine = currentLine + ' ' + word;\n let testWidth = textWidth(testLine);\n if (testWidth > maxWidth) {\n lines.push(currentLine);\n currentLine = word;\n } else {\n currentLine = testLine;\n }\n }\n lines.push(currentLine);\n\n let rectWidth = boxWidths[index];\n let rectHeight = lines.length * lineHeight + 2 * padding;\n let rectX = startX;\n let rectY = startY;\n\n if (index > 0) {\n rectX += boxWidths.slice(0, index).reduce((a, b) => a + b, 0) + optionSpacing * index;\n }\n\n if (index === selectedOption) {\n fill(200); // Selected option: gray background.\n } else {\n fill(255); // Otherwise: white background.\n }\n // Draw rectangle...\n rect(rectX, rectY, rectWidth, rectHeight);\n\n fill(0);\n textAlign(LEFT, TOP);\n // ... and the text.\n lines.forEach((line, lineIndex) => {\n text(line, rectX + padding, rectY + padding + lineIndex * lineHeight);\n });\n });\n}\n\n// Keyboard controls: WASD for movement and selecting options, Enter/Space for selection.\nfunction keyPressed() {\n if (dialogueBoxVisible) {\n if (keyCode === LEFT_ARROW || keyCode === 65) { // A key\n selectedOption = (selectedOption > 0) ? selectedOption - 1 : currentNPC.getCurrentDialogue().responses.length - 1; // Scroll left.\n } else if (keyCode === RIGHT_ARROW || keyCode === 68) { // D key\n selectedOption = (selectedOption + 1) % currentNPC.getCurrentDialogue().responses.length; // Scroll right.\n } else if (keyCode === ENTER || keyCode === 32) { // Enter or Spacebar\n currentNPC.selectOption(selectedOption);\n }\n } else if (keyCode === 32) { // Spacebar\n checkProximityAndOpenDialogue();\n }\n}\n\n// The mouse can click dialogue too!\nfunction mousePressed() {\n if (dialogueBoxVisible) {\n currentNPC.getCurrentDialogue().responses.forEach((response, index) => {\n // Math to find the dialogue boxes.\n let rectX = width / 2 + index * (textWidth(response.text) + 40);\n let rectY = height * 3 / 4 + 60;\n let rectWidth = textWidth(response.text) + 20;\n let rectHeight = 30;\n\n if (mouseX > rectX && mouseX < rectX + rectWidth && mouseY > rectY && mouseY < rectY + rectHeight) {\n currentNPC.selectOption(index);\n }\n });\n }\n}\n\n// Open the dialogue of the nearest NPC when you are close enough.\nfunction checkProximityAndOpenDialogue() {\n for (let npc of npcs) {\n let d = dist(player.pos.x, player.pos.y, npc.pos.x, npc.pos.y);\n if (d < 100) { // Are you within 100 pixels of an NPC?\n currentNPC = npc;\n dialogueBoxVisible = true;\n selectedOption = 0; // This resets dialogue to first option.\n break;\n }\n }\n}\n\n// Draw the text 'SPACE to interact'\nfunction drawInteractionPrompt() {\n fill(0);\n textSize(20);\n textAlign(CENTER, CENTER);\n text('SPACE to interact', width / 2, height - 30);\n}","style.css":"body { margin: 0; font-family: Arial, sans-serif; } .speech-bubble { background: #f1f1f1; border-radius: 10px; padding: 10px; position: relative; max-width: 300px; } .speech-bubble:after { content: ''; position: absolute; bottom: 100%; left: 20px; margin-left: -10px; border-width: 10px; border-style: solid; border-color: transparent transparent #f1f1f1 transparent; }","index.html":"\n\n\n\n \n \n [TEMPLATE] Dialogue\n \n \n \n \n\n\n\n\n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"n8mwzd3fpvfv9znvygi2","name":"portrait1","deleted":false,"id":17654,"created_at":"2024-08-16T19:12:36.495375Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"fyospa7jlkoo13bfypfo","name":"portrait2","deleted":false,"id":17653,"created_at":"2024-08-16T19:12:36.493729Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"rxlgxsxuisqwu21ivp58","name":"portrait3","deleted":false,"id":17652,"created_at":"2024-08-16T19:12:36.492050Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"ceafykotlncee1yh7vkc","name":"portrait7","deleted":false,"id":17651,"created_at":"2024-08-16T19:12:36.489926Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"qvbucckoyovtweecm8di","name":"portrait82","deleted":false,"id":17650,"created_at":"2024-08-16T19:12:36.488534Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"wvhf49lxuitsllwbp03e","name":"portrait98","deleted":false,"id":17649,"created_at":"2024-08-16T19:12:36.487098Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"kjiu2ttlbzooaydegjtn","name":"portrait86","deleted":false,"id":17648,"created_at":"2024-08-16T19:12:36.485499Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"fq0ufq9r6b0aprnyus9m","name":"portrait61","deleted":false,"id":17647,"created_at":"2024-08-16T19:12:36.483978Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"ptdwp3fwes5lxslmykj5","name":"NPC_Red","deleted":false,"id":17646,"created_at":"2024-08-16T19:12:36.482289Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"zqy5qspqapbhweqvptt4","name":"NPC_Green","deleted":false,"id":17645,"created_at":"2024-08-16T19:12:36.480513Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"pwdihiu1fkwms6xrhgfr","name":"NPC_Purple","deleted":false,"id":17644,"created_at":"2024-08-16T19:12:36.478542Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"p73xmxq4jwofwqrveynx","name":"NPC_Orange","deleted":false,"id":17643,"created_at":"2024-08-16T19:12:36.476894Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"e0yilck0edzoqpwecpca","name":"NPC_Blue","deleted":false,"id":17642,"created_at":"2024-08-16T19:12:36.475000Z","project_id":2735,"resource_type":"image"},{"cloudinary_id":"xin1wnhsm91yaeoe8wui","name":"musicLoop","deleted":false,"id":17641,"created_at":"2024-08-16T19:12:36.472661Z","project_id":2735,"resource_type":"video"}],"messages_sent":0,"comments":[],"steps":[]}