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

[Feature] Move touch controls configuration (Reopened) (#3256)

Browse Source 
* [Hotfix] Fix interactions of some moves not changing types (#3183)

* [Hotfix] Fix wild spawns not having their HA (#3190)

* [Hotfix] Allow to hatch pokemon with Hidden Ability again (#3222)

* chore: Update TNC links layout and position in index.html

* chore: Update TNC links font size in index.css (#3230)

* Move Touch Controls

* ConfigToolbar alignment

* Insert config toolbar on open, camel-case classes, hidden setting

* Better toolbar styling, fixed double configToolbar bug

* Fixed typedocs

---------

Co-authored-by: Adrian T. <68144167+torranx@users.noreply.github.com>
Co-authored-by: NightKev <34855794+DayKev@users.noreply.github.com>
Co-authored-by: Frederico Santos <frederico.f.santos@tecnico.ulisboa.pt>
This commit is contained in:
Tim Perdok 2024-08-10 15:17:04 +02:00 committed by GitHub
parent 638a0a66b5
commit 566cd80522
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 794 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

301
index.css
View File

@ -1,16 +1,8 @@
/* Global */
:root { :root {
--color-base: hsl(0, 0%, 55%); --color-base: hsl(0, 0%, 55%);
--color-light: hsl(0, 0%, 90%); --color-light: hsl(0, 0%, 90%);
--color-dark: hsl(0, 0%, 10%); --color-dark: hsl(0, 0%, 10%);
--controls-size: 10vh;
--text-shadow-size: 0.65vh;
}
@media (orientation: landscape) {
:root {
--controls-size: 20vh;
--text-shadow-size: 1.3vh;
}
} }
html { html {
@ -43,33 +35,173 @@ body {
transform-origin: top !important; transform-origin: top !important;
} }
#layout:fullscreen #dpad, #layout:fullscreen {
bottom: 6rem;
}
input:-internal-autofill-selected {
-webkit-background-clip: text;
background-clip: text;
}
/* Need adjust input font-size */ /* Need adjust input font-size */
input { input {
font-size: 3.2rem; font-size: 3.2rem;
} }
.hidden {
display: none !important;
}
input:-internal-autofill-selected {
-webkit-background-clip: text;
background-clip: text;
}
/* Touch Controls: */
#touchControls {
--text-shadow-size: 0.65vh;
--controls-size: 10vh;
--touch-control-opacity: 0.6;
--controls-padding: 1rem;
--controls-size-with-padding: calc(var(--controls-size) + var(--controls-padding));
--control-group-extra-size: calc(var(--controls-size) * 0.8);
--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);
--small-control-size: calc(var(--controls-size) / 3);
--rect-control-size: calc(var(--controls-size) * 0.74);
font-family: 'emerald';
font-size: var(--controls-size);
text-shadow: var(--color-dark) var(--text-shadow-size) var(--text-shadow-size);
color: var(--color-light);
}
@media (orientation: landscape) {
#touchControls {
--controls-size: 20vh;
--text-shadow-size: 1.3vh;
--small-button-offset: 4vh;
}
}
#touchControls:not(.visible) { #touchControls:not(.visible) {
display: none; display: none;
} }
#dpad, #apad { #touchControls .active {
opacity: var(--touch-control-opacity);
}
.control-group {
position: fixed; position: fixed;
bottom: 1rem; display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: var(--controls-size);
}
.control-group-dpad {
width: calc(2 * var(--controls-size));
height: calc(2 * var(--controls-size));
}
.control-group-extra {
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 {
display: none;
}
/* Show #apadInfo only in battle */
#touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']) #apadInfo {
display: none;
}
/* Show #apadInfo only in battle and target select */
#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']) #apadCycleNature,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleAbility,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleGender,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleVariant {
display: none;
}
/* Configuration toolbar */
#configToolbar {
width: 100%;
position: fixed;
top: 1rem;
left: 0;
z-index: 9;
user-select: none;
}
#configToolbar .column {
display: flex;
flex-direction: column;
align-items: center;
gap: 10%;
padding: 0 var(--controls-padding);
}
#configToolbar .button-row {
display: flex;
justify-content: space-evenly;
width: 100%;
}
#configToolbar .info-row {
display: flex;
justify-content: flex-start;
width: 100%;
}
#configToolbar .button {
z-index: 3; z-index: 3;
background-color: var(--color-base);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 10%;
height: var(--small-control-size);
font-size: var(--small-control-size);
border-radius: 8px;
padding: 2px 8px;
text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3);
} }
@media (orientation: portrait) { #configToolbar .button:active {
#dpad, #apad { opacity: var(--touch-control-opacity)
bottom: calc(1rem + env(safe-area-inset-bottom));
}
} }
#configToolbar .orientation-label {
font-size: var(--small-control-size);
text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3);
}
/* dpad */
#dpad { #dpad {
left: 1rem; z-index: 3;
} opacity: 0.8;
#apad {
right: 1rem;
} }
#dpad svg { #dpad svg {
@ -78,114 +210,83 @@ input {
fill: var(--color-base); fill: var(--color-base);
} }
#dpad svg rect { /* apad buttons */
opacity: 0.6;
}
#apad > * { .apad-button {
width: var(--controls-size);
height: var(--controls-size);
}
#apad .apadBtn {
width: var(--controls-size);
height: var(--controls-size);
background-color: var(--color-base); background-color: var(--color-base);
border-radius: 50%; border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
right: 0;
bottom: 0;
width: var(--controls-size);
height: var(--controls-size);
opacity: 0.8;
border-radius: 8px;
} }
#apad .apadLabel { .apad-small {
font-family: 'emerald'; width: var(--small-control-size);
font-size: var(--controls-size); height: var(--small-control-size);
text-shadow: var(--color-dark) var(--text-shadow-size) var(--text-shadow-size); }
color: var(--color-light);
.apad-label {
user-select: none; user-select: none;
height: 100%;
margin-right: -2px;
} }
#apad .apadLabelSmall { .apad-small > .apad-label {
font-size: calc(var(--controls-size) / 3); font-size: var(--small-control-size);
text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3); text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3);
} }
#apad #apadLabelAction, #apad #apadLabelCancel { .apad-rectangle {
margin-left: calc(var(--controls-size) / 3);
line-height: 0.9;
}
#apad > :nth-child(2) {
position: relative;
right: var(--controls-size);
}
#apad .apadRectBtn {
position: relative;
text-align: center; text-align: center;
padding-right: 10%; width: var(--rect-control-size);
border-radius: 10%; height: var(--small-control-size);
bottom: calc(var(--controls-size) * 0.05);
width: calc(var(--controls-size) * 0.6);
height: calc(var(--controls-size) * 0.3);
} }
#apad .apadSqBtn { .apad-square {
border-radius: 10%; width: var(--small-control-size);
width: calc(var(--controls-size) * 0.3); height: var(--small-control-size);
height: calc(var(--controls-size) * 0.3);
} }
#apad .apadBtnContainer { .apad-circle {
position: relative; width: var(--controls-size);
display: flex; height: var(--controls-size);
border-radius: 50%;
} }
#apad .apadRectBtnContainer { /* Defaults:*/
flex-wrap: wrap;
margin-top: calc(var(--controls-size) * -0.8); #control-group-dpad {
left: calc(var(--controls-size) * 0.175); left: var(--controls-padding);
height: calc(var(--controls-size) * 0.8); bottom: var(--controls-padding);
} }
#apad .apadSqBtnContainer { #control-group-action {
flex-wrap: wrap; right: var(--controls-padding);
justify-content: space-evenly; bottom: var(--controls-size-with-padding);
align-items: center;
margin-bottom: calc(var(--controls-size) * -0.8);
top: calc(var(--controls-size) * -0.9);
width: calc(var(--controls-size) * 0.8);
height: calc(var(--controls-size) * 0.8);
} }
#apad .apadRectBtnContainer > #apadMenu { #control-group-cancel {
align-self: flex-end; right: var(--controls-size-with-padding);
bottom: var(--controls-padding);;
} }
#apad .apadRectBtnContainer > .apadSqBtn:not(:first-child) { #control-group-extra-1 {
margin-left: 10%; right: var(--control-group-extra-1-offset);
bottom: var(--control-group-extra-1-offset);
} }
#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode='SETTINGS']):not([data-ui-mode='SETTINGS_DISPLAY']):not([data-ui-mode='SETTINGS_AUDIO']):not([data-ui-mode='SETTINGS_GAMEPAD']):not([data-ui-mode='SETTINGS_KEYBOARD']) #apad .apadRectBtnContainer > .apadSqBtn:not(.apadBattle), #control-group-extra-2 {
#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode='SETTINGS']):not([data-ui-mode='SETTINGS_DISPLAY']):not([data-ui-mode='SETTINGS_AUDIO']):not([data-ui-mode='SETTINGS_GAMEPAD']):not([data-ui-mode='SETTINGS_KEYBOARD']) #apad .apadSqBtnContainer > .apadSqBtn:not(.apadBattle) right: var(--control-group-extra-2-offset);
{ bottom: var(--control-group-extra-2-offset);
display: none;
} }
#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']) #apad .apadBattle { /* Layout */
display: none;
}
#apad .apadRectBtnContainer + .apadSqBtnContainer {
top: calc(var(--controls-size) * -1.9);
left: calc(var(--controls-size) * -0.9);
}
#apad .apadBtnContainer .apadLabel {
margin-left: calc(var(--controls-size) / 12);
line-height: 0.8;
}
#dpad path:not(.active), #apad .apadBtn:not(.active) {
opacity: 0.6;
}
#layout:fullscreen #dpad, #layout:fullscreen #apad { #layout:fullscreen #dpad, #layout:fullscreen #apad {
bottom: 6rem; bottom: 6rem;

100
index.html
View File

@ -64,54 +64,70 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<div id="touchControls"> <div id="touchControls">
<div id="dpad" class="unselectable"> <div class="left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"> <div id="control-group-dpad" class="control-group control-group-dpad">
<path id="dpadUp" data-key="UP" d="M48,5.8C48,2.5,45.4,0,42,0H29.9C26.6,0,24,2.4,24,5.8V24h24V5.8z" /> <div id="dpad" data-control-key="DPAD">
<path id="dpadRight" data-key="RIGHT" d="M66.2,24H48v24h18.2c3.3,0,5.8-2.7,5.8-6V29.9C72,26.5,69.5,24,66.2,24z" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
<path id="dpadDown" data-key="DOWN" d="M24,66.3c0,3.3,2.6,5.7,5.9,5.7H42c3.3,0,6-2.4,6-5.7V48H24V66.3z" /> <path id="dpadUp" data-key="UP"
<path id="dpadLeft" data-key="LEFT" d="M5.7,24C2.4,24,0,26.5,0,29.9V42c0,3.3,2.3,6,5.7,6H24V24H5.7z" /> d="M48,5.8C48,2.5,45.4,0,42,0H29.9C26.6,0,24,2.4,24,5.8V24h24V5.8z" />
<rect id="dpadCenter" x="24" y="24" width="24" height="24" /> <path id="dpadRight" data-key="RIGHT"
</svg> d="M66.2,24H48v24h18.2c3.3,0,5.8-2.7,5.8-6V29.9C72,26.5,69.5,24,66.2,24z" />
<path id="dpadDown" data-key="DOWN"
d="M24,66.3c0,3.3,2.6,5.7,5.9,5.7H42c3.3,0,6-2.4,6-5.7V48H24V66.3z" />
<path id="dpadLeft" data-key="LEFT"
d="M5.7,24C2.4,24,0,26.5,0,29.9V42c0,3.3,2.3,6,5.7,6H24V24H5.7z" />
<rect id="dpadCenter" x="24" y="24" width="24" height="24" />
</svg>
</div>
</div>
</div> </div>
<div id="apad" class="unselectable"> <div class="right">
<div id="apadAction" class="apadCircBtn apadBtn" data-key="ACTION"> <div id="control-group-action" class="control-group">
<text id="apadLabelAction" class="apadLabel">A</text> <div id="apadAction" class="apad-button apad-circle" data-key="ACTION">
</div> <span class="apad-label">A</span>
<div id="apadCancel" class="apadCircBtn apadBtn" data-key="CANCEL">
<text id="apadLabelCancel" class="apadLabel">B</text>
</div>
<div class="apadBtnContainer apadRectBtnContainer">
<div id="apadCycleShiny" class="apadSqBtn apadBtn" data-key="CYCLE_SHINY">
<text class="apadLabel apadLabelSmall">R</text>
</div>
<div id="apadCycleVariant" class="apadSqBtn apadBtn" data-key="V">
<text class="apadLabel apadLabelSmall">V</text>
</div>
<div id="apadStats" class="apadRectBtn apadBtn apadBattle" data-key="STATS">
<text class="apadLabel apadLabelSmall">C</text>
</div>
<div id="apadMenu" class="apadRectBtn apadBtn" data-key="MENU">
<text class="apadLabel apadLabelSmall">Menu</text>
</div> </div>
</div> </div>
<div class="apadBtnContainer apadSqBtnContainer">
<div id="apadCycleForm" class="apadSqBtn apadBtn" data-key="CYCLE_FORM"> <div id="control-group-cancel" class="control-group">
<text class="apadLabel apadLabelSmall">F</text> <div id="apadCancel" class="apad-button apad-circle" data-key="CANCEL">
</div> <span class="apad-label">B</span>
<div id="apadCycleGender" class="apadSqBtn apadBtn" data-key="CYCLE_GENDER">
<text class="apadLabel apadLabelSmall">G</text>
</div>
<div id="apadCycleAbility" class="apadSqBtn apadBtn" data-key="CYCLE_ABILITY">
<text class="apadLabel apadLabelSmall">E</text>
</div>
<div id="apadCycleNature" class="apadSqBtn apadBtn" data-key="CYCLE_NATURE">
<text class="apadLabel apadLabelSmall">N</text>
</div>
<div id="apadInfo" class="apadRectBtn apadBtn apadBattle" data-key="V">
<text class="apadLabel apadLabelSmall">V</text>
</div> </div>
</div> </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">
<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">
<span class="apad-label">C</span>
</div>
<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">
<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="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="apadInfo" class="apad-button apad-rectangle apad-small" data-key="V">
<span class="apad-label">V</span>
</div>
</div>
</div> </div>
</div> </div>
<div id="tnc-links"> <div id="tnc-links">

3
src/inputs-controller.ts
View File

@ -21,6 +21,7 @@ import {SettingKeyboard} from "#app/system/settings/settings-keyboard";
import TouchControl from "#app/touch-controls"; import TouchControl from "#app/touch-controls";
import { Button } from "#enums/buttons"; import { Button } from "#enums/buttons";
import { Device } from "#enums/devices"; import { Device } from "#enums/devices";
import MoveTouchControlsHandler from "./ui/settings/move-touch-controls-handler";
export interface DeviceMapping { export interface DeviceMapping {
[key: string]: number; [key: string]: number;
@ -105,6 +106,7 @@ export class InputsController {
public lastSource: string = "keyboard"; public lastSource: string = "keyboard";
private inputInterval: NodeJS.Timeout[] = new Array(); private inputInterval: NodeJS.Timeout[] = new Array();
private touchControls: TouchControl; private touchControls: TouchControl;
public moveTouchControlsHandler: MoveTouchControlsHandler;
/** /**
* Initializes a new instance of the game control system, setting up initial state and configurations. * Initializes a new instance of the game control system, setting up initial state and configurations.
@ -182,6 +184,7 @@ export class InputsController {
this.scene.input.keyboard?.on("keyup", this.keyboardKeyUp, this); this.scene.input.keyboard?.on("keyup", this.keyboardKeyUp, this);
} }
this.touchControls = new TouchControl(this.scene); this.touchControls = new TouchControl(this.scene);
this.moveTouchControlsHandler = new MoveTouchControlsHandler(this.touchControls);
} }
/** /**

1
src/locales/de/settings.ts
View File

@ -97,5 +97,6 @@ export const settings: SimpleTranslationEntries = {
"controller": "Controller", "controller": "Controller",
"gamepadSupport": "Controllerunterstützung", "gamepadSupport": "Controllerunterstützung",
"showBgmBar": "Musiknamen anzeigen", "showBgmBar": "Musiknamen anzeigen",
"moveTouchControls": "Bewegung Touch Steuerung",
"shopOverlayOpacity": "Shop Overlay Deckkraft", "shopOverlayOpacity": "Shop Overlay Deckkraft",
} as const; } as const;

1
src/locales/en/settings.ts
View File

@ -97,5 +97,6 @@ export const settings: SimpleTranslationEntries = {
"controller": "Controller", "controller": "Controller",
"gamepadSupport": "Gamepad Support", "gamepadSupport": "Gamepad Support",
"showBgmBar": "Show Music Names", "showBgmBar": "Show Music Names",
"moveTouchControls": "Move Touch Controls",
"shopOverlayOpacity": "Shop Overlay Opacity" "shopOverlayOpacity": "Shop Overlay Opacity"
} as const; } as const;

1
src/locales/es/settings.ts
View File

@ -97,5 +97,6 @@ export const settings: SimpleTranslationEntries = {
"controller": "Controller", "controller": "Controller",
"gamepadSupport": "Gamepad Support", "gamepadSupport": "Gamepad Support",
"showBgmBar": "Show Music Names", "showBgmBar": "Show Music Names",
"moveTouchControls": "Move Touch Controls",
"shopOverlayOpacity": "Opacidad de la fase de compra" "shopOverlayOpacity": "Opacidad de la fase de compra"
} as const; } as const;

1
src/locales/fr/settings.ts
View File

@ -97,5 +97,6 @@ export const settings: SimpleTranslationEntries = {
"controller": "Controller", "controller": "Controller",
"gamepadSupport": "Gamepad Support", "gamepadSupport": "Gamepad Support",
"showBgmBar": "Titre de la musique", "showBgmBar": "Titre de la musique",
"moveTouchControls": "Déplacer les contrôles tactiles",
"shopOverlayOpacity": "Opacité boutique" "shopOverlayOpacity": "Opacité boutique"
} as const; } as const;

1
src/locales/it/settings.ts
View File

@ -97,5 +97,6 @@ export const settings: SimpleTranslationEntries = {
"controller": "Controller", "controller": "Controller",
"gamepadSupport": "Supporto Gamepad", "gamepadSupport": "Supporto Gamepad",
"showBgmBar": "Mostra Nomi Musica", "showBgmBar": "Mostra Nomi Musica",
"moveTouchControls": "Move Touch Controls",
"shopOverlayOpacity": "Opacità Finestra Negozio" "shopOverlayOpacity": "Opacità Finestra Negozio"
} as const; } as const;

1
src/locales/ko/settings.ts
View File

@ -97,5 +97,6 @@ export const settings: SimpleTranslationEntries = {
"controller": "컨트롤러", "controller": "컨트롤러",
"gamepadSupport": "게임패드 지원", "gamepadSupport": "게임패드 지원",
"showBgmBar": "BGM 제목 보여주기", "showBgmBar": "BGM 제목 보여주기",
"moveTouchControls": "터치 컨트롤 이동",
"shopOverlayOpacity": "상점 오버레이 투명도" "shopOverlayOpacity": "상점 오버레이 투명도"
} as const; } as const;

1
src/locales/pt_BR/settings.ts
View File

@ -97,5 +97,6 @@ export const settings: SimpleTranslationEntries = {
"controller": "Controle", "controller": "Controle",
"gamepadSupport": "Suporte para Controle", "gamepadSupport": "Suporte para Controle",
"showBgmBar": "Exibir Nomes das Músicas", "showBgmBar": "Exibir Nomes das Músicas",
"moveTouchControls": "Move Touch Controls",
"shopOverlayOpacity": "Opacidade da Loja" "shopOverlayOpacity": "Opacidade da Loja"
} as const; } as const;

1
src/locales/zh_CN/settings.ts
View File

@ -97,5 +97,6 @@ export const settings: SimpleTranslationEntries = {
"controller": "控制器", "controller": "控制器",
"gamepadSupport": "手柄支持", "gamepadSupport": "手柄支持",
"showBgmBar": "显示音乐名称", "showBgmBar": "显示音乐名称",
"moveTouchControls": "移动触摸控制",
"shopOverlayOpacity": "商店显示不透明度" "shopOverlayOpacity": "商店显示不透明度"
} as const; } as const;

1
src/locales/zh_TW/settings.ts
View File

@ -97,5 +97,6 @@ export const settings: SimpleTranslationEntries = {
"controller": "控制器", "controller": "控制器",
"gamepadSupport": "手柄支持", "gamepadSupport": "手柄支持",
"showBgmBar": "Show Music Names", "showBgmBar": "Show Music Names",
"moveTouchControls": "移動觸控控制",
"shopOverlayOpacity": "Shop Overlay Opacity" "shopOverlayOpacity": "Shop Overlay Opacity"
} as const; } as const;

21
src/system/settings/settings.ts
View File

@ -65,6 +65,10 @@ export interface Setting {
default: number default: number
type: SettingType type: SettingType
requireReload?: boolean requireReload?: boolean
/** Whether the setting can be activated or not */
activatable?: boolean
/** Determines whether the setting should be hidden from the UI */
isHidden?: () => boolean
} }
/** /**
@ -106,6 +110,7 @@ export const SettingKeys = {
SE_Volume: "SE_VOLUME", SE_Volume: "SE_VOLUME",
Music_Preference: "MUSIC_PREFERENCE", Music_Preference: "MUSIC_PREFERENCE",
Show_BGM_Bar: "SHOW_BGM_BAR", Show_BGM_Bar: "SHOW_BGM_BAR",
Move_Touch_Controls: "MOVE_TOUCH_CONTROLS",
Shop_Overlay_Opacity: "SHOP_OVERLAY_OPACITY" Shop_Overlay_Opacity: "SHOP_OVERLAY_OPACITY"
}; };
@ -550,6 +555,20 @@ export const Setting: Array<Setting> = [
type: SettingType.AUDIO, type: SettingType.AUDIO,
requireReload: true requireReload: true
}, },
{
key: SettingKeys.Move_Touch_Controls,
label: i18next.t("settings:moveTouchControls"),
options: [
{
value: "Configure",
label: i18next.t("settings:change")
}
],
default: 0,
type: SettingType.GENERAL,
activatable: true,
isHidden: () => !hasTouchscreen()
},
{ {
key: SettingKeys.Shop_Overlay_Opacity, key: SettingKeys.Shop_Overlay_Opacity,
label: i18next.t("settings:shopOverlayOpacity"), label: i18next.t("settings:shopOverlayOpacity"),
@ -557,7 +576,7 @@ export const Setting: Array<Setting> = [
default: 7, default: 7,
type: SettingType.DISPLAY, type: SettingType.DISPLAY,
requireReload: false requireReload: false
}, }
]; ];
/** /**

97
src/test/utils/fakeMobile.html
View File

@ -1,50 +1,69 @@
<!DOCTYPE html><body> <!DOCTYPE html><body>
<div id="touchControls"> <div id="touchControls">
<div id="dpad" class="unselectable"> <div class="left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"> <div id="control-group-dpad" class="control-group control-group-dpad">
<path id="dpadUp" data-key="UP" d="M48,5.8C48,2.5,45.4,0,42,0H29.9C26.6,0,24,2.4,24,5.8V24h24V5.8z" /> <div id="dpad" data-control-key="DPAD">
<path id="dpadRight" data-key="RIGHT" d="M66.2,24H48v24h18.2c3.3,0,5.8-2.7,5.8-6V29.9C72,26.5,69.5,24,66.2,24z" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
<path id="dpadDown" data-key="DOWN" d="M24,66.3c0,3.3,2.6,5.7,5.9,5.7H42c3.3,0,6-2.4,6-5.7V48H24V66.3z" /> <path id="dpadUp" data-key="UP"
<path id="dpadLeft" data-key="LEFT" d="M5.7,24C2.4,24,0,26.5,0,29.9V42c0,3.3,2.3,6,5.7,6H24V24H5.7z" /> d="M48,5.8C48,2.5,45.4,0,42,0H29.9C26.6,0,24,2.4,24,5.8V24h24V5.8z" />
<rect id="dpadCenter" x="24" y="24" width="24" height="24" /> <path id="dpadRight" data-key="RIGHT"
</svg> d="M66.2,24H48v24h18.2c3.3,0,5.8-2.7,5.8-6V29.9C72,26.5,69.5,24,66.2,24z" />
<path id="dpadDown" data-key="DOWN"
d="M24,66.3c0,3.3,2.6,5.7,5.9,5.7H42c3.3,0,6-2.4,6-5.7V48H24V66.3z" />
<path id="dpadLeft" data-key="LEFT"
d="M5.7,24C2.4,24,0,26.5,0,29.9V42c0,3.3,2.3,6,5.7,6H24V24H5.7z" />
<rect id="dpadCenter" x="24" y="24" width="24" height="24" />
</svg>
</div>
</div>
</div> </div>
<div id="apad" class="unselectable"> <div class="right">
<div id="apadAction" class="apadCircBtn apadBtn" data-key="ACTION"> <div id="control-group-action" class="control-group">
<text id="apadLabelAction" class="apadLabel">A</text> <div id="apadAction" class="apad-button apad-circle" data-key="ACTION">
</div> <span class="apad-label">A</span>
<div id="apadCancel" class="apadCircBtn apadBtn" data-key="CANCEL">
<text id="apadLabelCancel" class="apadLabel">B</text>
</div>
<div class="apadBtnContainer apadRectBtnContainer">
<div id="apadCycleShiny" class="apadSqBtn apadBtn" data-key="CYCLE_SHINY">
<text class="apadLabel apadLabelSmall">R</text>
</div>
<div id="apadCycleVariant" class="apadSqBtn apadBtn" data-key="CYCLE_VARIANT">
<text class="apadLabel apadLabelSmall">V</text>
</div>
<div id="apadStats" class="apadRectBtn apadBtn" data-key="STATS">
<text class="apadLabel apadLabelSmall">C</text>
</div>
<div id="apadMenu" class="apadRectBtn apadBtn" data-key="MENU">
<text class="apadLabel apadLabelSmall">Menu</text>
</div> </div>
</div> </div>
<div class="apadBtnContainer apadSqBtnContainer">
<div id="apadCycleForm" class="apadSqBtn apadBtn" data-key="CYCLE_FORM"> <div id="control-group-cancel" class="control-group">
<text class="apadLabel apadLabelSmall">F</text> <div id="apadCancel" class="apad-button apad-circle" data-key="CANCEL">
</div> <span class="apad-label">B</span>
<div id="apadCycleGender" class="apadSqBtn apadBtn" data-key="CYCLE_GENDER">
<text class="apadLabel apadLabelSmall">G</text>
</div>
<div id="apadCycleAbility" class="apadSqBtn apadBtn" data-key="CYCLE_ABILITY">
<text class="apadLabel apadLabelSmall">E</text>
</div>
<div id="apadCycleNature" class="apadSqBtn apadBtn" data-key="CYCLE_NATURE">
<text class="apadLabel apadLabelSmall">N</text>
</div> </div>
</div> </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">
<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">
<span class="apad-label">C</span>
</div>
<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">
<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="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="apadInfo" class="apad-button apad-rectangle apad-small" data-key="V">
<span class="apad-label">V</span>
</div>
</div>
</div> </div>
</div> </div>
</body> </body>

46
src/touch-controls.ts
View File

@ -8,18 +8,38 @@ export default class TouchControl {
events: EventEmitter; events: EventEmitter;
private buttonLock: string[] = new Array(); private buttonLock: string[] = new Array();
private inputInterval: NodeJS.Timeout[] = new Array(); private inputInterval: NodeJS.Timeout[] = new Array();
/** Whether touch controls are disabled */
private disabled: boolean = false;
/** Whether the last touch event has finished before disabling */
private finishedLastTouch: boolean = false;
constructor(scene: BattleScene) { constructor(scene: BattleScene) {
this.events = scene.game.events; this.events = scene.game.events;
this.init(); this.init();
} }
/**
* Disable touch controls
*/
disable() {
this.disabled = true;
this.finishedLastTouch = false;
}
/**
* Enable touch controls
*/
enable() {
this.disabled = false;
this.finishedLastTouch = false;
}
/** /**
* Initialize touch controls by binding keys to buttons. * Initialize touch controls by binding keys to buttons.
*/ */
init() { init() {
this.preventElementZoom(document.querySelector("#dpad")); this.preventElementZoom(document.querySelector("#dpad"));
this.preventElementZoom(document.querySelector("#apad")); document.querySelectorAll(".apad-button").forEach((element) => this.preventElementZoom(element as HTMLElement));
// Select all elements with the 'data-key' attribute and bind keys to them // Select all elements with the 'data-key' attribute and bind keys to them
for (const button of document.querySelectorAll("[data-key]")) { for (const button of document.querySelectorAll("[data-key]")) {
// @ts-ignore - Bind the key to the button using the dataset key // @ts-ignore - Bind the key to the button using the dataset key
@ -56,10 +76,14 @@ export default class TouchControl {
if (this.buttonLock.includes(key)) { if (this.buttonLock.includes(key)) {
return; return;
} }
this.simulateKeyboardEvent("keydown", key); if (!this.simulateKeyboardEvent("keydown", key)) {
return;
}
clearInterval(this.inputInterval[key]); clearInterval(this.inputInterval[key]);
this.inputInterval[key] = setInterval(() => { this.inputInterval[key] = setInterval(() => {
this.simulateKeyboardEvent("keydown", key); if (!this.simulateKeyboardEvent("keydown", key)) {
clearInterval(this.inputInterval[key]);
}
}, repeatInputDelayMillis); }, repeatInputDelayMillis);
this.buttonLock.push(key); this.buttonLock.push(key);
node.classList.add("active"); node.classList.add("active");
@ -67,11 +91,11 @@ export default class TouchControl {
} }
touchButtonUp(node: HTMLElement, key: string, id: string) { touchButtonUp(node: HTMLElement, key: string, id: string) {
if (!this.buttonLock.includes(key)) { if (!this.buttonLock.includes(key) || this.disabled && this.finishedLastTouch) {
return; return;
} }
this.finishedLastTouch = true;
this.simulateKeyboardEvent("keyup", key); this.simulateKeyboardEvent("keyup", key);
node.classList.remove("active"); node.classList.remove("active");
document.getElementById(id)?.classList.remove("active"); document.getElementById(id)?.classList.remove("active");
@ -81,18 +105,19 @@ export default class TouchControl {
} }
/** /**
* Simulates a keyboard event on the canvas. * Simulates a keyboard event on the canvas if the button is not disabled.
* *
* @param eventType - The type of the keyboard event ('keydown' or 'keyup'). * @param eventType - The type of the keyboard event ('keydown' or 'keyup').
* @param key - The key to simulate. * @param key - The key to simulate.
* * @returns Whether the simulation was successful.
* @remarks * @remarks
* This function checks if the key exists in the Button enum. If it does, it retrieves the corresponding button * This function checks if the key exists in the Button enum. If it does, it retrieves the corresponding button
* and emits the appropriate event ('input_down' or 'input_up') based on the event type. * and emits the appropriate event ('input_down' or 'input_up') based on the event type.
*/ */
simulateKeyboardEvent(eventType: string, key: string) { simulateKeyboardEvent(eventType: string, key: string): boolean {
if (!Button.hasOwnProperty(key)) { console.log("simulateKeyboardEvent", eventType, key);
return; if (!Button.hasOwnProperty(key) || this.disabled) {
return false;
} }
const button = Button[key]; const button = Button[key];
@ -112,6 +137,7 @@ export default class TouchControl {
}); });
break; break;
} }
return true;
} }
/** /**

26
src/ui/settings/abstract-settings-ui-handler.ts
View File

@ -7,7 +7,7 @@ import { addWindow } from "../ui-theme";
import {Button} from "#enums/buttons"; import {Button} from "#enums/buttons";
import {InputsIcons} from "#app/ui/settings/abstract-control-settings-ui-handler.js"; import {InputsIcons} from "#app/ui/settings/abstract-control-settings-ui-handler.js";
import NavigationMenu, {NavigationManager} from "#app/ui/settings/navigationMenu"; import NavigationMenu, {NavigationManager} from "#app/ui/settings/navigationMenu";
import { Setting, SettingKeys } from "#app/system/settings/settings"; import { Setting, SettingKeys, SettingType } from "#app/system/settings/settings";
import i18next from "i18next"; import i18next from "i18next";
@ -40,9 +40,9 @@ export default class AbstractSettingsUiHandler extends UiHandler {
protected settings: Array<Setting>; protected settings: Array<Setting>;
protected localStorageKey: string; protected localStorageKey: string;
constructor(scene: BattleScene, mode: Mode | null = null) { constructor(scene: BattleScene, type: SettingType, mode: Mode | null = null) {
super(scene, mode); super(scene, mode);
this.settings = Setting.filter(s => s.type === type && !s?.isHidden?.());
this.reloadRequired = false; this.reloadRequired = false;
this.rowsToDisplay = 8; this.rowsToDisplay = 8;
} }
@ -264,6 +264,12 @@ export default class AbstractSettingsUiHandler extends UiHandler {
case Button.CYCLE_SHINY: case Button.CYCLE_SHINY:
success = this.navigationContainer.navigate(button); success = this.navigationContainer.navigate(button);
break; break;
case Button.ACTION:
const setting: Setting = this.settings[cursor];
if (setting?.activatable) {
success = this.activateSetting(setting);
}
break;
} }
} }
@ -275,6 +281,20 @@ export default class AbstractSettingsUiHandler extends UiHandler {
return success; return success;
} }
/**
* Activate the specified setting if it is activatable.
* @param setting The setting to activate.
* @returns Whether the setting was successfully activated.
*/
activateSetting(setting: Setting): boolean {
switch (setting.key) {
case SettingKeys.Move_Touch_Controls:
this.scene.inputController.moveTouchControlsHandler.enableConfigurationMode(this.getUi(), this.scene);
return true;
}
return false;
}
/** /**
* Set the cursor to the specified position. * Set the cursor to the specified position.
* *

380
src/ui/settings/move-touch-controls-handler.ts Normal file
View File

@ -0,0 +1,380 @@
import TouchControl from "#app/touch-controls.js";
import UI from "#app/ui/ui.js";
import { Scene } from "phaser";
export const TOUCH_CONTROL_POSITIONS_LANDSCAPE = "touchControlPositionsLandscape";
export const TOUCH_CONTROL_POSITIONS_PORTRAIT = "touchControlPositionsPortrait";
type ControlPosition = { id: string, x: number, y: number };
type ConfigurationEventListeners = {
"touchstart": EventListener[]
"touchmove": EventListener[]
"touchend": EventListener[]
};
type ToolbarRefs = {
toolbar: HTMLDivElement,
saveButton: HTMLDivElement
resetButton: HTMLDivElement
cancelButton: HTMLDivElement
};
/**
* Handles the dragging of touch controls around the screen.
*/
export default class MoveTouchControlsHandler {
/** The element that is currently being dragged */
private draggingElement: HTMLElement | null = null;
/**
* Whether the user is currently configuring the touch controls.
* When this is true, the touch controls can be dragged around the screen and the controls of the game are disabled.
*/
public inConfigurationMode: boolean;
/**
* The event listeners for the configuration mode.
* These are used to remove the event listeners when the configuration mode is disabled.
*/
private configurationEventListeners: ConfigurationEventListeners = {
"touchstart": [],
"touchmove": [],
"touchend": []
};
private overlay: Phaser.GameObjects.Container;
private isLandscapeMode: boolean = this.getScreenSize().width > this.getScreenSize().height;
private touchControls: TouchControl;
constructor(touchControls: TouchControl) {
this.touchControls = touchControls;
this.inConfigurationMode = false;
this.setPositions(this.getSavedPositionsOfCurrentOrientation() ?? []);
window.addEventListener("resize", (event) => {
const screenSize = this.getScreenSize();
if (screenSize.width > screenSize.height !== this.isLandscapeMode) {
this.changeOrientation(screenSize.width > screenSize.height);
}
});
}
/**
* Changes the state of the touch controls to the given orientation.
* @param isLandscapeMode Whether the screen is in landscape mode.
*/
private async changeOrientation(isLandscapeMode: boolean) {
this.isLandscapeMode = isLandscapeMode;
if (this.inConfigurationMode) {
const orientation = document.querySelector("#touchControls #orientation");
if (orientation) {
orientation.textContent = this.isLandscapeMode? "Landscape" : "Portrait";
}
}
const positions = this.getSavedPositionsOfCurrentOrientation() ?? [];
this.setPositions(positions);
}
private getScreenSize() {
return { width: window.screen.width, height: window.screen.height };
}
/**
* Creates the toolbar element for the configuration mode.
* @returns A new div element that contains the toolbar for the configuration mode.
*/
private createToolbarElement(): HTMLDivElement {
const toolbar = document.createElement("div");
toolbar.id = "configToolbar";
toolbar.innerHTML = `
<div class="column">
<div class="button-row">
<div id="resetButton" class="button">Reset</div>
<div id="saveButton" class="button">Save & close</div>
<div id="cancelButton" class="button">Cancel</div>
</div>
<div class="info-row">
<div class="orientation-label">
Orientation: <span id="orientation">${this.isLandscapeMode ? "Landscape" : "Portrait"}</span>
</div>
</div>
</div>
`;
return toolbar;
}
/**
* Initializes the toolbar of the configuration mode.
* Places its elements at the top of the touch controls and adds event listeners to them.
*/
private createToolbar() {
document.querySelector("#touchControls")?.prepend(this.createToolbarElement());
const refs = this.getConfigToolbarRefs();
if (!refs) {
return;
}
const { saveButton, resetButton, cancelButton } = refs;
saveButton.addEventListener("click", () => {
this.saveCurrentPositions();
this.disableConfigurationMode();
});
resetButton.addEventListener("click", () => {
this.resetPositions();
});
cancelButton.addEventListener("click", () => {
const positions = this.getSavedPositionsOfCurrentOrientation();
this.setPositions(positions);
this.disableConfigurationMode();
});
}
/**
* Returns the references to the elements of the configuration toolbar.
* @returns The references to the elements of the configuration toolbar
* or undefined if the elements can not be found (e.g. during tests)
*/
private getConfigToolbarRefs(): ToolbarRefs | undefined {
const toolbar = document.querySelector("#touchControls #configToolbar") as HTMLDivElement;
if (!toolbar) {
return;
}
return {
toolbar,
saveButton: toolbar.querySelector("#saveButton")!,
resetButton: toolbar.querySelector("#resetButton")!,
cancelButton: toolbar.querySelector("#cancelButton")!
};
}
/**
* Elements that are inside the left div are anchored to the left boundary of the screen.
* The x value of the positions are considered offsets to their respective boundaries.
* @param element Either an element in the left div or the right div.
* @returns Whether the given element is inside the left div.
*/
private isLeft = (element: HTMLElement) => document.querySelector("#touchControls .left")?.contains(element);
/**
* Start dragging the given button.
* @param controlGroup The button that is being dragged.
* @param touch The touch event that started the drag.
*/
private startDrag = (controlGroup: HTMLElement): void => {
this.draggingElement = controlGroup;
};
/**
* Drags the currently dragged element to the given touch position.
* @param touch The touch event that is currently happening.
* @param isLeft Whether the dragged element is a left button.
*/
private drag = (touch: Touch): void => {
if (!this.draggingElement) {
return;
}
const rect = this.draggingElement.getBoundingClientRect();
// Map the touch position to the center of the dragged element.
const xOffset = this.isLeft(this.draggingElement) ? touch.clientX - rect.width / 2 : window.innerWidth - touch.clientX - rect.width / 2;
const yOffset = window.innerHeight - touch.clientY - rect.height / 2;
this.setPosition(this.draggingElement, xOffset, yOffset);
};
/**
* Stops dragging the currently dragged element.
*/
private stopDrag = () => {
this.draggingElement = null;
};
/**
* Returns the current positions of all touch controls that have moved from their default positions of this orientation.
* @returns {ControlPosition[]} The current positions of all touch controls that have moved from their default positions of this orientation
*/
private getModifiedCurrentPositions(): ControlPosition[] {
return this.getControlGroupElements()
.filter((controlGroup: HTMLElement) => controlGroup.style.right || controlGroup.style.left)
.map((controlGroup: HTMLElement) => {
return {
id: controlGroup.id,
x: parseFloat(this.isLeft(controlGroup) ? controlGroup.style.left : controlGroup.style.right),
y: parseFloat(controlGroup.style.bottom),
};
});
}
/**
* Returns the key of the local storage for the control positions data of this orientation
*/
private getLocalStorageKey(): string {
return this.isLandscapeMode ? TOUCH_CONTROL_POSITIONS_LANDSCAPE : TOUCH_CONTROL_POSITIONS_PORTRAIT;
}
/**
* Returns the saved positions of the touch controls.
* Filters result by the given orientation.
* @returns The saved positions of the touch controls of this orientation
*/
private getSavedPositionsOfCurrentOrientation(): ControlPosition[] {
const positions = localStorage.getItem(this.getLocalStorageKey());
if (!positions) {
return [];
}
return JSON.parse(positions) as ControlPosition[];
}
/**
* Saves the current positions of the touch controls to the local storage.
*/
private saveCurrentPositions() {
const pos = this.getModifiedCurrentPositions();
localStorage.setItem(this.getLocalStorageKey(), JSON.stringify(pos));
}
/**
* Updates the positions of the touch controls.
* @param positions The new positions of the touch controls.
*/
private setPositions(positions: ControlPosition[]) {
this.resetPositions();
return positions.forEach((pos: ControlPosition) => {
const controlGroup = document.querySelector(`#${pos.id}`) as HTMLElement;
this.setPosition(controlGroup, pos.x, pos.y);
});
}
/**
* Sets a control element to the given position.
* The x values are either offsets to the left or right boundary of the screen, depending on the side of the element.
* E.g. For left elements, (0, 0) is the bottom left corner of the screen and
* for right elements, (0, 0) is the bottom right corner of the screen.
* @param controlElement
* @param x Either an offset to the left or right boundary of the screen.
* @param y An offset to the bottom boundary of the screen.
*/
private setPosition(controlElement: HTMLElement, x: number, y: number) {
const rect = controlElement.getBoundingClientRect();
const checkBound = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
const { height, width } = this.getScreenSize();
x = checkBound(x, 0, width - rect.width);
y = checkBound(y, 0, height - rect.height);
if (this.isLeft(controlElement)) {
controlElement.style.left = `${x}px`;
} else {
controlElement.style.right = `${x}px`;
}
controlElement.style.bottom = `${y}px`;
}
/**
* Resets the positions of the touch controls to their default positions and clears the saved positions.
* Does not save the changes.
*/
private resetPositions() {
this.getControlGroupElements().forEach((controlGroup: HTMLDivElement) => {
controlGroup.style.removeProperty("left");
controlGroup.style.removeProperty("right");
controlGroup.style.removeProperty("bottom");
});
}
/**
* Returns all control groups of the touch controls.
* These are groups of buttons that can be dragged around the screen.
* @returns All control groups of the touch controls.
*/
private getControlGroupElements(): HTMLDivElement[] {
return [...document.querySelectorAll("#touchControls .control-group")] as HTMLDivElement[];
}
/**
* Creates the event listeners for the configuration mode.
* @param controlGroups The elements that can be dragged around the screen.
* @returns The event listeners for the configuration mode.
*/
private createConfigurationEventListeners(controlGroups: HTMLDivElement[]): ConfigurationEventListeners {
return {
"touchstart": controlGroups.map((element: HTMLDivElement) => {
const startDrag = () => this.startDrag(element);
element.addEventListener("touchstart", startDrag, { passive: true });
return startDrag;
}),
"touchmove": controlGroups.map(() => {
const drag = (event) => this.drag(event.touches[0]);
window.addEventListener("touchmove", drag, { passive: true });
return drag;
}),
"touchend": controlGroups.map(() => {
const stopDrag = () => this.stopDrag();
window.addEventListener("touchend", stopDrag, { passive: true });
return stopDrag;
})
};
}
/**
* Creates an overlay that covers the screen and allows the user to drag the touch controls around.
* Also enables the toolbar for saving, resetting, and canceling the changes.
* @param ui The UI of the game.
* @param scene The scene of the game.
*/
private createOverlay(ui: UI, scene: Scene) {
const container = new Phaser.GameObjects.Container(scene, 0, 0);
const overlay = new Phaser.GameObjects.Rectangle(scene, 0, 0, scene.game.canvas.width, scene.game.canvas.height, 0x000000, 0.5);
overlay.setInteractive();
container.add(overlay);
ui.add(container);
this.overlay = container;
// Display toolbar
document.querySelector("#touchControls")?.classList.add("config-mode");
}
/**
* Allows the user to configure the touch controls by dragging buttons around the screen.
* @param ui The UI of the game.
* @param scene The scene of the game.
*/
public enableConfigurationMode(ui: UI, scene: Scene) {
if (this.inConfigurationMode) {
return;
}
this.inConfigurationMode = true;
this.touchControls.disable();
this.createOverlay(ui, scene);
this.createToolbar();
// Create event listeners with a delay to prevent the touchstart event from being triggered immediately.
setTimeout(() => {
// Remember the event listeners so they can be removed later.
this.configurationEventListeners = this.createConfigurationEventListeners(this.getControlGroupElements());
}, 500);
}
/**
* Disables the configuration mode.
*/
public disableConfigurationMode() {
this.inConfigurationMode = false;
this.draggingElement = null;
// Remove event listeners
const { touchstart, touchmove, touchend } = this.configurationEventListeners;
this.getControlGroupElements().forEach((element, index) => element.removeEventListener("touchstart", touchstart[index]));
touchmove.forEach((listener) => window.removeEventListener("touchmove", listener));
touchend.forEach((listener) => window.removeEventListener("touchend", listener));
// Remove configuration toolbar
const toolbar = document.querySelector("#touchControls #configToolbar");
toolbar?.remove();
// Remove overlay
this.overlay?.destroy();
document.querySelector("#touchControls")?.classList.remove("config-mode");
this.touchControls.enable();
}
}

5
src/ui/settings/settings-audio-ui-handler.ts
View File

@ -2,7 +2,7 @@ import BattleScene from "../../battle-scene";
import { Mode } from "../ui"; import { Mode } from "../ui";
"#app/inputs-controller.js"; "#app/inputs-controller.js";
import AbstractSettingsUiHandler from "./abstract-settings-ui-handler"; import AbstractSettingsUiHandler from "./abstract-settings-ui-handler";
import { Setting, SettingType } from "#app/system/settings/settings"; import { SettingType } from "#app/system/settings/settings";
export default class SettingsAudioUiHandler extends AbstractSettingsUiHandler { export default class SettingsAudioUiHandler extends AbstractSettingsUiHandler {
/** /**
@ -12,9 +12,8 @@ export default class SettingsAudioUiHandler extends AbstractSettingsUiHandler {
* @param mode - The UI mode, optional. * @param mode - The UI mode, optional.
*/ */
constructor(scene: BattleScene, mode: Mode | null = null) { constructor(scene: BattleScene, mode: Mode | null = null) {
super(scene, mode); super(scene, SettingType.AUDIO, mode);
this.title = "Audio"; this.title = "Audio";
this.settings = Setting.filter(s => s.type === SettingType.AUDIO);
this.localStorageKey = "settings"; this.localStorageKey = "settings";
this.rowsToDisplay = 4; this.rowsToDisplay = 4;
} }

5
src/ui/settings/settings-display-ui-handler.ts
View File

@ -2,7 +2,7 @@ import BattleScene from "../../battle-scene";
import { Mode } from "../ui"; import { Mode } from "../ui";
"#app/inputs-controller.js"; "#app/inputs-controller.js";
import AbstractSettingsUiHandler from "./abstract-settings-ui-handler"; import AbstractSettingsUiHandler from "./abstract-settings-ui-handler";
import { Setting, SettingKeys, SettingType } from "#app/system/settings/settings"; import { SettingKeys, SettingType } from "#app/system/settings/settings";
export default class SettingsDisplayUiHandler extends AbstractSettingsUiHandler { export default class SettingsDisplayUiHandler extends AbstractSettingsUiHandler {
/** /**
@ -12,9 +12,8 @@ export default class SettingsDisplayUiHandler extends AbstractSettingsUiHandler
* @param mode - The UI mode, optional. * @param mode - The UI mode, optional.
*/ */
constructor(scene: BattleScene, mode: Mode | null = null) { constructor(scene: BattleScene, mode: Mode | null = null) {
super(scene, mode); super(scene, SettingType.DISPLAY, mode);
this.title = "Display"; this.title = "Display";
this.settings = Setting.filter(s => s.type === SettingType.DISPLAY);
/** /**
* Update to current language from default value. * Update to current language from default value.

5
src/ui/settings/settings-ui-handler.ts
View File

@ -1,5 +1,5 @@
import BattleScene from "../../battle-scene"; import BattleScene from "../../battle-scene";
import {Setting, SettingType} from "../../system/settings/settings"; import { SettingType } from "../../system/settings/settings";
import { Mode } from "../ui"; import { Mode } from "../ui";
import AbstractSettingsUiHandler from "./abstract-settings-ui-handler"; import AbstractSettingsUiHandler from "./abstract-settings-ui-handler";
@ -11,9 +11,8 @@ export default class SettingsUiHandler extends AbstractSettingsUiHandler {
* @param mode - The UI mode, optional. * @param mode - The UI mode, optional.
*/ */
constructor(scene: BattleScene, mode: Mode | null = null) { constructor(scene: BattleScene, mode: Mode | null = null) {
super(scene, mode); super(scene, SettingType.GENERAL, mode);
this.title = "General"; this.title = "General";
this.settings = Setting.filter(s => s.type === SettingType.GENERAL);
this.localStorageKey = "settings"; this.localStorageKey = "settings";
} }
} }