select: created a basic select page with temporary box art, direct to…

… the select page when press "track"

index.css

@@ -3,7 +3,7 @@ body {
     margin: 2vh;
 }
 
-p, h1, label {
+p, h1, h2, label {
     color: white;
     font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
 }

index.html

@@ -19,7 +19,7 @@ <h1>welcome to deadfry42's pokedex tracker!</h1>
             <p>Press "track" to get started! (Requires Javascript support)</p>
             <br>
             <noscript><p style="width: 50vw; margin: auto;" class="warning"><img src="../assets/warning.png" width="100px" height="100px"><br>Looks like your browser either doesn't support javascript or has javascript enabled! Please swap to a browser with javascript support or enable javascript in your browser's settings to be able to use this website.</p><br></noscript>
-            <a href="./tracker/">
+            <a href="./select/">
             <button>
                 track
             </button>

select/index.html

@@ -19,6 +19,7 @@ <h1>deadfry42's pokedex tracker!</h1>
             <br>
             <noscript><p style="width: 50vw; margin: auto;" class="warning"><img src="../assets/warning.png" width="100px" height="100px"><br>Looks like your browser either doesn't support javascript or has javascript enabled! Please swap to a browser with javascript support or enable javascript in your browser's settings to be able to use this website.</p><br></noscript>
             <div id="workspace" class="center" style="width: 100wh;"></div>
+            <script src="select.js"></script>
         </div>
     </body>
     <foot>

select/select.js

@@ -0,0 +1,113 @@
+var pokedexes = [
+    {
+        label: "Generation 1",
+        national: null,
+        types: [
+            {label: "Pokemon Red/Blue/Yellow", store: "rby"},
+        ]
+    },
+    {
+        label: "Generation 2",
+        national: null,
+        types: [
+            {label: "Pokemon Gold/Silver/Crystal", store: "gsc"},
+        ]
+    },
+    {
+        label: "Generation 3",
+        national: "gen3",
+        types: [
+            {label: "Pokemon Ruby/Sapphire/Emerald", store: "rse"},
+            {label: "Pokemon FireRed/LeafGreen", store: "frlg"},
+            {label: "Pokemon Box: Ruby & Sapphire", store: "pbrs"},
+        ]
+    },
+    {
+        label: "Generation 4",
+        national: "gen4",
+        types: [
+            {label: "Pokemon Diamond/Pearl/Platinum", store: "dppt"},
+            {label: "Pokemon HeartGold/SoulSilver", store: "hgss"},
+        ]
+    },
+    {
+        label: "Generation 5",
+        national: "gen5",
+        types: [
+            {label: "Pokemon Black/White", store: "bw"},
+            {label: "Pokemon Black2/White2", store: "b2w2"},
+        ]
+    },
+    {
+        label: "Generation 6",
+        national: "gen6",
+        types: [
+            {label: "Pokemon X/Y", store: "xy"},
+            {label: "Pokemon Omega Ruby/Alpha Sapphire", store: "oras"},
+        ]
+    },
+    {
+        label: "Generation 7",
+        national: null,
+        types: [
+            {label: "Pokemon Sun/Moon", store: "sm"},
+            {label: "Pokemon Ultra Sun/Ultra Moon", store: "usum"},
+            {label: "Pokemon Bank", store: "pokebank"},
+        ]
+    },
+]
+
+
+var readyPokedexes = [ // all of the pokedexes that are ready and should be shown to the user
+    pokedexes[0],
+    pokedexes[1],
+    pokedexes[2],
+]
+
+const CreatePokedexElement = (data) => {
+    var pokedex = document.createElement("div")
+    var title = document.createElement("h2")
+    title.innerText = data.label;
+    title.style.margin = "1vw"
+
+    var anchor = document.createElement("a")
+    anchor.href = `../tracker/index.html?game=${data.store}`
+
+    var image = document.createElement("img")
+    image.src = `../assets/boxart/${data.store}.png`
+    image.style.width = "10vw"
+
+    anchor.append(image)
+
+    pokedex.append(title)
+    pokedex.append(anchor)
+
+    return pokedex
+}
+
+const CreateGroupElement = (data) => {
+    var group = document.createElement("div")
+
+    var inside = document.createElement("div")
+    inside.style.display = "flex"
+    inside.style.margin = "auto"
+    inside.classList = ["center"]
+
+    var title = document.createElement("h1")
+    title.innerText = data.label;
+
+    group.append(title)
+    group.append(inside);
+
+    data.types.forEach((pokedex) => {
+        inside.append(CreatePokedexElement(pokedex));
+    })
+
+    return group;
+}
+
+const workspace = document.getElementById("workspace")
+
+readyPokedexes.forEach((element) => {
+    workspace.append(CreateGroupElement(element))
+})