Skip to content

Commit

Permalink
Merge pull request FreezingMoon#2517 from Mandolinx/prematch-touch-slide
Browse files Browse the repository at this point in the history 
feat: added touch/slide on prematch option buttons, closes FreezingMoon#1529
  • Loading branch information
@DreadKnight
DreadKnight authored Oct 25, 2023
2 parents 13e03b8 + 28d985f commit 0e6b305
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 45 deletions.
88 changes: 44 additions & 44 deletions src/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,89 +74,89 @@
<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="dragIt">1 versus 1</label>
<input type="radio" id="p4" name="playerMode" value="4">
<label for="p4">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">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="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">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="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">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="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">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="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">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="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">&#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">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="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">&#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">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="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>
</div>
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/button';


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
38 changes: 38 additions & 0 deletions src/ui/button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,44 @@ export const ButtonStateEnum = {
slideIn: 'slideIn',
} as const;


/**
* Allows buttons to touch and slide
*/
export function buttonSlide(){
let dragging = false;

$j(document).ready(function() {
$j('.typeRadio').each(function() {
let selectedRadio;

const radioInputs = $j(this).find('.dragIt');
selectedRadio = $j(this).find('input[type=radio]:checked');

// Check clicked button
radioInputs.each(function() {
$j(this).on('mousedown', () => {
dragging = true;
$j(this).prev('input[type=radio]').prop('checked', true);
selectedRadio = $j(this).prev('input[type=radio]');
});

// Check hovered button
$j(this).on('mouseover', () => {
if (dragging) {
selectedRadio.prop('checked', false);
$j(this).prev('input[type=radio]').prop('checked', true);
}
});
});
});

$j(document).on('mouseup', () => {
dragging = false;
});
});
}

type ValueOf<T> = T[keyof T];
type ButtonState = ValueOf<typeof ButtonStateEnum>;

Expand Down
2 changes: 1 addition & 1 deletion src/ui/interface.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2454,4 +2454,4 @@ const utils = {
};
};
},
};
};

0 comments on commit 0e6b305

Please sign in to comment.