<!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>