[TEMPLATE] Dialogue

{"name":"[TEMPLATE] RPG Dialogue","description":"WASD to move, Space to Interact. Mouse works on dialogue menus.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/pwdihiu1fkwms6xrhgfr","view_count":50,"fork_count":0,"expires_at":null,"created_at":"2025-08-06T08:43:39.734800Z","updated_at":"2025-08-06T08:43:39.734801Z","user_id":246,"status":"DELETED","parent_id":null,"id":2481,"user":{"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"NPC.js":"// 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}","Player.js":"// 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}","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 Jippity-----\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 support@jippity.pro.\n*/\n\n// Some variables to keep track of basic game objects.\nlet player;\nlet playerSpeed = 5;\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(windowWidth, windowHeight);\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 Tone.Player({\n url: \"@asset('musicLoop')\",\n loop: true,\n autostart: true, // Automatically start playing\n }).toDestination();\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 \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\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 NPC 1. Need something?`,\n // The player can choose two responses:\n responses: [\n { text: \"Yes.\", next: 1 }, // This choice triggers dialogue 1;\n { text: \"No.\", next: 2 } // This choice triggers dialogue 2.\n ]\n },\n // And so on.\n {\n id: 1,\n text: \"Great! What's up?\",\n responses: [\n { text: \"I'm chilling.\", next: null }, // 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: \"Alright, take it easy.\",\n responses: [\n { text: \"Thanks!\", next: null },\n { text: \"Bye.\", next: null }\n ]\n }\n ];\n\n // NPC #2\n case 2:\n return [\n {\n id: 0,\n text: `Hello! I am NPC 2. How can I help you?`,\n responses: [\n { text: \"I need information.\", next: 1 },\n { text: \"Just looking around.\", next: 2 }\n ]\n },\n {\n id: 1,\n text: \"Sure, what do you need to know?\",\n responses: [\n { text: \"What's your deal?.\", next: null },\n { text: \"Nothing. Thanks.\", next: null }\n ]\n },\n {\n id: 2,\n text: \"Alright, feel free to explore.\",\n responses: [\n { text: \"Thanks!\", next: null },\n { text: \"Goodbye.\", next: null }\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 NPC ${npcId}. 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 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 responses.\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 (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 {\n margin: 0;\n font-family: Arial, sans-serif;\n}\n\n.speech-bubble {\n background: #f1f1f1;\n border-radius: 10px;\n padding: 10px;\n position: relative;\n max-width: 300px;\n}\n\n.speech-bubble:after {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 20px;\n margin-left: -10px;\n border-width: 10px;\n border-style: solid;\n border-color: transparent transparent #f1f1f1 transparent;\n}","index.html":"\n\n\n\n \n \n [TEMPLATE] Dialogue\n \n \n \n \n\n\n\n\n \n \n \n\n\n"},"chat_history":[],"assets":[{"project_id":2481,"creator":null,"cloudinary_id":"xin1wnhsm91yaeoe8wui","deleted":false,"id":17013,"created_at":"2024-08-13T17:56:24.323139Z","name":"musicLoop","resource_type":"audio","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"e0yilck0edzoqpwecpca","deleted":false,"id":17012,"created_at":"2024-08-13T16:39:38.061015Z","name":"NPC_Blue","resource_type":"image","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"p73xmxq4jwofwqrveynx","deleted":false,"id":17011,"created_at":"2024-08-13T16:39:23.912629Z","name":"NPC_Orange","resource_type":"image","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"pwdihiu1fkwms6xrhgfr","deleted":false,"id":17010,"created_at":"2024-08-13T16:39:13.557230Z","name":"NPC_Purple","resource_type":"image","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"zqy5qspqapbhweqvptt4","deleted":false,"id":17008,"created_at":"2024-08-13T16:38:24.893231Z","name":"NPC_Green","resource_type":"image","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"ptdwp3fwes5lxslmykj5","deleted":false,"id":17007,"created_at":"2024-08-13T16:38:13.918426Z","name":"NPC_Red","resource_type":"image","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"fq0ufq9r6b0aprnyus9m","deleted":false,"id":16630,"created_at":"2024-08-06T16:32:17.408387Z","name":"portrait61","resource_type":"image","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"kjiu2ttlbzooaydegjtn","deleted":false,"id":16629,"created_at":"2024-08-06T16:31:16.578336Z","name":"portrait86","resource_type":"image","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"wvhf49lxuitsllwbp03e","deleted":false,"id":16628,"created_at":"2024-08-06T16:30:37.407309Z","name":"portrait98","resource_type":"image","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"qvbucckoyovtweecm8di","deleted":false,"id":16627,"created_at":"2024-08-06T16:30:14.525470Z","name":"portrait82","resource_type":"image","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"ceafykotlncee1yh7vkc","deleted":false,"id":16626,"created_at":"2024-08-06T16:29:43.116190Z","name":"portrait7","resource_type":"image","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"rxlgxsxuisqwu21ivp58","deleted":false,"id":16625,"created_at":"2024-08-06T16:29:20.049033Z","name":"portrait3","resource_type":"image","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"fyospa7jlkoo13bfypfo","deleted":false,"id":16624,"created_at":"2024-08-06T16:29:03.616100Z","name":"portrait2","resource_type":"image","tags":null},{"project_id":2481,"creator":null,"cloudinary_id":"n8mwzd3fpvfv9znvygi2","deleted":false,"id":16623,"created_at":"2024-08-06T16:28:30.366984Z","name":"portrait1","resource_type":"image","tags":null}],"messages_sent":43,"comments":[{"content":"WASD to move.\r\nSPACE to interact/choose dialogue option.\r\nClicking works on dialogue too.","id":761,"user_id":60,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":null,"created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"","seats":0,"username":"2718281828459045","id":60,"password_hash":"$2b$12$zEc2Nk3NuEIey0tN8BTEpekwqcs7hFwP1S2ydddottz1.zfwoTfFa","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":null},"project_id":2481,"created_at":"2024-08-13T18:28:09.915108Z","updated_at":"2024-08-13T18:28:09.915111Z"},{"content":".","id":1305,"user_id":817,"user":{"photo":null,"email":"","recess_id":null,"created_at":"2025-10-08T03:48:12.389275Z","reset_token":null,"stripe_customer_id":"cus_TCClLqMnGBDKkC","seats":0,"username":"constantinelevin","id":817,"password_hash":"djghfsdfjkghds","updated_at":"2025-10-08T03:48:12.389282Z","reset_token_expiry":null,"subscription_status":"canceled"},"project_id":2481,"created_at":"2025-10-12T02:48:47.315355Z","updated_at":"2025-10-12T02:48:47.315357Z"}],"steps":[]}