From eb1605dbe7ce49038ff4d855325342cbbc256073 Mon Sep 17 00:00:00 2001
From: kuroppoi <68156848+kuroppoi@users.noreply.github.com>
Date: Tue, 11 Jul 2023 23:27:50 +0200
Subject: [PATCH] Change how popup forms work so they don't rely on anchors

---
 src/main/resources/dashboard/profile.html     | 90 +++++++++----------
 .../resources/dashboard/scripts/profile.js    | 12 ++-
 .../resources/dashboard/styles/profile.css    | 12 +--
 3 files changed, 58 insertions(+), 56 deletions(-)

diff --git a/src/main/resources/dashboard/profile.html b/src/main/resources/dashboard/profile.html
index ff008d2..3557252 100644
--- a/src/main/resources/dashboard/profile.html
+++ b/src/main/resources/dashboard/profile.html
@@ -50,18 +50,18 @@
           <div>
             <table id="encounter-table" class="encounter-image-table">
               <tr>
-                <td><a id="encounter0" href="#configureEncounter" onclick="configureEncounter(0)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter1" href="#configureEncounter" onclick="configureEncounter(1)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter2" href="#configureEncounter" onclick="configureEncounter(2)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter3" href="#configureEncounter" onclick="configureEncounter(3)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter4" href="#configureEncounter" onclick="configureEncounter(4)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
+                <td id="encounter0" onclick="configureEncounter(0)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter1" onclick="configureEncounter(1)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter2" onclick="configureEncounter(2)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter3" onclick="configureEncounter(3)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter4" onclick="configureEncounter(4)"><image src="/sprites/pokemon/normal/0.png"/></td>
               </tr>
               <tr>
-                <td><a id="encounter5" href="#configureEncounter" onclick="configureEncounter(5)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter6" href="#configureEncounter" onclick="configureEncounter(6)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter7" href="#configureEncounter" onclick="configureEncounter(7)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter8" href="#configureEncounter" onclick="configureEncounter(8)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter9" href="#configureEncounter" onclick="configureEncounter(9)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
+                <td id="encounter5" onclick="configureEncounter(5)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter6" onclick="configureEncounter(6)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter7" onclick="configureEncounter(7)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter8" onclick="configureEncounter(8)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter9" onclick="configureEncounter(9)"><image src="/sprites/pokemon/normal/0.png"/></td>
               </tr>
             </table>
           </div>
@@ -72,20 +72,20 @@
           <div>
             <table id="visitor-table" class="visitor-table">
               <tr>
-                <td><a id="visitor0" href="#configureVisitor" onclick="configureVisitor(0)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor1" href="#configureVisitor" onclick="configureVisitor(1)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor2" href="#configureVisitor" onclick="configureVisitor(2)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor3" href="#configureVisitor" onclick="configureVisitor(3)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor4" href="#configureVisitor" onclick="configureVisitor(4)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor5" href="#configureVisitor" onclick="configureVisitor(5)"><image src="/sprites/trainers/none.png"/></a></td>
+                <td id="visitor0" onclick="configureVisitor(0)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor1" onclick="configureVisitor(1)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor2" onclick="configureVisitor(2)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor3" onclick="configureVisitor(3)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor4" onclick="configureVisitor(4)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor5" onclick="configureVisitor(5)"><image src="/sprites/trainers/none.png"/></td>
               </tr>
               <tr>
-                <td><a id="visitor6" href="#configureVisitor" onclick="configureVisitor(6)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor7" href="#configureVisitor" onclick="configureVisitor(7)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor8" href="#configureVisitor" onclick="configureVisitor(8)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor9" href="#configureVisitor" onclick="configureVisitor(9)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor10" href="#configureVisitor" onclick="configureVisitor(10)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor11" href="#configureVisitor" onclick="configureVisitor(11)"><image src="/sprites/trainers/none.png"/></a></td>
+                <td id="visitor6" onclick="configureVisitor(6)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor7" onclick="configureVisitor(7)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor8" onclick="configureVisitor(8)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor9" onclick="configureVisitor(9)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor10" onclick="configureVisitor(10)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor11" onclick="configureVisitor(11)"><image src="/sprites/trainers/none.png"/></td>
               </tr>
             </table>
           </div>
@@ -96,28 +96,28 @@
           <div>
             <table id="item-table" class="item-table">
               <tr>
-                <td><a id="item0" href="#configureItem" onclick="configureItem(0)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item1" href="#configureItem" onclick="configureItem(1)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item2" href="#configureItem" onclick="configureItem(2)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item3" href="#configureItem" onclick="configureItem(3)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item4" href="#configureItem" onclick="configureItem(4)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item5" href="#configureItem" onclick="configureItem(5)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item6" href="#configureItem" onclick="configureItem(6)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item7" href="#configureItem" onclick="configureItem(7)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item8" href="#configureItem" onclick="configureItem(8)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item9" href="#configureItem" onclick="configureItem(9)"><image src="/sprites/items/0.png"/></a></td>
+                <td id="item0" onclick="configureItem(0)"><image src="/sprites/items/0.png"/></td>
+                <td id="item1" onclick="configureItem(1)"><image src="/sprites/items/0.png"/></td>
+                <td id="item2" onclick="configureItem(2)"><image src="/sprites/items/0.png"/></td>
+                <td id="item3" onclick="configureItem(3)"><image src="/sprites/items/0.png"/></td>
+                <td id="item4" onclick="configureItem(4)"><image src="/sprites/items/0.png"/></td>
+                <td id="item5" onclick="configureItem(5)"><image src="/sprites/items/0.png"/></td>
+                <td id="item6" onclick="configureItem(6)"><image src="/sprites/items/0.png"/></td>
+                <td id="item7" onclick="configureItem(7)"><image src="/sprites/items/0.png"/></td>
+                <td id="item8" onclick="configureItem(8)"><image src="/sprites/items/0.png"/></td>
+                <td id="item9" onclick="configureItem(9)"><image src="/sprites/items/0.png"/></td>
               </tr>
               <tr>
-                <td><a id="item10" href="#configureItem" onclick="configureItem(10)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item11" href="#configureItem" onclick="configureItem(11)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item12" href="#configureItem" onclick="configureItem(12)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item13" href="#configureItem" onclick="configureItem(13)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item14" href="#configureItem" onclick="configureItem(14)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item15" href="#configureItem" onclick="configureItem(15)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item16" href="#configureItem" onclick="configureItem(16)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item17" href="#configureItem" onclick="configureItem(17)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item18" href="#configureItem" onclick="configureItem(18)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item19" href="#configureItem" onclick="configureItem(19)"><image src="/sprites/items/0.png"/></a></td>
+                <td id="item10" onclick="configureItem(10)"><image src="/sprites/items/0.png"/></td>
+                <td id="item11" onclick="configureItem(11)"><image src="/sprites/items/0.png"/></td>
+                <td id="item12" onclick="configureItem(12)"><image src="/sprites/items/0.png"/></td>
+                <td id="item13" onclick="configureItem(13)"><image src="/sprites/items/0.png"/></td>
+                <td id="item14" onclick="configureItem(14)"><image src="/sprites/items/0.png"/></td>
+                <td id="item15" onclick="configureItem(15)"><image src="/sprites/items/0.png"/></td>
+                <td id="item16" onclick="configureItem(16)"><image src="/sprites/items/0.png"/></td>
+                <td id="item17" onclick="configureItem(17)"><image src="/sprites/items/0.png"/></td>
+                <td id="item18" onclick="configureItem(18)"><image src="/sprites/items/0.png"/></td>
+                <td id="item19" onclick="configureItem(19)"><image src="/sprites/items/0.png"/></td>
               </tr>
             </table>
           </div>
@@ -159,7 +159,7 @@
       </div>
     </div>
     <!-- Entree Forest Encounter Configuration Form -->
-    <div id="configureEncounter" class="popup">
+    <div id="encounter-config" class="popup">
       <div class="content">
         <button class="close-button" onclick="closeEncounterForm()">X</button>
         <form id="encounter-form">
@@ -200,7 +200,7 @@
       </div>
     </div>
     <!-- Item Configuration Form -->
-    <div id="configureItem" class="popup">
+    <div id="item-config" class="popup">
       <div class="content">
         <button class="close-button" onclick="closeItemForm()">X</button>
         <form id="item-form">
@@ -216,7 +216,7 @@
       </div>
     </div>
     <!-- Join Avenue Visitor Configuration Form -->
-    <div id="configureVisitor" class="popup">
+    <div id="visitor-config" class="popup">
       <div class="content">
         <button class="close-button" onclick="closeVisitorForm()">X</button>
         <form id="visitor-form">
diff --git a/src/main/resources/dashboard/scripts/profile.js b/src/main/resources/dashboard/scripts/profile.js
index 5a6abce..6ab8029 100644
--- a/src/main/resources/dashboard/scripts/profile.js
+++ b/src/main/resources/dashboard/scripts/profile.js
@@ -11,15 +11,18 @@ const ELEMENT_DREAMER_TRAINER = document.getElementById("dreamer-trainer");
 const ELEMENT_DREAMER_TRAINER_ID = document.getElementById("dreamer-trainer-id");
 const ELEMENT_DREAMER_LEVEL = document.getElementById("dreamer-level");
 
+const ELEMENT_ENCOUNTER_CONFIG = document.getElementById("encounter-config");
 const ELEMENT_ENCOUNTER_SPECIES = document.getElementById("encounter-form-species");
 const ELEMENT_ENCOUNTER_MOVE = document.getElementById("encounter-form-move");
 const ELEMENT_ENCOUNTER_FORM = document.getElementById("encounter-form-form");
 const ELEMENT_ENCOUNTER_GENDER = document.getElementById("encounter-form-gender");
 const ELEMENT_ENCOUNTER_ANIMATION = document.getElementById("encounter-form-animation");
 
+const ELEMENT_ITEM_CONFIG = document.getElementById("item-config");
 const ELEMENT_ITEM_ID = document.getElementById("item-form-id");
 const ELEMENT_ITEM_QUANTITY = document.getElementById("item-form-quantity");
 
+const ELEMENT_VISITOR_CONFIG = document.getElementById("visitor-config");
 const ELEMENT_VISITOR_NAME = document.getElementById("visitor-form-name");
 const ELEMENT_VISITOR_TYPE = document.getElementById("visitor-form-type");
 const ELEMENT_VISITOR_SHOP_TYPE = document.getElementById("visitor-form-shop-type");
@@ -179,6 +182,7 @@ function configureEncounter(index) {
     ELEMENT_ENCOUNTER_FORM.value = encounter ? encounter.form : 0;
     ELEMENT_ENCOUNTER_GENDER.value = encounter ? encounter.gender : "GENDERLESS";
     ELEMENT_ENCOUNTER_ANIMATION.value = encounter ? encounter.animation : "WALK_AROUND";
+    ELEMENT_ENCOUNTER_CONFIG.style.display = "block";
 }
 
 function saveEncounter() {
@@ -240,7 +244,7 @@ function updateEncounterCell(index) {
 
 function closeEncounterForm() {
     encounterTableIndex = -1;
-    window.location.href = "#";
+    ELEMENT_ENCOUNTER_CONFIG.style.display = "none";
 }
 
 /**
@@ -280,6 +284,7 @@ function configureVisitor(index) {
     ELEMENT_VISITOR_SUBREGION.value = visitor ? visitor.stateProvinceCode : 0;
     ELEMENT_VISITOR_PERSONALITY.value = visitor ? visitor.personality : 0;
     ELEMENT_VISITOR_DREAMER.value = visitor ? visitor.dreamerSpecies : 1;
+    ELEMENT_VISITOR_CONFIG.style.display = "block";
 }
 
 function saveVisitor() {
@@ -357,7 +362,7 @@ function updateVisitorCell(index) {
 
 function closeVisitorForm() {
     visitorTableIndex = -1;
-    window.location.href = "#";
+    ELEMENT_VISITOR_CONFIG.style.display = "none";
 }
 
 /**
@@ -369,6 +374,7 @@ function configureItem(index) {
     let item = profile.items[itemTableIndex];
     ELEMENT_ITEM_ID.value = item ? item.id : 1;
     ELEMENT_ITEM_QUANTITY.value = item ? item.quantity : 1;
+    ELEMENT_ITEM_CONFIG.style.display = "block";
 }
 
 function saveItem() {
@@ -424,7 +430,7 @@ function updateItemCell(index) {
 
 function closeItemForm() {
     itemTableIndex = -1;
-    window.location.href = "#";
+    ELEMENT_ITEM_CONFIG.style.display = "none";
 }
 
 /**
diff --git a/src/main/resources/dashboard/styles/profile.css b/src/main/resources/dashboard/styles/profile.css
index fd8e3b7..cd76b94 100644
--- a/src/main/resources/dashboard/styles/profile.css
+++ b/src/main/resources/dashboard/styles/profile.css
@@ -100,20 +100,13 @@ a:link, a:visited {
 }
 
 .popup {
+    display: none;
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.6);
-    opacity: 0;
-    transition: opacity 200ms;
-    visibility: hidden;
-}
-
-.popup:target {
-    opacity: 1;
-    visibility: visible;
 }
 
 .popup .close-button {
@@ -147,6 +140,7 @@ a:link, a:visited {
     width: 96px;
     height: 96px;
     text-align: center;
+    cursor: pointer;
 }
 
 .item-table {
@@ -163,6 +157,7 @@ a:link, a:visited {
     width: 48px;
     height: 48px;
     text-align: center;
+    cursor: pointer;
 }
 
 .item-table td a {
@@ -185,6 +180,7 @@ a:link, a:visited {
     width: 80px;
     height: 80px;
     text-align: center;
+    cursor: pointer;
 }
 
 .big-button {