Merge branch 'beta' into implSynchronize

.env

@@ -1,3 +1,6 @@
 VITE_BYPASS_LOGIN=0
 VITE_BYPASS_TUTORIAL=0
-VITE_SERVER_URL=http://localhost:8001
+VITE_SERVER_URL=http://localhost:8001
+VITE_DISCORD_CLIENT_ID=1248062921129459756
+VITE_GOOGLE_CLIENT_ID=955345393540-2k6lfftf0fdnb0krqmpthjnqavfvvf73.apps.googleusercontent.com
+VITE_I18N_DEBUG=0

.env.beta

@@ -1,3 +1,6 @@
 VITE_BYPASS_LOGIN=0
 VITE_BYPASS_TUTORIAL=0
-VITE_SERVER_URL=https://api.beta.pokerogue.net
+VITE_SERVER_URL=https://api.beta.pokerogue.net
+VITE_DISCORD_CLIENT_ID=1248062921129459756
+VITE_GOOGLE_CLIENT_ID=955345393540-2k6lfftf0fdnb0krqmpthjnqavfvvf73.apps.googleusercontent.com
+VITE_I18N_DEBUG=1

.env.development

@@ -1,3 +1,7 @@
 VITE_BYPASS_LOGIN=1
 VITE_BYPASS_TUTORIAL=0
-VITE_SERVER_URL=http://localhost:8001
+VITE_SERVER_URL=http://localhost:8001
+VITE_DISCORD_CLIENT_ID=1234567890
+VITE_GOOGLE_CLIENT_ID=1234567890
+VITE_I18N_DEBUG=1
+VITE_PORT=8000

.env.production

@@ -1,3 +1,6 @@
 VITE_BYPASS_LOGIN=0
 VITE_BYPASS_TUTORIAL=0
-VITE_SERVER_URL=https://api.pokerogue.net
+VITE_SERVER_URL=https://api.pokerogue.net
+VITE_DISCORD_CLIENT_ID=1248062921129459756
+VITE_GOOGLE_CLIENT_ID=955345393540-2k6lfftf0fdnb0krqmpthjnqavfvvf73.apps.googleusercontent.com
+VITE_I18N_DEBUG=0

.env.test

@@ -0,0 +1 @@
+VITE_I18N_DEBUG=0

.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.md

@@ -1,30 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: "[BUG]"
-labels: Bug
-assignees: ''
-
----
-
-**Describe the bug**
-<!-- A clear and concise description of what the bug is. -->
-
-**To Reproduce**
-<!-- Steps to reproduce the behavior: -->
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-<!-- A clear and concise description of what you expected to happen. If it is an existing move or ability -->
-
-**Screenshots / Videos**
-<!-- If applicable, add screenshots or videos to help explain your problem. -->
-
-**Device**
-<!-- What browser are you playing in, are you on a PC/Mac or Phone? -->
-
-**Additional context**
-<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,115 @@
+name: Bug Report
+description: Create a report to help us improve
+title: "[Bug] "
+labels: ["Bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is.
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: textarea
+    id: session-file
+    attributes:
+      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:
+      required: false
+  - type: textarea
+    id: data-file
+    attributes:
+      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:
+      required: false
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen. If it is an existing move or ability
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: textarea
+    id: media
+    attributes:
+      label: Screenshots / Videos
+      description:  If applicable, add screenshots or videos to help explain your problem.
+    validations:
+      required: false
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: dropdown
+    id: os
+    attributes:
+      label: What OS did you observe the bug on?
+      multiple: true
+      options:
+        - PC/Windows
+        - Mac/OSX
+        - Linux
+        - iOS
+        - Android
+        - Other
+    validations:
+      required: true
+  - type: input
+    id: os-other
+    attributes:
+      label: If other please specify
+    validations:
+      required: false
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: dropdown
+    id: browser
+    attributes:
+      label: Which browser do you use?
+      multiple: true
+      options:
+        - Chrome
+        - Firefox
+        - Safari
+        - Edge
+        - Opera
+        - Other
+    validations:
+      required: true
+  - type: input
+    id: browser-other
+    attributes:
+      label: If other please specify
+    validations:
+      required: false
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,18 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: "[Feature]"
-labels: enhancement
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
-
-**Describe the Feature**
-<!-- A clear and concise description of what you want to happen. -->
-<!-- Add a link to the feature if it is an existing move/ability/etc -->
-
-**Additional context**
-<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,37 @@
+name: Feature Request
+description: Suggest an idea for this project
+title: "[Feature] "
+labels: ["Enhancement"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this feature request!
+  - type: textarea
+    id: relation
+    attributes:
+      label: Is your feature request related to a problem? Please describe.
+      description: Clear and concise description of what the problem is.
+      placeholder: E.g. "I'm always frustrated when [...]"
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the Feature
+      description: A clear and concise description of what you want to happen. Add a link to the feature if it is an existing move/ability/etc.
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.

.github/pull_request_template.md

@@ -2,15 +2,15 @@
 <!-- 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?
+## 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 -->
 
-## What did change?
+## What are the changes from a developer perspective?
 <!-- Explicitly state what are the changes introduced by the PR -->
 <!-- You can make use of a comparison between what was the state before and after your PR changes -->
 
@@ -25,10 +25,13 @@
 <!-- Do the reviewer need to do something special in order to test your change? -->
 
 ## Checklist
+- [ ] **I'm using `beta` as my base branch**
 - [ ] There is no overlap with another PR?
 - [ ] 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 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?
-  - [ ] Have I provided screenshots/videos of the changes?
+  - [ ] Have I provided screenshots/videos of the changes?

.github/workflows/deploy-beta.yml

@@ -1,8 +1,9 @@
 name: Deploy Beta
 
 on:
-  push: {}
-  pull_request: {}
+  push:
+    branches:
+      - beta
 
 jobs:
   deploy:
@@ -20,7 +21,6 @@ jobs:
         env:
           NODE_ENV: production
       - name: Set up SSH
-        if: github.event_name == 'push' && github.ref_name == github.event.repository.default_branch
         run: |
           mkdir ~/.ssh
           echo "${{ secrets.BETA_SSH_PUBLIC_KEY }}" > ~/.ssh/id_ed25519.pub
@@ -28,6 +28,5 @@ jobs:
           chmod 600 ~/.ssh/*
           ssh-keyscan -H ${{ secrets.BETA_SSH_HOST }} >> ~/.ssh/known_hosts
       - name: Deploy build on server
-        if: github.event_name == 'push' && github.ref_name == github.event.repository.default_branch
         run: | 
           rsync --del --no-times --checksum -vrm dist/* ${{ secrets.BETA_SSH_USER }}@${{ secrets.BETA_SSH_HOST }}:${{ secrets.BETA_DESTINATION_DIR }}

.github/workflows/eslint.yml

@@ -6,9 +6,13 @@ on:
   push:
     branches:
       - main  # Trigger on push events to the main branch
+      - beta # Trigger on push events to the beta branch
   pull_request:
     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

@@ -7,6 +7,9 @@ on:
   pull_request:
     branches:
       - main
+      - beta
+  merge_group:
+    types: [checks_requested]
 
 jobs:
   pages:
@@ -52,7 +55,7 @@ jobs:
         working-directory: ${{env.api-dir}}
         run: |
           cd pokerogue_docs
-          npx typedoc --out /tmp/docs --githubPages false --entryPoints ./src/
+          npm run docs -- --out /tmp/docs --githubPages false --entryPoints ./src/
 
       - name: Commit & Push docs
         if: github.event_name == 'push'

.github/workflows/tests.yml

@@ -6,13 +6,17 @@ on:
   push:
     branches:
       - main  # Trigger on push events to the main branch
+      - beta # Trigger on push events to the beta branch
   pull_request:
     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"
-    name: Run tests  # Human-readable name for the job
+  run-misc-tests:  # Define a job named "run-tests"
+    name: Run misc tests  # Human-readable name for the job
     runs-on: ubuntu-latest  # Specify the latest Ubuntu runner for the job
 
     steps:
@@ -27,5 +31,75 @@ jobs:
       - name: Install Node.js dependencies  # Step to install Node.js dependencies
         run: npm ci  # Use 'npm ci' to install dependencies
 
-      - name: tests  # Step to run tests
-        run: npm run test:silent
+      - name: pre-test # pre-test to check overrides
+        run: npx vitest run --project pre 
+      - name: test misc
+        run: npx vitest --project misc
+
+  run-abilities-tests:
+    name: Run abilities tests
+    runs-on: ubuntu-latest 
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install Node.js dependencies
+        run: npm ci
+      - name: pre-test
+        run: npx vitest run --project pre 
+      - name: test abilities
+        run: npx vitest --project abilities
+
+  run-items-tests:
+    name: Run items tests
+    runs-on: ubuntu-latest 
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install Node.js dependencies
+        run: npm ci
+      - name: pre-test
+        run: npx vitest run --project pre 
+      - name: test items
+        run: npx vitest --project items
+
+  run-moves-tests:
+    name: Run moves tests
+    runs-on: ubuntu-latest 
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install Node.js dependencies
+        run: npm ci
+      - name: pre-test
+        run: npx vitest run --project pre 
+      - name: test moves
+        run: npx vitest --project moves
+
+  run-battle-tests:
+    name: Run battle tests
+    runs-on: ubuntu-latest 
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install Node.js dependencies
+        run: npm ci
+      - name: pre-test
+        run: npx vitest run --project pre 
+      - name: test battle
+        run: npx vitest --project battle

.gitignore

@@ -39,4 +39,5 @@ coverage
 # Local Documentation
 /typedoc
 
-/dependency-graph.svg
+/dependency-graph.svg
+/.vs

README.md

@@ -1,10 +1,10 @@
 <picture><img src="./public/images/logo.png" width="300" alt="PokéRogue"></picture>
 
-PokéRogue is a browser based Pokémon fangame heavily inspired by the roguelite genre. Battle endlessly while gathering stacking items, exploring many different biomes, fighting trainers, bosses, and more! 
+PokéRogue is a browser based Pokémon fangame heavily inspired by the roguelite genre. Battle endlessly while gathering stacking items, exploring many different biomes, fighting trainers, bosses, and more!
 
 # Contributing
 ## 🛠️ Development
-If you have the motivation and experience with Typescript/Javascript (or are willing to learn) please feel free to fork the repository and make pull requests with contributions. If you don't know what to work on but want to help, reference the below **To-Do** section or the **#feature-vote** channel in the discord. 
+If you have the motivation and experience with Typescript/Javascript (or are willing to learn) please feel free to fork the repository and make pull requests with contributions. If you don't know what to work on but want to help, reference the below **To-Do** section or the **#feature-vote** channel in the discord.
 
 ### 💻 Environment Setup
 #### Prerequisites
@@ -17,9 +17,9 @@ If you have the motivation and experience with Typescript/Javascript (or are wil
 2. Run `npm run start:dev` to locally run the project in `localhost:8000`
 
 #### Linting
-We're using ESLint as our common linter and formatter. It will run automatically during the pre-commit hook but if you would like to manually run it, use the `npm run eslint` script. 
+We're using ESLint as our common linter and formatter. It will run automatically during the pre-commit hook but if you would like to manually run it, use the `npm run eslint` script.
 
-### ❔ FAQ 
+### ❔ FAQ
 
 **How do I test a new _______?**
 - In the `src/overrides.ts` file there are overrides for most values you'll need to change for testing
@@ -53,9 +53,11 @@ 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)
+  - Andr06 (Custom Slum and Sea biome music)
 
 ### 🎵 Sound Effects
   - Pokémon Emerald
@@ -80,6 +82,7 @@ Check out [Github Issues](https://github.com/pagefaultgames/pokerogue/issues) to
   - kyledove
   - Brumirage
   - pkmn_realidea (Paid Commissions)
+  - IceJkai 
 
 ### 🎨 Trainer Portraits
   - pkmn_realidea (Paid Commissions)
@@ -111,6 +114,7 @@ Check out [Github Issues](https://github.com/pagefaultgames/pokerogue/issues) to
   - mangalos810
   - Involuntary-Twitch
   - selstar
+  - koda_want_to_sleep
 
 ### 🎨 Move Animations
   - Pokémon Reborn

create-test-boilerplate.js

@@ -0,0 +1,105 @@
+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", "ability",
+ * or "item".
+ * @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", "ability", or "item") 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 if (type === "item") {
+    dir = path.join(__dirname, 'src', 'test', 'items');
+    description = `Items - ${formattedName}`;
+} else {
+    console.error('Invalid type. Please use "move", "ability", or "item".');
+    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

@@ -0,0 +1,224 @@
+# EnemyCommandPhase: How Enemy Pokémon Decide What to Do
+
+## Step 1: Should the Enemy Pokémon Switch?
+
+When battling an enemy Trainer, the first decision the enemy needs to make is whether or not to switch an active Pokémon with another Pokémon in their party. This decision is primarily made by comparing **matchup scores** between each Pokémon in the enemy's party.
+
+### Calculating Matchup Scores
+
+The core function for matchup score calculation can be found in `src/field/pokemon.ts`, within the `Pokemon` class:
+
+```ts
+getMatchupScore(pokemon: Pokemon): number;
+```
+
+This computes the source Pokémon's matchup score against the Pokémon passed by argument using the formula
+
+$$\text{MUScore} = (\text{atkScore}+\text{defScore}) * \text{hpDiffRatio} $$
+
+where
+- $\text{atkScore}$ is the combined effectiveness of the source Pokémon's types against the opposing Pokémon's defensive typing: $\prod_{\text{types}} \text{typeEffectiveness}(\text{type}, \text{oppPokemon})$. $\text{typeEffectiveness}$ is 1 when the type deals neutral damage to the opposing Pokémon's defensive typing, 2 when the type deals super effective damage, and so on. $atkScore$ is also increased by 25 percent if the source Pokémon has a higher Speed stat than the opposing Pokémon.
+- $\text{defScore}$ is the inverse of the opposing Pokémon's $\text{atkScore}$ against the source Pokémon's defensive typing, or $(\prod_{\text{types}} \text{typeEffectiveness}(\text{type}, \text{sourcePokemon}))^{-1}$. Unlike $\text{atkScore}$, $\text{defScore}$ is capped at a maximum score of 4.
+- $\text{hpDiffRatio}= \text{sourceHpRatio}-\text{oppHpRatio}+1$. This is further multiplied by 1.5 if the source Pokémon has a higher Speed stat than the opposing Pokémon; however, $\text{hpDiffRatio}$ cannot be higher than 1.
+
+The maximum possible matchup score a Pokémon could have against a single opponent is $(16+16)\times 2=64$, which occurs when
+- the Pokémon hits its opponent for 4x super effective damage with both of its types.
+- the Pokémon is immune to or resists both of the opponent's types by 4x.
+- the Pokémon is at max HP while the opponent's HP ratio is near zero.
+
+In most situations, though, a Pokémon's matchup score against an opponent will be at most 16, which is equivalent to having two super effective types and resisting both of the opponent's types with the same HP ratios as before.
+
+The minimum possible matchup score a Pokémon could have against a single opponent is near zero, which occurs when the Pokémon's HP ratio is near zero while the opponent is at max HP. However, a Pokémon's matchup score can also be very low when its type(s) are 4x weak to and/or resisted by its opponent's types.
+
+### Determining Switches in EnemyCommandPhase
+
+The `EnemyCommandPhase` follows this process to determine whether or not an enemy Pokémon should switch on each turn during a Trainer battle.
+
+1. If the Pokémon has a move already queued (e.g. they are recharging after using Hyper Beam), or they are trapped (e.g. by Bind or Arena Trap), skip to resolving a `FIGHT` command (see next section).
+2. For each Pokémon in the enemy's party, [compute their matchup scores](#calculating-matchup-scores) against the active player Pokémon. If there are two active player Pokémon in the battle, add their matchup scores together.
+3. Take the party member with the highest matchup score and apply a multiplier to the score that reduces the score based on how frequently the enemy trainer has switched Pokémon in the current battle.
+   - The multiplier scales off of a counter that increments when the enemy trainer chooses to switch a Pokémon and decrements when they choose to use a move.
+4. Compare the result of Step 3 with the active enemy Pokémon's matchup score. If the party member's matchup score is at least three times that of the active Pokémon, switch to that party member.
+   - "Boss" trainers only require the party member's matchup score to be at least two times that of the active Pokémon, so they are more likely to switch than other trainers. The full list of boss trainers in the game is as follows:
+     - All gym leaders, Elite 4 members, and Champions
+     - All Evil Team leaders
+     - The last three Rival Fights (on waves 95, 145, and 195)
+5. If the enemy decided to switch, send a switch `turnCommand` and end this `EnemyCommandPhase`; otherwise, move on to resolving a `FIGHT` enemy command.
+
+## Step 2: Selecting a Move
+
+At this point, the enemy (a wild or trainer Pokémon) has decided against switching and instead will use a move from its moveset. However, it still needs to figure out which move to use and, if applicable, which target to use the move against. The logic for determining an enemy's next move and target is contained within two methods: `EnemyPokemon.getNextMove()` and `EnemyPokemon.getNextTargets()` in `src/field/pokemon.ts`.
+
+### Choosing a Move with `getNextMove()`
+
+In `getNextMove()`, the enemy Pokémon chooses a move to use in the following steps:
+1. If the Pokémon has a move in its Move Queue (e.g. the second turn of a charging move), and the queued move is still usable, use that move against the given target.
+2. Filter out any moves it can't use within its moveset. The remaining moves make up the enemy's **move pool** for the turn.
+   1. A move can be unusable if it has no PP left or it has been disabled by another move or effect
+   2. If the enemy's move pool is empty, use Struggle.
+3. Calculate the **move score** of each move in the enemy's move pool.
+   1. A move's move score is equivalent to the move's maximum **target score** among all of the move's possible targets on the field ([more on this later](#calculating-move-and-target-scores)).
+   2. A move's move score is set to -20 if at least one of these conditions are met:
+      - The move is unimplemented (or, more precisely, the move's name ends with " (N)").
+      - Conditions for the move to succeed are not met (unless the move is Sucker Punch, Upper Hand, or Thunderclap, as those moves' conditions can't be resolved before the turn starts).
+      - The move's target scores are 0 or `NaN` for each target. In this case, the game assumes the target score calculation for that move is unimplemented.
+4. Sort the move pool in descending order of move scores.
+5. From here, the enemy's move selection varies based on its `aiType`. If the enemy is a Boss Pokémon or has a Trainer, it uses the `SMART` AI type; otherwise, it uses the `SMART_RANDOM` AI type.
+   1. Let $m_i$ be the *i*-th move in the sorted move pool $M$:
+      - If `aiType === SMART_RANDOM`, the enemy has a 5/8 chance of selecting $m_0$ and a 3/8 chance of advancing to the next best move $m_1$, where it then repeats this roll. This process stops when a move is selected or the last move in the move pool is reached.
+      - If `aiType === SMART`, a similar loop is used to decide between selecting the move $m_i$ and advancing to the next iteration with the move $m_{i+1}$. However, instead of using a flat probability, the following conditions need to be met to advance from selecting $m_i$ to $m_{i+1}$:
+        - $\text{sign}(s_i) = \text{sign}(s_{i+1})$, where $s_i$ is the move score of $m_i$.
+        - $\text{randInt}(0, 100) < \text{round}(\frac{s_{i+1}}{s_i}\times 50)$. In other words: if the scores of $m_i$ and $m_{i+1}$ have the same sign, the chance to advance to the next iteration with $m_{i+1}$ is proportional to how close the scores are to each other. The probability to advance to the next iteration is at most 50 percent (when $s_i$ and $s_{i+1}$ are equal).
+6. The enemy will use the move selected in Step 5 against the target(s) with the highest [**target selection score (TSS)**](#choosing-targets-with-getnexttargets)
+
+### Calculating Move and Target Scores
+
+As part of the move selection process, the enemy Pokémon must compute a **target score (TS)** for each legal target for each move in its move pool. The base target score for all moves is a combination of the move's **user benefit score (UBS)** and **target benefit score (TBS)**.
+
+![equation](https://latex.codecogs.com/png.image?%5Cinline%20%5Cdpi%7B100%7D%5Cbg%7Bwhite%7D%5Ctext%7BTS%7D=%5Ctext%7BUBS%7D&plus;%5Ctext%7BTBS%7D%5Ctimes%5Cleft%5C%7B%5Cbegin%7Bmatrix%7D-1&%5Ctext%7Bif%20target%20is%20an%20opponent%7D%5C%5C1&%5Ctext%7Botherwise%7D%5C%5C%5Cend%7Bmatrix%7D%5Cright.)
+
+A move's UBS and TBS are computed with the respective functions in the `Move` class:
+
+```ts
+getUserBenefitScore(user: Pokemon, target: Pokemon, move: Move): integer;
+getTargetBenefitScore(user: Pokemon, target: Pokemon, move: Move): integer;
+```
+
+Logically, these functions are very similar &ndash; they add up their respective benefit scores from each of the move's attributes (as determined by `attr.getUserBenefitScore`, and `attr.getTargetBenefitScore`, respectively) and return the total benefit score. However, there are two key functional differences in how the UBS and TBS of a move are handled:
+1. In addition to influencing move selection, a move's TBS also influences target selection for that move, whereas UBS has no influence.
+2. When evaluating the target score of a move against an opposing Pokémon, the move's TBS is multiplied by -1, whereas the move's UBS does not change. For this reason, move attributes return negative values for their TBS to reward using the move against an enemy.
+
+#### Calculating Target Benefit Score (TBS) for Attack Moves
+
+In addition to the base score from `Move.getTargetBenefitScore()`, attack moves calculate an `attackScore` which influences the move's TBS based on the following properties:
+- The move's power (after the move's `VariablePowerAttrs` are applied)
+- The move's type effectiveness against the target (note that this also accounts for type immunities from abilities such as Levitate and field effects such as Strong Winds).
+- The move's category (Physical/Special), and whether the user has a higher Attack or Special Attack stat.
+
+More specifically, the following steps are taken to compute the move's `attackScore`:
+1. Compute a multiplier based on the move's type effectiveness: 
+
+   ![typeMultEqn](https://latex.codecogs.com/png.image?%5Cdpi%7B110%7D%5Cbg%7Bwhite%7D%5Ctext%7BtypeMult%7D=%5Cleft%5C%7B%5Cbegin%7Bmatrix%7D2&&%5Ctext%7Bif%20move%20is%20super%20effective(or%20better)%7D%5C%5C-2&&%5Ctext%7Botherwise%7D%5C%5C%5Cend%7Bmatrix%7D%5Cright.)
+2. Compute a multiplier based on the move's category and the user's offensive stats:
+   1. Compute the user's offensive stat ratio:
+      
+      ![statRatioEqn](https://latex.codecogs.com/png.image?%5Cinline%20%5Cdpi%7B100%7D%5Cbg%7Bwhite%7D%5Ctext%7BstatRatio%7D=%5Cleft%5C%7B%5Cbegin%7Bmatrix%7D%5Cfrac%7B%5Ctext%7BuserSpAtk%7D%7D%7B%5Ctext%7BuserAtk%7D%7D&%5Ctext%7Bif%20move%20is%20physical%7D%5C%5C%5Cfrac%7B%5Ctext%7BuserAtk%7D%7D%7B%5Ctext%7BuserSpAtk%7D%7D&%5Ctext%7Botherwise%7D%5C%5C%5Cend%7Bmatrix%7D%5Cright.)
+   2. Compute the stat-based multiplier:
+
+      ![statMultEqn](https://latex.codecogs.com/png.image?%5Cinline%20%5Cdpi%7B100%7D%5Cbg%7Bwhite%7D%5Ctext%7BstatMult%7D=%5Cleft%5C%7B%5Cbegin%7Bmatrix%7D2&%5Ctext%7Bif%20statRatio%7D%5Cle%200.75%5C%5C1.5&%5Ctext%7Bif%5C;%7D0.75%5Cle%5Ctext%7BstatRatio%7D%5Cle%200.875%5C%5C1&%5Ctext%7Botherwise%7D%5C%5C%5Cend%7Bmatrix%7D%5Cright.)
+3. Calculate the move's `attackScore`:
+
+   $\text{attackScore} = (\text{typeMult}\times \text{statMult})+\lfloor \frac{\text{power}}{5} \rfloor$
+
+The maximum total multiplier in `attackScore` ($\text{typeMult}\times \text{statMult}$) is 4, which occurs for attacks that are super effective against the target and are categorically aligned with the user's offensive stats (e.g. the move is physical, and the user has much higher Attack than Sp. Atk). The minimum total multiplier of -4 occurs (somewhat confusingly) for attacks that are not super effective but are categorically aligned with the user's offensive stats.
+
+The attack move's total TBS, then, is $\text{TBS}=\text{baseScore}-\text{attackScore}$, where $\text{baseScore}$ is the result of `Move.getTargetBenefitScore()`.
+
+#### Calculating Target Score (TS) for Attack Moves
+
+The final step to calculate an attack move's target score (TS) is to multiply the base target score by the move's type effectiveness and STAB (if it applies):
+- If the target is an enemy, the corresponding TS is multiplied by the move's type effectiveness against the enemy (e.g. 2 if the move is super effective), then by 1.5 if the move shares a type with the user.
+- If the target is an ally, the TS is divided by these factors instead.
+- If $\text{TS}=0$ after these multipliers are applied, the TS is set to -20 for the current target.
+
+### Choosing Targets with `getNextTargets()`
+
+The enemy's target selection for single-target moves works in a very similar way to its move selection. Each potential target is given a **target selection score (TSS)** which is based on the move's [target benefit score](#calculating-move-and-target-scores) for that target:
+
+![TSSEqn](https://latex.codecogs.com/png.image?%5Cinline%20%5Cdpi%7B100%7D%5Cbg%7Bwhite%7D%5Ctext%7BTSS%7D=%5Ctext%7BTBS%7D%5Ctimes%5Cleft%5C%7B%5Cbegin%7Bmatrix%7D-1&%5Ctext%7Bif%20target%20is%20an%20opponent%7D%5C%5C1&%5Ctext%7Botherwise%7D%5C%5C%5Cend%7Bmatrix%7D%5Cright.)
+
+Once the TSS is calculated for each target, the target is selected as follows:
+1. Sort the targets (indexes) in decreasing order of their target selection scores (or weights). Let $t_i$ be the index of the *i*-th target in the sorted list, and let $w_i$ be that target's corresponding TSS.
+2. Normalize the weights. Let $w_n$ be the lowest-weighted target in the sorted list, then:
+   
+   ![normWeightEqn](https://latex.codecogs.com/png.image?%5Cinline%20%5Cdpi%7B100%7D%5Cbg%7Bwhite%7DW_i=%5Cleft%5C%7B%5Cbegin%7Bmatrix%7Dw_i&plus;%7Cw_n%7C&%5Ctext%7Bif%5C;%7Dw_n%5C;%5Ctext%7Bis%20negative%7D%5C%5Cw_i&%5Ctext%7Botherwise%7D%5C%5C%5Cend%7Bmatrix%7D%5Cright.)
+3. Remove all weights from the list such that $W_i < \frac{W_0}{2}$
+4. Generate a random integer $R=\text{rand}(0, W_{\text{total}})$ where $W_{\text{total}}$ is the sum of all the remaining weights after Step 3.
+5. For each target $(t_i, W_i)$,
+   1. if $R \le \sum_{j=0}^{i} W_i$, or if $t_i$ is the last target in the list, **return** $t_i$
+   2. otherwise, advance to the next target $t_{i+1}$ and repeat this check.
+
+Once the target is selected, the enemy has successfully determined its next action for the turn, and its corresponding `EnemyCommandPhase` ends. From here, the `TurnStartPhase` processes the enemy's commands alongside the player's commands and begins to resolve the turn.
+
+## An Example in Battle
+
+Suppose you enter a single battle against an enemy trainer with the following Pokémon in their party:
+
+1. An [Excadrill](https://bulbapedia.bulbagarden.net/wiki/Excadrill_(Pok%C3%A9mon)) with the Ability Sand Force and the following moveset
+   1. Earthquake
+   2. Iron Head
+   3. Crush Claw
+   4. Swords Dance
+2. A [Heatmor](https://bulbapedia.bulbagarden.net/wiki/Heatmor_(Pok%C3%A9mon)) with the Ability Flash Fire and the following moveset
+   1. Fire Lash
+   2. Inferno
+   3. Hone Claws
+   4. Shadow Claw
+
+The enemy trainer leads with their Heatmor, and you lead with a [Dachsbun](https://bulbapedia.bulbagarden.net/wiki/Dachsbun_(Pok%C3%A9mon)) with the Ability Well-Baked Body. We'll cover the enemy's behavior over the next two turns.
+
+### Turn 1
+
+To determine whether the enemy should switch Pokémon, it first calculates each party member's matchup scores against the player's Dachsbun:
+
+$$\text{MUScore} = (\text{atkScore}+\text{defScore}) * \text{hpDiffRatio} $$
+- Defensively, Heatmor's Fire typing resists Dachsbun's Fairy typing, so its `defScore` is 2. However, because of Dachsbun's Fire immunity granted by Well-Baked Body, Heatmor's `atkScore` against Dachsbun is 0. With both Pokémon at maximum HP, Heatmor's total matchup score is 2.
+- Excadrill's Steel typing also resists Fairy, so its `defScore` is also 2. In this case, though, Steel is also super effective against Fairy, so Excadrill's base `atkScore` is 2. If Excadrill outspeeds Dachsbun (possibly due to it having a +Spd nature or holding a Carbos), its `atkScore` is further increased to 2.5. Since both Pokémon are at maximum HP, Excadrill's total matchup score is 4 (or 4.5 if it outspeeds).
+
+Based on the enemy party's matchup scores, whether or not the trainer switches out Heatmor for Excadrill depends on the trainer's type. The difference in matchup scores is enough to cause a switch to Excadrill for boss trainers (e.g. gym leaders) but not for regular trainers. For this example, we'll assume the trainer is a boss and, therefore, decides to switch to Excadrill on this turn.
+
+### Turn 2
+
+Now that the enemy Pokémon with the best matchup score is on the field (assuming it survives Dachsbun's attack on the last turn), the enemy will now decide to have Excadrill use one of its moves. Assuming all of its moves are usable, we'll go through the target score calculations for each move:
+
+- **Earthquake**: In a single battle, this move is just a 100-power Ground-type physical attack with no additional effects. With no additional benefit score from attributes, the move's base target score against the player's Dachsbun is just the `attackScore` from `AttackMove.getTargetBenefitScore()`. In this case, Earthquake's `attackScore` is given by
+  
+  $\text{attackScore}=(\text{typeMult}\times \text{statMult}) + \lfloor \frac{\text{power}}{5} \rfloor = -2\times 2 + 20 = 16$
+
+  Here, `typeMult` is -2 because the move is not super effective, and `statMult` is 2 because Excadrill's Attack is significantly higher than its Sp. Atk. Accounting for STAB thanks to Excadrill's typing, the final target score for this move is **24**
+
+- **Iron Head**: This move is an 80-power Steel-type physical attack with an additional chance to cause the target to flinch. With these properties, Iron Head has a user benefit score of 0 and a target benefit score given by
+  
+  $\text{TBS}=\text{getTargetBenefitScore(FlinchAttr)}-\text{attackScore}$
+
+  Under its current implementation, the target benefit score of `FlinchAttr` is -5. Calculating the move's `attackScore`, we get:
+
+  $\text{attackScore}=(\text{typeMult}\times \text{statMult}) + \lfloor \frac{\text{power}}{5} \rfloor = 2\times 2 + 16 = 20$
+
+  Note that `typeMult` in this case is 2 because Iron Head is super effective (or better) against Dachsbun. With the move's UBS at 0, the base target score calculation against Dachsbun simplifies to
+
+  $\text{TS}=-\text{TBS}=-(-5-20)=25$
+
+  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 `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 `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(StatStageChangeAttr)}-\text{attackScore}$
+
+  $\text{TBS}=(-4 + 2)-(-2\times 2 + \lfloor \frac{75}{5} \rfloor)=-2-11=-13$
+
+  $\text{TS}=-\text{TBS}=13$
+
+  This move is neutral against Dachsbun and isn't boosted by STAB from Excadrill, so we don't need to apply any extra multipliers. The final score for this move is **13**.
+
+We now have a sorted move pool in decreasing order of move scores:
+1. Iron Head (**75**)
+2. Earthquake (**24**)
+3. Crush Claw (**13**)
+4. Swords Dance (**6**)
+
+Since no other score is at least half that of Iron Head's score, the enemy AI automatically chooses to use Iron Head against Dachsbun at this point.
+
+## Guidelines for Implementing Benefit Scores
+
+When implementing a new move attribute, it's important to override `MoveAttr`'s `getUserBenefitScore` and `getTargetBenefitScore` functions to ensure that the enemy AI can accurately determine when and how to use moves with that attribute. Here are a few basic specifications you should adhere to when implementing benefit scores for a new attribute:
+- A move's **user benefit score (UBS)** incentivizes (or discourages) the move's usage in general. A positive UBS gives the move more incentive to be used, while a negative UBS gives the move less incentive.
+- A move's **target benefit score (TBS)** incentivizes (or discourages) the move's usage on a specific target. A positive TBS indicates the move is better used on the user or its allies, while a negative TBS indicates the move is better used on enemies.
+- **The total benefit score (UBS + TBS) of a move should never be 0.** The move selection algorithm assumes the move's benefit score is unimplemented if the total score is 0 and penalizes the move's usage as a result. With status moves especially, it's important to have some form of implementation among the move's attributes to avoid this scenario.
+- **Score functions that use formulas should include comments.** If your attribute requires complex logic or formulas to calculate benefit scores, please add comments to explain how the logic works and its intended effect on the enemy's decision making.

eslint.config.js

@@ -1,6 +1,7 @@
 import tseslint from '@typescript-eslint/eslint-plugin';
+import stylisticTs from '@stylistic/eslint-plugin-ts'
 import parser from '@typescript-eslint/parser';
-import imports from 'eslint-plugin-import';
+// import imports from 'eslint-plugin-import'; // Disabled due to not being compatible with eslint v9
 
 export default [ 
     {
@@ -10,7 +11,8 @@ export default [
             parser: parser
         },
         plugins: {
-            imports: imports.configs.recommended,
+            // imports: imports.configs.recommended // Disabled due to not being compatible with eslint v9
+            '@stylistic/ts': stylisticTs,
             '@typescript-eslint': tseslint
         },
         rules: {
@@ -25,18 +27,19 @@ export default [
                 "ignoreRestSiblings": true // Allows unused variables that are part of a rest property in object destructuring. Useful for excluding certain properties from an object while using the rest.
             }],
             "eol-last": ["error", "always"], // Enforces at least one newline at the end of files
-            "@typescript-eslint/semi": ["error", "always"], // Requires semicolons for TypeScript-specific syntax
+            "@stylistic/ts/semi": ["error", "always"], // Requires semicolons for TypeScript-specific syntax
             "semi": "off", // Disables the general semi rule for TypeScript files
             "no-extra-semi": ["error"], // Disallows unnecessary semicolons for TypeScript-specific syntax
             "brace-style": "off", // Note: you must disable the base rule as it can report incorrect errors
             "curly": ["error", "all"], // Enforces the use of curly braces for all control statements
-            "@typescript-eslint/brace-style": ["error", "1tbs"],
+            "@stylistic/ts/brace-style": ["error", "1tbs"],
             "no-trailing-spaces": ["error", { // Disallows trailing whitespace at the end of lines
                 "skipBlankLines": false, // Enforces the rule even on blank lines
                 "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 {
@@ -19,9 +11,18 @@ html {
 
 body {
   margin: 0;
+  display:flex;
+  flex-direction: column;
+  align-items: center;
   background: #484050;
 }
 
+@media (display-mode: fullscreen) {
+  body {
+    background: #000000;
+  }
+}
+
 #app {
   display: flex;
   justify-content: center;
@@ -31,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) {
-  #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 {
@@ -66,114 +215,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;
@@ -195,6 +314,17 @@ input:-internal-autofill-selected {
   }
 }
 
+#tnc-links {
+  font-size: xx-small;
+  position: relative;
+}
+
+a {
+  color: #328cea;
+  margin-right: 4px;
+  margin-left: 4px;
+}
+
 /* Firefox old*/
 @-moz-keyframes blink {
     0% {

index.html

@@ -63,59 +63,88 @@
 <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>
 	<script type="module" src="./src/main.ts"></script>
 	<script src="./src/touch-controls.ts" type="module"></script>
 	<script src="./src/debug.js" type="module"></script>
 </body>
-
 </html>

lefthook.yml

@@ -2,6 +2,15 @@ pre-commit:
   parallel: true
   commands:
     eslint:
-      glob: '*.{js,jsx,ts,tsx}'
+      glob: "*.{js,jsx,ts,tsx}"
       run: npx eslint --fix {staged_files}
-      stage_fixed: true
+      stage_fixed: true
+      skip:
+        - merge
+        - rebase
+
+pre-push:
+  commands:
+    eslint:
+      glob: "*.{js,ts,jsx,tsx}"
+      run: npx eslint --fix {push_files}

package.json

@@ -9,46 +9,43 @@
 		"build": "vite build",
 		"build:beta": "vite build --mode beta",
 		"preview": "vite preview",
-		"test": "vitest run",
-		"test:cov": "vitest run --coverage",
-		"test:watch": "vitest watch --coverage",
-		"test:silent": "vitest run --silent",
+		"test": "vitest run --project pre && vitest run --project main",
+		"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",
+		"@hpcc-js/wasm": "^2.18.0",
+		"@stylistic/eslint-plugin-ts": "^2.6.0-beta.0",
+		"@types/jsdom": "^21.1.7",
 		"@types/node": "^20.12.13",
-		"@typescript-eslint/eslint-plugin": "^7.10.0",
-		"@typescript-eslint/parser": "^7.10.0",
-		"@vitest/coverage-istanbul": "^1.4.0",
-		"axios": "^1.6.2",
-		"axios-cache-interceptor": "^1.3.2",
-		"eslint": "^8.57.0",
-		"eslint-plugin-import": "^2.29.1",
+		"@typescript-eslint/eslint-plugin": "^8.0.0-alpha.54",
+		"@typescript-eslint/parser": "^8.0.0-alpha.54",
+		"@vitest/coverage-istanbul": "^2.0.4",
+		"dependency-cruiser": "^16.3.10",
+		"eslint": "^9.7.0",
 		"jsdom": "^24.0.0",
-		"json-beautify": "^1.1.1",
 		"lefthook": "^1.6.12",
 		"phaser3spectorjs": "^0.0.8",
-		"pokenode-ts": "^1.20.0",
-		"typedoc": "^0.25.13",
-		"typescript": "^5.4.5",
-		"typescript-eslint": "^7.10.0",
-		"vite": "^4.5.0",
-		"vite-plugin-fs": "^0.4.4",
+		"typedoc": "^0.26.4",
+		"typescript": "^5.5.3",
+		"typescript-eslint": "^8.0.0-alpha.54",
+		"vite": "^5.3.5",
 		"vite-tsconfig-paths": "^4.3.2",
-		"vitest": "^1.4.0",
+		"vitest": "^2.0.4",
 		"vitest-canvas-mock": "^0.3.3"
 	},
 	"dependencies": {
-		"@hpcc-js/wasm": "^2.16.2",
 		"@material/material-color-utilities": "^0.2.7",
-		"@types/jsdom": "^21.1.7",
 		"crypto-js": "^4.2.0",
-		"dependency-cruiser": "^16.3.3",
 		"i18next": "^23.11.1",
 		"i18next-browser-languagedetector": "^7.2.1",
 		"i18next-korean-postposition-processor": "^1.0.0",