BattleSim/client/templates/pokemon.jade

style
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #3b3b3b;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    background: #2b2b2b;
  }
  table {
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: table;
    border-collapse: collapse;
  }
  table.forme{
   display: inline-table;
  }
  td{
   border: 1px solid black;

  }
  .img{
  }
  .imgcell{
    width: 400px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
  }
  .description{
     width: 400px;
  }

  tr {
    display: table-row;
    background: #f6f6f6;
  }
  tr:nth-of-type(odd) {
    background: #e9e9e9;
  }
  th {
    font-weight: 900;
    color: #fff;
    background: darkcyan;
    height: 30px;
    vertical-align: center;
  }
  td {
    padding: 4px 8px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: none;
  }
  .leftHeader{

  }
  .rightHeader{
    width: 260px;
  }
  table.statTable{
      border: 1px solid black;
  }
  .statDetail{
      padding: 0px 10px;
  }
  .statCell{
    width: 128px;
  }
  .stat{
    height: 12px;
    background-color: red;
  }
  #hp.stat{
    background-color: #FF0000;
    outline: 2px solid #A60000;
  }
  #attack.stat{
    background-color: #F08030;
    outline: 2px solid #9C531F;
  }
  #defense.stat{
    background-color: #F8D030;
    outline: 2px solid #A1871F;
  }
  #spatt.stat {
    background-color: #6890F0;
    outline: 2px solid #445E9C;
  }
  #spdef.stat {
    background-color: #A7DB8D;
    outline: 2px solid #4E8234;
  }
  #speed.stat {
    background-color: #F85888;
    outline: 2px solid #A13959;
  }
  #hp.statRow{
    background-color: #FF5959;
  }
  #attack.statRow{
    background-color: #F5AC78;
  }
  #defense.statRow{
    background-color: #FAE078;
  }
  #spatt.statRow{
    background-color: #9DB7F5;
  }
  #spdef.statRow{
    background-color: #A7DB8D;
  }
  #speed.statRow{
    background-color: #FA92B2;
  }



each forme, i in data.formedata
  table.forme
    tr
      th #{data.name}
      - var dexno = data.speciesdata.id.toString()
      if dexno.length == 1
        - dexno = "00" + dexno
      else if data.speciesdata.id.length == 2
        - dexno = "0" + dexno
      th #{dexno}
      if i != "default"
        - var imgname = dexno + "-" + i
      else
        - var imgname = dexno
    tr
      td(colspan=2) #{i}
    tr
      td.imgcell(colspan=2)
        img.img(src="/Sprites/front/#{imgname}.png")
    tr
      td.leftHeader Types
      td.rightHeader 
        each type in forme.types
          img(src="/Sprites/types/#{type.toLowerCase()}.png")
    tr
      td.leftHeader Abilities
      td.rightHeader #{forme.abilities}
    tr
      td.leftHeader Hidden Ability
      td.rightHeader #{forme.hiddenAbility}
    tr
      td.leftHeader Stats
      td.rightHeader
        table.statTable
          tr.statRow#hp
            td.statDetail HP
            td.statDetail #{forme.stats.hp}
            td.statDetail.statCell 
              div.stat#hp(style="width:#{(forme.stats.hp / 255) * 128}px")
          tr.statRow#attack
            td.statDetail Attack
            td.statDetail #{forme.stats.attack}
            td.statDetail.statCell
              div.stat#attack(style="width:#{(forme.stats.attack / 255) * 128}px")
          tr.statRow#defense
            td.statDetail Defense
            td.statDetail #{forme.stats.defense}
            td.statDetail.statCell
              div.stat#defense(style="width:#{(forme.stats.defense / 255) * 128}px")
          tr.statRow#spatt
            td.statDetail Sp. Att.
            td.statDetail #{forme.stats.specialAttack}
            td.statDetail.statCell
              div.stat#spatt(style="width:#{(forme.stats.specialAttack / 255) * 128}px")
          tr.statRow#spdef
            td.statDetail Sp. Def.
            td.statDetail #{forme.stats.specialDefense}
            td.statDetail.statCell
              div.stat#spdef(style="width:#{(forme.stats.specialDefense / 255) * 128}px")
          tr.statRow#speed
            td.statDetail Speed
            td.statDetail #{forme.stats.speed}
            td.statDetail.statCell
              div.stat#speed(style="width:#{(forme.stats.speed / 255) * 128}px")
    tr
      td.leftHeader Tier
      td.rightHeader #{forme.tier}
    tr
      td.leftHeader Generation
      td.rightHeader #{data.speciesdata.generation}

table
  tr
    th 
    th
    th
    th 
    th Learnset
    th
    th
  tr
    th Name
    th Type
    th Power
    th Damage
    th Accuracy
    th Priority
    th Description
  each move in data.learnablemoves
    tr
      td #{move}
      td 
        img(src="/Sprites/types/#{move_data[move].type.toLowerCase()}.png")
      td #{move_data[move].power}
      td
        img(src="/Sprites/types/#{move_data[move].damage.toLowerCase()}.png")
      td #{move_data[move].accuracy}
      td #{move_data[move].priority}
      td.description #{move_data[move].description}