Hunger Games AI Simulator

Enter Up to 30 Characters

Type the names of up to 30 characters, separated by commas.

\n \n
\n \n

\n \n

\n \n \n\n\n------------------------------------------------------------\n/style.css\n------------------------------------------------------------\n/* Base styles and animated background */\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n min-height: 100vh;\n background: linear-gradient(-45deg, #1a1a1a, #333, #1a1a1a, #444);\n background-size: 400% 400%;\n animation: gradientBG 15s ease infinite;\n color: #eee;\n}\n\n@keyframes gradientBG {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\nheader, footer {\n text-align: center;\n padding: 1em;\n background-color: rgba(0, 0, 0, 0.5);\n}\n\nheader h1 {\n margin: 0;\n}\n\nmain {\n max-width: 800px;\n margin: 2em auto;\n padding: 1em;\n background-color: rgba(0, 0, 0, 0.6);\n border-radius: 8px;\n}\n\ntextarea {\n width: 100%;\n padding: 0.5em;\n border: none;\n border-radius: 4px;\n resize: vertical;\n}\n\nbutton {\n padding: 0.5em 1em;\n margin-top: 0.5em;\n font-size: 1em;\n border: none;\n border-radius: 4px;\n background-color: #0066cc;\n color: white;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #005bb5;\n}\n\n#storyLog {\n margin-top: 1em;\n padding: 1em;\n background-color: rgba(255, 255, 255, 0.1);\n border-radius: 4px;\n max-height: 400px;\n overflow-y: auto;\n}\n\n.story-entry {\n margin-bottom: 1em;\n line-height: 1.5;\n}\n\n/* Styling for day container and synopsis */\n.day-container {\n border-bottom: 1px solid rgba(255,255,255,0.2);\n margin-bottom: 1em;\n padding-bottom: 1em;\n}\n\n.synopsis {\n margin-top: 0.5em;\n font-style: italic;\n color: #ccc;\n}\n\n/* Inline SVG styling for alliance icons within story entries */\nsvg.alliance {\n width: 20px;\n height: 20px;\n vertical-align: middle;\n margin-right: 0.5em;\n}\n\n/* Layout for simulation container */\n.simulation-container {\n display: flex;\n gap: 1em;\n}\n\n/* Death counter sidebar styles */\n#deathCounter {\n flex: 1;\n background-color: rgba(255, 0, 0, 0.1);\n padding: 1em;\n border-radius: 4px;\n max-width: 200px;\n}\n\n#deathCounter h3 {\n margin-top: 0;\n text-align: center;\n}\n\n#deathCounter ul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n#deathCounter li {\n margin-bottom: 0.5em;\n}\n\n/* Story section takes remaining space */\n#storySection {\n flex: 3;\n}\n\n------------------------------------------------------------\n/script.js\n------------------------------------------------------------\n// Global state variables\nlet characters = [];\nlet currentDay = 0;\nlet deadCharacters = [];\nlet alliances = []; // Persisting alliances across days\n\n// Helper function to shuffle an array in place.\nfunction shuffleArray(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n return array;\n}\n\n// Event listener for the Start Simulation button.\ndocument.getElementById('startBtn').addEventListener('click', () => {\n const input = document.getElementById('characterInput').value;\n const charArray = input.split(',')\n .map(name => name.trim())\n .filter(name => name !== \"\");\n\nif (charArray.length === 0) {\n alert(\"Please enter at least one character.\");\n return;\n }\n if (charArray.length > 30) {\n alert(\"Please enter no more than 30 characters.\");\n return;\n }\n\ncharacters = charArray;\n deadCharacters = [];\n alliances = []; // Reset alliances for a new simulation\n\n// Clear any previous death counter display.\n const deathListEl = document.getElementById('deathList');\n if (deathListEl) {\n deathListEl.innerHTML = '';\n }\n\n// Hide the setup section and reveal the simulation.\n document.getElementById('setup').style.display = \"none\";\n document.getElementById('simulation').style.display = \"block\";\n // Initialize simulation with Day 1 narrative.\n simulateNextDay();\n});\n\n// Event listener for the Next Day button.\ndocument.getElementById('nextDayBtn').addEventListener('click', simulateNextDay);\n\n// Function to simulate the next day by fetching narrative from the AI endpoint.\nasync function simulateNextDay() {\n currentDay++;\n document.getElementById('dayCounter').innerText = currentDay;\n const nextDayBtn = document.getElementById('nextDayBtn');\n nextDayBtn.disabled = true;\n nextDayBtn.innerText = \"Loading...\";\n\n// Prepare alliances information for the prompt.\n let alliancesInfo = alliances.length > 0 ? alliances.map(group => group.join(', ')).join('; ') : 'none';\n let prompt = \"\";\n\nif (currentDay === 1) {\n prompt = `\nThe Hunger Games have now begun. Today marks the day when the tributes are thrown into the arena, where the air is thick with dread and adrenaline. The oppressive Capitol has set the stage for a grim battle for survival. In this dramatic moment, each tribute scrambles to secure a foothold, form tentative alliances, or brace for immediate danger.\nProvide a detailed, structured narrative in valid JSON format with the following structure:\n{\n \"actions\": [\n { \"character\": \"Character Name\", \"action\": \"Description of the character's individual action\" },\n { \"character\": [\"Name1\", \"Name2\"], \"action\": \"Description of their joint action\" }\n ],\n \"randomEvents\": [\n { \"character\": [\"Character Name\", \"Another Character Name\"], \"action\": \"Random event description...\" },\n { \"character\": [\"Name1\", \"Name2\"], \"action\": \"Random event description...\" }\n ],\n \"synopsis\": \"A brief summary of the day's events.\",\n \"deaths\": [\"Name of character who died\", \"Another character\"]\n}\nEnsure that each tribute's action is clearly separated. Additionally, include exactly five random events portraying intense initial interactions — three of which involve more than two characters and two involving exactly two characters — depicting moments of chaos, unexpected alliances, and sudden betrayals. End with a detailed synopsis of the day's unfolding events.\n `;\n } else if (currentDay % 2 === 0) {\n prompt = `\nSimulate Day ${currentDay} of a Hunger Games scenario.\nCurrently active alliances: ${alliancesInfo}.\nThere are ${characters.length} characters: ${characters.join(', ')}.\nProvide a structured narrative in valid JSON format using the following structure:\n{\n \"actions\": [\n { \"character\": \"Character Name\", \"action\": \"Description of the character's individual action\" },\n { \"character\": [\"Name1\", \"Name2\"], \"action\": \"Description of their joint action\" }\n ],\n \"randomEvents\": [\n { \"character\": [\"Character Name\", \"Another Character Name\"], \"action\": \"Random event description...\" },\n { \"character\": [\"Name1\", \"Name2\"], \"action\": \"Random event description...\" }\n ],\n \"synopsis\": \"A brief summary of the day's events.\",\n \"deaths\": [\"Name of character who died\", \"Another character\"]\n}\nEnsure each character’s actions are clearly separated. When alliances form, group the allied characters together by returning an array in the \"character\" field.\nEnd with a synopsis of the day.\nAdditionally, include exactly five random events that depict unpredictable interactions between characters or alliances — with three events involving more than two characters and two events involving exactly two characters. Use an engaging, immersive tone true to the spirit of the Hunger Games, detailing betrayals, survival tactics, and strategic maneuvers.\nAlso, ensure that at least one character dies today to satisfy the condition that one character should die at least every other day.\n `;\n } else {\n prompt = `\nSimulate Day ${currentDay} of a Hunger Games scenario.\nCurrently active alliances: ${alliancesInfo}.\nThere are ${characters.length} characters: ${characters.join(', ')}.\nProvide a structured narrative in valid JSON format using the following structure:\n{\n \"actions\": [\n { \"character\": \"Character Name\", \"action\": \"Description of the character's individual action\" },\n { \"character\": [\"Name1\", \"Name2\"], \"action\": \"Description of their joint action\" }\n ],\n \"randomEvents\": [\n { \"character\": [\"Character Name\", \"Another Character Name\"], \"action\": \"Random event description...\" },\n { \"character\": [\"Name1\", \"Name2\"], \"action\": \"Random event description...\" }\n ],\n \"synopsis\": \"A brief summary of the day's events.\",\n \"deaths\": [\"Name of character who died\", \"Another character\"]\n}\nEnsure each character’s actions are clearly separated. When alliances form, group the allied characters together by returning an array in the \"character\" field.\nEnd with a synopsis of the day.\nAdditionally, include exactly five random events that portray unpredictable interactions between characters or alliances — with three events involving more than two characters and two events involving exactly two characters. Use an immersive tone to capture betrayals, survival tactics, and strategic maneuvers.\n `;\n }\n\ntry {\n const dayData = await getAIResponse(prompt);\n\n```undefined\n```\n} catch (error) {\n appendStoryEntry(`Day ${currentDay}: An error occurred while generating the narrative.`);\n } finally {\n nextDayBtn.disabled = false;\n nextDayBtn.innerText = \"Next Day\";\n }\n}\n\n// Function to append the day's narrative entries to the story log,\n// mixing the actions and random events randomly.\nfunction appendDayEntry(dayData) {\n const dayContainer = document.createElement('div');\n dayContainer.classList.add('day-container');\n\n// Header for the day.\n const header = document.createElement('h3');\n header.innerText = `Day ${currentDay}`;\n dayContainer.appendChild(header);\n\n// Combine normal actions and random events (marking random events with a flag).\n let combinedEntries = dayData.actions.map(action => {\n return { ...action, isRandom: false };\n });\n\ndayData.randomEvents.forEach(event => {\n // Ensure each random event involves multiple characters.\n let charactersInEvent = Array.isArray(event.character) ? event.character : [event.character];\n if (charactersInEvent.length < 2) {\n charactersInEvent.push(\"Unknown\");\n }\n combinedEntries.push({ ...event, character: charactersInEvent, isRandom: true });\n });\n\n// Shuffle the combined entries so random events are interleaved with normal actions.\n combinedEntries = shuffleArray(combinedEntries);\n\n// Append each mixed entry.\n combinedEntries.forEach(entry => {\n const entryDiv = document.createElement('div');\n entryDiv.classList.add('story-entry');\n\n```undefined\n```\n});\n\n// Append the synopsis of the day.\n const synopsisDiv = document.createElement('div');\n synopsisDiv.classList.add('synopsis');\n synopsisDiv.innerHTML = `Synopsis: ${dayData.synopsis}`;\n dayContainer.appendChild(synopsisDiv);\n\n// Append the day's container to the main story log.\n const storyLog = document.getElementById('storyLog');\n storyLog.appendChild(dayContainer);\n storyLog.scrollTop = storyLog.scrollHeight;\n}\n\n// Function to update the death counter with new deaths.\nfunction updateDeathCounter(deathsToday) {\n deathsToday.forEach(death => {\n if (!deadCharacters.includes(death)) {\n deadCharacters.push(death);\n }\n });\n const deathListEl = document.getElementById('deathList');\n deathListEl.innerHTML = '';\n deadCharacters.forEach(death => {\n const li = document.createElement('li');\n li.textContent = death;\n deathListEl.appendChild(li);\n });\n}\n\n// Function to update and persist alliances based on the day's alliance events.\nfunction updateAlliances(actions) {\n // Process alliance formation events from the day's actions.\n actions.forEach(action => {\n if (Array.isArray(action.character)) {\n let newAllianceSet = new Set(action.character);\n let mergedIndices = [];\n alliances.forEach((alliance, index) => {\n if (alliance.some(member => newAllianceSet.has(member))) {\n alliance.forEach(member => newAllianceSet.add(member));\n mergedIndices.push(index);\n }\n });\n alliances = alliances.filter((_, index) => !mergedIndices.includes(index));\n let newAllianceArr = Array.from(newAllianceSet);\n if (newAllianceArr.length > 1) {\n alliances.push(newAllianceArr);\n }\n }\n });\n // Remove dead characters from alliances and filter out alliances with fewer than 2 members.\n alliances = alliances.map(alliance => alliance.filter(member => !deadCharacters.includes(member)))\n .filter(alliance => alliance.length > 1);\n}\n\n// Fallback function to append a simple story entry in case of error.\nfunction appendStoryEntry(text) {\n const storyLog = document.getElementById('storyLog');\n const entry = document.createElement('div');\n entry.classList.add('story-entry');\n entry.textContent = text;\n storyLog.appendChild(entry);\n storyLog.scrollTop = storyLog.scrollHeight;\n}\n\n// Function to call the AI language model via the provided API endpoint.\nasync function getAIResponse(prompt) {\n try {\n const response = await fetch('/api/ai_completion', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json'\n },\n body: JSON.stringify({\n prompt: prompt,\n data: {\n characters: characters,\n currentDay: currentDay,\n alliances: alliances,\n deadCharacters: deadCharacters\n }\n })\n });\n const data = await response.json();\n return data;\n } catch (error) {\n console.error('Error fetching AI response:', error);\n throw error;\n }\n}\n","cursor","eyJpZCI6ImpiMGtlYnhsMHE1azR2NWM5MTNsIn0","token","included",[177],{"_64":178,"_102":66,"_179":-5,"_180":55,"_181":55,"_182":55,"_183":97,"_184":97,"_185":97},"project_permissions","user_id","can_edit","can_delete","can_edit_members","can_view","can_list","can_participate","routes/browser/layout","actionData","errors"]

Enter Up to 30 Characters

Day 0 Chronicle