Skip to content

Commit

Permalink
created slider file and fixed syntax errors in index.ejs
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mandolinx
Mandolinx committed Oct 24, 2023
1 parent c0a4121 commit 50984dc
Show file tree
Hide file tree
Showing 4 changed files with 182 additions and 74 deletions.
118 changes: 44 additions & 74 deletions src/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,121 +74,91 @@
<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" class="draggable-label">1 versus 1</label>
<label for="p2" class="dragIt">1 versus 1</label>
<input type="radio" id="p4" name="playerMode" value="4">
<label for="p4" class="draggable-label">2 versus 2</label>
<label for="p4" class="dragIt">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" 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>
<input type="radio" id="activeUnitsOpt1" name="activeUnits" value="1"><label for="activeUnitsOpt1" class="dragIt">1</label>
<input type="radio" id="activeUnitsOpt2" name="activeUnits" value="2"><label for="activeUnitsOpt2" class="dragIt">2</label>
<input type="radio" id="activeUnitsOpt3" name="activeUnits" value="3" checked><label for="activeUnitsOpt3" class="dragIt">3</label>
<input type="radio" id="activeUnitsOpt4" name="activeUnits" value="4"><label for="activeUnitsOpt4" class="dragIt">4</label>
<input type="radio" id="activeUnitsOpt5" name="activeUnits" value="5"><label for="activeUnitsOpt5" class="dragIt">5</label>
<input type="radio" id="activeUnitsOpt6" name="activeUnits" value="6"><label for="activeUnitsOpt6" class="dragIt">6</label>
<input type="radio" id="activeUnitsOpt7" name="activeUnits" value="7"><label for="activeUnitsOpt7" class="dragIt">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" class="draggable-label">Off</label>
<input type="radio" id="unitDropsOn" name="unitDrops" value="1" checked><label for="unitDropsOn" class="draggable-label">On</label>
<input type="radio" id="unitDropsOff" name="unitDrops" value="0"><label for="unitDropsOff" class="dragIt">Off</label>
<input type="radio" id="unitDropsOn" name="unitDrops" value="1" checked><label for="unitDropsOn" class="dragIt">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" 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>
<input type="radio" id="abilityUpgrade1" name="abilityUpgrades" value="-1"><label for="abilityUpgrade1" class="dragIt">Disabled</label>
<input type="radio" id="abilityUpgrade2" name="abilityUpgrades" value="5"><label for="abilityUpgrade2" class="dragIt">5</label>
<input type="radio" id="abilityUpgrade3" name="abilityUpgrades" value="4"><label for="abilityUpgrade3" class="dragIt">4</label>
<input type="radio" id="abilityUpgrade4" name="abilityUpgrades" value="3" checked><label for="abilityUpgrade4" class="dragIt">3</label>
<input type="radio" id="abilityUpgrade5" name="abilityUpgrades" value="2"><label for="abilityUpgrade5" class="dragIt">2</label>
<input type="radio" id="abilityUpgrade6" name="abilityUpgrades" value="1"><label for="abilityUpgrade6" class="dragIt">1</label>
<input type="radio" id="abilityUpgrade7" name="abilityUpgrades" value="0"><label for="abilityUpgrade7" class="dragIt">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" 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>
<input type="radio" id="plasmaPointsOpt1" name="plasmaPoints" value="10"><label for="plasmaPointsOpt1" class="dragIt">10</label>
<input type="radio" id="plasmaPointsOpt2" name="plasmaPoints" value="20"><label for="plasmaPointsOpt2" class="dragIt">20</label>
<input type="radio" id="plasmaPointsOpt3" name="plasmaPoints" value="30" checked><label for="plasmaPointsOpt3" class="dragIt">30</label>
<input type="radio" id="plasmaPointsOpt4" name="plasmaPoints" value="40"><label for="plasmaPointsOpt4" class="dragIt">40</label>
<input type="radio" id="plasmaPointsOpt5" name="plasmaPoints" value="50"><label for="plasmaPointsOpt5" class="dragIt">50</label>
<input type="radio" id="plasmaPointsOpt6" name="plasmaPoints" value="60"><label for="plasmaPointsOpt6" class="dragIt">60</label>
<input type="radio" id="plasmaPointsOpt7" name="plasmaPoints" value="70"><label for="plasmaPointsOpt7" class="dragIt">70</label>
<input type="radio" id="plasmaPointsOpt8" name="plasmaPoints" value="80"><label for="plasmaPointsOpt8" class="dragIt">80</label>
<input type="radio" id="plasmaPointsOpt9" name="plasmaPoints" value="90"><label for="plasmaPointsOpt9" class="dragIt">90</label>
<input type="radio" id="plasmaPointsOpt10" name="plasmaPoints" value="100"><label for="plasmaPointsOpt10" class="dragIt">100</label>
<input type="radio" id="plasmaPointsOpt11" name="plasmaPoints" value="110"><label for="plasmaPointsOpt11" class="dragIt">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" 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="turnTimeOpt1" name="turnTime" value="20"><label for="turnTimeOpt1" class="dragIt">20</label>
<input type="radio" id="turnTimeOpt2" name="turnTime" value="40"><label for="turnTimeOpt2" class="dragIt">40</label>
<input type="radio" id="turnTimeOpt3" name="turnTime" value="60"><label for="turnTimeOpt3" class="dragIt">60</label>
<input type="radio" id="turnTimeOpt4" name="turnTime" value="80"><label for="turnTimeOpt4" class="dragIt">80</label>
<input type="radio" id="turnTimeOpt5" name="turnTime" value="99"><label for="turnTimeOpt5" class="dragIt">99</label>
<input type="radio" id="turnTimeOpt6" name="turnTime" value="-1" checked><label
for="turnTimeOpt6" class="draggable-label">&#8734;</label>
for="turnTimeOpt6" class="dragIt">&#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" 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="timePoolOpt1" name="timePool" value="15"><label for="timePoolOpt1" class="dragIt">15</label>
<input type="radio" id="timePoolOpt2" name="timePool" value="20"><label for="timePoolOpt2" class="dragIt">20</label>
<input type="radio" id="timePoolOpt3" name="timePool" value="25"><label for="timePoolOpt3" class="dragIt">25</label>
<input type="radio" id="timePoolOpt4" name="timePool" value="30"><label for="timePoolOpt4" class="dragIt">30</label>
<input type="radio" id="timePoolOpt5" name="timePool" value="-1" checked><label
for="timePoolOpt5" class="draggable-label">&#8734;</label>
for="timePoolOpt5" class="dragIt">&#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" 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>
<input type="radio" id="bgOpt1" name="combatLocation" value="Dark Forest"><label for="bgOpt1" class="dragIt">Dark Forest</label>
<input type="radio" id="bgOpt2" name="combatLocation" value="Frozen Wall"><label for="bgOpt2" class="dragIt">Frozen Wall</label>
<input type="radio" id="bgOpt3" name="combatLocation" value="Shadow Cave"><label for="bgOpt3" class="dragIt">Shadow Cave</label>
<input type="radio" id="bgOpt4" name="combatLocation" value="Dragon Bones"><label for="bgOpt4" class="dragIt">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
5 changes: 5 additions & 0 deletions src/script.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { unitData } from './data/units';
import Game from './game';
import { PreMatchAudioPlayer } from './sound/pre-match-audio';
import { Fullscreen } from './ui/fullscreen';
import { buttonSlide } from './ui/slider';


import Connect from './multiplayer/connect';
import Authenticate from './multiplayer/authenticate';
Expand Down Expand Up @@ -154,6 +156,9 @@ $j(() => {
// TODO Remove after implementaion 2 vs 2 in multiplayer mode
forceTwoPlayerMode();
}

// Allow button game options to slide in prematch screen
buttonSlide();

// Create new Object to play audio in pre-match screen
const beastAudio = new PreMatchAudioPlayer();
Expand Down
Loading

0 comments on commit 50984dc

Please sign in to comment.