Skip to content

Commit

Permalink
feat: added touch/slide on prematch option buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mandolinx
Mandolinx committed Oct 22, 2023
1 parent f915f96 commit c0a4121
Showing 1 changed file with 74 additions and 44 deletions.
118 changes: 74 additions & 44 deletions src/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit c0a4121

Please sign in to comment.