Merge branch 'beta' into trick

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -21,7 +21,7 @@ body:
   - type: textarea
     id: session-file
     attributes:
-      label: User data export file
+      label: Session export file
       description: Open Menu → ManageData → Export Session → Select slot. The file should now be in your `/Downloads` directory. Change the file extension type from `.prsv` to `.txt` (How to [Windows](https://www.guidingtech.com/how-to-change-file-type-on-windows/) | [Mac](https://support.apple.com/guide/mac-help/show-or-hide-filename-extensions-on-mac-mchlp2304/mac) | [iOS](https://www.guidingtech.com/change-file-type-extension-on-iphone/)).
       placeholder: Focus me and then drop your file here (or use the upload button at the bottom)
     validations:
@@ -29,7 +29,7 @@ body:
   - type: textarea
     id: data-file
     attributes:
-      label: Session export file
+      label: User data export file
       description: Open Menu → ManageData → Export Data. The file should now be in your `/Downloads` directory. Change the file extension type from `.prsv` to `.txt` (How to [Windows](https://www.guidingtech.com/how-to-change-file-type-on-windows/) | [Mac](https://support.apple.com/guide/mac-help/show-or-hide-filename-extensions-on-mac-mchlp2304/mac) | [iOS](https://www.guidingtech.com/change-file-type-extension-on-iphone/)).
       placeholder: Focus me and then drop your file here (or use the upload button at the bottom)
     validations:

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -35,5 +35,3 @@ body:
     attributes:
       label: Additional context
       description: Add any other context or screenshots about the feature request here.
-    validations:
-      required: true

.github/pull_request_template.md

@@ -2,10 +2,10 @@
 <!-- Make sure that this PR is not overlapping with someone else's work -->
 <!-- Please try to keep the PR self-contained (and small) -->
 
-## What are the changes?
+## What are the changes the user will see?
 <!-- Summarize what are the changes from a user perspective on the application -->
 
-## Why am I doing these changes the user will see?
+## Why am I making these changes?
 <!-- Explain why you decided to introduce these changes -->
 <!-- Does it come from an issue or another PR? Please link it -->
 <!-- Explain why you believe this can enhance user experience -->

index.css

@@ -1,16 +1,8 @@
+/* Global */
 :root {
   --color-base: hsl(0, 0%, 55%);
   --color-light: hsl(0, 0%, 90%);
   --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 {
@@ -43,33 +35,181 @@ body {
   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 */
 input {
   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));
+  --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);
+
+  --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) {
   display: none;
 }
 
-#dpad, #apad {
+#touchControls .active {
+  opacity: var(--touch-control-opacity);
+}
+
+.control-group {
   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 #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']):not([data-ui-mode='TARGET_SELECT']) #apadInfo {
+  display: none;
+}
+
+/* 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,
+#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;
+  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) {
-  #dpad, #apad {
-    bottom: calc(1rem + env(safe-area-inset-bottom));
-  }
+#configToolbar .button:active {
+  opacity: var(--touch-control-opacity)
 }
 
+#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 {
-  left: 1rem;
-}
-
-#apad {
-  right: 1rem;
+  z-index: 3;
+  opacity: 0.8;
 }
 
 #dpad svg {
@@ -78,114 +218,84 @@ input {
   fill: var(--color-base);
 }
 
-#dpad svg rect {
-  opacity: 0.6;
-}
+/* apad buttons */
 
-#apad > * {
-  width: var(--controls-size);
-  height: var(--controls-size);
-}
-
-#apad .apadBtn {
-  width: var(--controls-size);
-  height: var(--controls-size);
+.apad-button {
   background-color: var(--color-base);
   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 {
-  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);
+.apad-small {
+  width: var(--small-control-size);
+  height: var(--small-control-size);
+}
+
+.apad-label {
   user-select: none;
+  height: 100%;
+  margin-right: -2px;
 }
 
-#apad .apadLabelSmall {
-  font-size: calc(var(--controls-size) / 3);
+.apad-small > .apad-label {
+  font-size: var(--small-control-size);
   text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3);
 }
 
-#apad #apadLabelAction, #apad #apadLabelCancel {
-  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;
+.apad-rectangle {
   text-align: center;
-  padding-right: 10%;
-  border-radius: 10%;
-  bottom: calc(var(--controls-size) * 0.05);
-  width: calc(var(--controls-size) * 0.6);
-  height: calc(var(--controls-size) * 0.3);
+  width: var(--rect-control-size);
+  height: var(--small-control-size);
 }
 
-#apad .apadSqBtn {
-  border-radius: 10%;
-  width: calc(var(--controls-size) * 0.3);
-  height: calc(var(--controls-size) * 0.3);
+.apad-square {
+  width: var(--small-control-size);
+  height: var(--small-control-size);
 }
 
-#apad .apadBtnContainer {
-  position: relative;
-  display: flex;
+.apad-circle {
+  width: var(--controls-size);
+  height: var(--controls-size);
+  border-radius: 50%;
 }
 
-#apad .apadRectBtnContainer {
-  flex-wrap: wrap;
-  margin-top: calc(var(--controls-size) * -0.8);
-  left: calc(var(--controls-size) * 0.175);
-  height: calc(var(--controls-size) * 0.8);
+/* Defaults:*/
+
+#control-group-dpad {
+  left: var(--controls-padding);
+  bottom: var(--controls-padding);
 }
 
-#apad .apadSqBtnContainer {
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  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);
+#control-group-action {
+  right: var(--controls-padding);
+  bottom: var(--controls-size-with-padding);
 }
 
-#apad .apadRectBtnContainer > #apadMenu {
-  align-self: flex-end;
+#control-group-cancel {
+  right: var(--controls-size-with-wide-padding);
+  bottom: var(--controls-padding);
 }
 
-#apad .apadRectBtnContainer > .apadSqBtn:not(:first-child) {
-  margin-left: 10%;
+#control-group-extra-1 {
+  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),
-#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)
-{
-  display: none;
+#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);
 }
 
-#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 {
-  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 */
 
 #layout:fullscreen #dpad, #layout:fullscreen #apad {
   bottom: 6rem;

index.html

@@ -64,54 +64,84 @@
 <body>
 	<div id="app"></div>
 	<div id="touchControls">
-		<div id="dpad" class="unselectable">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
-				<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" />
-				<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" />
-				<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 class="left">
+			<div id="control-group-dpad" class="control-group control-group-dpad">
+				<div id="dpad" data-control-key="DPAD">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
+						<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" />
+						<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" />
+						<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 id="apad" class="unselectable">
-			<div id="apadAction" class="apadCircBtn apadBtn" data-key="ACTION">
-				<text id="apadLabelAction" class="apadLabel">A</text>
-			</div>
-			<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 class="right">
+			<div id="control-group-action" class="control-group">
+				<div id="apadAction" class="apad-button apad-circle" data-key="ACTION">
+					<span class="apad-label">A</span>
 				</div>
 			</div>
-			<div class="apadBtnContainer apadSqBtnContainer">
-				<div id="apadCycleForm" class="apadSqBtn apadBtn" data-key="CYCLE_FORM">
-					<text class="apadLabel apadLabelSmall">F</text>
-				</div>
-				<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 id="control-group-cancel" class="control-group">
+				<div id="apadCancel" class="apad-button apad-circle" data-key="CANCEL">
+					<span class="apad-label">B</span>
 				</div>
 			</div>
+
+			<div id="control-group-extra-1" class="control-group control-group-extra">
+				<!-- 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>
+				<!-- 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>
 	</div>
 	<div id="tnc-links">