From 50984dc65e5542ca45e2f3642a07623691b26dcc Mon Sep 17 00:00:00 2001 From: Alex Huynh Date: Tue, 24 Oct 2023 18:24:33 +1100 Subject: [PATCH] created slider file and fixed syntax errors in index.ejs --- src/index.ejs | 118 +++++++++++++++++--------------------------- src/script.ts | 5 ++ src/ui/interface.js | 100 +++++++++++++++++++++++++++++++++++++ src/ui/slider.js | 33 +++++++++++++ 4 files changed, 182 insertions(+), 74 deletions(-) create mode 100644 src/ui/slider.js diff --git a/src/index.ejs b/src/index.ejs index 5e7e07b79..c8d6d38fe 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -74,121 +74,91 @@

Player Mode 

- + - +

Active Units [ Psyhelm limit ]

- - - - - - - + + + + + + +

Unit Drops

- - + +

Ability Upgrades [ number of rounds or uses ]

- - - - - - - + + + + + + +

Plasma Points [ used for unit materialization or shielding ]

- - - - - - - - - - - + + + + + + + + + + +

Turn Time [ seconds ]

- - - - - + + + + + + for="turnTimeOpt6" class="dragIt">∞

Time Pools [ minutes ]

- - - - + + + + + for="timePoolOpt5" class="dragIt">∞

Combat Location [ no influence to the actual gameplay ]

- - - - + + + +
- -
PRESS diff --git a/src/script.ts b/src/script.ts index b6560bc4c..d2b919341 100644 --- a/src/script.ts +++ b/src/script.ts @@ -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'; @@ -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(); diff --git a/src/ui/interface.js b/src/ui/interface.js index c142d7187..28ad13e33 100644 --- a/src/ui/interface.js +++ b/src/ui/interface.js @@ -15,6 +15,7 @@ import { Queue } from './queue'; import { QuickInfo } from './quickinfo'; import { pretty as version } from '../utility/version'; + import { capitalize } from '../utility/string'; import { throttle } from 'underscore'; import { DEBUG_DISABLE_HOTKEYS } from '../debug'; @@ -375,6 +376,57 @@ export class UI { const slider = document.getElementById('sfx'); slider.addEventListener('input', () => (game.soundsys.allEffectsMultiplier = slider.value)); + // Prevents default touch behaviour on slider when first touched (prevents scrolling the screen). + slider.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false }); + + slider.addEventListener('touchmove', (e) =>{ + // Get slider relative to the view port. + const sliderRect = slider.getBoundingClientRect(); + // The original touch point Y coordinate relative to the view port. + const touchPoint = e.touches[0].clientY; + /// The y coord of the touch event relative to the slider. + const touchRelToSlider = touchPoint - sliderRect.top; + const distFromBottom = sliderRect.height - touchRelToSlider; + // Normalize the distance from the bottom of the slider to a value between 0 and 1. + const normDist = distFromBottom / sliderRect.height; + // Scale normDist to range of the slider. + const scaledDist = normDist * (slider.max - slider.min); + // New value of the slider. + const slidersNewVal = scaledDist + parseFloat(slider.min); + // Sets the slider value to the new value between the min/max bounds of the slider. + slider.value = Math.min(Math.max(slidersNewVal, slider.min), slider.max); + + // Manually dispatches the input event to update the sound system with new slider value. + slider.dispatchEvent(new Event('input')); + }); + const radioGroups = document.getElementsByClassName('typeRadio'); + let dragging; + let selectedRadio; + + radioGroups.forEach((group) => { + dragging = false; + const radioInputs = group.getElementsByClassName('draggable-label'); + selectedRadio = group.querySelector('input[type=radio]:checked'); + radioInputs.forEach((radio) => { + radio.addEventListener('mousedown', () => { + dragging = true; + radio.checked = true; + selectedRadio = radio.previousElementSibling; + }); + + radio.addEventListener('mouseover', () => { + if (dragging) { + selectedRadio.checked = false; + radio.previousElementSibling.checked = true; + } + }); + }); + }); + + document.addEventListener('mouseup', () => { + dragging = false; + }); + this.hotkeys = new Hotkeys(this); const ingameHotkeys = getHotKeys(this.hotkeys); @@ -951,6 +1003,25 @@ export class UI { if (activeCreature.player.getNbrOfCreatures() > game.creaLimitNbr) { $j('#materialize_button p').text(game.msg.ui.dash.materializeOverload); + } + // Check if the player is viewing the wrong tab + else if ( + activeCreature.player.id !== player && + activeCreature.isDarkPriest() && + activeCreature.abilities[3].testRequirements() && + activeCreature.abilities[3].used === false + ) { + $j('#materialize_button p').text(game.msg.ui.dash.wrongPlayer); + + // Switch to turn player's dark priest + this.materializeButton.click = () => { + this.showCreature("--", activeCreature.player.id); + }; + + $j('#card .sideA').on('click', this.materializeButton.click); + $j('#card .sideA').removeClass('disabled'); + this.materializeButton.changeState(ButtonStateEnum.glowing); + $j('#materialize_button').show(); } else if ( !summonedOrDead && activeCreature.player.id === player && @@ -2057,6 +2128,35 @@ export class UI { $j('#matchMaking').show(); $j('#gameSetupContainer').show(); $j('#loader').addClass('hide'); + + const radioGroups = document.querySelectorAll(".typeRadio"); + let dragging; + let selectedRadio; + + radioGroups.forEach((group) => { + dragging = false; + const radioInputs = group.querySelectorAll(".draggable-label"); + selectedRadio = group.querySelector("input[type=radio]:checked"); + radioInputs.forEach((radio) => { + radio.addEventListener("mousedown", () => { + dragging = true; + radio.checked = true; + selectedRadio = radio.previousElementSibling; + }); + + radio.addEventListener("mouseover", () => { + if (dragging) { + selectedRadio.checked = false; + radio.previousElementSibling.checked = true; + } + }); + }); + }); + + document.addEventListener("mouseup", () => { + dragging = false; + }); + this.queue.empty(Queue.IMMEDIATE); } diff --git a/src/ui/slider.js b/src/ui/slider.js new file mode 100644 index 000000000..ddb1809e5 --- /dev/null +++ b/src/ui/slider.js @@ -0,0 +1,33 @@ +/** + * Allows buttons to touch and slide + * Used for prematch button game options to slide + */ +export function buttonSlide(){ + const radioGroups = document.querySelectorAll(".typeRadio"); + let dragging = false; + let selectedRadio; + + radioGroups.forEach((group) => { + const radioInputs = group.querySelectorAll(".dragIt"); + 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; + }); +}