就决定是你了,皮卡丘!

Published on
/
/趣玩前端
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>就决定是你了,皮卡丘!</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900"
    />
    <style>
      .arrow {
        position: absolute;
        left: 0;
        top: 50%;
        width: 36px;
        height: 36px;
        -webkit-animation: boing 0.8s ease infinite;
        animation: boing 0.8s ease infinite;
        transform-origin: right center;
        pointer-events: none;
      }
      .arrow svg {
        position: absolute;
        width: 36px;
        left: 0;
        top: 0;
        filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.4));
        -webkit-animation: smoosh 0.7s ease infinite;
        animation: smoosh 0.7s ease infinite;
      }

      .pokes {
        display: flex;
        flex: wrap;
        width: 100%;
        justify-content: center;
        margin-bottom: 30px;
      }

      .pokemon {
        text-align: center;
        position: relative;
        width: 180px;
        min-width: 150px;
        margin: 20px;
      }
      .pokemon * {
        vertical-align: middle;
      }
      .pokemon label {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
        z-index: 1;
        cursor: pointer;
      }
      .pokemon .radio {
        position: absolute;
        opacity: 0;
      }
      .pokemon .lvl {
        color: #00b8ff;
        position: absolute;
        left: 14px;
        top: 12px;
        font-weight: 400;
        font-size: 18px;
      }
      .pokemon .sex {
        position: absolute;
        right: 14px;
        top: 11px;
      }
      .pokemon .sex .icon {
        width: 18px;
      }
      .pokemon .sex .icon.female {
        transform: rotate(-45deg);
      }
      .pokemon .sprite {
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .pokemon .details {
        position: absolute;
        top: 65%;
        left: 0;
        right: 0;
      }
      .pokemon .details .name {
        font-size: 20px;
        font-weight: 400;
        color: #222;
        margin: 4px 0;
        display: inline-block;
      }
      .pokemon .details .hp {
        width: 60%;
        margin: auto;
      }
      .pokemon .details .hp .text {
        color: #666;
        display: inline-block;
        padding-top: 4px;
        font-size: 14px;
      }
      .pokemon .details .hp .bar {
        border-radius: 50px;
        background: #073fa7;
        border: 3.5px solid #00a3e2;
        height: 11px;
        overflow: hidden;
      }
      .pokemon .details .hp .bar .health {
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, lime, #8bf500);
      }
      .pokemon .details .hp .bar .health.low {
        background: linear-gradient(to right, #ffcc00, #f1f500);
      }
      .pokemon .details .hp .bar .health.critical {
        background: linear-gradient(to right, #d20000, #f51700);
      }
      .pokemon .pokeball {
        position: absolute;
        fill: white;
        opacity: 0.5;
        transition: all 0.5s ease;
        width: 76%;
        left: 12%;
        top: 47%;
        transform: translateY(-50%);
      }
      .pokemon .cell {
        transition: all 0.2s ease;
      }
      .pokemon .cell .bg {
        stroke: rgba(255, 255, 255, 0.5);
        fill: rgba(255, 255, 255, 0.5);
        transition: all 1.15s ease;
      }
      .pokemon .cell .stroke {
        stroke: white;
        stroke-width: 4px;
      }
      .pokemon:after {
        content: '';
        display: block;
        position: absolute;
        left: 7px;
        right: 7px;
        bottom: 2px;
        height: 180px;
        border-radius: 100% 100% 70% 70%/70% 70% 20% 20%;
        background: transparent;
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        z-index: -2;
      }
      .pokemon.selected:after {
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
      }
      .pokemon.selected .cell {
        filter: drop-shadow(0px 2px 6px white);
        transform: scale(1.02);
      }
      .pokemon.selected .cell .bg {
        fill: rgba(255, 246, 146, 0.9);
        fill: url(#bg-gradient-selected) !important;
      }
      .pokemon.selected .pokeball {
        opacity: 0.8;
      }
      .pokemon.selected .sprite {
        -webkit-animation: bounce 0.8s ease infinite;
        animation: bounce 0.8s ease infinite;
      }

      .button {
        position: relative;
        background: white;
        border: 2px solid #ffc55b;
        border-radius: 10px;
        min-height: 30px;
        vertical-align: middle;
        padding: 0 20px;
        outline: none !important;
        cursor: pointer;
        font-size: 18px;
      }
      .button:after {
        content: '';
        position: absolute;
        left: -5px;
        right: -5px;
        top: -5px;
        bottom: -5px;
        background: white;
        border-radius: 13px;
        z-index: -1;
        box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.2);
      }
      .button:hover {
        background: linear-gradient(to bottom, #ffd78e, #ffc55b);
        border-color: white;
      }
      .button:hover:after {
        background: linear-gradient(to bottom, #ffd78e, #ffc55b);
        box-shadow: 0 0 5px 2px white, 0 0 15px #ffe9c1,
          0 3px 5px -2px rgba(0, 0, 0, 0.2);
      }

      .candy {
        display: block;
        position: absolute;
        top: 52%;
        left: 55%;
        height: 12px;
        width: 12px;
        transform: scale(1);
        margin: 12px;
      }
      .candy.mighty {
        filter: hue-rotate(300deg) saturate(2.2);
      }
      .candy.smart {
        filter: hue-rotate(200deg) saturate(1) brightness(0.65) contrast(3);
      }
      .candy.tough {
        filter: hue-rotate(170deg) saturate(1) brightness(0.65) contrast(3.1);
      }
      .candy.courage {
        filter: hue-rotate(40deg) saturate(1) brightness(0.8) contrast(2);
      }
      .candy.quick {
        filter: hue-rotate(140deg) saturate(1) brightness(0.8) contrast(1.8);
      }
      .candy:after {
        content: '';
        display: block;
        height: 1px;
        width: 1px;
        box-shadow: 0px 5px #000000, 0px 6px #000000, 0px 7px #000000,
          1px 8px #000000, 3px 9px #000000, 2px 9px #000000, 4px 10px #000000,
          5px 10px #000000, 6px 11px #000000, 7px 11px #000000, 8px 11px #000000,
          9px 10px #000000, 10px 9px #000000, 10px 8px #000000, 10px 7px #000000,
          10px 6px #000000, 10px 5px #000000, 10px 4px #000000, 10px 3px #000000,
          9px 2px #000000, 8px 1px #000000, 7px 1px #000000, 6px 1px #000000,
          5px 2px #000000, 4px 2px #000000, 3px 3px #000000, 2px 3px #000000,
          1px 4px #000000, 8px 2px #ffffff, 7px 2px #ffffff, 6px 3px #ffffff,
          7px 3px #ffffff, 8px 3px #ffffff, 9px 3px #ffffff, 8px 4px #ffffff,
          6px 2px #fff69c, 5px 3px #fff69c, 4px 3px #fff69c, 4px 4px #fff69c,
          2px 4px #fff69c, 3px 5px #fff69c, 6px 4px #fff69c, 9px 5px #fff69c,
          9px 7px #fff69c, 6px 8px #fff69c, 3px 4px #fff6e6, 2px 5px #fff6e6,
          3px 6px #fff6e6, 7px 4px #fff6e6, 9px 4px #fff6e6, 7px 8px #fff6e6,
          8px 8px #ffffff, 8px 10px #dea410, 7px 10px #dea410, 6px 10px #dea410,
          9px 9px #dea410, 8px 9px #dea410, 7px 9px #dea410, 6px 9px #dea410,
          5px 9px #dea410, 4px 9px #dea410, 4px 8px #dea410, 3px 8px #dea410,
          2px 8px #dea410, 2px 7px #dea410, 1px 7px #dea410, 1px 6px #dea410,
          1px 5px #eec529, 2px 6px #eec529, 3px 7px #eec529, 5px 8px #eec529,
          9px 8px #eec529, 7px 6px #f6de41, 8px 6px #f6de41, 8px 7px #f6de41,
          7px 7px #f6de41, 7px 5px #f6de41, 6px 5px #f6de41, 5px 5px #f6de41,
          6px 6px #f6de41, 5px 4px #ffe65a, 4px 5px #ffe65a, 8px 5px #ffe65a,
          9px 6px #ffe65a, 4px 6px #ffe65a, 5px 6px #ffe65a, 5px 7px #ffe65a,
          6px 7px #ffe65a, 4px 7px #fff69c;
      }

      .heart {
        width: 18px;
        height: 18px;
        display: block;
        position: absolute;
        top: 54%;
        left: 39%;
        -webkit-animation: float 1s ease infinite;
        animation: float 1s ease infinite;
      }
      .heart:after {
        content: '';
        width: 1px;
        height: 1px;
        display: block;
        box-shadow: 8px 15px #000000, 9px 15px #000000, 10px 14px #000000,
          11px 13px #000000, 12px 12px #000000, 13px 11px #000000,
          14px 10px #000000, 15px 9px #000000, 15px 8px #000000,
          15px 7px #000000, 15px 6px #000000, 14px 4px #000000, 12px 3px #000000,
          11px 3px #000000, 9px 5px #000000, 8px 5px #000000, 7px 14px #000000,
          6px 13px #000000, 5px 12px #000000, 4px 11px #000000, 3px 10px #000000,
          2px 9px #000000, 2px 8px #000000, 2px 7px #000000, 2px 6px #000000,
          3px 4px #000000, 5px 3px #000000, 6px 3px #000000, 8px 14px #a53367,
          9px 14px #a53367, 10px 13px #a53367, 11px 12px #a53367,
          12px 11px #a53367, 13px 10px #a53367, 14px 9px #a53367,
          14px 5px #a53367, 13px 4px #a53367, 3px 5px #a53367, 4px 4px #a53367,
          7px 13px #a53367, 6px 12px #a53367, 5px 11px #a53367, 4px 10px #a53367,
          3px 9px #a53367, 3px 6px #a53367, 14px 6px #a53367, 10px 4px #a53367,
          7px 4px #a53367, 6px 4px #a53367, 11px 4px #a53367, 7px 5px #a53367,
          10px 5px #a53367, 8px 6px #a53367, 9px 6px #a53367, 3px 7px #eb86ae,
          3px 8px #eb86ae, 5px 4px #eb86ae, 12px 4px #eb86ae, 14px 7px #eb86ae,
          14px 8px #eb86ae, 8px 13px #eb86ae, 9px 13px #eb86ae, 7px 12px #eb86ae,
          4px 9px #eb86ae, 13px 9px #eb86ae, 12px 10px #eb86ae,
          10px 12px #eb86ae, 5px 10px #eb86ae, 4px 5px #eb86ae, 13px 5px #eb86ae,
          5px 6px #ffffff, 6px 6px #ffffff, 5px 7px #ffffff, 11px 6px #ffffff,
          6px 7px #feccf1, 5px 8px #feccf1, 4px 6px #feccf1, 5px 5px #feccf1,
          11px 7px #feccf1, 9px 8px #ffc6f8, 8px 8px #ffc6f8, 8px 9px #ffc6f8,
          9px 9px #ffc6f8, 7px 9px #f2d2f9, 6px 8px #f2d2f9, 7px 8px #f2d2f9,
          13px 8px #ffa5da, 12px 9px #ffa5da, 11px 10px #ffa5da,
          11px 11px #ffa5da, 10px 11px #ffa5da, 9px 12px #ffa5da,
          8px 12px #ffa5da, 13px 7px #ffa5da, 13px 6px #ffa5da, 12px 5px #ffa5da,
          4px 7px #ffa5da, 4px 8px #ffa5da, 5px 9px #ffa5da, 6px 10px #ffa5da,
          6px 11px #ffa5da, 7px 11px #ffa5da, 12px 7px #ffd2f2, 12px 8px #ffd2f2,
          11px 9px #ffd2f2, 10px 10px #ffd2f2, 9px 11px #ffd2f2,
          8px 11px #ffd2f2, 6px 9px #ffd2f2, 7px 10px #ffd2f2, 8px 10px #ffd2f2,
          9px 10px #ffd2f2, 10px 9px #ffd2f2, 11px 8px #ffd2f2, 10px 8px #ffd2f2,
          10px 7px #ffd2f2, 12px 6px #ffc6f8, 7px 7px #ffc6f8, 8px 7px #ff87c2,
          9px 7px #ff87c2, 10px 6px #ff87c2, 11px 5px #ff87c2, 7px 6px #ff87c2,
          6px 5px #ff87c2, 2px 4px #f2d2f9, 3px 3px #f2d2f9, 5px 2px #f2d2f9,
          6px 2px #f2d2f9, 11px 2px #f2d2f9, 12px 2px #f2d2f9, 14px 3px #f2d2f9,
          15px 4px #f2d2f9, 2px 10px #eb86ae, 3px 11px #eb86ae, 4px 12px #eb86ae,
          5px 13px #eb86ae, 6px 14px #eb86ae, 11px 14px #eb86ae,
          12px 13px #eb86ae, 13px 12px #eb86ae, 14px 11px #eb86ae,
          15px 10px #eb86ae, 16px 7px #eb86ae, 16px 8px #eb86ae,
          15px 5px #eb86ae, 13px 3px #eb86ae, 10px 3px #eb86ae, 9px 4px #eb86ae,
          7px 3px #eb86ae, 8px 4px #eb86ae, 4px 3px #eb86ae, 2px 5px #eb86ae,
          1px 7px #eb86ae, 1px 8px #eb86ae, 1px 6px #f2d2f9, 1px 9px #f2d2f9,
          6px 15px #f2d2f9, 5px 14px #f2d2f9, 4px 13px #f2d2f9, 3px 12px #f2d2f9,
          2px 11px #f2d2f9, 4px 2px #f2d2f9, 8px 3px #f2d2f9, 9px 3px #f2d2f9,
          13px 2px #f2d2f9, 11px 15px #f2d2f9, 12px 14px #f2d2f9,
          13px 13px #f2d2f9, 14px 12px #f2d2f9, 15px 11px #f2d2f9,
          16px 9px #f2d2f9, 16px 6px #f2d2f9, 1px 10px #ffc6f8,
          16px 10px #ffc6f8, 16px 5px #ffc6f8, 1px 5px #ffc6f8, 7px 2px #ffc6f8,
          10px 2px #ffc6f8, 7px 15px #a53367, 10px 15px #a53367,
          7px 16px #f2d2f9, 10px 16px #f2d2f9, 8px 16px #ffa5da,
          9px 16px #ffa5da;
      }

      @-webkit-keyframes boing {
        0%,
        100% {
          transform: translateY(-50%) translateX(-90%) scaleX(1) scaleY(1);
        }
        50% {
          transform: translateY(-50%) translateX(-60%) scaleX(0.95) scaleY(1.1);
        }
      }

      @keyframes boing {
        0%,
        100% {
          transform: translateY(-50%) translateX(-90%) scaleX(1) scaleY(1);
        }
        50% {
          transform: translateY(-50%) translateX(-60%) scaleX(0.95) scaleY(1.1);
        }
      }
      @-webkit-keyframes bounce {
        0%,
        100% {
          transform: translateY(-50%) translateX(-50%) scaleX(1) scaleY(1);
        }
        50% {
          transform: translateY(-60%) translateX(-50%) scaleX(0.95) scaleY(1.03);
        }
      }
      @keyframes bounce {
        0%,
        100% {
          transform: translateY(-50%) translateX(-50%) scaleX(1) scaleY(1);
        }
        50% {
          transform: translateY(-60%) translateX(-50%) scaleX(0.95) scaleY(1.03);
        }
      }
      @-webkit-keyframes float {
        0%,
        100% {
          transform: translateY(-50%) translateX(-50%);
        }
        50% {
          transform: translateY(-57%) translateX(-50%);
        }
      }
      @keyframes float {
        0%,
        100% {
          transform: translateY(-50%) translateX(-50%);
        }
        50% {
          transform: translateY(-57%) translateX(-50%);
        }
      }
      body,
      html {
        min-height: 100%;
        text-align: center;
      }

      h1 {
        display: inline-block;
        font-size: 60px;
        margin: 10px;
        color: #805cff;
        font-weight: 900;
      }

      .logo {
        max-width: 400px;
        margin: 100px 40px;
      }

      body {
        color: black;
        background: red;
        background: linear-gradient(45deg, #d2ffde, #ceefff, #ded1ff);
        background-size: cover;
        background-repeat: no-repeat;
        padding: 20px;
        font-family: 'Heebo', sans-serif;
      }
    </style>
  </head>
  <body>
    <main id="app">
      <List></List>
      <img
        class="logo"
        src="https://fecoder-pic-1302080640.cos.ap-nanjing.myqcloud.com/International_Poke%CC%81mon_logo.svg.png"
      />
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
    <script>
      window.pokemon = [
        'Bulbasaur',
        'Ivysaur',
        'Venusaur',
        'Charmander',
        'Charmeleon',
        'Charizard',
        'Squirtle',
        'Wartortle',
        'Blastoise',
        'Caterpie',
        'Metapod',
        'Butterfree',
        'Weedle',
        'Kakuna',
        'Beedrill',
        'Pidgey',
        'Pidgeotto',
        'Pidgeot',
        'Rattata',
        'Raticate',
        'Spearow',
        'Fearow',
        'Ekans',
        'Arbok',
        'Pikachu',
        'Raichu',
        'Sandshrew',
        'Sandslash',
        'Nidoran♀',
        'Nidorina',
        'Nidoqueen',
        'Nidoran♂',
        'Nidorino',
        'Nidoking',
        'Clefairy',
        'Clefable',
        'Vulpix',
        'Ninetales',
        'Jigglypuff',
        'Wigglytuff',
        'Zubat',
        'Golbat',
        'Oddish',
        'Gloom',
        'Vileplume',
        'Paras',
        'Parasect',
        'Venonat',
        'Venomoth',
        'Diglett',
        'Dugtrio',
        'Meowth',
        'Persian',
        'Psyduck',
        'Golduck',
        'Mankey',
        'Primeape',
        'Growlithe',
        'Arcanine',
        'Poliwag',
        'Poliwhirl',
        'Poliwrath',
        'Abra',
        'Kadabra',
        'Alakazam',
        'Machop',
        'Machoke',
        'Machamp',
        'Bellsprout',
        'Weepinbell',
        'Victreebel',
        'Tentacool',
        'Tentacruel',
        'Geodude',
        'Graveler',
        'Golem',
        'Ponyta',
        'Rapidash',
        'Slowpoke',
        'Slowbro',
        'Magnemite',
        'Magneton',
        "Farfetch'd",
        'Doduo',
        'Dodrio',
        'Seel',
        'Dewgong',
        'Grimer',
        'Muk',
        'Shellder',
        'Cloyster',
        'Gastly',
        'Haunter',
        'Gengar',
        'Onix',
        'Drowzee',
        'Hypno',
        'Krabby',
        'Kingler',
        'Voltorb',
        'Electrode',
        'Exeggcute',
        'Exeggutor',
        'Cubone',
        'Marowak',
        'Hitmonlee',
        'Hitmonchan',
        'Lickitung',
        'Koffing',
        'Weezing',
        'Rhyhorn',
        'Rhydon',
        'Chansey',
        'Tangela',
        'Kangaskhan',
        'Horsea',
        'Seadra',
        'Goldeen',
        'Seaking',
        'Staryu',
        'Starmie',
        'Mr Mime',
        'Scyther',
        'Jynx',
        'Electabuzz',
        'Magmar',
        'Pinsir',
        'Tauros',
        'Magikarp',
        'Gyarados',
        'Lapras',
        'Ditto',
        'Eevee',
        'Vaporeon',
        'Jolteon',
        'Flareon',
        'Porygon',
        'Omanyte',
        'Omastar',
        'Kabuto',
        'Kabutops',
        'Aerodactyl',
        'Snorlax',
        'Articuno',
        'Zapdos',
        'Moltres',
        'Dratini',
        'Dragonair',
        'Dragonite',
        'Mewtwo',
        'Mew',
      ];
      window.alolan = [
        'Rattata',
        'Raticate',
        'Raichu',
        'Sandshrew',
        'Sandslash',
        'Vulpix',
        'Ninetales',
        'Diglett',
        'Dugtrio',
        'Meowth',
        'Persian',
        'Geodude',
        'Graveler',
        'Golem',
        'Grimer',
        'Muk',
        'Exeggutor',
        'Marowak',
      ];
      window.candies = [
        '',
        'health',
        'mighty',
        'tough',
        'smart',
        'courage',
        'quick',
      ];

      window.team = [
        {
          name: 'Pikachu',
          nick: 'Sparky',
          sex: 'female',
          lvl: 24,
        },
        {
          name: 'Eevee',
          sex: 'female',
          lvl: 23,
        },
        {
          name: 'Vulpix',
          sex: 'male',
          lvl: 13,
          alolan: true,
          health: 15,
          candy: 'quick',
        },
        {
          name: 'Haunter',
          sex: 'female',
          lvl: 57,
          health: 49,
        },
        {
          name: 'Charizard',
          sex: 'male',
          lvl: 76,
          health: 92,
        },
        {
          name: 'Mew',
          sex: 'female',
          lvl: 99,
          candy: 'smart',
        },
      ];

      Vue.component('Arrow', {
        template: `
  <span class="arrow">
    <svg id="Arrow" viewBox="0 0 232 232">
      <defs>
        <linearGradient id="arrow-gradient" x1="157.02" y1="90.68" x2="157.02" y2="246.27" gradientUnits="userSpaceOnUse">
          <stop offset="0" :stop-color="topColor"/>
          <stop offset="1" :stop-color="bottomColor"/>
        </linearGradient>
      </defs>
      <path data-name="Outer Stroke" d="M66.42,284.52a23.47,23.47,0,0,1-5-.55A22.91,22.91,0,0,1,47,273.77a22,22,0,0,1-2.7-17L66,168.44,44.56,80.21A22.17,22.17,0,0,1,45.84,66a22.82,22.82,0,0,1,20.9-13.45,23.06,23.06,0,0,1,8.56,1.64c20.44,8.05,56.57,23.67,90.92,41.11,38.22,19.41,80.64,43.46,98.4,54.06a22.74,22.74,0,0,1,7.13,6.71,22.27,22.27,0,0,1,3.35,17.17,22.54,22.54,0,0,1-10.3,14.4c-17.12,10.45-61.08,36.68-99.07,54.38l-12.88,6c-32.36,15.09-62.93,29.34-78.37,35.08A23,23,0,0,1,66.42,284.52Z" transform="translate(-43.6 -52.52)" style="fill: #4f5456"/>
      <path data-name="Inner Stroke" d="M159,109.53C124.09,91.82,87.87,76.3,69.38,69a7,7,0,0,0-8.92,3.45,6.14,6.14,0,0,0-.36,4L82,166.63a6.3,6.3,0,0,1,0,3.65L59.78,260.6a6.45,6.45,0,0,0,5.08,7.75,7.17,7.17,0,0,0,4-.28c16.89-6.27,55.14-24.33,90.06-40.58,37.65-17.55,81.41-43.73,97.51-53.55a6.24,6.24,0,0,0,2-8.9,6.6,6.6,0,0,0-2.1-2C238.55,152.4,196.37,128.53,159,109.53Z" transform="translate(-43.6 -52.52)" style="fill: #fff"/>
      <path d="M97.51,174.36a22.32,22.32,0,0,0,0-11.78L80,90.68c18.69,7.87,45.44,19.78,71.7,33.12,29.6,15,61.74,32.88,82.52,44.84-20.71,12.3-53.29,31-82,44.34l-12.89,6c-21.48,10-43.47,20.27-59.54,27.28Z" transform="translate(-43.6 -52.52)" style="fill: url(#arrow-gradient)"/>
    </svg>
  </span>
`,
        props: {
          topColor: { type: String, default: '#eee' },
          bottomColor: { type: String, default: '#888' },
        },
      });
      Vue.component('Bg', {
        template: `
  <svg class="cell" viewBox="0 0 300 436">
      <defs>
        <linearGradient id="bg-gradient" x1="157.02" y1="90.68" x2="157.02" y2="246.27" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="rgba( 255, 255, 255, 0.3 )" />
          <stop offset="1" stop-color="rgba( 255, 255, 255, 0.5 )" />
        </linearGradient>
        <linearGradient id="bg-gradient-selected" x1="157.02" y1="90.68" x2="157.02" y2="246.27" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="rgba(255, 246, 146, 0.7)" />
          <stop offset="1" stop-color="rgba(255, 225, 85, 0.8)" />
        </linearGradient>
      </defs>
    <path class="bg" d="M270.88,433C242,438,196,441,155,441s-93.84-3.61-115.88-8C14,428,11,405,9,368c-.92-17-4-70-4-145S9,77,9,77c1-37,5.23-59,30.12-64S114,5,155,5s91.77,2,115.88,8S300,40,301,77c0,0,4,71,4,146s-1.36,124.73-3,145C299,405,299.77,428,270.88,433Z" transform="translate(-5 -5)" style="fill: url(#bg-gradient)"/>
    <path class="stroke" d="M155,15.31c18.41,0,80.61.55,108.25,7.62,10.49,2.69,17.29,8.7,21.39,18.91,3.59,8.94,5.34,21.33,5.87,41.45,0,.68,3.72,68.76,3.72,139.71,0,64.71-1,116.58-2.79,138.73-.22,2.86-.42,5.62-.62,8.3-2.22,30.4-3.56,48.75-27.5,53-26.06,4.64-68.58,7.64-108.32,7.64-38.49,0-88.09-3.5-108.3-7.64-22.62-4.63-25.37-26.25-27.21-61.29l-.13-2.36c-1-18.54-3.59-67.8-3.59-136.4,0-70.95,3.68-139,3.72-139.74,1-36.47,5.43-55.81,27.22-60.31,24.25-5,72.83-7.64,108.29-7.64m0-1c-38.14,0-85.35,2.87-108.5,7.66s-27.08,25.84-28,61.26c0,0-3.72,68-3.72,139.77s2.87,122.56,3.72,138.81c1.86,35.42,4.65,57.44,28,62.22,20.51,4.2,70.36,7.66,108.5,7.66s81.63-2.87,108.5-7.66,26.15-26.8,28.94-62.22c1.53-19.41,2.79-67,2.79-138.81s-3.72-139.77-3.72-139.77c-.93-35.42-5.58-55.52-28-61.26S193.14,14.31,155,14.31Z" transform="translate(-5 -5)" style="fill: #fff"/>
</svg>
`,
      });
      Vue.component('Pokeball', {
        template: `
  <svg class="pokeball" viewBox="0 0 204.54 207.46">
    <path d="M9.57,128.66l60.57,0s.42,1.17,1.49,3.35c10.51,22.12,34.09,31.79,56.93,22.92,12.07-4.69,20.49-13.53,24.76-26.27h60.6c-3.66,40.18-40.45,85.21-95.06,88.75C60.8,221.14,15.86,177.72,9.57,128.66Z" transform="translate(-9.57 -10.14)"/>
    <path d="M214.11,99.09H153.33a15.33,15.33,0,0,0-1.28-3.46c-8-16.74-21.42-25.84-39.89-25.95C93.44,69.56,80,78.77,71.65,95.58c-.77,1.53-1.51,3.51-1.51,3.51H9.79c5.15-45.56,47-89.37,102.94-88.95S209.31,54.53,214.11,99.09Z" transform="translate(-9.57 -10.14)"/>
    <path d="M111.72,134.54a20.39,20.39,0,1,1,20.53-19.9A20.5,20.5,0,0,1,111.72,134.54Z" transform="translate(-9.57 -10.14)"/>
</svg>

  `,
      });
      Vue.component('Male', {
        template: `
    <svg class="icon male" viewBox="0 0 426.667 426.667">
      <path style="fill:#50C8EF;" d="M165.705,426.667C74.334,426.667,0,352.333,0,260.962c0-91.366,74.334-165.7,165.705-165.7
        c91.366,0,165.7,74.334,165.7,165.7C331.405,352.333,257.071,426.667,165.705,426.667z M165.705,157.235
        c-57.199,0-103.735,46.532-103.735,103.731s46.532,103.735,103.735,103.735c57.195,0,103.735-46.532,103.735-103.735
        C269.436,203.767,222.899,157.235,165.705,157.235z"/>
      <polygon style="fill:#50C8EF;" points="426.667,165.705 364.698,165.705 364.698,61.969 260.962,61.969 260.962,0 426.667,0 	"/>

        <rect x="297.325" y="3.092" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 490.914 400.0457)" style="fill:#50C8EF;" width="61.968" height="190.518"/>
    </svg>`,
      });
      Vue.component('Female', {
        template: `
    <svg class="icon female" viewBox="0 0 417.606 417.606">
  
<path style="fill:#F05228;" d="M251.906,331.41c-91.379,0-165.709-74.338-165.709-165.705c0-91.371,74.334-165.705,165.709-165.705
		c91.366,0,165.7,74.334,165.7,165.705C417.606,257.072,343.272,331.41,251.906,331.41z M251.906,61.975
		c-57.203,0-103.735,46.532-103.735,103.735c0,57.195,46.532,103.735,103.735,103.735c57.199,0,103.735-46.537,103.735-103.735
		C355.637,108.507,309.105,61.975,251.906,61.975z"/>
	
		<rect x="58.314" y="233.078" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -79.7284 623.65)" style="fill:#F05228;" width="61.968" height="190.518"/>
	
		<rect x="-5.991" y="297.329" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -79.764 623.5881)" style="fill:#F05228;" width="190.518" height="61.968"/>

</svg>`,
      });

      Vue.component('Pokemon', {
        template: `
    <div class="radio" class="pokemon" :class="{ selected: isSelected }">
      <Bg :selected="isSelected"></Bg>
      <Pokeball></Pokeball>
      <Arrow v-if="isSelected"></Arrow>
      <label>
        <input class="radio" type="radio" name="poke" :id="name" :value="name" v-model="selectedPokemon"> 
        <span class="lvl">Lv. {{ lvl }}</span>
        <span class="sex" :class="sex">
          <Female v-if="sex === 'female'"></Female>
          <Male v-else></Male>
        </span>
        <img class="sprite" :src="sprite" />
        <span class="heart" v-if="partner"></span>
        <span v-if="candy" class="candy" :class="candy"></span>
        <div class="details">
          <h2 class="name">{{ nickname }}</h2>
          <div class="hp">
            <div class="bar">
              <div class="health" :style="{ width: healthPercent }" :class="{ low: health <= 50, critical: health <= 15 }"></div>
            </div>
            <span class="text">{{ hitpoints }} / {{ maxhp }}</span>
          </div>
        </div>
      </label>
    </div>
  `,
        props: {
          picked: { type: String },
          name: { type: String, default: 'Eevee' },
          nick: { type: String },
          lvl: { type: Number, default: 1 },
          sex: { type: String, default: 'female' },
          health: { type: Number, default: 100 },
          hp: { type: Number },
          alolan: { type: Boolean, default: false },
          candy: { type: String, default: '' },
        },
        computed: {
          partner() {
            return this.name === 'Eevee' || this.name === 'Pikachu';
          },
          sprite() {
            let lower = this.name.toLowerCase();
            if (this.alolan) {
              lower = lower + '-alolan';
            }
            return `https://img.pokemondb.net/sprites/lets-go-pikachu-eevee/normal/${lower}.png`;
          },
          isSelected() {
            return this.picked === this.name;
          },
          maxhp() {
            return Math.ceil(this.hp || 2.23 * this.lvl + 17);
          },
          hitpoints() {
            return Math.ceil(this.maxhp * (this.health / 100));
          },
          healthPercent() {
            return this.health + '%';
          },
          nickname() {
            return this.nick || this.name;
          },
          selectedPokemon: {
            get: function () {
              return this.picked;
            },
            set: function () {
              this.$emit('change', this.name);
            },
          },
        },
        methods: {
          isSelected() {
            return this.picked === this.name;
          },
        },
      });

      Vue.component('List', {
        template: `
  <div>

    <h1>Let's Go, {{ picked }}!</h1>
    <div class="pokes">
      <Pokemon v-for="( poke, idx ) in pokemon" 
        v-model="picked"
        :name="poke.name"
        :nick="poke.nick"
        :lvl="poke.lvl"
        :sex="poke.sex" 
        :hp="poke.hp" 
        :health="poke.health" 
        :alolan="poke.alolan" 
        :candy="poke.candy" 
        :picked="picked"
        @change="update">
      </Pokemon>
    </div>
    <button class="button" @click="newTeam">New Team</button>
  </div>
`,
        data() {
          return {
            picked: 'Vulpix',
            pokemon: window.team,
          };
        },
        methods: {
          update(val) {
            this.picked = val;
          },
          newTeam() {
            let team = [];
            for (let i = 0; i < 6; i++) {
              let rando = Math.floor(Math.random() * 150) + 1;
              if (team.includes(rando)) {
                i--;
                console.log('dupe');
              } else {
                team.push(rando);
                let poke = (nick = window.pokemon[rando]);
                let lvl = Math.floor(Math.random() * 100) + 1;
                let health = Math.floor(Math.random() * 100) + 1;
                let female = !!Math.floor(Math.random() * 2);
                let candy = '';
                if (!Math.floor(Math.random() * 4)) {
                  candy =
                    window.candies[
                      Math.floor(Math.random() * window.candies.length)
                    ];
                }
                let alolan = window.alolan.includes(poke)
                  ? !!Math.floor(Math.random() * 2)
                  : false;
                switch (poke) {
                  case 'Mr Mime':
                    poke = 'Mr-Mime';
                    nick = 'Mimey';
                    break;
                  case 'Pikachu':
                    nick = 'Sparky';
                    break;
                  case 'Nidoran♀':
                    poke = 'Nidoran-F';
                    nick = 'Whiskers';
                    break;
                  case 'Nidoran♂':
                    poke = 'Nidoran-M';
                    nick = 'Biscuits';
                    break;
                  case "Farfetch'd":
                    poke = 'farfetchd';
                    nick = 'Leek Duck';
                    break;
                }
                window.team[i].name = poke;
                window.team[i].nick = nick;
                window.team[i].lvl = lvl;
                window.team[i].health = health;
                window.team[i].alolan = alolan;
                window.team[i].candy = candy;
                window.team[i].sex = female ? 'female' : 'male';
              }
            }
          },
        },
      });

      let app = new Vue({
        el: '#app',
        data: {},
      });
    </script>
  </body>
</html>