From c0a4121987bb193cb868391a25ece61ed5473a2c Mon Sep 17 00:00:00 2001
From: Alex Huynh <u7480270@anu.edu.au>
Date: Sun, 22 Oct 2023 21:59:56 +1100
Subject: [PATCH] feat: added touch/slide on prematch option buttons

---
 src/index.ejs | 118 +++++++++++++++++++++++++++++++-------------------
 1 file changed, 74 insertions(+), 44 deletions(-)

diff --git a/src/index.ejs b/src/index.ejs
index a2a209f91..5e7e07b79 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -74,91 +74,121 @@
 									<h2>Player Mode&nbsp;<span id="playerModeType"></span></h2>
 									<div id="playerMode" class="typeRadio">
 										<input type="radio" id="p2" name="playerMode" value="2" checked>
-										<label for="p2">1 versus 1</label>
+										<label for ="p2" class="draggable-label">1 versus 1</label>
 										<input type="radio" id="p4" name="playerMode" value="4">
-										<label for="p4">2 versus 2</label>
+										<label for="p4" class="draggable-label">2 versus 2</label>
 									</div>
 								</div>
 								<div class="gameOption">
 									<h2>Active Units [ Psyhelm limit ]</h2>
 									<div id="activeUnits" class="typeRadio">
-										<input type="radio" id="activeUnitsOpt1" name="activeUnits" value="1"><label for="activeUnitsOpt1">1</label>
-										<input type="radio" id="activeUnitsOpt2" name="activeUnits" value="2"><label for="activeUnitsOpt2">2</label>
-										<input type="radio" id="activeUnitsOpt3" name="activeUnits" value="3" checked><label for="activeUnitsOpt3">3</label>
-										<input type="radio" id="activeUnitsOpt4" name="activeUnits" value="4"><label for="activeUnitsOpt4">4</label>
-										<input type="radio" id="activeUnitsOpt5" name="activeUnits" value="5"><label for="activeUnitsOpt5">5</label>
-										<input type="radio" id="activeUnitsOpt6" name="activeUnits" value="6"><label for="activeUnitsOpt6">6</label>
-										<input type="radio" id="activeUnitsOpt7" name="activeUnits" value="7"><label for="activeUnitsOpt7">7</label>
+										<input type="radio" id="activeUnitsOpt1" name="activeUnits" value="1"><label for="activeUnitsOpt1" class="draggable-label">1</label>
+										<input type="radio" id="activeUnitsOpt2" name="activeUnits" value="2"><label for="activeUnitsOpt2" class="draggable-label">2</label>
+										<input type="radio" id="activeUnitsOpt3" name="activeUnits" value="3" checked><label for="activeUnitsOpt3" class="draggable-label">3</label>
+										<input type="radio" id="activeUnitsOpt4" name="activeUnits" value="4"><label for="activeUnitsOpt4" class="draggable-label">4</label>
+										<input type="radio" id="activeUnitsOpt5" name="activeUnits" value="5"><label for="activeUnitsOpt5" class="draggable-label">5</label>
+										<input type="radio" id="activeUnitsOpt6" name="activeUnits" value="6"><label for="activeUnitsOpt6" class="draggable-label">6</label>
+										<input type="radio" id="activeUnitsOpt7" name="activeUnits" value="7"><label for="activeUnitsOpt7" class="draggable-label">7</label>
 									</div>
 								</div>
 								<div class="gameOption">
 									<h2>Unit Drops</h2>
 									<div id="unitDrops" class="typeRadio">
-										<input type="radio" id="unitDropsOff" name="unitDrops" value="0"><label for="unitDropsOff">Off</label>
-										<input type="radio" id="unitDropsOn" name="unitDrops" value="1" checked><label for="unitDropsOn">On</label>
+										<input type="radio" id="unitDropsOff" name="unitDrops" value="0"><label for="unitDropsOff" class="draggable-label">Off</label>
+										<input type="radio" id="unitDropsOn" name="unitDrops" value="1" checked><label for="unitDropsOn" class="draggable-label">On</label>
 									</div>
 								</div>
 								<div class="gameOption">
 									<h2>Ability Upgrades [ number of rounds or uses ]</h2>
 									<div id="abilityUpgrades" class="typeRadio">
-										<input type="radio" id="abilityUpgrade1" name="abilityUpgrades" value="-1"><label for="abilityUpgrade1">Disabled</label>
-										<input type="radio" id="abilityUpgrade2" name="abilityUpgrades" value="5"><label for="abilityUpgrade2">5</label>
-										<input type="radio" id="abilityUpgrade3" name="abilityUpgrades" value="4"><label for="abilityUpgrade3">4</label>
-										<input type="radio" id="abilityUpgrade4" name="abilityUpgrades" value="3" checked><label for="abilityUpgrade4">3</label>
-										<input type="radio" id="abilityUpgrade5" name="abilityUpgrades" value="2"><label for="abilityUpgrade5">2</label>
-										<input type="radio" id="abilityUpgrade6" name="abilityUpgrades" value="1"><label for="abilityUpgrade6">1</label>
-										<input type="radio" id="abilityUpgrade7" name="abilityUpgrades" value="0"><label for="abilityUpgrade7">Enabled</label>
+										<input type="radio" id="abilityUpgrade1" name="abilityUpgrades" value="-1"><label for="abilityUpgrade1" class="draggable-label">Disabled</label>
+										<input type="radio" id="abilityUpgrade2" name="abilityUpgrades" value="5"><label for="abilityUpgrade2" class="draggable-label">5</label>
+										<input type="radio" id="abilityUpgrade3" name="abilityUpgrades" value="4"><label for="abilityUpgrade3" class="draggable-label">4</label>
+										<input type="radio" id="abilityUpgrade4" name="abilityUpgrades" value="3" checked><label for="abilityUpgrade4" class="draggable-label">3</label>
+										<input type="radio" id="abilityUpgrade5" name="abilityUpgrades" value="2"><label for="abilityUpgrade5" class="draggable-label">2</label>
+										<input type="radio" id="abilityUpgrade6" name="abilityUpgrades" value="1"><label for="abilityUpgrade6" class="draggable-label">1</label>
+										<input type="radio" id="abilityUpgrade7" name="abilityUpgrades" value="0"><label for="abilityUpgrade7" class="draggable-label">Enabled</label>
 									</div>
 								</div>
 								<div class="gameOption">
 									<h2>Plasma Points [ used for unit materialization or shielding ]</h2>
 									<div id="plasmaPoints" class="typeRadio">
-										<input type="radio" id="plasmaPointsOpt1" name="plasmaPoints" value="10"><label for="plasmaPointsOpt1">10</label>
-										<input type="radio" id="plasmaPointsOpt2" name="plasmaPoints" value="20"><label for="plasmaPointsOpt2">20</label>
-										<input type="radio" id="plasmaPointsOpt3" name="plasmaPoints" value="30" checked><label for="plasmaPointsOpt3">30</label>
-										<input type="radio" id="plasmaPointsOpt4" name="plasmaPoints" value="40"><label for="plasmaPointsOpt4">40</label>
-										<input type="radio" id="plasmaPointsOpt5" name="plasmaPoints" value="50"><label for="plasmaPointsOpt5">50</label>
-										<input type="radio" id="plasmaPointsOpt6" name="plasmaPoints" value="60"><label for="plasmaPointsOpt6">60</label>
-										<input type="radio" id="plasmaPointsOpt7" name="plasmaPoints" value="70"><label for="plasmaPointsOpt7">70</label>
-										<input type="radio" id="plasmaPointsOpt8" name="plasmaPoints" value="80"><label for="plasmaPointsOpt8">80</label>
-										<input type="radio" id="plasmaPointsOpt9" name="plasmaPoints" value="90"><label for="plasmaPointsOpt9">90</label>
-										<input type="radio" id="plasmaPointsOpt10" name="plasmaPoints" value="100"><label for="plasmaPointsOpt10">100</label>
-										<input type="radio" id="plasmaPointsOpt11" name="plasmaPoints" value="110"><label for="plasmaPointsOpt11">110</label>
+										<input type="radio" id="plasmaPointsOpt1" name="plasmaPoints" value="10"><label for="plasmaPointsOpt1" class="draggable-label">10</label>
+										<input type="radio" id="plasmaPointsOpt2" name="plasmaPoints" value="20"><label for="plasmaPointsOpt2" class="draggable-label">20</label>
+										<input type="radio" id="plasmaPointsOpt3" name="plasmaPoints" value="30" checked><label for="plasmaPointsOpt3" class="draggable-label">30</label>
+										<input type="radio" id="plasmaPointsOpt4" name="plasmaPoints" value="40"><label for="plasmaPointsOpt4" class="draggable-label">40</label>
+										<input type="radio" id="plasmaPointsOpt5" name="plasmaPoints" value="50"><label for="plasmaPointsOpt5" class="draggable-label">50</label>
+										<input type="radio" id="plasmaPointsOpt6" name="plasmaPoints" value="60"><label for="plasmaPointsOpt6" class="draggable-label">60</label>
+										<input type="radio" id="plasmaPointsOpt7" name="plasmaPoints" value="70"><label for="plasmaPointsOpt7" class="draggable-label">70</label>
+										<input type="radio" id="plasmaPointsOpt8" name="plasmaPoints" value="80"><label for="plasmaPointsOpt8" class="draggable-label">80</label>
+										<input type="radio" id="plasmaPointsOpt9" name="plasmaPoints" value="90"><label for="plasmaPointsOpt9" class="draggable-label">90</label>
+										<input type="radio" id="plasmaPointsOpt10" name="plasmaPoints" value="100"><label for="plasmaPointsOpt10" class="draggable-label">100</label>
+										<input type="radio" id="plasmaPointsOpt11" name="plasmaPoints" value="110"><label for="plasmaPointsOpt11" class="draggable-label">110</label>
 									</div>
 								</div>
 								<div class="gameOption">
 									<h2>Turn Time [ seconds ]</h2>
 									<div id="turnTime" class="typeRadio">
-										<input type="radio" id="turnTimeOpt1" name="turnTime" value="20"><label for="turnTimeOpt1">20</label>
-										<input type="radio" id="turnTimeOpt2" name="turnTime" value="40"><label for="turnTimeOpt2">40</label>
-										<input type="radio" id="turnTimeOpt3" name="turnTime" value="60"><label for="turnTimeOpt3">60</label>
-										<input type="radio" id="turnTimeOpt4" name="turnTime" value="80"><label for="turnTimeOpt4">80</label>
-										<input type="radio" id="turnTimeOpt5" name="turnTime" value="99"><label for="turnTimeOpt5">99</label>
+										<input type="radio" id="turnTimeOpt1" name="turnTime" value="20"><label for="turnTimeOpt1" class="draggable-label">20</label>
+										<input type="radio" id="turnTimeOpt2" name="turnTime" value="40"><label for="turnTimeOpt2" class="draggable-label">40</label>
+										<input type="radio" id="turnTimeOpt3" name="turnTime" value="60"><label for="turnTimeOpt3" class="draggable-label">60</label>
+										<input type="radio" id="turnTimeOpt4" name="turnTime" value="80"><label for="turnTimeOpt4" class="draggable-label">80</label>
+										<input type="radio" id="turnTimeOpt5" name="turnTime" value="99"><label for="turnTimeOpt5" class="draggable-label">99</label>
 										<input type="radio" id="turnTimeOpt6" name="turnTime" value="-1" checked><label
-											for="turnTimeOpt6">&#8734;</label>
+											for="turnTimeOpt6" class="draggable-label">&#8734;</label>
 									</div>
 								</div>
 								<div class="gameOption">
 									<h2>Time Pools [ minutes ]</h2>
 									<div id="timePool" class="typeRadio">
 										<!-- <input type="radio" id="timePoolOpt0" name="timePool" value="1" ><label for="timePoolOpt0">1 min</label> -->
-										<input type="radio" id="timePoolOpt1" name="timePool" value="15"><label for="timePoolOpt1">15</label>
-										<input type="radio" id="timePoolOpt2" name="timePool" value="20"><label for="timePoolOpt2">20</label>
-										<input type="radio" id="timePoolOpt3" name="timePool" value="25"><label for="timePoolOpt3">25</label>
-										<input type="radio" id="timePoolOpt4" name="timePool" value="30"><label for="timePoolOpt4">30</label>
+										<input type="radio" id="timePoolOpt1" name="timePool" value="15"><label for="timePoolOpt1" class="draggable-label">15</label>
+										<input type="radio" id="timePoolOpt2" name="timePool" value="20"><label for="timePoolOpt2" class="draggable-label">20</label>
+										<input type="radio" id="timePoolOpt3" name="timePool" value="25"><label for="timePoolOpt3" class="draggable-label">25</label>
+										<input type="radio" id="timePoolOpt4" name="timePool" value="30"><label for="timePoolOpt4" class="draggable-label">30</label>
 										<input type="radio" id="timePoolOpt5" name="timePool" value="-1" checked><label
-											for="timePoolOpt5">&#8734;</label>
+											for="timePoolOpt5" class="draggable-label">&#8734;</label>
 									</div>
 								</div>
 								<div class="gameOption">
 									<h2>Combat Location [ no influence to the actual gameplay ]</h2>
 									<div id="combatLocation" class="typeRadio">
-										<input type="radio" id="bgOpt1" name="combatLocation" value="Dark Forest"><label for="bgOpt1">Dark Forest</label>
-										<input type="radio" id="bgOpt2" name="combatLocation" value="Frozen Wall"><label for="bgOpt2">Frozen Wall</label>
-										<input type="radio" id="bgOpt3" name="combatLocation" value="Shadow Cave"><label for="bgOpt3">Shadow Cave</label>
-										<input type="radio" id="bgOpt4" name="combatLocation" value="Dragon Bones"><label for="bgOpt4">Dragon Bones</label>
+										<input type="radio" id="bgOpt1" name="combatLocation" value="Dark Forest"><label for="bgOpt1" class="draggable-label">Dark Forest</label>
+										<input type="radio" id="bgOpt2" name="combatLocation" value="Frozen Wall"><label for="bgOpt2" class="draggable-label">Frozen Wall</label>
+										<input type="radio" id="bgOpt3" name="combatLocation" value="Shadow Cave"><label for="bgOpt3" class="draggable-label">Shadow Cave</label>
+										<input type="radio" id="bgOpt4" name="combatLocation" value="Dragon Bones"><label for="bgOpt4" class="draggable-label">Dragon Bones</label>
 									</div>
 								</div>
+								<!--Script to add sliding to prematch option buttons-->
+								<script>
+									const radioGroups = document.querySelectorAll(".typeRadio");
+									let dragging = false;
+									let selectedRadio;
+								  
+									radioGroups.forEach((group) => {
+									  const radioInputs = group.querySelectorAll(".draggable-label");
+									  selectedRadio = group.querySelector("input[type=radio]:checked");
+									  radioInputs.forEach((radio) => {
+										// if button clicked allow dragging
+										radio.addEventListener("mousedown", () => {
+										  dragging = true;
+										  selectedRadio = radio.previousElementSibling;
+										});
+										
+										// check new dragged radio/button
+										radio.addEventListener("mouseover", () => {
+										  if (dragging) {
+											selectedRadio.checked = false;
+											radio.previousElementSibling.checked = true;
+										  }
+										});
+									  });
+									});
+									// disable dragging
+									document.addEventListener("mouseup", () => {
+									  dragging = false;
+									});
+								  </script>
 							</div>
 							<div class="button-wrapper" id="start-btn">
 								<span class="blink">PRESS </span>