The-Ultimate-Pokemon-Picker/index.html
2023-03-09 15:49:51 -06:00

2602 lines
73 KiB
HTML

<html>
<head>
<title>Ultimate Favorite Pokemon Picker</title>
<meta name="description" content="Find your favorite Pokemon of each generation, each type, and of all time.">
<meta name="keywords" content="Ultimate, Favorite, Pokemon, Pokémon, Picker">
<meta name="author" content="Cajun">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<style>
#typebar {
position: absolute;
left: 98px;
top: 0px;
z-index: 3;
}
#genbar {
position: absolute;
left: 0px;
top: 99px;
z-index: 3;
}
table td {
display: table-cell;
vertical-align: top;
float: left;
width: 140px;
font-family: "Garamond";
padding: 10px;
}
h4 {
font-family: "Arial Black";
color: #778899;
}
img {
position: absolute;
top: 0px;
left: 0px;
}
canvas {
position: absolute;
top: 0px;
left: 0px;
}
.back {
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
}
#final {
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
}
#btnPrint {
top: 1572px;
left: 0px;
height: 50px;
position: absolute;
}
#btnWrite {
top: 1572px;
left: 125px;
height: 50px;
position: absolute;
}
#btnLoad {
top: 1572px;
left: 215px;
height: 50px;
position: absolute;
}
#btnReset {
top: 1572px;
left: 490px;
height: 50px;
position: absolute;
}
#downloader {
left: 295px;
top: 1572px;
position: absolute;
}
#import {
top: 1625px;
position: absolute;
z-index: 4;
}
#credits {
top: 1572px;
left: 650px;
position: absolute;
}
.bubble {
z-index: 9;
position: absolute;
top: 0px;
bottom: 0px;
}
#actual-btn {
z-index: 6;
position: absolute;
top: 1410px;
left: 1660px;
}
#charm {
z-index: 1;
position: absolute;
left: 25px;
top: 1110px;
}
#charmbox1 {
z-index: 1;
position: absolute;
left: 95px;
top: 1100px;
}
#charmbox2 {
z-index: 0;
position: absolute;
left: 95px;
top: 1163px;
cursor: pointer;
}
#teambox {
z-index: 1;
position: absolute;
left: 20px;
top: 1470;
}
#box0_1 {
z-index: 2;
position: absolute;
top: 1264px;
left: 94px;
}
#box0_2 {
z-index: 2;
position: absolute;
top: 1264px;
left: 193px;
}
#box0_3 {
z-index: 2;
position: absolute;
top: 1264px;
left: 292px;
}
#box0_4 {
z-index: 2;
position: absolute;
top: 1363px;
left: 94px;
}
#box0_5 {
z-index: 2;
position: absolute;
top: 1363px;
left: 193px;
}
#box0_6 {
z-index: 2;
position: absolute;
top: 1363px;
left: 292px;
}
#box0_7 {
z-index: 2;
position: absolute;
top: 1210px;
left: 530px;
}
#box0_8 {
z-index: 2;
position: absolute;
top: 1210px;
left: 722px;
}
#box0_9 {
z-index: 2;
position: absolute;
top: 1210px;
left: 914px;
}
#box0_10 {
z-index: 2;
position: absolute;
top: 1210px;
left: 1104px;
}
#box0_11 {
z-index: 2;
position: absolute;
top: 1210px;
left: 1297px;
}
#box0_12 {
z-index: 2;
position: absolute;
top: 1210px;
left: 1489px;
}
#box0_13 {
z-index: 2;
position: absolute;
top: 1210px;
left: 1681px;
}
#box0_14 {
z-index: 2;
position: absolute;
top: 1210px;
left: 1873px;
}
#box0_15 {
z-index: 2;
position: absolute;
top: 1210px;
left: 2064;
}
#box0_16 {
z-index: 2;
position: absolute;
top: 1409px;
left: 530px;
}
#box0_17 {
z-index: 2;
position: absolute;
top: 1409px;
left: 722px;
}
#box0_18 {
z-index: 2;
position: absolute;
top: 1409px;
left: 914px;
}
#box0_19 {
z-index: 2;
position: absolute;
top: 1409px;
left: 1104px;
}
#box0_20 {
z-index: 2;
position: absolute;
top: 1409px;
left: 1297px;
}
#box0_21 {
z-index: 2;
position: absolute;
top: 1409px;
left: 1489px;
}
#box0_22 {
z-index: 2;
position: absolute;
top: 1409px;
left: 1681px;
}
#box0_23 {
z-index: 2;
position: absolute;
top: 1409px;
left: 1873px;
}
#box0_24 {
z-index: 2;
position: absolute;
top: 1409px;
left: 2065px;
}
#box1_1 {
z-index: 2;
position: absolute;
top: 101px;
left: 100px;
}
#box1_2 {
z-index: 2;
position: absolute;
top: 101px;
left: 199px;
}
#box1_3 {
z-index: 2;
position: absolute;
top: 101px;
left: 298px;
}
#box1_4 {
z-index: 2;
position: absolute;
top: 101px;
left: 397px;
}
#box1_5 {
z-index: 2;
position: absolute;
top: 101px;
left: 496px;
}
#box1_6 {
z-index: 2;
position: absolute;
top: 101px;
left: 595px;
}
#box1_7 {
z-index: 2;
position: absolute;
top: 101px;
left: 694px;
}
#box1_8 {
z-index: 2;
position: absolute;
top: 101px;
left: 793px;
}
#box1_9 {
z-index: 2;
position: absolute;
top: 101px;
left: 892px;
}
#box1_10 {
z-index: 2;
position: absolute;
top: 101px;
left: 991px;
}
#box1_11 {
z-index: 2;
position: absolute;
top: 101px;
left: 1090px;
}
#box1_12 {
z-index: 2;
position: absolute;
top: 101px;
left: 1189px;
}
#box1_13 {
z-index: 2;
position: absolute;
top: 101px;
left: 1288px;
}
#box1_14 {
z-index: 2;
position: absolute;
top: 101px;
left: 1387px;
}
#box1_15 {
z-index: 2;
position: absolute;
top: 101px;
left: 1486px;
}
#box1_16 {
z-index: 2;
position: absolute;
top: 101px;
left: 1585px;
}
#box1_17 {
z-index: 2;
position: absolute;
top: 101px;
left: 1684px;
}
#box1_18 {
z-index: 2;
position: absolute;
top: 101px;
left: 1783px;
}
#box1_19 {
z-index: 2;
position: absolute;
top: 101px;
left: 1882px;
}
#box1_20 {
z-index: 2;
position: absolute;
top: 101px;
left: 1981px;
}
#box1_21 {
z-index: 2;
position: absolute;
top: 101px;
left: 2080px;
}
#box1_22 {
z-index: 2;
position: absolute;
top: 101px;
left: 2179px;
}
#box2_1 {
z-index: 2;
position: absolute;
top: 200px;
left: 100px;
}
#box2_2 {
z-index: 2;
position: absolute;
top: 200px;
left: 199px;
}
#box2_3 {
z-index: 2;
position: absolute;
top: 200px;
left: 298px;
}
#box2_4 {
z-index: 2;
position: absolute;
top: 200px;
left: 397px;
}
#box2_5 {
z-index: 2;
position: absolute;
top: 200px;
left: 496px;
}
#box2_6 {
z-index: 2;
position: absolute;
top: 200px;
left: 595px;
}
#box2_7 {
z-index: 2;
position: absolute;
top: 200px;
left: 694px;
}
#box2_8 {
z-index: 2;
position: absolute;
top: 200px;
left: 793px;
}
#box2_9 {
z-index: 2;
position: absolute;
top: 200px;
left: 892px;
}
#box2_10 {
z-index: 2;
position: absolute;
top: 200px;
left: 991px;
}
#box2_11 {
z-index: 2;
position: absolute;
top: 200px;
left: 1090px;
}
#box2_12 {
z-index: 2;
position: absolute;
top: 200px;
left: 1189px;
}
#box2_13 {
z-index: 2;
position: absolute;
top: 200px;
left: 1288px;
}
#box2_14 {
z-index: 2;
position: absolute;
top: 200px;
left: 1387px;
}
#box2_15 {
z-index: 2;
position: absolute;
top: 200px;
left: 1486px;
}
#box2_16 {
z-index: 2;
position: absolute;
top: 200px;
left: 1585px;
}
#box2_17 {
z-index: 2;
position: absolute;
top: 200px;
left: 1684px;
}
#box2_18 {
z-index: 2;
position: absolute;
top: 200px;
left: 1783px;
}
#box2_19 {
z-index: 2;
position: absolute;
top: 200px;
left: 1882px;
}
#box2_20 {
z-index: 2;
position: absolute;
top: 200px;
left: 1981px;
}
#box2_21 {
z-index: 2;
position: absolute;
top: 200px;
left: 2080px;
}
#box2_22 {
z-index: 2;
position: absolute;
top: 200px;
left: 2179px;
}
#box3_1 {
z-index: 2;
position: absolute;
top: 299px;
left: 100px;
}
#box3_2 {
z-index: 2;
position: absolute;
top: 299px;
left: 199px;
}
#box3_3 {
z-index: 2;
position: absolute;
top: 299px;
left: 298px;
}
#box3_4 {
z-index: 2;
position: absolute;
top: 299px;
left: 397px;
}
#box3_5 {
z-index: 2;
position: absolute;
top: 299px;
left: 496px;
}
#box3_6 {
z-index: 2;
position: absolute;
top: 299px;
left: 595px;
}
#box3_7 {
z-index: 2;
position: absolute;
top: 299px;
left: 694px;
}
#box3_8 {
z-index: 2;
position: absolute;
top: 299px;
left: 793px;
}
#box3_9 {
z-index: 2;
position: absolute;
top: 299px;
left: 892px;
}
#box3_10 {
z-index: 2;
position: absolute;
top: 299px;
left: 991px;
}
#box3_11 {
z-index: 2;
position: absolute;
top: 299px;
left: 1090px;
}
#box3_12 {
z-index: 2;
position: absolute;
top: 299px;
left: 1189px;
}
#box3_13 {
z-index: 2;
position: absolute;
top: 299px;
left: 1288px;
}
#box3_14 {
z-index: 2;
position: absolute;
top: 299px;
left: 1387px;
}
#box3_15 {
z-index: 2;
position: absolute;
top: 299px;
left: 1486px;
}
#box3_16 {
z-index: 2;
position: absolute;
top: 299px;
left: 1585px;
}
#box3_17 {
z-index: 2;
position: absolute;
top: 299px;
left: 1684px;
}
#box3_18 {
z-index: 2;
position: absolute;
top: 299px;
left: 1783px;
}
#box3_19 {
z-index: 2;
position: absolute;
top: 299px;
left: 1882px;
}
#box3_20 {
z-index: 2;
position: absolute;
top: 299px;
left: 1981px;
}
#box3_21 {
z-index: 2;
position: absolute;
top: 299px;
left: 2080px;
}
#box3_22 {
z-index: 2;
position: absolute;
top: 299px;
left: 2179px;
}
#box4_1 {
z-index: 2;
position: absolute;
top: 398px;
left: 100px;
}
#box4_2 {
z-index: 2;
position: absolute;
top: 398px;
left: 199px;
}
#box4_3 {
z-index: 2;
position: absolute;
top: 398px;
left: 298px;
}
#box4_4 {
z-index: 2;
position: absolute;
top: 398px;
left: 397px;
}
#box4_5 {
z-index: 2;
position: absolute;
top: 398px;
left: 496px;
}
#box4_6 {
z-index: 2;
position: absolute;
top: 398px;
left: 595px;
}
#box4_7 {
z-index: 2;
position: absolute;
top: 398px;
left: 694px;
}
#box4_8 {
z-index: 2;
position: absolute;
top: 398px;
left: 793px;
}
#box4_9 {
z-index: 2;
position: absolute;
top: 398px;
left: 892px;
}
#box4_10 {
z-index: 2;
position: absolute;
top: 398px;
left: 991px;
}
#box4_11 {
z-index: 2;
position: absolute;
top: 398px;
left: 1090px;
}
#box4_12 {
z-index: 2;
position: absolute;
top: 398px;
left: 1189px;
}
#box4_13 {
z-index: 2;
position: absolute;
top: 398px;
left: 1288px;
}
#box4_14 {
z-index: 2;
position: absolute;
top: 398px;
left: 1387px;
}
#box4_15 {
z-index: 2;
position: absolute;
top: 398px;
left: 1486px;
}
#box4_16 {
z-index: 2;
position: absolute;
top: 398px;
left: 1585px;
}
#box4_17 {
z-index: 2;
position: absolute;
top: 398px;
left: 1684px;
}
#box4_18 {
z-index: 2;
position: absolute;
top: 398px;
left: 1783px;
}
#box4_19 {
z-index: 2;
position: absolute;
top: 398px;
left: 1882px;
}
#box4_20 {
z-index: 2;
position: absolute;
top: 398px;
left: 1981px;
}
#box4_21 {
z-index: 2;
position: absolute;
top: 398px;
left: 2080px;
}
#box4_22 {
z-index: 2;
position: absolute;
top: 398px;
left: 2179px;
}
#box5_1 {
z-index: 2;
position: absolute;
top: 497px;
left: 100px;
}
#box5_2 {
z-index: 2;
position: absolute;
top: 497px;
left: 199px;
}
#box5_3 {
z-index: 2;
position: absolute;
top: 497px;
left: 298px;
}
#box5_4 {
z-index: 2;
position: absolute;
top: 497px;
left: 397px;
}
#box5_5 {
z-index: 2;
position: absolute;
top: 497px;
left: 496px;
}
#box5_6 {
z-index: 2;
position: absolute;
top: 497px;
left: 595px;
}
#box5_7 {
z-index: 2;
position: absolute;
top: 497px;
left: 694px;
}
#box5_8 {
z-index: 2;
position: absolute;
top: 497px;
left: 793px;
}
#box5_9 {
z-index: 2;
position: absolute;
top: 497px;
left: 892px;
}
#box5_10 {
z-index: 2;
position: absolute;
top: 497px;
left: 991px;
}
#box5_11 {
z-index: 2;
position: absolute;
top: 497px;
left: 1090px;
}
#box5_12 {
z-index: 2;
position: absolute;
top: 497px;
left: 1189px;
}
#box5_13 {
z-index: 2;
position: absolute;
top: 497px;
left: 1288px;
}
#box5_14 {
z-index: 2;
position: absolute;
top: 497px;
left: 1387px;
}
#box5_15 {
z-index: 2;
position: absolute;
top: 497px;
left: 1486px;
}
#box5_16 {
z-index: 2;
position: absolute;
top: 497px;
left: 1585px;
}
#box5_17 {
z-index: 2;
position: absolute;
top: 497px;
left: 1684px;
}
#box5_18 {
z-index: 2;
position: absolute;
top: 497px;
left: 1783px;
}
#box5_19 {
z-index: 2;
position: absolute;
top: 497px;
left: 1882px;
}
#box5_20 {
z-index: 2;
position: absolute;
top: 497px;
left: 1981px;
}
#box5_21 {
z-index: 2;
position: absolute;
top: 497px;
left: 2080px;
}
#box5_22 {
z-index: 2;
position: absolute;
top: 497px;
left: 2179px;
}
#box6_1 {
z-index: 2;
position: absolute;
top: 596px;
left: 100px;
}
#box6_2 {
z-index: 2;
position: absolute;
top: 596px;
left: 199px;
}
#box6_3 {
z-index: 2;
position: absolute;
top: 596px;
left: 298px;
}
#box6_4 {
z-index: 2;
position: absolute;
top: 596px;
left: 397px;
}
#box6_5 {
z-index: 2;
position: absolute;
top: 596px;
left: 496px;
}
#box6_6 {
z-index: 2;
position: absolute;
top: 596px;
left: 595px;
}
#box6_7 {
z-index: 2;
position: absolute;
top: 596px;
left: 694px;
}
#box6_8 {
z-index: 2;
position: absolute;
top: 596px;
left: 793px;
}
#box6_9 {
z-index: 2;
position: absolute;
top: 596px;
left: 892px;
}
#box6_10 {
z-index: 2;
position: absolute;
top: 596px;
left: 991px;
}
#box6_11 {
z-index: 2;
position: absolute;
top: 596px;
left: 1090px;
}
#box6_12 {
z-index: 2;
position: absolute;
top: 596px;
left: 1189px;
}
#box6_13 {
z-index: 2;
position: absolute;
top: 596px;
left: 1288px;
}
#box6_14 {
z-index: 2;
position: absolute;
top: 596px;
left: 1387px;
}
#box6_15 {
z-index: 2;
position: absolute;
top: 596px;
left: 1486px;
}
#box6_16 {
z-index: 2;
position: absolute;
top: 596px;
left: 1585px;
}
#box6_17 {
z-index: 2;
position: absolute;
top: 596px;
left: 1684px;
}
#box6_18 {
z-index: 2;
position: absolute;
top: 596px;
left: 1783px;
}
#box6_19 {
z-index: 2;
position: absolute;
top: 596px;
left: 1882px;
}
#box6_20 {
z-index: 2;
position: absolute;
top: 596px;
left: 1981px;
}
#box6_21 {
z-index: 2;
position: absolute;
top: 596px;
left: 2080px;
}
#box6_22 {
z-index: 2;
position: absolute;
top: 596px;
left: 2179px;
}
#box7_1 {
z-index: 2;
position: absolute;
top: 695px;
left: 100px;
}
#box7_2 {
z-index: 2;
position: absolute;
top: 695px;
left: 199px;
}
#box7_3 {
z-index: 2;
position: absolute;
top: 695px;
left: 298px;
}
#box7_4 {
z-index: 2;
position: absolute;
top: 695px;
left: 397px;
}
#box7_5 {
z-index: 2;
position: absolute;
top: 695px;
left: 496px;
}
#box7_6 {
z-index: 2;
position: absolute;
top: 695px;
left: 595px;
}
#box7_7 {
z-index: 2;
position: absolute;
top: 695px;
left: 694px;
}
#box7_8 {
z-index: 2;
position: absolute;
top: 695px;
left: 793px;
}
#box7_9 {
z-index: 2;
position: absolute;
top: 695px;
left: 892px;
}
#box7_10 {
z-index: 2;
position: absolute;
top: 695px;
left: 991px;
}
#box7_11 {
z-index: 2;
position: absolute;
top: 695px;
left: 1090px;
}
#box7_12 {
z-index: 2;
position: absolute;
top: 695px;
left: 1189px;
}
#box7_13 {
z-index: 2;
position: absolute;
top: 695px;
left: 1288px;
}
#box7_14 {
z-index: 2;
position: absolute;
top: 695px;
left: 1387px;
}
#box7_15 {
z-index: 2;
position: absolute;
top: 695px;
left: 1486px;
}
#box7_16 {
z-index: 2;
position: absolute;
top: 695px;
left: 1585px;
}
#box7_17 {
z-index: 2;
position: absolute;
top: 695px;
left: 1684px;
}
#box7_18 {
z-index: 2;
position: absolute;
top: 695px;
left: 1783px;
}
#box7_19 {
z-index: 2;
position: absolute;
top: 695px;
left: 1882px;
}
#box7_20 {
z-index: 2;
position: absolute;
top: 695px;
left: 1981px;
}
#box7_21 {
z-index: 2;
position: absolute;
top: 695px;
left: 2080px;
}
#box7_22 {
z-index: 2;
position: absolute;
top: 695px;
left: 2179px;
}
#box8_1 {
z-index: 2;
position: absolute;
top: 794px;
left: 100px;
}
#box8_2 {
z-index: 2;
position: absolute;
top: 794px;
left: 199px;
}
#box8_3 {
z-index: 2;
position: absolute;
top: 794px;
left: 298px;
}
#box8_4 {
z-index: 2;
position: absolute;
top: 794px;
left: 397px;
}
#box8_5 {
z-index: 2;
position: absolute;
top: 794px;
left: 496px;
}
#box8_6 {
z-index: 2;
position: absolute;
top: 794px;
left: 595px;
}
#box8_7 {
z-index: 2;
position: absolute;
top: 794px;
left: 694px;
}
#box8_8 {
z-index: 2;
position: absolute;
top: 794px;
left: 793px;
}
#box8_9 {
z-index: 2;
position: absolute;
top: 794px;
left: 892px;
}
#box8_10 {
z-index: 2;
position: absolute;
top: 794px;
left: 991px;
}
#box8_11 {
z-index: 2;
position: absolute;
top: 794px;
left: 1090px;
}
#box8_12 {
z-index: 2;
position: absolute;
top: 794px;
left: 1189px;
}
#box8_13 {
z-index: 2;
position: absolute;
top: 794px;
left: 1288px;
}
#box8_14 {
z-index: 2;
position: absolute;
top: 794px;
left: 1387px;
}
#box8_15 {
z-index: 2;
position: absolute;
top: 794px;
left: 1486px;
}
#box8_16 {
z-index: 2;
position: absolute;
top: 794px;
left: 1585px;
}
#box8_17 {
z-index: 2;
position: absolute;
top: 794px;
left: 1684px;
}
#box8_18 {
z-index: 2;
position: absolute;
top: 794px;
left: 1783px;
}
#box8_19 {
z-index: 2;
position: absolute;
top: 794px;
left: 1882px;
}
#box8_20 {
z-index: 2;
position: absolute;
top: 794px;
left: 1981px;
}
#box8_21 {
z-index: 2;
position: absolute;
top: 794px;
left: 2080px;
}
#box8_22 {
z-index: 2;
position: absolute;
top: 794px;
left: 2179px;
}
#box9_1 {
z-index: 2;
position: absolute;
top: 893px;
left: 100px;
}
#box9_2 {
z-index: 2;
position: absolute;
top: 893px;
left: 199px;
}
#box9_3 {
z-index: 2;
position: absolute;
top: 893px;
left: 298px;
}
#box9_4 {
z-index: 2;
position: absolute;
top: 893px;
left: 397px;
}
#box9_5 {
z-index: 2;
position: absolute;
top: 893px;
left: 496px;
}
#box9_6 {
z-index: 2;
position: absolute;
top: 893px;
left: 595px;
}
#box9_7 {
z-index: 2;
position: absolute;
top: 893px;
left: 694px;
}
#box9_8 {
z-index: 2;
position: absolute;
top: 893px;
left: 793px;
}
#box9_9 {
z-index: 2;
position: absolute;
top: 893px;
left: 892px;
}
#box9_10 {
z-index: 2;
position: absolute;
top: 893px;
left: 991px;
}
#box9_11 {
z-index: 2;
position: absolute;
top: 893px;
left: 1090px;
}
#box9_12 {
z-index: 2;
position: absolute;
top: 893px;
left: 1189px;
}
#box9_13 {
z-index: 2;
position: absolute;
top: 893px;
left: 1288px;
}
#box9_14 {
z-index: 2;
position: absolute;
top: 893px;
left: 1387px;
}
#box9_15 {
z-index: 2;
position: absolute;
top: 893px;
left: 1486px;
}
#box9_16 {
z-index: 2;
position: absolute;
top: 893px;
left: 1585px;
}
#box9_17 {
z-index: 2;
position: absolute;
top: 893px;
left: 1684px;
}
#box9_18 {
z-index: 2;
position: absolute;
top: 893px;
left: 1783px;
}
#box9_19 {
z-index: 2;
position: absolute;
top: 893px;
left: 1882px;
}
#box9_20 {
z-index: 2;
position: absolute;
top: 893px;
left: 1981px;
}
#box9_21 {
z-index: 2;
position: absolute;
top: 893px;
left: 2080px;
}
#box9_22 {
z-index: 2;
position: absolute;
top: 893px;
left: 2179px;
}
#box10_1 {
z-index: 2;
position: absolute;
top: 992px;
left: 100px;
}
#box10_2 {
z-index: 2;
position: absolute;
top: 992px;
left: 199px;
}
#box10_3 {
z-index: 2;
position: absolute;
top: 992px;
left: 298px;
}
#box10_4 {
z-index: 2;
position: absolute;
top: 992px;
left: 397px;
}
#box10_5 {
z-index: 2;
position: absolute;
top: 992px;
left: 496px;
}
#box10_6 {
z-index: 2;
position: absolute;
top: 992px;
left: 595px;
}
#box10_7 {
z-index: 2;
position: absolute;
top: 992px;
left: 694px;
}
#box10_8 {
z-index: 2;
position: absolute;
top: 992px;
left: 793px;
}
#box10_9 {
z-index: 2;
position: absolute;
top: 992px;
left: 892px;
}
#box10_10 {
z-index: 2;
position: absolute;
top: 992px;
left: 991px;
}
#box10_11 {
z-index: 2;
position: absolute;
top: 992px;
left: 1090px;
}
#box10_12 {
z-index: 2;
position: absolute;
top: 992px;
left: 1189px;
}
#box10_13 {
z-index: 2;
position: absolute;
top: 992px;
left: 1288px;
}
#box10_14 {
z-index: 2;
position: absolute;
top: 992px;
left: 1387px;
}
#box10_15 {
z-index: 2;
position: absolute;
top: 992px;
left: 1486px;
}
#box10_16 {
z-index: 2;
position: absolute;
top: 992px;
left: 1585px;
}
#box10_17 {
z-index: 2;
position: absolute;
top: 992px;
left: 1684px;
}
#box10_18 {
z-index: 2;
position: absolute;
top: 992px;
left: 1783px;
}
#box10_19 {
z-index: 2;
position: absolute;
top: 992px;
left: 1882px;
}
#box10_20 {
z-index: 2;
position: absolute;
top: 992px;
left: 1981px;
}
#box10_21 {
z-index: 2;
position: absolute;
top: 992px;
left: 2080px;
}
#box10_22 {
z-index: 2;
position: absolute;
top: 992px;
left: 2179px;
}
#spinda-help {
color: #000000;
position: absolute;
top: 1577px;
left: 1580px;
display: block;
width: 400px;
z-index: 2;
}
#spinda {
z-index: 2;
position: absolute;
top: 1409px;
left: 1681px;
}
.spinda-spot {
z-index: 3;
position: absolute;
top: 1409px;
left: 1681px;
}
#spinda2 {
z-index: 4;
position: absolute;
top: 1409px;
left: 1681px;
}
#spinda-cover {
z-index: 5;
position: absolute;
top: 1409px;
left: 1681px;
}
#spot1x {
z-index: 2;
position: absolute;
top: 1409px;
left: 1631px;
width: 48px;
}
#spot1y {
z-index: 2;
position: absolute;
top: 1431px;
left: 1631px;
width: 48px;
}
#spot2x {
z-index: 2;
position: absolute;
top: 1409px;
left: 1777px;
width: 48px;
}
#spot2y {
z-index: 2;
position: absolute;
top: 1431px;
left: 1777px;
width: 48px;
}
#spot3x {
z-index: 2;
position: absolute;
top: 1461px;
left: 1631px;
width: 48px;
}
#spot3y {
z-index: 2;
position: absolute;
top: 1483px;
left: 1631px;
width: 48px;
}
#spot4x {
z-index: 2;
position: absolute;
top: 1461px;
left: 1777px;
width: 48px;
}
#spot4y {
z-index: 2;
position: absolute;
top: 1483px;
left: 1777px;
width: 48px;
}
#btnRandom {
z-index: 3;
position: absolute;
top: 1505px;
left: 1691px;
}
.preview {
z-index: 0;
position: absolute;
cursor: pointer;
}
.selectionBox {
cursor: pointer;
}
</style>
<!--
Tried to make the axis sticky with jQuery
but doesn't stick properly on mobile
doesn't seem to account for zoom so basically useless
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
$('#typebar').css({
'top': Math.min(891, $(window).scrollTop())
});
$('#genbar').css({
'left': Math.min(2078, $(window).scrollLeft())
});
});
});
</script>
-->
<script src="pokemon_arrays.js"></script>
<script language="JavaScript">
var type_order = ["", "Normal", "Fire", "Water", "Grass", "Electric", "Ice", "Fighting", "Poison", "Ground", "Flying", "Psychic", "Bug", "Rock", "Ghost", "Dragon", "Dark", "Steel", "Fairy", "Starter", "Gimmick", "Legendary", "Favorite"]
var other_order = ["", "team1", "team2", "team3", "team4", "team5", "team6", "Bird", "Critter", "RegionalBug", "Pseudo", "Pikaclone", "Eevee", "Fossil", "Regional", "GMax", "Box", "Mythical", "Ultra", "Paradox", "Types", "PokeBall", "Spinda", "Vivillon", "Alcremie", "alc0", "alc7", "alc14", "alc21", "alc28", "alc35", "alc42", "alc49", "alc56"];
var zerogen_coords = [[], [94, 1264], [199, 1264], [298, 1264], [94, 1363], [199, 1363], [298, 1363], [530, 1210], [722, 1210], [914, 1210], [1104, 1210], [1297, 1210], [1489, 1210], [1681, 1210], [1873, 1210], [2064, 1210], [530, 1409], [722, 1409], [914, 1409], [1104, 1409], [1297, 1409], [1489, 1409], [1681, 1409], [1873, 1409], [2065, 1409]]
var choices = [];
var currently_previewing = [];
var currently_selecting = null;
var shinyCharm = false;
var spriteFile = "Front";
var domlink = "https://cajunavenger.github.io/";
var teamSelect = false;
var toppings = false;
var spot_map = {
"spot1x": "spot1",
"spot1y": "spot1",
"spot2x": "spot2",
"spot2y": "spot2",
"spot3x": "spot3",
"spot3y": "spot3",
"spot4x": "spot4",
"spot4y": "spot4"
}
var cookie_names = [
"gen0", "gen1", "gen2", "gen3", "gen4",
"gen5", "gen6", "gen7", "gen8", "gen9",
"favs", "spinda"
]
var swap = {"Front": "Shiny", "Shiny": "Front"};
function resetChoices() {
choices = [[]];
for(var c in other_order)
choices[0].push("")
for(var i=1; i<=10; i++) {
choices.push([]);
for(var t in type_order) {
choices[i].push("")
}
}
}
resetChoices();
function activateShiny() {
shinyCharm = !shinyCharm;
//show tooltip
ele = document.getElementById('charmbox2');
if(ele.style.zIndex == 0) {
ele.style.zIndex = 1;
}else{
ele.style.zIndex = 0;
}
}
function fullShiny() {
if(spriteFile == "Shiny") {
setCookie("shiny", "shiny");
}else{
deleteCookie("shiny");
}
for(var g=0; g<11; g++) {
for(var t=0; t<23; t++) {
ele = document.getElementById('box'+g+"_"+t);
if(ele == null)
continue
ele.src = ele.src.replace(spriteFile, swap[spriteFile])
}
}
spriteFile = swap[spriteFile];
activateShiny();
}
function toggleShiny(gen, type) {
ele = document.getElementById('box'+gen+"_"+type);
if(ele.src.match(/Front/)) {
ele.src = ele.src.replace(/Front/, "Shiny");
}else{
ele.src = ele.src.replace(/Shiny/, "Front");
}
writeCookie(gen);
}
function shinySpinda() {
if(shinyCharm) {
toggleShiny(0, 22);
var ele = document.getElementById('spinda2');
if(ele.src.match(/Front/)) {
ele.src = ele.src.replace(/Front/, "Shiny");
}else{
ele.src = ele.src.replace(/Shiny/, "Front");
}
for(var i=1; i<5; i++) {
ele = document.getElementById('spot'+i);
if(ele.src.match(/Front/)) {
ele.src = ele.src.replace(/Front/, "Shiny");
}else{
ele.src = ele.src.replace(/Shiny/, "Front");
}
}
}
}
function openBox(gen, type) {
if(shinyCharm) {
toggleShiny(gen, type);
return;
}else if(teamSelect) {
// copy to team
choices[currently_selecting[0]][currently_selecting[1]] = choices[gen][type]
var ele = document.getElementById('box'+gen+"_"+type);
var ele2 = document.getElementById('box'+currently_selecting[0]+"_"+currently_selecting[1]);
ele2.src = ele.src;
currently_selecting = null;
teamSelect = false;
return;
}else if(gen == 0 && type < 7) {
// pick a team slot
teamSelect = true;
currently_selecting = [gen, type];
document.getElementById('box'+currently_selecting[0]+"_"+currently_selecting[1]).src = "./picking.png";
return;
}
if(currently_selecting != null) {
// if we've clicked the same box, close it and exit
if(currently_selecting[0] == gen && currently_selecting[1] == type) {
closeBox();
return;
}
// otherwise close any open boxes and keep going
closeBox();
}
currently_selecting = [gen, type];
if(gen == 0) {
// bottom stuff
var box = other_order[type];
if(arrays[box]) {
currently_previewing = arrays[box];
}
}else if(gen == 10 && type == 22) {
// super favorite
currently_previewing = [];
for(var c=1; c<choices.length; c++) {
start = 22;
if(c == 10)
start = 1;
for(var i=start; i<23; i++) {
if(choices[c][i] == "" || choices[c][i] == undefined)
continue;
if(currently_previewing.includes(choices[c][i]))
continue;
currently_previewing.push(choices[c][i])
}
}
}else if(gen == 10) {
// favorite for a type
currently_previewing = [];
for(var g in choices) {
if(g == gen || g == 0)
continue;
if(choices[g][type] == "" || choices[g][type] == undefined)
continue;
currently_previewing.push(choices[g][type]);
}
}else if(type == 22) {
// favorite for a gen
currently_previewing = [];
for(var m in choices[gen]) {
if(m == type)
continue;
if(choices[gen][m] == "" || choices[gen][m] == undefined)
continue;
if(currently_previewing.includes(choices[gen][m]))
continue;
currently_previewing.push(choices[gen][m]);
}
}else{
currently_previewing = arrays[type_order[type]][gen];
}
var left_corner = (type*99)+100
var top_corner = (gen*99)+101
if(gen == 0) {
left_corner = zerogen_coords[Math.min(24, type)][0] + 100
top_corner = zerogen_coords[Math.min(24, type)][1] + 100
}
var maxCols = Math.max(Math.ceil(currently_previewing.length/5), 5)
var maxRows = 5
if(currently_previewing.length <= 20)
maxRows = Math.ceil(currently_previewing.length/5)
var underflow = maxCols-(currently_previewing.length%maxCols)
if(underflow == maxCols)
underflow = 0
var bubble_img = "./bubble/"+maxRows+"r.png";
if(maxCols > 5) {
bubble_img = "./bubble/"+maxCols+"c.png";
}
var rightp = left_corner + (99*maxCols)
var botp = top_corner + (99*maxRows)
if(rightp > 2276)
left_corner -= (rightp-2276)
if(botp > 1571)
top_corner -= (99*(maxRows+1))
for(var i=0; i<currently_previewing.length; i++) {
var mon_key = currently_previewing[i];
// if this mon is already in the box, put the remove option instead
if(choices[currently_selecting[0]][currently_selecting[1]] == mon_key)
mon_key = "BLANK";
var mon_img = domlink + spriteFile + "/" + mon_key + ".png"
var ele = document.getElementById('preview'+i)
ele.src = mon_img;
ele.style.zIndex = 9;
//change the position
var row = Math.floor(i/maxCols);
var col = i%maxCols;
var offset = 0;
if(row+1 == maxRows)
offset = underflow*99/2;
ele.style.top = top_corner + (row*99);
ele.style.left = left_corner + (col*99) + offset;
}
var bubble = document.getElementById('bubble')
bubble.src = bubble_img;
bubble.style.left = left_corner;
bubble.style.top = top_corner;
bubble.style.zIndex = 9;
}
function closeBox() {
for(var i=0; i<currently_previewing.length; i++) {
var ele = document.getElementById('preview'+i);
ele.src = "./blank.png";
ele.style.zIndex = 0;
}
document.getElementById('bubble').style.zIndex = 0;
if(teamSelect) {
document.getElementById('box'+currently_selecting[0]+"_"+currently_selecting[1]).src = "./blank.png";
teamSelect = false;
}
currently_previewing = [];
currently_selecting = null;
toppings = false;
}
function pickMon(num) {
if(currently_selecting === null)
return;
if(currently_previewing.length < num)
return;
var alchold = 0;
if(currently_selecting[1] > 24) {
alchold = currently_selecting[1];
currently_selecting[1] = 24;
}
var targetBox = document.getElementById('box'+currently_selecting[0]+"_"+currently_selecting[1]);
if(!toppings && choices[currently_selecting[0]][currently_selecting[1]] == currently_previewing[num]) {
choices[currently_selecting[0]][currently_selecting[1]] = "";
targetBox.src = "./blank.png";
}else{
choices[currently_selecting[0]][currently_selecting[1]] = currently_previewing[num];
targetBox.src = domlink + spriteFile + "/" + currently_previewing[num] + ".png"
}
if(currently_selecting[0] == 0 && currently_selecting[1] == 24) {
// alcremie
if(!toppings && currently_previewing[num] != "ALCREMIE_70") {
//open toppings
var gen = currently_selecting[0]
closeBox();
toppings = true;
openBox(gen, 25+num);
}else{
//apply toppings
closeBox();
}
}else{
writeCookie(currently_selecting[0]);
closeBox();
}
}
function printTextbox() {
var output = "# Don't like my choices? You can overrule them here!\n# Write Code will put a text version of the grid here,\n# Then you can edit the names and Import Code to replace the images.\n# Most Pokemon are just their named capitalized, like SWELLOW.\n# Alternate forms have specific tags, like MEOWTH_2 for Galarian Meowth.\n# You can also use this to keep backups\n";
for(var g=0; g<choices.length; g++) {
for(var t=0; t<choices[g].length; t++) {
var ele = document.getElementById('box'+g+"_"+t);
if(ele == null) {
output += ",";
continue;
}
if(ele.src.match(/Shiny/))
output += "&"
if(choices[g][t])
output += choices[g][t]
output += ",";
}
output += "\n";
}
output += "spindaspots,";
for(var s in spot_map) {
var ax_ele = document.getElementById(s);
output += ax_ele.value + ",";
}
document.getElementById('import').value = output;
}
function loadTextbox(importbox) {
var save_cookie = false;
if(!importbox) {
importbox = document.getElementById('import').value;
save_cookie = true;
}
var lines = importbox.replace(/# ?[^\n]+\n/g, "").split("\n");
var gen = -1;
for(var l in lines) {
if(lines[l] == "" || !lines[l].match(/,/))
continue;
gen++;
if(save_cookie) {
setCookie(getCookieName(gen), lines[l]);
}
var ents = lines[l].split(",");
var spinda_spots = false;
if(ents[0] && ents[0] == "spindaspots") {
randomSpinda(ents);
continue;
}
for(var e in ents) {
var name = ents[e].replace("&", "");
ele = document.getElementById('box'+gen+'_'+e);
if(!ele)
continue;
if(!choices[l] || name == "") {
ele.src = "./blank.png";
continue;
}
choices[l][e] = name
var sf = spriteFile;
if(ents[e].match("&"))
sf = "Shiny";
ele.src = domlink + sf + "/" + name + ".png";
}
}
}
function resetGrid() {
if(confirm("Are you sure you want to reset the grid?")) {
for(var c in cookie_names) {
deleteCookie(cookie_names[c]);
}
loadCookies();
}
resetChoices();
}
function drawFinal() {
var canvas = document.getElementById("final");
var ctx = canvas.getContext("2d");
ctx.drawImage(document.getElementById('back'), 0, 0);
for(var g=0; g<11; g++) {
for(var t=1; t<25; t++) {
var ele = document.getElementById('box'+g+'_'+t);
if(!ele || ele.src == "./blank.png")
continue;
ctx.drawImage(ele, ele.offsetLeft, ele.offsetTop);
if(g == 0 && t == 22) {
// render spinda
var spots = ["spot1", "spot2", "spot3", "spot4", "spinda2", "spinda-cover"];
for(var s in spots) {
ele = document.getElementById(spots[s]);
ctx.drawImage(ele, ele.offsetLeft, ele.offsetTop);
}
}
}
}
if(domlink == "./") {
canvas.style.zIndex = 10;
}else{
canvas.style.zIndex = -1;
}
var dbutton = document.getElementById("downloader")
dbutton.href = canvas.toDataURL("image/png");
dbutton.innerHTML = "Alternate download link";
dbutton.click()
}
function spindaSpot(ele, axis) {
var spot_ele = document.getElementById(spot_map[ele.id])
if(axis == "x") {
var base_left = 1673;
spot_ele.style.left = base_left + parseInt(ele.value);
}else{
var base_top = 1417;
spot_ele.style.top = base_top - parseInt(ele.value);
}
writeSpindaCookie();
}
function rand(scale) {
return Math.floor(Math.random()*scale)
}
function randomSpinda(ar) {
var spots = ["spot1", "spot2", "spot3", "spot4"];
if(!ar) {
ar = ["spindaspots"];
for(var s in spots) {
ar.push(rand(17));
ar.push(rand(17));
}
}
var base_left = 1673;
var base_top = 1417;
for(var i=0; i<spots.length; i++) {
var sname = spots[i];
var spot_ele = document.getElementById(sname);
var new_x = ar[2*i+1];
var new_y = ar[2*i+2];
spot_ele.style.left = base_left + parseInt(new_x);
spot_ele.style.top = base_top - parseInt(new_y);
document.getElementById(sname + "x").value = new_x;
document.getElementById(sname + "y").value = new_y;
}
writeSpindaCookie()
}
// returns the cookie with the given name,
// or undefined if not found
function getCookie(name) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
function setCookie(name, value) {
options = {
path: '/',
samesite: 'strict'
};
options.expires = new Date().getTime() + 365*24*60*60*1000;
if (options.expires instanceof Date) {
options.expires = options.expires.toUTCString();
}
var updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
for (var optionKey in options) {
updatedCookie += "; " + optionKey;
var optionValue = options[optionKey];
if (optionValue !== true) {
updatedCookie += "=" + optionValue;
}
}
document.cookie = updatedCookie;
}
function deleteCookie(name) {
setCookie(name, "", {
'max-age': -1
})
}
// cookie-fy a gen and save it
function writeCookie(g) {
var cookie_text = "";
for(var t=0; t<choices[g].length; t++) {
var ele = document.getElementById('box'+g+"_"+t);
if(ele == null) {
cookie_text += ",";
continue;
}
if(ele.src.match(/Shiny/))
cookie_text += "&"
if(choices[g][t])
cookie_text += choices[g][t]
cookie_text += ",";
}
setCookie(getCookieName(g), cookie_text);
}
function writeSpindaCookie() {
var spots = ["spot1", "spot2", "spot3", "spot4"];
var cookie_text = "spindaspots,";
for(var i=0; i<spots.length; i++) {
var sname = spots[i];
var spot_ele = document.getElementById(sname);
cookie_text += document.getElementById(sname + "x").value;
cookie_text += ",";
cookie_text += document.getElementById(sname + "y").value;
cookie_text += ",";
}
setCookie("spinda", cookie_text);
}
function loadCookies() {
var cookie_vals = [];
for(var c in cookie_names)
cookie_vals.push(",,,,,,,,,,,,,,,,,,,,,,,,,,,,");
var cookies = document.cookie.split(/; ?/);
for(var c in cookies) {
var pair = cookies[c].match(/([^=]+) ?= ?([^=;]+)/);
if(!pair)
continue;
var cname = decodeURIComponent(pair[1]);
var cval = decodeURIComponent(pair[2]);
var g = cookie_names.indexOf(cname);
if(g == -1) {
//special cookies
if(cname == "shiny")
spriteFile = swap[spriteFile];
}else{
cookie_vals[g] = cval;
}
}
loadTextbox(cookie_vals.join("\n"));
}
function getCookieName(g) {
if(parseInt(g) < 10)
return "gen"+g;
if(g == 10)
return "favs";
return "spinda";
}
</script>
</head>
<body onLoad="loadCookies();">
<img class="back" id="back" src="https://cajunavenger.github.io/background.png" alt="" height="1571" width="2276" onclick="closeBox();"/>
<canvas id="final" height="1571" width="2276"></canvas>
<img class="selectionBox" id="box0_1" onclick="openBox(0, 1);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_2" onclick="openBox(0, 2);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_3" onclick="openBox(0, 3);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_4" onclick="openBox(0, 4);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_5" onclick="openBox(0, 5);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_6" onclick="openBox(0, 6);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_7" onclick="openBox(0, 7);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_8" onclick="openBox(0, 8);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_9" onclick="openBox(0, 9);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_10" onclick="openBox(0, 10);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_11" onclick="openBox(0, 11);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_12" onclick="openBox(0, 12);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_13" onclick="openBox(0, 13);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_14" onclick="openBox(0, 14);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_15" onclick="openBox(0, 15);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_16" onclick="openBox(0, 16);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_17" onclick="openBox(0, 17);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_18" onclick="openBox(0, 18);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_19" onclick="openBox(0, 19);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_20" onclick="openBox(0, 20);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_21" onclick="openBox(0, 21);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_22" onclick="" src="https://cajunavenger.github.io/Front/SPINDA.png" height="96" width="96">
<img class="selectionBox" id="box0_23" onclick="openBox(0, 23);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box0_24" onclick="openBox(0, 24);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_1" onclick="openBox(1, 1);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_2" onclick="openBox(1, 2);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_3" onclick="openBox(1, 3);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_4" onclick="openBox(1, 4);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_5" onclick="openBox(1, 5);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_6" onclick="openBox(1, 6);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_7" onclick="openBox(1, 7);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_8" onclick="openBox(1, 8);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_9" onclick="openBox(1, 9);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_10" onclick="openBox(1, 10);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_11" onclick="openBox(1, 11);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_12" onclick="openBox(1, 12);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_13" onclick="openBox(1, 13);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_14" onclick="openBox(1, 14);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_15" onclick="openBox(1, 15);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_16" onclick="openBox(1, 16);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_17" onclick="openBox(1, 17);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_18" onclick="openBox(1, 18);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_19" onclick="openBox(1, 19);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_20" onclick="openBox(1, 20);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_21" onclick="openBox(1, 21);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box1_22" onclick="openBox(1, 22);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_1" onclick="openBox(2, 1);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_2" onclick="openBox(2, 2);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_3" onclick="openBox(2, 3);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_4" onclick="openBox(2, 4);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_5" onclick="openBox(2, 5);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_6" onclick="openBox(2, 6);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_7" onclick="openBox(2, 7);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_8" onclick="openBox(2, 8);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_9" onclick="openBox(2, 9);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_10" onclick="openBox(2, 10);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_11" onclick="openBox(2, 11);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_12" onclick="openBox(2, 12);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_13" onclick="openBox(2, 13);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_14" onclick="openBox(2, 14);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_15" onclick="openBox(2, 15);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_16" onclick="openBox(2, 16);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_17" onclick="openBox(2, 17);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_18" onclick="openBox(2, 18);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_19" onclick="openBox(2, 19);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_20" onclick="openBox(2, 20);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_21" onclick="openBox(2, 21);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box2_22" onclick="openBox(2, 22);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_1" onclick="openBox(3, 1);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_2" onclick="openBox(3, 2);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_3" onclick="openBox(3, 3);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_4" onclick="openBox(3, 4);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_5" onclick="openBox(3, 5);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_6" onclick="openBox(3, 6);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_7" onclick="openBox(3, 7);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_8" onclick="openBox(3, 8);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_9" onclick="openBox(3, 9);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_10" onclick="openBox(3, 10);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_11" onclick="openBox(3, 11);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_12" onclick="openBox(3, 12);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_13" onclick="openBox(3, 13);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_14" onclick="openBox(3, 14);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_15" onclick="openBox(3, 15);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_16" onclick="openBox(3, 16);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_17" onclick="openBox(3, 17);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_18" onclick="openBox(3, 18);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_19" onclick="openBox(3, 19);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_20" onclick="openBox(3, 20);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_21" onclick="openBox(3, 21);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box3_22" onclick="openBox(3, 22);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_1" onclick="openBox(4, 1);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_2" onclick="openBox(4, 2);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_3" onclick="openBox(4, 3);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_4" onclick="openBox(4, 4);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_5" onclick="openBox(4, 5);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_6" onclick="openBox(4, 6);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_7" onclick="openBox(4, 7);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_8" onclick="openBox(4, 8);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_9" onclick="openBox(4, 9);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_10" onclick="openBox(4, 10);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_11" onclick="openBox(4, 11);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_12" onclick="openBox(4, 12);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_13" onclick="openBox(4, 13);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_14" onclick="openBox(4, 14);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_15" onclick="openBox(4, 15);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_16" onclick="openBox(4, 16);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_17" onclick="openBox(4, 17);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_18" onclick="openBox(4, 18);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_19" onclick="openBox(4, 19);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_20" onclick="openBox(4, 20);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_21" onclick="openBox(4, 21);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box4_22" onclick="openBox(4, 22);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_1" onclick="openBox(5, 1);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_2" onclick="openBox(5, 2);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_3" onclick="openBox(5, 3);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_4" onclick="openBox(5, 4);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_5" onclick="openBox(5, 5);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_6" onclick="openBox(5, 6);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_7" onclick="openBox(5, 7);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_8" onclick="openBox(5, 8);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_9" onclick="openBox(5, 9);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_10" onclick="openBox(5, 10);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_11" onclick="openBox(5, 11);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_12" onclick="openBox(5, 12);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_13" onclick="openBox(5, 13);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_14" onclick="openBox(5, 14);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_15" onclick="openBox(5, 15);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_16" onclick="openBox(5, 16);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_17" onclick="openBox(5, 17);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_18" onclick="openBox(5, 18);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_19" onclick="openBox(5, 19);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_20" onclick="openBox(5, 20);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_21" onclick="openBox(5, 21);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box5_22" onclick="openBox(5, 22);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_1" onclick="openBox(6, 1);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_2" onclick="openBox(6, 2);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_3" onclick="openBox(6, 3);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_4" onclick="openBox(6, 4);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_5" onclick="openBox(6, 5);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_6" onclick="openBox(6, 6);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_7" onclick="openBox(6, 7);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_8" onclick="openBox(6, 8);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_9" onclick="openBox(6, 9);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_10" onclick="openBox(6, 10);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_11" onclick="openBox(6, 11);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_12" onclick="openBox(6, 12);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_13" onclick="openBox(6, 13);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_14" onclick="openBox(6, 14);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_15" onclick="openBox(6, 15);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_16" onclick="openBox(6, 16);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_17" onclick="openBox(6, 17);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_18" onclick="openBox(6, 18);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_19" onclick="openBox(6, 19);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_20" onclick="openBox(6, 20);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_21" onclick="openBox(6, 21);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box6_22" onclick="openBox(6, 22);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_1" onclick="openBox(7, 1);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_2" onclick="openBox(7, 2);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_3" onclick="openBox(7, 3);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_4" onclick="openBox(7, 4);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_5" onclick="openBox(7, 5);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_6" onclick="openBox(7, 6);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_7" onclick="openBox(7, 7);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_8" onclick="openBox(7, 8);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_9" onclick="openBox(7, 9);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_10" onclick="openBox(7, 10);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_11" onclick="openBox(7, 11);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_12" onclick="openBox(7, 12);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_13" onclick="openBox(7, 13);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_14" onclick="openBox(7, 14);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_15" onclick="openBox(7, 15);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_16" onclick="openBox(7, 16);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_17" onclick="openBox(7, 17);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_18" onclick="openBox(7, 18);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_19" onclick="openBox(7, 19);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_20" onclick="openBox(7, 20);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_21" onclick="openBox(7, 21);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box7_22" onclick="openBox(7, 22);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_1" onclick="openBox(8, 1);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_2" onclick="openBox(8, 2);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_3" onclick="openBox(8, 3);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_4" onclick="openBox(8, 4);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_5" onclick="openBox(8, 5);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_6" onclick="openBox(8, 6);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_7" onclick="openBox(8, 7);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_8" onclick="openBox(8, 8);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_9" onclick="openBox(8, 9);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_10" onclick="openBox(8, 10);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_11" onclick="openBox(8, 11);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_12" onclick="openBox(8, 12);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_13" onclick="openBox(8, 13);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_14" onclick="openBox(8, 14);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_15" onclick="openBox(8, 15);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_16" onclick="openBox(8, 16);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_17" onclick="openBox(8, 17);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_18" onclick="openBox(8, 18);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_19" onclick="openBox(8, 19);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_20" onclick="openBox(8, 20);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_21" onclick="openBox(8, 21);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box8_22" onclick="openBox(8, 22);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_1" onclick="openBox(9, 1);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_2" onclick="openBox(9, 2);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_3" onclick="openBox(9, 3);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_4" onclick="openBox(9, 4);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_5" onclick="openBox(9, 5);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_6" onclick="openBox(9, 6);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_7" onclick="openBox(9, 7);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_8" onclick="openBox(9, 8);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_9" onclick="openBox(9, 9);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_10" onclick="openBox(9, 10);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_11" onclick="openBox(9, 11);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_12" onclick="openBox(9, 12);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_13" onclick="openBox(9, 13);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_14" onclick="openBox(9, 14);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_15" onclick="openBox(9, 15);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_16" onclick="openBox(9, 16);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_17" onclick="openBox(9, 17);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_18" onclick="openBox(9, 18);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_19" onclick="openBox(9, 19);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_20" onclick="openBox(9, 20);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_21" onclick="openBox(9, 21);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box9_22" onclick="openBox(9, 22);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_1" onclick="openBox(10, 1);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_2" onclick="openBox(10, 2);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_3" onclick="openBox(10, 3);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_4" onclick="openBox(10, 4);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_5" onclick="openBox(10, 5);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_6" onclick="openBox(10, 6);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_7" onclick="openBox(10, 7);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_8" onclick="openBox(10, 8);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_9" onclick="openBox(10, 9);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_10" onclick="openBox(10, 10);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_11" onclick="openBox(10, 11);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_12" onclick="openBox(10, 12);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_13" onclick="openBox(10, 13);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_14" onclick="openBox(10, 14);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_15" onclick="openBox(10, 15);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_16" onclick="openBox(10, 16);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_17" onclick="openBox(10, 17);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_18" onclick="openBox(10, 18);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_19" onclick="openBox(10, 19);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_20" onclick="openBox(10, 20);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_21" onclick="openBox(10, 21);" src="./blank.png" height="96" width="96">
<img class="selectionBox" id="box10_22" onclick="openBox(10, 22);" src="./blank.png" height="96" width="96">
<img class="charm" id="charm" src="./charm.png" alt="" height="64" width="64" onclick="activateShiny();" />
<img class="charmbox" id="charmbox1" src="./charmbox1.png" alt="" height="63" width="400" />
<img class="charmbox" id="charmbox2" src="./charmbox2.png" alt="" height="28" width="400" onclick="fullShiny();" />
<img class="charmbox" id="teambox" src="./teambox.png" alt="" height="65" width="470" />
<img class="bubble" id="bubble" src="./blank.png" >
<img class="preview" id="preview0" src="./blank.png" height="96" width="96" onclick="pickMon(0);">
<img class="preview" id="preview1" src="./blank.png" height="96" width="96" onclick="pickMon(1);">
<img class="preview" id="preview2" src="./blank.png" height="96" width="96" onclick="pickMon(2);">
<img class="preview" id="preview3" src="./blank.png" height="96" width="96" onclick="pickMon(3);">
<img class="preview" id="preview4" src="./blank.png" height="96" width="96" onclick="pickMon(4);">
<img class="preview" id="preview5" src="./blank.png" height="96" width="96" onclick="pickMon(5);">
<img class="preview" id="preview6" src="./blank.png" height="96" width="96" onclick="pickMon(6);">
<img class="preview" id="preview7" src="./blank.png" height="96" width="96" onclick="pickMon(7);">
<img class="preview" id="preview8" src="./blank.png" height="96" width="96" onclick="pickMon(8);">
<img class="preview" id="preview9" src="./blank.png" height="96" width="96" onclick="pickMon(9);">
<img class="preview" id="preview10" src="./blank.png" height="96" width="96" onclick="pickMon(10);">
<img class="preview" id="preview11" src="./blank.png" height="96" width="96" onclick="pickMon(11);">
<img class="preview" id="preview12" src="./blank.png" height="96" width="96" onclick="pickMon(12);">
<img class="preview" id="preview13" src="./blank.png" height="96" width="96" onclick="pickMon(13);">
<img class="preview" id="preview14" src="./blank.png" height="96" width="96" onclick="pickMon(14);">
<img class="preview" id="preview15" src="./blank.png" height="96" width="96" onclick="pickMon(15);">
<img class="preview" id="preview16" src="./blank.png" height="96" width="96" onclick="pickMon(16);">
<img class="preview" id="preview17" src="./blank.png" height="96" width="96" onclick="pickMon(17);">
<img class="preview" id="preview18" src="./blank.png" height="96" width="96" onclick="pickMon(18);">
<img class="preview" id="preview19" src="./blank.png" height="96" width="96" onclick="pickMon(19);">
<img class="preview" id="preview20" src="./blank.png" height="96" width="96" onclick="pickMon(20);">
<img class="preview" id="preview21" src="./blank.png" height="96" width="96" onclick="pickMon(21);">
<img class="preview" id="preview22" src="./blank.png" height="96" width="96" onclick="pickMon(22);">
<img class="preview" id="preview23" src="./blank.png" height="96" width="96" onclick="pickMon(23);">
<img class="preview" id="preview24" src="./blank.png" height="96" width="96" onclick="pickMon(24);">
<img class="preview" id="preview25" src="./blank.png" height="96" width="96" onclick="pickMon(25);">
<img class="preview" id="preview26" src="./blank.png" height="96" width="96" onclick="pickMon(26);">
<img class="preview" id="preview27" src="./blank.png" height="96" width="96" onclick="pickMon(27);">
<img class="preview" id="preview28" src="./blank.png" height="96" width="96" onclick="pickMon(28);">
<img class="preview" id="preview29" src="./blank.png" height="96" width="96" onclick="pickMon(29);">
<img class="preview" id="preview30" src="./blank.png" height="96" width="96" onclick="pickMon(30);">
<img class="preview" id="preview31" src="./blank.png" height="96" width="96" onclick="pickMon(31);">
<img class="preview" id="preview32" src="./blank.png" height="96" width="96" onclick="pickMon(32);">
<img class="preview" id="preview33" src="./blank.png" height="96" width="96" onclick="pickMon(33);">
<img class="preview" id="preview34" src="./blank.png" height="96" width="96" onclick="pickMon(34);">
<img class="preview" id="preview35" src="./blank.png" height="96" width="96" onclick="pickMon(35);">
<img class="preview" id="preview36" src="./blank.png" height="96" width="96" onclick="pickMon(36);">
<img class="preview" id="preview37" src="./blank.png" height="96" width="96" onclick="pickMon(37);">
<img class="preview" id="preview38" src="./blank.png" height="96" width="96" onclick="pickMon(38);">
<img class="preview" id="preview39" src="./blank.png" height="96" width="96" onclick="pickMon(39);">
<img class="preview" id="preview40" src="./blank.png" height="96" width="96" onclick="pickMon(40);">
<img class="preview" id="preview41" src="./blank.png" height="96" width="96" onclick="pickMon(41);">
<img class="preview" id="preview42" src="./blank.png" height="96" width="96" onclick="pickMon(42);">
<img class="preview" id="preview43" src="./blank.png" height="96" width="96" onclick="pickMon(43);">
<img class="preview" id="preview44" src="./blank.png" height="96" width="96" onclick="pickMon(44);">
<img class="preview" id="preview45" src="./blank.png" height="96" width="96" onclick="pickMon(45);">
<img class="preview" id="preview46" src="./blank.png" height="96" width="96" onclick="pickMon(46);">
<img class="preview" id="preview47" src="./blank.png" height="96" width="96" onclick="pickMon(47);">
<img class="preview" id="preview48" src="./blank.png" height="96" width="96" onclick="pickMon(48);">
<img class="preview" id="preview49" src="./blank.png" height="96" width="96" onclick="pickMon(49);">
<img class="preview" id="preview50" src="./blank.png" height="96" width="96" onclick="pickMon(50);">
<img class="preview" id="preview51" src="./blank.png" height="96" width="96" onclick="pickMon(51);">
<img class="preview" id="preview52" src="./blank.png" height="96" width="96" onclick="pickMon(52);">
<img class="preview" id="preview53" src="./blank.png" height="96" width="96" onclick="pickMon(53);">
<img class="preview" id="preview54" src="./blank.png" height="96" width="96" onclick="pickMon(54);">
<img class="preview" id="preview55" src="./blank.png" height="96" width="96" onclick="pickMon(55);">
<img class="preview" id="preview56" src="./blank.png" height="96" width="96" onclick="pickMon(56);">
<img class="preview" id="preview57" src="./blank.png" height="96" width="96" onclick="pickMon(57);">
<img class="preview" id="preview58" src="./blank.png" height="96" width="96" onclick="pickMon(58);">
<img class="preview" id="preview59" src="./blank.png" height="96" width="96" onclick="pickMon(59);">
<img id="spinda" src="https://cajunavenger.github.io/Front/SPINDA.png">
<img id="spinda2" src="https://cajunavenger.github.io/spinda/Front/SPINDA.png">
<img id="spinda-cover" src="https://cajunavenger.github.io/spinda/cover.png" onclick="shinySpinda();">
<img id="spot1" class="spinda-spot" src="https://cajunavenger.github.io/spinda/Front/spot1.png">
<img id="spot2" class="spinda-spot" src="https://cajunavenger.github.io/spinda/Front/spot2.png">
<img id="spot3" class="spinda-spot" src="https://cajunavenger.github.io/spinda/Front/spot3.png">
<img id="spot4" class="spinda-spot" src="https://cajunavenger.github.io/spinda/Front/spot4.png">
<input type="number" id="spot1x" class="spotinput" min="0" max="16" value="8" oninput="spindaSpot(this, 'x')">
<input type="number" id="spot1y" class="spotinput" min="0" max="16" value="8" oninput="spindaSpot(this, 'y')">
<input type="number" id="spot3x" class="spotinput" min="0" max="16" value="8" oninput="spindaSpot(this, 'x')">
<input type="number" id="spot3y" class="spotinput" min="0" max="16" value="8" oninput="spindaSpot(this, 'y')">
<input type="number" id="spot2x" class="spotinput" min="0" max="16" value="8" oninput="spindaSpot(this, 'x')">
<input type="number" id="spot2y" class="spotinput" min="0" max="16" value="8" oninput="spindaSpot(this, 'y')">
<input type="number" id="spot4x" class="spotinput" min="0" max="16" value="8" oninput="spindaSpot(this, 'x')">
<input type="number" id="spot4y" class="spotinput" min="0" max="16" value="8" oninput="spindaSpot(this, 'y')">
<span id="spinda-help">
Spinda's spots can be randomized or manually placed.<br>
Each box pair in the corners moves its nearest spot.<br>
Up/Down on the first box moves it Right/Left.<br>
Up/Down on the second box moves it Up/Down.
</span>
<input type="button" id="btnRandom" value="Randomize!" onclick="randomSpinda()"/>
<input type="button" id="btnPrint" value="Download Image" onclick="drawFinal()" target="_blank"/>
<input type="button" id="btnWrite" value="Write Code" onclick="printTextbox()"/>
<input type="button" id="btnLoad" value="Import Code" onclick="loadTextbox()"/>
<input type="button" id="btnReset" value="Reset The Grid!" onclick="resetGrid()"/>
<a id="downloader" download="download"></a>
<textarea id="import" rows="13" cols="72" spellcheck="false">
# Don't like my choices? You can overrule them here!
# Write Code will put a text version of the grid here
# Then you can edit the names and Import Code to replace the images.
# Most Pokemon are just their named capitalized, like SWELLOW.
# Alternate forms have specific tags, like MEOWTH_2 for Galarian Meowth.
# You can also use this to keep backups
</textarea>
<div id="credits">
<b>Updates</b><br>
<a href="https://twitter.com/JordanosArt">Jordanos's</a> Walking Wake and Iron Leaves have been added!<br>
• Other Gen 9 DLC mons will be added once we have types and sprites.<br>
• The website will now remember your choices on refresh 🍪<br>
• Gen 6 Gimmick now lets you choose your favorite Mega.<br>
• Download button + backup link works for even more mobie devices!<br>
• If it's still not working for you, yell at me in a link below.<br><br>
<b>Credits</b><br>
<a href="https://github.com/CajunAvenger/cajunavenger.github.io">Source Code</a> - <a href="https://github.com/CajunAvenger/cajunavenger.github.io/issues">Issues or Feature Requests?</a> - <a href="https://twitter.com/cajunwritescode">Twitter</a><br />
• Walking Wake and Iron Leaves sprites by <a href="https://twitter.com/JordanosArt">JordanosArt</a><br>
• Other later generation sprites from the <a href="https://reliccastle.com/resources/1101/">Gen 8<a> and <a href="https://reliccastle.com/resources/952/">Gen 9</a> Resource Packs.<br />
• If you want to support more code silliness, you can donate to my <s>caffeine addiction</s> <a href="https://ko-fi.com/cajun42">Ko-Fi</a>.<br />
</div>
</body>
</html>