${isGood ? 'Treasure' : 'Item'}

${result.item}

\n${isGood ? `

${rarityName} ${emoji}

` : ''}`\nBut the user's example showed the bad structure without a rarity, so maybe bad items don't have this. So conditionally add the rarity display only for good items.\n\nFor the rarities and percentages in the system message:\n\nThe user wants different percentages for the rarities in the door chosen as good. The system message for the good door should include these percentages so the AI can pick a rarity according to that distribution. So the system prompt could be:\n\n\"For the good door, select a rarity with these probabilities:\n- Common 🟢 50%\n- Uncommon 🔵 25%\n- Rare 🟣 15%\n- Epic 🟠 7%\n- Legendary 🔴 2%\n- Mythic ✨ 0.7%\n- Godly 🌟 0.3%\n\nGenerate a JSON object with 'item' (name and description), 'color' as 'green', and 'rarity' (including the chosen rarity and emoji).\"\n\nHowever, since we're using the websim.chat.completions.create API, the messages must include the system and user prompts. The current code for the good door's system prompt needs to be modified to generate the correct JSON format.\n\nSo adjusting the code where the AI is called:\n\nCurrently, the system message for the good door is:\n\n\"Generate a random valuable but realistic item found behind a door. Make it sound desirable. Format: 'Treasure: [Name] - [Brief Description]'\"\n\nWe need to replace this to output JSON. Also, for the user's current ask, it's crucial to override the existing format so the AI responds in JSON.\n\nThus, modifying the system prompt for the good door to generate a JSON structure with 'item', 'rarity' (including the chosen tier and emoji), and 'color' as 'green'.\n\nSimilarly, for the bad door, the system prompt should generate a JSON with 'item' and 'color' as 'red', and perhaps 'rarity' but the user's example didn't include it. But maybe just for consistency, the bad door's AI response can have 'rarity' as \"Common 🟢\", but since the user's example for bad includes only 'item' and 'color', perhaps the bad door's system prompt doesn't mention 'rarity', and thus the AI responds without it.\n\nBut the user's example for bad includes no 'rarity', so perhaps in the bad door's case, we don't include rarity. Therefore, in the code, if the response has a 'rarity' field (good door), display it. If not, don't.\n\nNow, the code changes:\n\nReplace the current code where the completion is generated (inside the door click handler) with a new system message that tells the AI to generate JSON, and then parse it.\n\nFor the good door:\n\nconst isGood = outcomeType === 'good';\n\nconst completion = await websim.chat.completions.create({\n messages: [{\n role: \"system\",\n content: `Generate a ${isGood ? 'valuable' : 'mundane'} item found behind a door. ${\n isGood ? \n `Item must have a rarity (format: \"Rarity Name 🟢\", choose from Common 🟢 50%, Uncommon 🔵 25%, Rare 🟣 15%, Epic 🟠 7%, Legendary 🔴 2%, Mythic ✨ 0.7%, Godly 🌟 0.3%)` \n : 'Make it undesirable'\n }. Respond with JSON: { \"item\": string, \"rarity\": \"${isGood ? 'Rarity from list' : 'Common'}\", \"color\": \"${isGood ? 'green' : 'red'}\" }`\n }, {\n role: \"user\",\n content: \"Generate a \" + (isGood ? \"unique treasure item with appropriate rarity\" : \"normal everyday item\")\n }],\n json: true,\n});\n\nThen, parse the completion content as JSON.\n\nFor example, parse the result, extract item, rarity, and color. For bad doors, 'rarity' might not be present, so default to 'Common 🟢' or similar. Wait, but in the system prompt for bad doors, maybe the 'rarity' is omitted. Wait, no, for bad doors, the system prompt says \"Respond with JSON: { \"item\": string, \"color\": \"red\" }\", excluding 'rarity'. Thus, in the code, the result for bad doors won't have a 'rarity' property.\n\nBut the AI might still generate 'rarity', so it's safer to check if it exists.\n\nIn the code, parse the completion content into JSON:\n\nconst result = JSON.parse(completion.content);\n\nThen, build the reward display:\n\nlet itemHTML = `

${isGood ? 'Treasure' : 'Item'}

`;\nitemHTML += `

${result.item}

`;\nif (isGood && result.rarity) {\n const [rarityName, emoji] = result.rarity.split(' ');\n const rarityClass = `rarity-${rarityName.toLowerCase()}`;\n itemHTML += `

${rarityName} ${emoji}

`;\n}\nrewardDisplay.innerHTML = itemHTML;\n\nIn the CSS, define classes for each rarity's color:\n\n.rarity-common { color: #00ff00; }\n.rarity-uncommon { color: #0000ff; }\n.rarity-rare { color: #800080; }\n.rarity-epic { color: #ffa500; }\n.rarity-legendary { color: #ff0000; }\n.rarity-mythic { color: #ffd700; }\n.rarity-godly { color: #ffff00; }\n\nBut in the user's example, Common's emoji is 🟢 (green), Uncommon 🔵 (blue), etc. So these classes align with those colors. However, the CSS .rarity-common's color should match the emoji's color. So, Common's class uses green, Uncommon blue, etc.\n\nBut how do we get the AI to select the correct rarity with the emoji? The system message must specify that the 'rarity' field should include the emoji. The system prompt for good doors needs to list the possible rarities with their corresponding emojis and percentages, instructing the AI to select one based on the percentages. However, the AI may not strictly follow the percentages, but we can hope that the probabilities in the prompt encourage the AI to follow them.\n\nNow, integrating into the existing code:\n\nThe current code uses completion.content and replaces regex to get the item. We need to change that to parse JSON.\n\nOriginal code:\n\nconst reward = completion.content;\nrewardDisplay.innerHTML = reward.replace(/(Treasure|Item): (.*)/, `

$1:

`);\n\nBut with JSON, after parsing, the code will do:\n\nconst result = JSON.parse(completion.content);\n// construct the HTML with result.item and result.rarity (if good)\n\nThen, update the .reward-display CSS in HTML to include the new classes for rarities.\n\nAlso, ensure that rarities for good doors add the emoji and text with appropriate colors.\n\nPotential issues:\n\n- If the AI doesn't output proper JSON, JSON.parse will fail. Need error handling.\n- The user's examples show the 'rarity' as string with name and emoji. The system message must enforce this.\n- If the AI generates a bad JSON structure, it might break the code.\n\nAssuming the developer accepts these risks.\n\nNow, updating the code step by step.\n\nFirst, in the click handler:\n\nChange:\n\nconst completion = await websim.chat.completions.create({...}\n\nTo include json: true.\n\nWait, then the AI's response should be JSON. So adding the 'json: true' parameter.\n\nIn the current code, the completion is retrieved and parsed as text. We need to adjust it to parse as JSON.\n\nThe original code doesn't use 'json: true', but we need to set that so the model outputs JSON.\n\nThus, modifying the call:\n\nconst completion = await websim.chat.completions.create({\n messages: [{\n role: \"system\",\n content: `Generate a ${isGood ? 'valuable' : 'mundane'} item...` // as discussed\n }, {\n role: \"user\",\n content: ...\n }],\n json: true,\n});\n\nBut need to check that websim.chat.completions.create supports the 'json' option. Since the example the user provided indicates they can pass 'json: true', we can assume they do.\n\nThen, parsing completion.content as JSON.\n\nIn code:\n\nconst result = JSON.parse(completion.content);\n\nThen, proceed to use result.item, result.rarity, result.color.\n\nIn the system prompt for the good door, ensure that the AI includes 'rarity' and 'color' as 'green', while the bad door's response includes 'color' as 'red'.\n\nThus, the system messages would be:\n\nFor good doors:\n\n{\n role: \"system\",\n content: `Generate a valuable item found behind a magical door. The item must have a rarity with the following distribution:\n- Common 🟢 (50% chance)\n- Uncommon 🔵 (25%)\n- Rare 🟣 (15%)\n- Epic 🟠 (7%)\n- Legendary 🔴 (2%)\n- Mythic ✨ (0.7%)\n- Godly 🌟 (0.3%)\nRespond with a JSON object containing \"item\", \"rarity\" (include emoji), and \"color\" set to \"green\".`\n}\n\nFor bad doors:\n\n{\n role: \"system\",\n content: 'Generate a mundane or undesirable item found behind a door. Respond with JSON { \"item\": \"description\", \"color\": \"red\" }.'\n}\n\nWait, for bad doors, maybe the system message should not mention 'rarity' at all, as it's not present in the user example. So the AI's response would not include 'rarity' for bad doors.\n\nThen, in the code:\n\nitemHTML = ... +\n(if isGood) add the rarity HTML.\n\nTesting this would be required. However, since this is hypothetical, we proceed.\n\nPotential code changes:\n\nIn the door click handler:\n\nOriginal code:\n\nconst completion = await websim.chat.completions.create({\n messages: [{\n role: \"system\",\n content: `Generate a random ${isGood ? 'valuable but realistic item' : 'mundane or undesirable item'} found behind a door. Make it sound ${isGood ? 'desirable' : 'unappealing'}. Format: '${isGood ? 'Treasure' : 'Item'}: [Name] - [Brief Description]'`\n }, {\n role: \"user\",\n content: \"Generate a normal everyday item, nothing cursed or supernatural\"\n }]\n});\n\nNew code (including JSON response):\n\nconst systemMessage = isGood ? \n `Generate a valuable item with rarity (distribution: Common 🟢 50%, Uncommon 🔵 25%, Rare 🟣 15%, Epic 🟠 7%, Legendary 🔴 2%, Mythic ✨ 0.7%, Godly 🌟 0.3%). Respond with JSON: { \"item\": \"Item name and description\", \"rarity\": \"Rarity and emoji\", \"color\": \"green\" }` :\n `Generate a mundane or undesirable item. Respond with JSON: { \"item\": \"Item description\", \"color\": \"red\" }`;\n\nconst completion = await websim.chat.completions.create({\n messages: [{\n role: \"system\",\n content: systemMessage\n }, {\n role: \"user\",\n content: \"Generate me a \" + (isGood ? \"unique treasure\" : \"normal item\")\n }],\n json: true, // essential to get JSON response\n});\n\n// parse result\nlet result;\ntry {\n result = JSON.parse(completion.content);\n} catch (e) {\n console.error('Failed to parse AI response:', e);\n result = { item: \"Mysterious Item\", color: isGood ? 'green' : 'red' };\n if (isGood) result.rarity = \"Common 🟢\";\n}\n\n// build the reward display\nrewardDisplay.innerHTML = `\n

${isGood ? 'Treasure' : 'Item'}

${result.item}

\n ${isGood ? `

${result.rarity || 'Common 🟢'}

` : ''}\n`;\n\nThen, adding CSS classes for each rarity.\n\nTo style the rarity.rarity-common, etc.\n\nSo in the

Mystery Door Game