Merge branch 'beta' into chillyRecep_expri_re

.github/CODEOWNERS

@@ -0,0 +1,45 @@
+# Order is important; the last matching pattern takes the most precedence.
+
+# everything (whole code-base) - Junior Devs
+* @pagefaultgames/junior-dev-team
+
+# github actions/templates etc. - Dev Leads
+/.github @pagefaultgames/dev-leads
+
+# --- Translations ---
+
+# all translations - Translation Leads
+/src/locales @pagefaultgames/translation-leads
+
+# Catalan (Spain/Spanish)
+/src/locales/ca_ES @pagefaultgames/catalan-translation-team
+
+# German
+/src/locales/de @pagefaultgames/german-translation-team
+
+# English
+/src/locales/en @pagefaultgames/english-translation-team
+
+# Spanish
+/src/locales/es @pagefaultgames/spanish-translation-team
+
+# French
+/src/locales/fr @pagefaultgames/french-translation-team
+
+# Italian
+/src/locales/it @pagefaultgames/italian-translation-team
+
+# Japenese
+/src/locales/ja @pagefaultgames/japanese-translation-team
+
+# Korean
+/src/locales/ko @pagefaultgames/korean-translation-team
+
+# Brasilian (Brasil/Portuguese)
+/src/locales/pt_BR @pagefaultgames/portuguese_br-translation-team
+
+# Chinese (simplified)
+/src/locales/zh_CN @pagefaultgames/chinese_simplified-translation-team
+
+# Chinese (traditional)
+/src/locales/zh_TW @pagefaultgames/chinese_traditional-translation-team 

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: patapancakes

.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

@@ -1,7 +1,7 @@
 name: Feature Request
 description: Suggest an idea for this project
 title: "[Feature] "
-labels: ["enhancement"]
+labels: ["Enhancement"]
 body:
   - type: markdown
     attributes:
@@ -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 -->
@@ -30,7 +30,7 @@
 - [ ] The PR is self-contained and cannot be split into smaller PRs?
 - [ ] Have I provided a clear explanation of the changes?
 - [ ] Have I considered writing automated tests for the issue?
-- [ ] If I have text, did I add placeholders for them in locales?
+- [ ] If I have text, did I make it translatable and add a key in the English locale file(s)?
 - [ ] Have I tested the changes (manually)?
     - [ ] Are all unit tests still passing? (`npm run test`)
 - [ ] Are the changes visual?

.github/workflows/eslint.yml

@@ -11,6 +11,8 @@ on:
     branches:
       - main  # Trigger on pull request events targeting the main branch
       - beta # Trigger on pull request events targeting the beta branch
+  merge_group:
+    types: [checks_requested]
 
 jobs:
   run-linters:  # Define a job named "run-linters"

.github/workflows/github-pages.yml

@@ -8,6 +8,8 @@ on:
     branches:
       - main
       - beta
+  merge_group:
+    types: [checks_requested]
 
 jobs:
   pages:

.github/workflows/tests.yml

@@ -11,6 +11,8 @@ on:
     branches:
       - main  # Trigger on pull request events targeting the main branch
       - beta # Trigger on pull request events targeting the beta branch
+  merge_group:
+    types: [checks_requested]
 
 jobs:
   run-tests:  # Define a job named "run-tests"

README.md

@@ -53,6 +53,7 @@ Check out [Github Issues](https://github.com/pagefaultgames/pokerogue/issues) to
   - Pokémon Sun/Moon
   - Pokémon Ultra Sun/Ultra Moon
   - Pokémon Sword/Shield
+  - Pokémon Legends: Arceus
   - Pokémon Scarlet/Violet
   - Firel (Custom Laboratory, Metropolis, Seabed, and Space biome music)
   - Lmz (Custom Jungle biome music)

create-test-boilerplate.js

@@ -0,0 +1,101 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+/**
+ * This script creates a test boilerplate file for a move or ability.
+ * @param {string} type - The type of test to create. Either "move" or "ability".
+ * @param {string} fileName - The name of the file to create.
+ * @example npm run create-test move tackle
+ */
+
+// Get the directory name of the current module file
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Get the arguments from the command line
+const args = process.argv.slice(2);
+const type = args[0]; // "move" or "ability"
+let fileName = args[1]; // The file name
+
+if (!type || !fileName) {
+    console.error('Please provide both a type ("move" or "ability") and a file name.');
+    process.exit(1);
+}
+
+// Convert fileName from to snake_case if camelCase is given
+fileName = fileName.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
+
+// Format the description for the test case
+const formattedName = fileName
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, char => char.toUpperCase());
+
+// Determine the directory based on the type
+let dir;
+let description;
+if (type === 'move') {
+    dir = path.join(__dirname, 'src', 'test', 'moves');
+    description = `Moves - ${formattedName}`;
+} else if (type === 'ability') {
+    dir = path.join(__dirname, 'src', 'test', 'abilities');
+    description = `Abilities - ${formattedName}`;
+} else {
+    console.error('Invalid type. Please use "move" or "ability".');
+    process.exit(1);
+}
+
+// Ensure the directory exists
+if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+}
+
+// Create the file with the given name
+const filePath = path.join(dir, `${fileName}.test.ts`);
+
+if (fs.existsSync(filePath)) {
+    console.error(`File "${fileName}.test.ts" already exists.`);
+    process.exit(1);
+}
+
+// Define the content template
+const content = `import { Abilities } from "#enums/abilities";
+import GameManager from "#test/utils/gameManager";
+import { SPLASH_ONLY } from "#test/utils/testUtils";
+import Phaser from "phaser";
+import { afterEach, beforeAll, beforeEach, describe, it } from "vitest";
+
+describe("${description}", () => {
+  let phaserGame: Phaser.Game;
+  let game: GameManager;
+  const TIMEOUT = 20 * 1000;
+
+  beforeAll(() => {
+    phaserGame = new Phaser.Game({
+      type: Phaser.HEADLESS,
+    });
+  });
+
+  afterEach(() => {
+    game.phaseInterceptor.restoreOg();
+  });
+
+  beforeEach(() => {
+    game = new GameManager(phaserGame);
+    game.override
+      .battleType("single")
+      .enemyAbility(Abilities.BALL_FETCH)
+      .enemyMoveset(SPLASH_ONLY);
+  });
+
+  it("test case", async () => {
+    // await game.classicMode.startBattle();
+    // game.move.select();
+  }, TIMEOUT);
+});
+`;
+
+// Write the template content to the file
+fs.writeFileSync(filePath, content, 'utf8');
+
+console.log(`File created at: ${filePath}`);

docs/enemy-ai.md

@@ -191,15 +191,15 @@ Now that the enemy Pokémon with the best matchup score is on the field (assumin
 
   We then need to apply a 2x multiplier for the move's type effectiveness and a 1.5x multiplier since STAB applies. After applying these multipliers, the final score for this move is **75**.
 
-- **Swords Dance**: As a non-attacking move, this move's benefit score is derived entirely from the sum of its attributes' benefit scores. Swords Dance's `StatChangeAttr` has a user benefit score of 0 and a target benefit score that, in this case, simplifies to
+- **Swords Dance**: As a non-attacking move, this move's benefit score is derived entirely from the sum of its attributes' benefit scores. Swords Dance's `StatStageChangeAttr` has a user benefit score of 0 and a target benefit score that, in this case, simplifies to
 
   $\text{TBS}=4\times \text{levels} + (-2\times \text{sign(levels)})$
 
   where `levels` is the number of stat stages added by the attribute (in this case, +2). The final score for this move is **6** (Note: because this move is self-targeted, we don't flip the sign of TBS when computing the target score).
 
-- **Crush Claw**: This move is a 75-power Normal-type physical attack with a 50 percent chance to lower the target's Defense by one stage. The additional effect is implemented by the same `StatChangeAttr` as Swords Dance, so we can use the same formulas from before to compute the total TBS and base target score.
+- **Crush Claw**: This move is a 75-power Normal-type physical attack with a 50 percent chance to lower the target's Defense by one stage. The additional effect is implemented by the same `StatStageChangeAttr` as Swords Dance, so we can use the same formulas from before to compute the total TBS and base target score.
   
-  $\text{TBS}=\text{getTargetBenefitScore(StatChangeAttr)}-\text{attackScore}$
+  $\text{TBS}=\text{getTargetBenefitScore(StatStageChangeAttr)}-\text{attackScore}$
 
   $\text{TBS}=(-4 + 2)-(-2\times 2 + \lfloor \frac{75}{5} \rfloor)=-2-11=-13$
 

eslint.config.js

@@ -38,7 +38,8 @@ export default [
                 "ignoreComments": false // Enforces the rule on lines containing comments
             }],
             "space-before-blocks": ["error", "always"], // Enforces a space before blocks
-            "keyword-spacing": ["error", { "before": true, "after": true }] // Enforces spacing before and after keywords
+            "keyword-spacing": ["error", { "before": true, "after": true }], // Enforces spacing before and after keywords
+            "comma-spacing": ["error", { "before": false, "after": true }] // Enforces spacing after comma
         }
     }
 ]

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 {
@@ -25,13 +17,10 @@ body {
   background: #484050;
 }
 
-#links {
+@media (display-mode: fullscreen) {
-  width: 90%;
+  body {
-  text-align: center;
+    background: #000000;
-  position: fixed;
+  }
-  bottom: 0;
-  display: flex;
-  justify-content: space-around;
 }
 
 #app {
@@ -43,33 +32,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'], [data-ui-mode='RUN_INFO']) #apadCycleForm,
+#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT'], [data-ui-mode='RUN_INFO']) #apadCycleShiny,
+#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleNature,
+#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT'], [data-ui-mode='RUN_INFO']) #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) {
+#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 {
-  left: 1rem;
+  z-index: 3;
-}
+  opacity: 0.8;
-
-#apad {
-  right: 1rem;
 }
 
 #dpad svg {
@@ -78,114 +215,84 @@ input {
   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);
   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;
+  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);
 }
 
-#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;
-  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-wide-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)
+  width: var(--control-group-extra-wide-size);
-{
+  right: var(--control-group-extra-2-offset);
-  display: none;
+  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 {
+/* 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 {
   bottom: 6rem;

index.html

@@ -39,7 +39,6 @@
 	</style>
 	<link rel="stylesheet" type="text/css" href="./index.css" />
 	<link rel="manifest" href="./manifest.webmanifest">
-	<script type="text/javascript" src="https://app.termly.io/resource-blocker/c5dbfa2f-9723-4c0f-a84b-2895124e851f?autoBlock=on"></script>
   <script>
     if ("serviceWorker" in navigator) {
       window.addEventListener("load", function () {
@@ -64,62 +63,85 @@
 <body>
 	<div id="app"></div>
 	<div id="touchControls">
-		<div id="dpad" class="unselectable">
+		<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="dpadUp" data-key="UP"
-				<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" />
+							d="M48,5.8C48,2.5,45.4,0,42,0H29.9C26.6,0,24,2.4,24,5.8V24h24V5.8z" />
-				<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="dpadRight" data-key="RIGHT"
-				<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="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 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 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 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="tnc-links">
+
-		<a href="#" class="termly-display-preferences" style="display: none;" target="_blank" rel="noreferrer noopener">Consent Preferences</a>
+			<div id="control-group-extra-2" class="control-group control-group-extra">
-		<a href="https://app.termly.io/policy-viewer/policy.html?policyUUID=bc96778b-3f04-4d25-bafc-0deba53e8bec" target="_blank" rel="noreferrer noopener">Privacy Policy</a>
+				<!-- buttons to cycle through pokemon characteristics in starter select -->
-		<a href="https://app.termly.io/policy-viewer/policy.html?policyUUID=8b523c05-7ec2-4646-9534-5bd61b386e2a" target="_blank" rel="noreferrer noopener">Cookie Disclaimer</a>
+				<div id="apadCycleForm" class="apad-button apad-square apad-small" data-key="CYCLE_FORM">
-		<a href="https://app.termly.io/policy-viewer/policy.html?policyUUID=b01e092a-9721-477f-8356-45576702ff9e" target="_blank" rel="noreferrer noopener">Terms & Conditions</a>
+					<span class="apad-label">F</span>
-		<a href="https://app.termly.io/policy-viewer/policy.html?policyUUID=3b5d1928-3f5b-4ee1-b8df-2d6c276b0bcc" target="_blank" rel="noreferrer noopener">Acceptable Use Policy</a>
+				</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>
 	<script type="module" src="./src/main.ts"></script>
 	<script src="./src/touch-controls.ts" type="module"></script>

package.json

@@ -13,11 +13,13 @@
 		"test:cov": "vitest run --project pre && vitest run --project main --coverage",
 		"test:watch": "vitest run --project pre && vitest watch --project main --coverage",
 		"test:silent": "vitest run --project pre && vitest run --project main --silent",
+		"typecheck": "tsc --noEmit",
 		"eslint": "eslint --fix .",
 		"eslint-ci": "eslint .",
 		"docs": "typedoc",
 		"depcruise": "depcruise src",
-		"depcruise:graph": "depcruise src --output-type dot | node dependency-graph.js > dependency-graph.svg"
+		"depcruise:graph": "depcruise src --output-type dot | node dependency-graph.js > dependency-graph.svg",
+		"create-test": "node ./create-test-boilerplate.js"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.3.0",