return Math.floor(finalExp);
}
-export async function fightRound(player: Player, monster: Fight, data: {action: 'attack' | 'cast' | 'flee', target: 'head' | 'body' | 'arms' | 'legs'}) {
+export async function fightRound(player: Player, monster: Fight, data: {action: 'attack' | 'cast' | 'flee'}) {
const playerSkills = await getPlayerSkillsAsObject(player.id);
const roundData: FightRound = {
monster,
<div id="fight-actions">
${displayFightActions ? `
<form hx-post="/fight/turn" hx-target="#fight-container">
- <select id="fight-target" name="fightTarget">
- <option value="head">Head</option>
- <option value="body">Body</option>
- <option value="arms">Arms</option>
- <option value="legs">Legs</option>
- </select>
${AttackButton(blockTime)}
${CastButton(blockTime)}
<button type="submit" class="fight-action" name="action" value="flee">Flee</button>
}
export function renderFightPreRound(monster: Fight, displayFightActions: boolean = true, location: LocationWithCity, closestTown: number) {
- const hpPercent = Math.floor((monster.hp / monster.maxHp) * 100);
-
let html = `
<section id="explore" class="tab active" style="background-image: url('/assets/img/map/${closestTown}.jpeg')" hx-swap-oob="true">
<div class="city-title-wrapper">
<div class="city-details">
<h3 class="location-name"><span>${location.name}</span></h3>
- <div id="fight-container">
- <div id="defender-info">
- <div class="avatar-container">
- <img id="avatar" src="https://via.placeholder.com/64x64">
- </div>
- <div id="defender-stat-bars">
- <div id="defender-name">${monster.name}, level ${monster.level}</div>
- <div class="progress-bar" id="defender-hp-bar" style="background: linear-gradient(to right, red, red ${hpPercent}%, transparent ${hpPercent}%, transparent)" title="${hpPercent}% - ${monster.hp}/${monster.maxHp}">${hpPercent}% - ${monster.hp} / ${monster.maxHp}</div>
- </div>
- </div>
- <div id="fight-actions">
- ${displayFightActions ? `
- <form hx-post="/fight/turn" hx-target="#fight-container">
- <select id="fight-target" name="fightTarget">
- <option value="head">Head</option>
- <option value="body">Body</option>
- <option value="arms">Arms</option>
- <option value="legs">Legs</option>
- </select>
- ${AttackButton()}
- ${CastButton()}
- <button type="submit" class="fight-action" name="action" value="flee">Flee</button>
- </form>
- `: ''}
- </div>
- <div id="fight-results"></div>
+ ${renderFight(monster, '', displayFightActions)}
</div>
-</div>
</section>
`;