The Strongest Hero Maker

\n```undefined\n```\n

\n \n\n\nstyles.css\n@font-face {\n font-family: 'ANDYB';\n src: url('ANDYB.TTF') format('truetype');\n}\n\n:root {\n --primary-color: #2a2a72;\n --secondary-color: #009ffd;\n --background-color: rgba(26, 26, 46, 0.95);\n --text-color: #ffffff;\n --card-background: rgba(37, 37, 71, 0.95);\n --accent-color: #ff6b6b;\n}\n\nbody {\n font-family: 'ANDYB', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n margin: 0;\n padding: 20px;\n color: var(--text-color);\n line-height: 1.6;\n background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('OIP.jfif');\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n backdrop-filter: blur(8px);\n min-height: 100vh;\n}\n\n.container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n}\n\nh1 {\n text-align: center;\n color: var(--secondary-color);\n font-size: 2.5em;\n margin-bottom: 40px;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n.input-section {\n background: var(--card-background);\n padding: 30px;\n border-radius: 15px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.input-group {\n margin-bottom: 20px;\n}\n\nlabel {\n display: block;\n margin-bottom: 8px;\n color: var(--secondary-color);\n}\n\ninput, textarea, select {\n width: 100%;\n padding: 12px;\n border: 2px solid var(--primary-color);\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.1);\n color: var(--text-color);\n font-size: 16px;\n}\n\ninput, textarea, button, select {\n font-family: 'ANDYB', sans-serif;\n}\n\ntextarea {\n resize: vertical;\n min-height: 80px;\n}\n\nbutton {\n background: var(--secondary-color);\n color: var(--text-color);\n padding: 12px 24px;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 16px;\n transition: all 0.3s ease;\n width: 100%;\n}\n\nbutton:hover {\n background: var(--primary-color);\n transform: translateY(-2px);\n}\n\n.hero-card {\n background: var(--card-background);\n padding: 30px;\n border-radius: 15px;\n margin-top: 30px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.section {\n margin-bottom: 30px;\n padding: 20px;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 10px;\n}\n\n.section h3 {\n color: var(--secondary-color);\n margin-top: 0;\n}\n\n.hidden {\n display: none;\n}\n\n#loadingIndicator {\n text-align: center;\n margin: 40px 0;\n}\n\n.spinner {\n width: 50px;\n height: 50px;\n border: 5px solid var(--secondary-color);\n border-top: 5px solid transparent;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 0 auto 20px;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.move-card {\n background: rgba(255, 255, 255, 0.08);\n padding: 12px;\n margin: 8px 0;\n border-radius: 8px;\n border-left: 4px solid var(--accent-color);\n transition: transform 0.2s ease;\n}\n\n.move-card:hover {\n transform: translateX(5px);\n}\n\n.move-card h5 {\n margin: 0 0 8px 0;\n color: var(--secondary-color);\n font-size: 1.4em;\n letter-spacing: 1px;\n}\n\n.move-info {\n display: flex;\n gap: 15px;\n margin-bottom: 8px;\n font-size: 0.85em;\n color: #aaa;\n}\n\n.move-info span {\n background: rgba(0, 0, 0, 0.2);\n padding: 2px 8px;\n border-radius: 4px;\n}\n\n.move-card p {\n margin: 5px 0;\n}\n\n.special-tag, .use-twice-tag {\n display: inline-block;\n padding: 2px 8px;\n border-radius: 4px;\n font-size: 0.8em;\n margin-right: 8px;\n background: var(--accent-color);\n color: white;\n}\n\n.use-twice-content {\n background: rgba(0, 0, 0, 0.2);\n padding: 8px;\n border-radius: 4px;\n margin-top: 8px;\n}\n\n#regenerateBtn {\n margin-top: 20px;\n}\n\n/* New styles for Star Ability cards */\n.star-card {\n background: rgba(255, 255, 255, 0.1);\n padding: 15px;\n margin: 8px 0;\n border-radius: 8px;\n border-left: 4px solid var(--accent-color);\n}\n\n.star-card h4 {\n margin: 0 0 8px 0;\n color: var(--secondary-color);\n font-size: 1.4em;\n}\n\n.star-card p {\n margin: 4px 0;\n}\n\n.meter-note {\n font-style: italic;\n color: #ccc;\n font-size: 0.9em;\n}\n\n/* New bevel color and size variants for move text */\n.bevel-green {\n color: #28a745;\n font-size: 1.2em;\n}\n\n.bevel-yellow {\n color: #ffc107;\n font-size: 1.2em;\n}\n\n.bevel-red {\n color: #dc3545;\n font-size: 1.2em;\n}\n\n.bevel-purple {\n color: #6f42c1;\n font-size: 1.2em;\n}\n\n.bevel-black {\n color: #343a40;\n font-size: 1.4em;\n font-weight: bold;\n}\n\n.bevel-white {\n color: #ffffff;\n font-size: 1.2em;\n}\n\n/* New bevel color for parry moves */\n.bevel-orange {\n color: #ffa500;\n font-size: 1.2em;\n}\n\nselect {\n width: 100%;\n padding: 12px;\n border: 2px solid var(--primary-color);\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.1);\n color: var(--text-color);\n font-size: 16px;\n margin-bottom: 20px;\n}\n\n/* New style for light cost info in Limbus Game mode */\n.light-info {\n color: #ffd700;\n font-style: italic;\n margin-top: 5px;\n}\n\n/* New styles for hero stats and voice lines sections */\n#heroStatsSection, #voiceLinesSection {\n margin-top: 20px;\n}\n\nscripts.js\nconst RANGES = [\n 'Strict short-range',\n 'Short-range',\n 'Strict Medium-Range',\n 'Medium-range',\n 'Strict far-range',\n 'Far-range',\n 'All-range'\n];\n\nasync function generateHero(characterName, debut, context, gameMode) {\n let prompt = `Generate a hero character profile based on the following input:\nCharacter Name: ${characterName}\nDebut: ${debut}\nContext: ${context}\nGame Mode: ${gameMode}\n\ninterface HeroProfile {\n heroName: string;\n appearance: string;\n basicMoveset: {\n m1Combo: string;\n moves: Array<{\n name: string;\n range: string;\n cooldown: number;\n description: string;\n special?: {\n airborne?: string;\n parry?: string;\n };\n useTwice?: {\n first: string;\n second: string;\n };\n isFinisher?: boolean;\n lightCost?: number;\n }>;\n star?: {\n name: string;\n description: string;\n consumesMeter?: boolean;\n };\n };\n awakening: {\n name: string;\n description: string;\n m1: string;\n moves: Array<{\n name: string;\n range: string;\n cooldown?: number;\n description: string;\n isFinisher?: boolean;\n special?: {\n airborne?: string;\n parry?: string;\n };\n useTwice?: {\n first: string;\n second: string;\n };\n lightCost?: number;\n }>;\n star?: {\n name: string;\n description: string;\n consumesMeter?: boolean;\n };\n // For Jujutsu Shenanigans, include an awakening voice line\n awakeningVoiceLine?: string;\n };\n // For Limbus Game, include heroStats with health and maxLight\n heroStats?: {\n health: number;\n maxLight: number;\n };\n // Optional voice lines array for narrative moments in Jujutsu Shenanigans or Limbus Game\n voiceLines?: string[];\n}\n\nRules:\n- The Hero Name should be unofficial but heavily related to the character and should be strictly referred to as the generated hero name or as the Player when used in narrative.\n- The M1 for the basic moveset does NOT count as a move, so exactly 4 moves must be provided unless the game mode is \"Prime Battlegrounds\", in which case exactly 5 moves must be provided.\n- Only one move in each moveset can have a 'special' or 'useTwice' feature. (In Prime Battlegrounds no Special or Finisher moves are allowed.)\n- Moves that are not marked as 'special' cannot include parry moves.\n- Maximum character limit for each move's description is 180 characters.\n\nGame Mode Specific Rules:\n- For The Strongest Battlegrounds: Attacks are more violent and cover a broader area. Entering Awakening may deal area damage on its own. Star Abilities do not exist.\n- For Jujutsu Shenanigans: Attacks are more focused and abstract with balanced ranges. Awakening moves are significant improvements over regular moves. Star Abilities are allowed.\n- For Prime Battlegrounds: There are 5 moves per form instead of 4. No Star Abilities exist. No Special or Finisher moves are allowed. Moves may feature explosions if depicted as loud attacks.\n`;\n \n // Append rules for Limbus Game mode and Jujutsu Shenanigans\n if (gameMode === \"Limbus Game\") {\n prompt += `\nFor game mode Limbus Game:\n- Base moveset consists of exactly 4 moves.\n- Awakening is considered the Ultimate and consists of only 1 move.\n- Do not include any Star Abilities.\n- All attacks are close range and designed as unique combos that only apply if the initial attack hits.\n- The fourth move is typically a self-buff or parry move without being designated as 'Special'.\n- There are no Special or Use Twice moves.\n- Implement a Light system: Light is acquired by connecting M1 attacks; moves may cost between 1 to 5 light. When a move is triggered, it consumes all current light, which should be described as an extra component in the move's description (with the fourth move consuming no light if it's a self-buff).\n- Each hero should include a \"heroStats\" object with properties \"health\" and \"maxLight\". \"health\" can be 300, 350, 400, 450, or 500. The higher the health, the lower the maxLight (for example, health 500 corresponds to a maxLight of 4, while health 300 may allow up to 8).\n- In Limbus Game, moves should mention if the hero's current light is more than the required cost.\n- Include voice lines for events such as enemy at half health (e.g., \"The odds are in my favor, isn't it?\"), upon defeating an enemy, connecting your Ultimate, or when the hero's health falls to half.\n`;\n } else if (gameMode === \"Jujutsu Shenanigans\") {\n prompt += `\nFor game mode Jujutsu Shenanigans: \n- When the hero activates Awakening, include an additional property \"awakeningVoiceLine\" in the awakening object with a manga-style narrative voice line.\n`;\n }\n\n // Append rules for Prime Battlegrounds if needed (existing logic)\n \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({ prompt, data: { characterName, debut, context, gameMode } }),\n });\n \n return await response.json();\n } catch (error) {\n console.error('Error generating hero:', error);\n throw new Error('Failed to generate hero');\n }\n}\n\nfunction getBevelClass(move) {\n if (move.isFinisher) {\n return 'bevel-black';\n } else if (move.special && move.special.parry) {\n return 'bevel-orange';\n } else if (move.range && move.range.toLowerCase().includes('strict')) {\n return 'bevel-purple';\n } else if (move.cooldown && move.cooldown <= 20) {\n return 'bevel-green';\n } else if (move.cooldown && move.cooldown >= 25) {\n return 'bevel-red';\n } else if (move.useTwice) {\n return 'bevel-yellow';\n }\n return 'bevel-green';\n}\n\nfunction createMoveCard(move, index, isAwakening = false) {\n const moveCard = document.createElement('div');\n moveCard.className = 'move-card';\n\nconst title = document.createElement('h5');\n title.textContent = move.name;\n title.classList.add(getBevelClass(move));\n moveCard.appendChild(title);\n\nconst info = document.createElement('div');\n info.className = 'move-info';\n\n// Only add Special or Use Twice tags for non-Limbus Game modes\n if (window.selectedGameMode !== \"Limbus Game\") {\n if (move.special) {\n const specialTag = document.createElement('span');\n specialTag.className = 'special-tag';\n specialTag.textContent = 'Special';\n info.appendChild(specialTag);\n }\n if (move.useTwice) {\n const useTwiceTag = document.createElement('span');\n useTwiceTag.className = 'use-twice-tag';\n useTwiceTag.textContent = 'Use Twice';\n info.appendChild(useTwiceTag);\n }\n }\n\n","cursor","eyJpZCI6InIxMGY1NTNxazBzdW9lX21tZHUzIn0","token","included",[],"routes/browser/layout","actionData","errors"]