const TYPES = { Grass: '🍃', Fire: '🔥', Water: '💧', Lightning: '⚡', Fighting: '✊', Psychic: '👁️', Colorless: '⭐', Darkness: '🌑', Metal: '⚙️', Dragon: '🐲', Fairy: '🧚', }; const energyHTML = (type, types = TYPES) => { return `${types[type]}`; }; const attackCostHTML = (cost) => { if (!cost.length) { return ''; } return `

${cost.map((energy) => energyHTML(energy)).join('')}

`; }; const attackDescriptionHTML = (text) => { if (!text) { return ''; } let fontSize; if (text.length > 185) { fontSize = 0.7; } else if (text.length > 120) { fontSize = 0.8; } else { fontSize = 0.9; } return `${text}`; }; const attackDamageHTML = (damage) => { if (!damage) { return ''; } return `${damage}`; }; const attackRowsHTML = (attacks) => { return attacks .map((attack) => { const { cost, damage, name, text } = attack; return `

${attackCostHTML(cost)} ${name} ${attackDescriptionHTML(text)} ${attackDamageHTML(damage)}

`; }) .join(''); }; export const cardHTML = (details) => { const { hp, energy_type, species, length, weight, attacks, weakness, resistance, retreat, description, rarity } = details; const poke_name = details.name; // `name` would be reserved JS word return `

Basic Pokémon

${poke_name}

${hp} HP ${energyHTML(energy_type)}

$AI generated Pokémon called ${poke_name}$

${species} Pokémon. Length: ${length.feet}'${length.inches}", Weight: ${weight}

${attackRowsHTML(attacks)}

weakness ${weakness ? energyHTML(weakness) : ''}

resistance ${resistance ? energyHTML(resistance) : ''} ${resistance ? '-30' : ''}

retreat cost

${energyHTML('Colorless').repeat(retreat)}

${description}

`; };