random-mirrors/pokerogue
1
0
Fork 0
mirror of https://github.com/pagefaultgames/pokerogue.git synced 2024-11-25 16:26:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

[UI] add open filter button for mobile touch pad (#3480)

Browse Source
This commit is contained in:
MokaStitcher 2024-08-12 06:44:00 +02:00 committed by GitHub
parent 0f09893091
commit f8b9397d06
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
index.css
View File

@ -69,7 +69,9 @@ input:-internal-autofill-selected {
--controls-padding: 1rem;
--controls-size-with-padding: calc(var(--controls-size) + var(--controls-padding));
--controls-size-with-wide-padding: calc(var(--controls-size) *1.2 + var(--controls-padding));
--control-group-extra-size: calc(var(--controls-size) * 0.8);
--control-group-extra-wide-size: calc(var(--controls-size) * 1.2);
--control-group-extra-2-offset: calc(var(--controls-size-with-padding) + (var(--controls-size) - var(--control-group-extra-size)) / 2);
--control-group-extra-1-offset: calc(var(--controls-padding) + (var(--controls-size) - var(--control-group-extra-size)) / 2);
@ -117,25 +119,31 @@ input:-internal-autofill-selected {
width: var(--control-group-extra-size);
height: var(--control-group-extra-size);
}
/* Hide buttons on specific UIs */
/* Show #cycleForm and #cycleShiny only on STARTER_SELECT and SETTINGS */
#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode^='SETTINGS']) #apadCycleForm,
#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode^='SETTINGS']) #apadCycleShiny {
/* Show #apadPreviousTab and #apadNextTab only in settings, except in touch configuration panel */
#touchControls:not([data-ui-mode^='SETTINGS']) #apadPreviousTab,
#touchControls:not([data-ui-mode^='SETTINGS']) #apadNextTab,
#touchControls:is(.config-mode) #apadPreviousTab,
#touchControls:is(.config-mode) #apadNextTab {
display: none;
}
/* Show #apadInfo only in battle */
#touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']) #apadInfo {
#touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']):not([data-ui-mode='TARGET_SELECT']) #apadInfo {
display: none;
}
/* Show #apadInfo only in battle and target select */
/* Show #apadStats only in battle and shop */
#touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']):not([data-ui-mode='TARGET_SELECT']):not([data-ui-mode='MODIFIER_SELECT']) #apadStats {
display: none;
}
/* Show cycle buttons only on STARTER_SELECT and on touch configuration panel */
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadOpenFilters,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleForm,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleShiny,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleNature,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleAbility,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleGender,
@ -272,8 +280,8 @@ input:-internal-autofill-selected {
}
#control-group-cancel {
right: var(--controls-size-with-padding);
bottom: var(--controls-padding);;
right: var(--controls-size-with-wide-padding);
bottom: var(--controls-padding);
}
#control-group-extra-1 {
@ -282,6 +290,7 @@ input:-internal-autofill-selected {
}
#control-group-extra-2 {
width: var(--control-group-extra-wide-size);
right: var(--control-group-extra-2-offset);
bottom: var(--control-group-extra-2-offset);
}

24
index.html
View File

@ -96,36 +96,50 @@
</div>
<div id="control-group-extra-1" class="control-group control-group-extra">
<div id="apadCycleShiny" class="apad-button apad-square apad-small" data-key="CYCLE_SHINY">
<!-- buttons to navigate settings tabs -->
<div id="apadPreviousTab" class="apad-button apad-square apad-small" data-key="CYCLE_FORM">
<span class="apad-label">F</span>
</div>
<div id="apadNextTab" class="apad-button apad-square apad-small" data-key="CYCLE_SHINY">
<span class="apad-label">R</span>
</div>
<div id="apadCycleVariant" class="apad-button apad-square apad-small" data-key="V">
<span class="apad-label">V</span>
</div>
<div id="apadStats" class="apad-button apad-rectangle apad-small" data-key="STATS">
<!-- buttons to open filter menu in starter select -->
<div id="apadOpenFilters" class="apad-button apad-rectangle apad-small" data-key="STATS">
<span class="apad-label">C</span>
</div>
<!-- main menu button -->
<div id="apadMenu" class="apad-button apad-rectangle apad-small" data-key="MENU">
<span class="apad-label">Menu</span>
</div>
</div>
<div id="control-group-extra-2" class="control-group control-group-extra">
<!-- buttons to cycle through pokemon characteristics in starter select -->
<div id="apadCycleForm" class="apad-button apad-square apad-small" data-key="CYCLE_FORM">
<span class="apad-label">F</span>
</div>
<div id="apadCycleGender" class="apad-button apad-square apad-small" data-key="CYCLE_GENDER">
<span class="apad-label">G</span>
</div>
<div id="apadCycleShiny" class="apad-button apad-square apad-small" data-key="CYCLE_SHINY">
<span class="apad-label">R</span>
</div>
<div id="apadCycleAbility" class="apad-button apad-square apad-small" data-key="CYCLE_ABILITY">
<span class="apad-label">E</span>
</div>
<div id="apadCycleNature" class="apad-button apad-square apad-small" data-key="CYCLE_NATURE">
<span class="apad-label">N</span>
</div>
<div id="apadCycleVariant" class="apad-button apad-square apad-small" data-key="V">
<span class="apad-label">V</span>
</div>
<!-- buttons to display battle-specific information -->
<div id="apadInfo" class="apad-button apad-rectangle apad-small" data-key="V">
<span class="apad-label">V</span>
</div>
<div id="apadStats" class="apad-button apad-rectangle apad-small" data-key="STATS">
<span class="apad-label">C</span>
</div>
</div>
</div>