Hugging Face's logo

Spaces:
ronvolutional
/
ai-pokemon-card
Running

App Files Community
1
ai-pokemon-card
File size: 3,288 Bytes 
2d460b1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
const TYPES = {
  Grass: '🍃',
  Fire: '🔥',
  Water: '💧',
  Lightning: '⚡',
  Fighting: '✊',
  Psychic: '👁️',
  Colorless: '⭐',
  Darkness: '🌑',
  Metal: '⚙️',
  Dragon: '🐲',
  Fairy: '🧚',
};

const energyHTML = (type, types = TYPES) => {
  return `<span title="${type} energy" class="energy ${type.toLowerCase()}">${types[type]}</span>`;
};

const attackCostHTML = (cost) => {
  if (!cost.length) {
    return '';
  }

  return `
  <div class="attack-cost">
    ${cost.map((energy) => energyHTML(energy)).join('')}
  </div>`;
};

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 `<span class="attack-details"${fontSize ? ` style="font-size: ${fontSize.toString()}em"` : ''}>${text}</span>`;
};

const attackDamageHTML = (damage) => {
  if (!damage) {
    return '';
  }

  return `<span class="attack-damage">${damage}</span>`;
};

const attackRowsHTML = (attacks) => {
  return attacks
    .map((attack) => {
      const { cost, damage, name, text } = attack;

      return `
<li class="attacks-row ${cost.length ? '' : 'no-cost'} ${damage ? '' : 'no-damage'}">
  ${attackCostHTML(cost)}
  <span class="attack-text">
    <span class="attack-name">${name}</span>
    ${attackDescriptionHTML(text)}
  </span>
  ${attackDamageHTML(damage)}
</li>`;
    })
    .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 `
<div class="pokecard ${energy_type.toLowerCase()}" data-displayed="true">
  <p class="evolves">Basic Pokémon</p>
  <header>
    <h1 class="name">${poke_name}</h1>
    <div>
      <span class="hp">${hp} HP</span>
      ${energyHTML(energy_type)}
    </div>
  </header>
  <img class="picture frame" alt="AI generated Pokémon called ${poke_name}" width="324" height="228" />
  <div class="species frame">
    ${species} Pokémon. Length: ${length.feet}'${length.inches}", Weight: ${weight}
  </div>
  <div class="lower-half">
    <ul class="attacks">
      ${attackRowsHTML(attacks)}
    </ul>
    <div class="multipliers">
      <div class="weakness">
        <span>weakness</span>
        ${weakness ? energyHTML(weakness) : ''}
      </div>
      <div class="resistance">
        <span>resistance</span>
        ${resistance ? energyHTML(resistance) : ''}
        <span class="resistance-total"
          >${resistance ? '-30' : ''}</span
        >
      </div>
      <div class="retreat-cost">
        <span>retreat cost</span>
        <div>${energyHTML('Colorless').repeat(retreat)}</div>
      </div>
    </div>
    <p class="description frame">${description}</p>
    <div class="footer">
      <span
        ><a
          href="https://huggingface.co/minimaxir/ai-generated-pokemon-rudalle"
          >Illus. Max Woolf</a
        ></span
      >
      <span><a href="https://huggingface.co/spaces/launch">${new Date().getFullYear()} Hugging Face</a></span>
      <span title="Rarity">${rarity}</span>
    </div>
  </div>
  </div>`;
};