|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Monster Girl Academy: Heartstrings</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@keyframes float { |
|
0% { transform: translateY(0px); } |
|
50% { transform: translateY(-10px); } |
|
100% { transform: translateY(0px); } |
|
} |
|
.floating { |
|
animation: float 3s ease-in-out infinite; |
|
} |
|
.bg-academy { |
|
background-image: url('https://images.unsplash.com/photo-1588072432836-e10032774350?q=80&w=2072&auto=format&fit=crop'); |
|
background-size: cover; |
|
background-position: center; |
|
} |
|
.character-card { |
|
transition: all 0.3s ease; |
|
transform-style: preserve-3d; |
|
} |
|
.character-card:hover { |
|
transform: scale(1.05) rotateY(5deg); |
|
box-shadow: 0 10px 25px rgba(0,0,0,0.2); |
|
} |
|
.stat-bar { |
|
height: 6px; |
|
transition: width 0.5s ease; |
|
} |
|
.dialogue-box { |
|
min-height: 200px; |
|
background: rgba(255, 255, 255, 0.9); |
|
border-radius: 15px; |
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
} |
|
.choice-btn { |
|
transition: all 0.2s ease; |
|
} |
|
.choice-btn:hover { |
|
transform: translateY(-3px); |
|
box-shadow: 0 5px 10px rgba(0,0,0,0.1); |
|
} |
|
.character-portrait { |
|
filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2)); |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-100 font-sans"> |
|
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
|
|
<header class="bg-purple-900 text-white rounded-xl p-6 mb-8 shadow-lg bg-academy relative overflow-hidden"> |
|
<div class="absolute inset-0 bg-black opacity-40"></div> |
|
<div class="relative z-10 flex flex-col items-center"> |
|
<h1 class="text-4xl md:text-5xl font-bold mb-2 text-center floating">Monster Girl Academy: Heartstrings</h1> |
|
<p class="text-xl text-purple-200 mb-4 text-center">Where bonds transcend species</p> |
|
<div class="flex space-x-4"> |
|
<button id="newGameBtn" class="bg-pink-600 hover:bg-pink-700 text-white px-6 py-2 rounded-full font-semibold transition">New Game</button> |
|
<button id="loadGameBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full font-semibold transition">Load Game</button> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<div id="gameArea" class="hidden"> |
|
|
|
<div class="bg-white rounded-xl p-4 mb-6 shadow-md flex flex-wrap justify-between items-center"> |
|
<div class="flex items-center space-x-4 mb-2 sm:mb-0"> |
|
<div class="bg-yellow-100 p-2 rounded-lg"> |
|
<i class="fas fa-calendar-day text-yellow-600"></i> |
|
<span id="gameDay" class="font-semibold ml-1">Day 1</span> |
|
</div> |
|
<div class="bg-blue-100 p-2 rounded-lg"> |
|
<i class="fas fa-clock text-blue-600"></i> |
|
<span id="gameTime" class="font-semibold ml-1">Morning</span> |
|
</div> |
|
</div> |
|
<div class="flex items-center space-x-4"> |
|
<div class="bg-green-100 p-2 rounded-lg"> |
|
<i class="fas fa-coins text-green-600"></i> |
|
<span id="gameMoney" class="font-semibold ml-1">100</span> |
|
</div> |
|
<div class="bg-red-100 p-2 rounded-lg"> |
|
<i class="fas fa-heart text-red-600"></i> |
|
<span id="gameEnergy" class="font-semibold ml-1">10/10</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-6"> |
|
|
|
<div class="w-full lg:w-1/4"> |
|
<div class="bg-white rounded-xl p-4 shadow-md mb-6"> |
|
<h2 class="text-xl font-bold mb-4 text-purple-800 border-b pb-2">Your Connections</h2> |
|
<div id="characterList" class="space-y-4"> |
|
|
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-xl p-4 shadow-md"> |
|
<h2 class="text-xl font-bold mb-4 text-purple-800 border-b pb-2">Your Stats</h2> |
|
<div class="space-y-3"> |
|
<div> |
|
<p class="text-sm font-medium text-gray-700 mb-1">Charm <span class="float-right">50%</span></p> |
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
<div class="bg-pink-500 h-1.5 rounded-full stat-bar" style="width: 50%"></div> |
|
</div> |
|
</div> |
|
<div> |
|
<p class="text-sm font-medium text-gray-700 mb-1">Intelligence <span class="float-right">30%</span></p> |
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
<div class="bg-blue-500 h-1.5 rounded-full stat-bar" style="width: 30%"></div> |
|
</div> |
|
</div> |
|
<div> |
|
<p class="text-sm font-medium text-gray-700 mb-1">Courage <span class="float-right">70%</span></p> |
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
<div class="bg-yellow-500 h-1.5 rounded-full stat-bar" style="width: 70%"></div> |
|
</div> |
|
</div> |
|
<div> |
|
<p class="text-sm font-medium text-gray-700 mb-1">Empathy <span class="float-right">40%</span></p> |
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
<div class="bg-green-500 h-1.5 rounded-full stat-bar" style="width: 40%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="w-full lg:w-2/4"> |
|
<div class="bg-white rounded-xl p-6 shadow-md mb-6 dialogue-box"> |
|
<div id="mainEvent" class="text-center py-8"> |
|
<h2 class="text-2xl font-bold text-purple-900 mb-4">Welcome to Monster Girl Academy</h2> |
|
<p class="text-gray-700 mb-6">As the first human student admitted to this prestigious academy for magical beings, you'll navigate complex relationships with fascinating creatures from all walks of life. Each choice shapes your story and determines who you'll become by year's end.</p> |
|
<button id="startAdventureBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 rounded-full font-semibold text-lg transition">Begin Your Journey</button> |
|
</div> |
|
</div> |
|
|
|
<div id="choicesContainer" class="grid grid-cols-1 md:grid-cols-2 gap-4 hidden"> |
|
|
|
</div> |
|
</div> |
|
|
|
|
|
<div class="w-full lg:w-1/4"> |
|
<div class="bg-white rounded-xl p-4 shadow-md mb-6"> |
|
<h2 class="text-xl font-bold mb-4 text-purple-800 border-b pb-2">Academy Calendar</h2> |
|
<div class="grid grid-cols-7 gap-1 text-center mb-2"> |
|
<div class="text-xs font-semibold">S</div> |
|
<div class="text-xs font-semibold">M</div> |
|
<div class="text-xs font-semibold">T</div> |
|
<div class="text-xs font-semibold">W</div> |
|
<div class="text-xs font-semibold">T</div> |
|
<div class="text-xs font-semibold">F</div> |
|
<div class="text-xs font-semibold">S</div> |
|
</div> |
|
<div class="grid grid-cols-7 gap-1 text-center"> |
|
|
|
<div class="p-1 text-xs opacity-30">29</div> |
|
<div class="p-1 text-xs opacity-30">30</div> |
|
<div class="p-1 text-xs opacity-30">31</div> |
|
<div class="p-1 text-xs border rounded-full bg-purple-100 font-semibold">1</div> |
|
<div class="p-1 text-xs">2</div> |
|
<div class="p-1 text-xs">3</div> |
|
<div class="p-1 text-xs">4</div> |
|
<div class="p-1 text-xs">5</div> |
|
<div class="p-1 text-xs">6</div> |
|
<div class="p-1 text-xs">7</div> |
|
<div class="p-1 text-xs">8</div> |
|
<div class="p-1 text-xs">9</div> |
|
<div class="p-1 text-xs">10</div> |
|
<div class="p-1 text-xs">11</div> |
|
<div class="p-1 text-xs">12</div> |
|
<div class="p-1 text-xs">13</div> |
|
<div class="p-1 text-xs">14</div> |
|
<div class="p-1 text-xs">15</div> |
|
<div class="p-1 text-xs">16</div> |
|
<div class="p-1 text-xs">17</div> |
|
<div class="p-1 text-xs">18</div> |
|
<div class="p-1 text-xs">19</div> |
|
<div class="p-1 text-xs">20</div> |
|
<div class="p-1 text-xs">21</div> |
|
<div class="p-1 text-xs">22</div> |
|
<div class="p-1 text-xs">23</div> |
|
<div class="p-1 text-xs">24</div> |
|
<div class="p-1 text-xs">25</div> |
|
<div class="p-1 text-xs">26</div> |
|
<div class="p-1 text-xs">27</div> |
|
<div class="p-1 text-xs">28</div> |
|
<div class="p-1 text-xs">29</div> |
|
<div class="p-1 text-xs">30</div> |
|
<div class="p-1 text-xs opacity-30">1</div> |
|
<div class="p-1 text-xs opacity-30">2</div> |
|
</div> |
|
<div class="mt-4 pt-2 border-t"> |
|
<h3 class="font-semibold text-sm mb-2">Upcoming Events</h3> |
|
<ul class="text-xs space-y-1"> |
|
<li class="flex items-center"><span class="w-2 h-2 bg-pink-500 rounded-full mr-2"></span> Moonlight Festival - Week 2</li> |
|
<li class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span> Midterms - Week 6</li> |
|
<li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span> Sports Day - Week 8</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-xl p-4 shadow-md"> |
|
<h2 class="text-xl font-bold mb-4 text-purple-800 border-b pb-2">Notifications</h2> |
|
<div id="notifications" class="space-y-3"> |
|
<div class="p-2 bg-blue-50 rounded-lg text-sm"> |
|
<p class="font-medium">Welcome to Monster Girl Academy!</p> |
|
<p class="text-xs text-gray-600">Find your dorm in the West Wing</p> |
|
</div> |
|
<div class="p-2 bg-yellow-50 rounded-lg text-sm"> |
|
<p class="font-medium">Orientation at 10AM</p> |
|
<p class="text-xs text-gray-600">Main Hall, don't be late!</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
const gameState = { |
|
day: 1, |
|
time: 'Morning', |
|
energy: 10, |
|
maxEnergy: 10, |
|
money: 100, |
|
stats: { |
|
charm: 50, |
|
intelligence: 30, |
|
courage: 70, |
|
empathy: 40 |
|
}, |
|
relationships: {}, |
|
currentEvent: null, |
|
eventHistory: [], |
|
flags: {} |
|
}; |
|
|
|
|
|
const monstergirls = { |
|
seraphina: { |
|
id: 'seraphina', |
|
name: 'Seraphina', |
|
species: 'Lamia', |
|
title: 'The Serpent Prodigy', |
|
personality: 'Intelligent, ambitious, but socially awkward', |
|
initialStats: { |
|
trust: 30, |
|
affection: 20, |
|
curiosity: 60, |
|
respect: 50 |
|
}, |
|
image: 'lamia.png', |
|
color: 'bg-green-100', |
|
textColor: 'text-green-800', |
|
borderColor: 'border-green-300', |
|
likes: ['Ancient history', 'Intellectual debates', 'Quiet libraries'], |
|
dislikes: ['Small talk', 'Disorganization', 'Loud noises'], |
|
events: [ |
|
{ |
|
id: 'library_encounter', |
|
title: 'Unexpected Study Partner', |
|
description: 'You find Seraphina surrounded by ancient tomes in the library. She seems frustrated with a particularly difficult text.', |
|
choices: [ |
|
{ |
|
text: 'Offer to help with the research', |
|
requirements: { intelligence: 40 }, |
|
outcomes: [ |
|
{ type: 'stat', target: 'seraphina', stat: 'trust', change: 10 }, |
|
{ type: 'stat', target: 'seraphina', stat: 'affection', change: 5 }, |
|
{ type: 'stat', target: 'player', stat: 'intelligence', change: 5 }, |
|
{ type: 'flag', id: 'helped_seraphina_research', value: true } |
|
] |
|
}, |
|
{ |
|
text: 'Ask if she wants to take a break and get some air', |
|
outcomes: [ |
|
{ type: 'stat', target: 'seraphina', stat: 'affection', change: -5 }, |
|
{ type: 'dialogue', text: "Seraphina glares at you. 'I don't have time for breaks. Some of us take our studies seriously.'" } |
|
] |
|
}, |
|
{ |
|
text: 'Quietly sit nearby and study your own materials', |
|
outcomes: [ |
|
{ type: 'stat', target: 'seraphina', stat: 'respect', change: 5 }, |
|
{ type: 'dialogue', text: "Seraphina glances at you occasionally, seeming to appreciate your quiet diligence." } |
|
] |
|
} |
|
] |
|
}, |
|
|
|
] |
|
}, |
|
marigold: { |
|
id: 'marigold', |
|
name: 'Marigold', |
|
species: 'Slimegirl', |
|
title: 'The Bubbly Alchemist', |
|
personality: 'Cheerful, curious, but easily distracted', |
|
initialStats: { |
|
trust: 50, |
|
affection: 40, |
|
curiosity: 70, |
|
respect: 30 |
|
}, |
|
image: 'slime.png', |
|
color: 'bg-blue-100', |
|
textColor: 'text-blue-800', |
|
borderColor: 'border-blue-300', |
|
likes: ['New experiences', 'Sweet treats', 'Colorful things'], |
|
dislikes: ['Being ignored', 'Boring routines', 'Hot temperatures'], |
|
events: [ |
|
{ |
|
id: 'lab_accident', |
|
title: 'Sticky Situation', |
|
description: 'Marigold has accidentally turned herself bright pink during an alchemy experiment and is panicking about how to fix it.', |
|
choices: [ |
|
{ |
|
text: 'Help her find the antidote in the alchemy books', |
|
requirements: { intelligence: 30 }, |
|
outcomes: [ |
|
{ type: 'stat', target: 'marigold', stat: 'trust', change: 15 }, |
|
{ type: 'stat', target: 'player', stat: 'intelligence', change: 5 }, |
|
{ type: 'dialogue', text: "'You're so smart!' Marigold bubbles happily as you find the solution. 'Let's make the antidote together!'" } |
|
] |
|
}, |
|
{ |
|
text: 'Tell her the pink actually looks cute on her', |
|
outcomes: [ |
|
{ type: 'stat', target: 'marigold', stat: 'affection', change: 10 }, |
|
{ type: 'dialogue', text: "Marigold giggles and wobbles excitedly. 'You really think so? Maybe I'll stay pink for a while longer!'" } |
|
] |
|
}, |
|
{ |
|
text: 'Report the accident to the professor', |
|
outcomes: [ |
|
{ type: 'stat', target: 'marigold', stat: 'trust', change: -10 }, |
|
{ type: 'stat', target: 'marigold', stat: 'affection', change: -15 }, |
|
{ type: 'dialogue', text: "'Snitches get stitches!' Marigold pouts as the professor scolds her. She seems really upset with you." } |
|
] |
|
} |
|
] |
|
}, |
|
|
|
] |
|
}, |
|
|
|
}; |
|
|
|
|
|
function initRelationships() { |
|
for (const girlId in monstergirls) { |
|
gameState.relationships[girlId] = { ...monstergirls[girlId].initialStats }; |
|
} |
|
} |
|
|
|
|
|
const newGameBtn = document.getElementById('newGameBtn'); |
|
const loadGameBtn = document.getElementById('loadGameBtn'); |
|
const gameArea = document.getElementById('gameArea'); |
|
const startAdventureBtn = document.getElementById('startAdventureBtn'); |
|
const mainEvent = document.getElementById('mainEvent'); |
|
const choicesContainer = document.getElementById('choicesContainer'); |
|
const characterList = document.getElementById('characterList'); |
|
|
|
|
|
newGameBtn.addEventListener('click', startNewGame); |
|
loadGameBtn.addEventListener('click', loadGame); |
|
startAdventureBtn.addEventListener('click', beginAdventure); |
|
|
|
|
|
function startNewGame() { |
|
|
|
gameState.day = 1; |
|
gameState.time = 'Morning'; |
|
gameState.energy = 10; |
|
gameState.money = 100; |
|
gameState.stats = { |
|
charm: 50, |
|
intelligence: 30, |
|
courage: 70, |
|
empathy: 40 |
|
}; |
|
gameState.eventHistory = []; |
|
gameState.flags = {}; |
|
|
|
initRelationships(); |
|
|
|
|
|
gameArea.classList.remove('hidden'); |
|
|
|
|
|
updateGameInfo(); |
|
renderCharacterList(); |
|
|
|
|
|
triggerEvent('welcome_event'); |
|
} |
|
|
|
function loadGame() { |
|
|
|
alert('Load game functionality would go here! For now, starting a new game.'); |
|
startNewGame(); |
|
} |
|
|
|
function beginAdventure() { |
|
triggerEvent('orientation_event'); |
|
} |
|
|
|
function triggerEvent(eventId) { |
|
|
|
if (eventId === 'welcome_event') { |
|
mainEvent.innerHTML = ` |
|
<div class="flex flex-col items-center"> |
|
<img src="https://i.imgur.com/JQl1D1X.png" alt="Academy Gates" class="w-full max-w-md rounded-lg mb-4 character-portrait"> |
|
<h2 class="text-2xl font-bold text-purple-900 mb-4">The Academy Gates</h2> |
|
<p class="text-gray-700 mb-4">The towering gates of Monster Girl Academy loom before you, their intricate ironwork depicting scenes of legendary creatures. As the first human student, you're not sure what to expect from this year.</p> |
|
<p class="text-gray-700 mb-6">A cheerful harpy flies down to greet you. "Welcome! Orientation starts in an hour at the Main Hall. Until then, feel free to explore the grounds!"</p> |
|
<div class="flex space-x-4"> |
|
<button class="event-choice-btn bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-full font-semibold transition" data-choice="explore">Explore the Campus</button> |
|
<button class="event-choice-btn bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-full font-semibold transition" data-choice="dorm">Go Straight to Your Dorm</button> |
|
</div> |
|
</div> |
|
`; |
|
|
|
|
|
document.querySelectorAll('.event-choice-btn').forEach(btn => { |
|
btn.addEventListener('click', function() { |
|
const choice = this.getAttribute('data-choice'); |
|
if (choice === 'explore') { |
|
triggerEvent('campus_exploration'); |
|
} else { |
|
triggerEvent('dorm_settle'); |
|
} |
|
}); |
|
}); |
|
|
|
return; |
|
} |
|
|
|
|
|
const availableGirls = Object.values(monstergirls).filter(girl => |
|
!gameState.eventHistory.includes(girl.events[0].id) |
|
); |
|
|
|
if (availableGirls.length > 0) { |
|
const randomGirl = availableGirls[Math.floor(Math.random() * availableGirls.length)]; |
|
const girlEvent = randomGirl.events[0]; |
|
gameState.currentEvent = girlEvent; |
|
gameState.eventHistory.push(girlEvent.id); |
|
|
|
displayEvent(girlEvent, randomGirl); |
|
} else { |
|
|
|
mainEvent.innerHTML = ` |
|
<div class="text-center py-8"> |
|
<h2 class="text-2xl font-bold text-purple-900 mb-4">End of Demo</h2> |
|
<p class="text-gray-700 mb-6">This concludes our preview of Monster Girl Academy: Heartstrings. In the full game, you'd experience dozens more events, deeper relationships, and multiple endings with each character.</p> |
|
<button onclick="startNewGame()" class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 rounded-full font-semibold text-lg transition">Play Again</button> |
|
</div> |
|
`; |
|
} |
|
} |
|
|
|
function displayEvent(event, girl) { |
|
mainEvent.innerHTML = ` |
|
<div class="flex flex-col md:flex-row items-center md:items-start"> |
|
<img src="https://i.imgur.com/${girl.image || 'JQl1D1X.png'}" alt="${girl.name}" class="w-full max-w-xs rounded-lg mb-4 md:mb-0 md:mr-6 character-portrait"> |
|
<div> |
|
<div class="flex items-center mb-2"> |
|
<h2 class="text-2xl font-bold ${girl.textColor}">${girl.name}</h2> |
|
<span class="ml-2 px-2 py-1 text-xs rounded-full ${girl.color} ${girl.textColor}">${girl.species}</span> |
|
</div> |
|
<p class="text-gray-700 mb-4">${event.description}</p> |
|
</div> |
|
</div> |
|
`; |
|
|
|
|
|
choicesContainer.innerHTML = ''; |
|
choicesContainer.classList.remove('hidden'); |
|
|
|
event.choices.forEach((choice, index) => { |
|
const choiceBtn = document.createElement('button'); |
|
choiceBtn.className = `choice-btn bg-white hover:bg-gray-50 border ${girl.borderColor} text-gray-800 px-4 py-3 rounded-lg font-medium text-left`; |
|
choiceBtn.textContent = choice.text; |
|
|
|
|
|
let meetsRequirements = true; |
|
if (choice.requirements) { |
|
for (const stat in choice.requirements) { |
|
if (gameState.stats[stat] < choice.requirements[stat]) { |
|
meetsRequirements = false; |
|
choiceBtn.className = `choice-btn bg-gray-100 border border-gray-200 text-gray-400 px-4 py-3 rounded-lg font-medium text-left cursor-not-allowed`; |
|
choiceBtn.title = `Requires ${stat} ${choice.requirements[stat]}`; |
|
} |
|
} |
|
} |
|
|
|
if (meetsRequirements) { |
|
choiceBtn.addEventListener('click', () => handleChoice(choice, girl)); |
|
} |
|
|
|
choicesContainer.appendChild(choiceBtn); |
|
}); |
|
} |
|
|
|
function handleChoice(choice, girl) { |
|
|
|
choice.outcomes.forEach(outcome => { |
|
if (outcome.type === 'stat') { |
|
if (outcome.target === 'player') { |
|
gameState.stats[outcome.stat] += outcome.change; |
|
gameState.stats[outcome.stat] = Math.max(0, Math.min(100, gameState.stats[outcome.stat])); |
|
} else { |
|
gameState.relationships[girl.id][outcome.stat] += outcome.change; |
|
gameState.relationships[girl.id][outcome.stat] = Math.max(0, Math.min(100, gameState.relationships[girl.id][outcome.stat])); |
|
} |
|
} else if (outcome.type === 'flag') { |
|
gameState.flags[outcome.id] = outcome.value; |
|
} else if (outcome.type === 'dialogue') { |
|
|
|
alert(outcome.text); |
|
} |
|
}); |
|
|
|
|
|
advanceTime(); |
|
|
|
|
|
updateGameInfo(); |
|
renderCharacterList(); |
|
|
|
|
|
triggerEvent('random'); |
|
} |
|
|
|
function advanceTime() { |
|
|
|
const times = ['Morning', 'Afternoon', 'Evening', 'Night']; |
|
const currentIndex = times.indexOf(gameState.time); |
|
|
|
if (currentIndex < times.length - 1) { |
|
gameState.time = times[currentIndex + 1]; |
|
} else { |
|
gameState.time = 'Morning'; |
|
gameState.day++; |
|
|
|
|
|
gameState.energy = Math.min(gameState.maxEnergy, gameState.energy + 5); |
|
} |
|
|
|
|
|
gameState.energy = Math.max(0, gameState.energy - 2); |
|
} |
|
|
|
function updateGameInfo() { |
|
document.getElementById('gameDay').textContent = `Day ${gameState.day}`; |
|
document.getElementById('gameTime').textContent = gameState.time; |
|
document.getElementById('gameMoney').textContent = gameState.money; |
|
document.getElementById('gameEnergy').textContent = `${gameState.energy}/${gameState.maxEnergy}`; |
|
|
|
|
|
for (const stat in gameState.stats) { |
|
const statElements = document.querySelectorAll(`.stat-bar[data-stat="${stat}"]`); |
|
statElements.forEach(el => { |
|
el.style.width = `${gameState.stats[stat]}%`; |
|
}); |
|
} |
|
} |
|
|
|
function renderCharacterList() { |
|
characterList.innerHTML = ''; |
|
|
|
for (const girlId in monstergirls) { |
|
const girl = monstergirls[girlId]; |
|
const relationship = gameState.relationships[girlId]; |
|
|
|
const girlCard = document.createElement('div'); |
|
girlCard.className = `character-card ${girl.color} ${girl.borderColor} border-2 p-3 rounded-lg flex items-center`; |
|
|
|
|
|
const totalStats = Object.values(relationship).reduce((a, b) => a + b, 0); |
|
const relationshipPercent = Math.floor(totalStats / (Object.keys(relationship).length * 100) * 100); |
|
|
|
girlCard.innerHTML = ` |
|
<div class="w-12 h-12 rounded-full ${girl.color} border-2 ${girl.borderColor} mr-3 flex-shrink-0 overflow-hidden"> |
|
<img src="https://i.imgur.com/${girl.image || 'JQl1D1X.png'}" alt="${girl.name}" class="w-full h-full object-cover"> |
|
</div> |
|
<div class="flex-grow"> |
|
<h3 class="font-semibold ${girl.textColor}">${girl.name}</h3> |
|
<p class="text-xs text-gray-600">${girl.species}</p> |
|
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
|
<div class="h-1.5 rounded-full ${girl.borderColor.replace('border', 'bg')}" style="width: ${relationshipPercent}%"></div> |
|
</div> |
|
</div> |
|
`; |
|
|
|
characterList.appendChild(girlCard); |
|
} |
|
} |
|
|
|
|
|
initRelationships(); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=lunarflu/rpg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
