VTS self change

.env

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

.env.beta

@@ -1,6 +1,3 @@
 VITE_BYPASS_LOGIN=0
 VITE_BYPASS_TUTORIAL=0
-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
+VITE_SERVER_URL=https://api.beta.pokerogue.net

.env.development

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

.env.production

@@ -1,6 +1,3 @@
 VITE_BYPASS_LOGIN=0
 VITE_BYPASS_TUTORIAL=0
-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
+VITE_SERVER_URL=https://api.pokerogue.net

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,30 @@
+---
+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/feature_request.md

@@ -0,0 +1,18 @@
+---
+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/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 the user will see?
+## What are the changes?
 <!-- Summarize what are the changes from a user perspective on the application -->
 
-## Why am I making these changes?
+## Why am I doing 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 are the changes from a developer perspective?
+## What did change?
 <!-- 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,13 +25,10 @@
 <!-- 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,9 +1,8 @@
 name: Deploy Beta
 
 on:
-  push:
-    branches:
-      - beta
+  push: {}
+  pull_request: {}
 
 jobs:
   deploy:
@@ -21,6 +20,7 @@ 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,5 +28,6 @@ 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,13 +6,9 @@ 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"
@@ -21,10 +17,10 @@ jobs:
 
     steps:
       - name: Check out Git repository  # Step to check out the repository
-        uses: actions/checkout@v4  # Use the checkout action version 4
+        uses: actions/checkout@v2  # Use the checkout action version 2
 
       - name: Set up Node.js  # Step to set up Node.js environment
-        uses: actions/setup-node@v4  # Use the setup-node action version 4
+        uses: actions/setup-node@v1  # Use the setup-node action version 1
         with:
           node-version: 20  # Specify Node.js version 20
 
@@ -32,4 +28,4 @@ jobs:
         run: npm ci  # Use 'npm ci' to install dependencies
 
       - name: eslint  # Step to run linters
-        run: npm run eslint-ci
+        run: npm run eslint-ci

.github/workflows/github-pages.yml

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

.github/workflows/tests.yml

@@ -6,42 +6,26 @@ 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:
-  pre-test:
-    name: Run Pre-test
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v4
-        with:
-          path: tests-action
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: Install Node.js dependencies
-        working-directory: tests-action
-        run: npm ci
-      - name: Run Pre-test
-        working-directory: tests-action
-        run: npx vitest run --project pre ${{ !runner.debug && '--silent' || '' }}
+  run-tests:  # Define a job named "run-tests"
+    name: Run tests  # Human-readable name for the job
+    runs-on: ubuntu-latest  # Specify the latest Ubuntu runner for the job
 
-  run-tests:
-    name: Run Tests 
-    needs: [pre-test]
-    strategy:
-      matrix:
-        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-    uses: ./.github/workflows/test-shard-template.yml
-    with:
-      project: main
-      shard: ${{ matrix.shard }}
-      totalShards: 10
+    steps:
+      - name: Check out Git repository  # Step to check out the repository
+        uses: actions/checkout@v4  # Use the checkout action version 4
+
+      - name: Set up Node.js  # Step to set up Node.js environment
+        uses: actions/setup-node@v4  # Use the setup-node action version 4
+        with:
+          node-version: 20  # Specify Node.js version 20
+
+      - 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

.gitignore

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

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,11 +53,9 @@ 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 Ice Cave, Laboratory, Metropolis, Plains, Power Plant, Seabed, Space, and Volcano biome music)
-  - Lmz (Custom Ancient Ruins, Jungle, and Lake biome music)
-  - Andr06 (Custom Slum and Sea biome music)
+  - Firel (Custom Laboratory, Metropolis, Seabed, and Space biome music)
+  - Lmz (Custom Jungle biome music)
 
 ### 🎵 Sound Effects
   - Pokémon Emerald
@@ -82,7 +80,6 @@ Check out [Github Issues](https://github.com/pagefaultgames/pokerogue/issues) to
   - kyledove
   - Brumirage
   - pkmn_realidea (Paid Commissions)
-  - IceJkai 
 
 ### 🎨 Trainer Portraits
   - pkmn_realidea (Paid Commissions)
@@ -114,7 +111,6 @@ Check out [Github Issues](https://github.com/pagefaultgames/pokerogue/issues) to
   - mangalos810
   - Involuntary-Twitch
   - selstar
-  - koda_want_to_sleep
 
 ### 🎨 Move Animations
   - Pokémon Reborn

eslint.config.js

@@ -1,7 +1,6 @@
 import tseslint from '@typescript-eslint/eslint-plugin';
-import stylisticTs from '@stylistic/eslint-plugin-ts'
 import parser from '@typescript-eslint/parser';
-import importX from 'eslint-plugin-import-x';
+import imports from 'eslint-plugin-import';
 
 export default [ 
     {
@@ -11,8 +10,7 @@ export default [
             parser: parser
         },
         plugins: {
-            "import-x": importX,
-            '@stylistic/ts': stylisticTs,
+            imports: imports.configs.recommended,
             '@typescript-eslint': tseslint
         },
         rules: {
@@ -27,20 +25,18 @@ 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
-            "@stylistic/ts/semi": ["error", "always"], // Requires semicolons for TypeScript-specific syntax
+            "@typescript-eslint/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
-            "@stylistic/ts/brace-style": ["error", "1tbs"],
+            "@typescript-eslint/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
-            "comma-spacing": ["error", { "before": false, "after": true }], // Enforces spacing after comma
-            "import-x/extensions": ["error", "never", { "json": "always" }], // Enforces no extension for imports unless json
+            "keyword-spacing": ["error", { "before": true, "after": true }] // Enforces spacing before and after keywords
         }
     }
 ]

index.css

@@ -1,8 +1,16 @@
-/* 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 {
@@ -11,60 +19,16 @@ 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;
-  align-items: center;
 }
 
 #app > div:first-child {
-  transform-origin: center !important;
-}
-
-/*
-  Supports automatic vertical centering as suggested in PR#1114, but only via CSS
-
-  Condition factorized to deduce CSS rules:
-  true if (isLandscape && !isMobile() && !hasTouchscreen() || (hasTouchscreen() && !isTouchControlsEnabled))
-*/
-
-/* isLandscape && !isMobile() && !hasTouchscreen() */
-@media (orientation: landscape) and (pointer: fine) {
-  #app {
-    align-items: center;
-  }
-}
-
-@media (pointer: coarse) {
-  /* hasTouchscreen() && !isTouchControlsEnabled */
-  body:has(> #touchControls[class=visible]) #app {
-    align-items: start;
-  }
-
-  body:has(> #touchControls[class=visible]) #app > div:first-child {
-    transform-origin: top !important;
-  }
-}
-
-#layout:fullscreen #dpad, #layout:fullscreen {
-  bottom: 6rem;
-}
-
-input:-internal-autofill-selected {
-  -webkit-background-clip: text;
-  background-clip: text;
+  transform-origin: top !important;
 }
 
 /* Need adjust input font-size */
@@ -72,167 +36,28 @@ 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;
 }
 
-#touchControls .active {
-  opacity: var(--touch-control-opacity);
-}
-
-.control-group {
+#dpad, #apad {
   position: fixed;
-  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 {
+  bottom: 1rem;
   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);
 }
 
-#configToolbar .button:active {
-  opacity: var(--touch-control-opacity)
+@media (orientation: portrait) {
+  #dpad, #apad {
+    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 {
-  z-index: 3;
-  opacity: 0.8;
+  left: 1rem;
+}
+
+#apad {
+  right: 1rem;
 }
 
 #dpad svg {
@@ -241,84 +66,114 @@ input:-internal-autofill-selected {
   fill: var(--color-base);
 }
 
-/* apad buttons */
+#dpad svg rect {
+  opacity: 0.6;
+}
 
-.apad-button {
-  background-color: var(--color-base);
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  right: 0;
-  bottom: 0;
+#apad > * {
   width: var(--controls-size);
   height: var(--controls-size);
-  opacity: 0.8;
-  border-radius: 8px;
 }
 
-.apad-small {
-  width: var(--small-control-size);
-  height: var(--small-control-size);
+#apad .apadBtn {
+  width: var(--controls-size);
+  height: var(--controls-size);
+  background-color: var(--color-base);
+  border-radius: 50%;
 }
 
-.apad-label {
+#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);
   user-select: none;
-  height: 100%;
-  margin-right: -2px;
 }
 
-.apad-small > .apad-label {
-  font-size: var(--small-control-size);
+#apad .apadLabelSmall {
+  font-size: calc(var(--controls-size) / 3);
   text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3);
 }
 
-.apad-rectangle {
+#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;
   text-align: center;
-  width: var(--rect-control-size);
-  height: var(--small-control-size);
+  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);
 }
 
-.apad-square {
-  width: var(--small-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-circle {
-  width: var(--controls-size);
-  height: var(--controls-size);
-  border-radius: 50%;
+#apad .apadBtnContainer {
+  position: relative;
+  display: flex;
 }
 
-/* Defaults:*/
-
-#control-group-dpad {
-  left: var(--controls-padding);
-  bottom: var(--controls-padding);
+#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);
 }
 
-#control-group-action {
-  right: var(--controls-padding);
-  bottom: var(--controls-size-with-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-cancel {
-  right: var(--controls-size-with-wide-padding);
-  bottom: var(--controls-padding);
+#apad .apadRectBtnContainer > #apadMenu {
+  align-self: flex-end;
 }
 
-#control-group-extra-1 {
-  right: var(--control-group-extra-1-offset);
-  bottom: var(--control-group-extra-1-offset);
+#apad .apadRectBtnContainer > .apadSqBtn:not(:first-child) {
+  margin-left: 10%;
 }
 
-#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='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;
 }
 
-/* Layout */
+#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:fullscreen #dpad, #layout:fullscreen #apad {
   bottom: 6rem;
@@ -340,17 +195,6 @@ 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,88 +63,59 @@
 <body>
 	<div id="app"></div>
 	<div id="touchControls">
-		<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 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>
 
-		<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 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>
 			</div>
-
-			<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 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>
 			</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,15 +2,6 @@ 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
-      skip:
-        - merge
-        - rebase
-
-pre-push:
-  commands:
-    eslint:
-      glob: "*.{js,ts,jsx,tsx}"
-      run: npx eslint --fix {push_files}
+      stage_fixed: true

package.json

@@ -9,46 +9,46 @@
 		"build": "vite build",
 		"build:beta": "vite build --mode beta",
 		"preview": "vite preview",
-		"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",
+		"test": "vitest run",
+		"test:cov": "vitest run --coverage",
+		"test:watch": "vitest watch --coverage",
+		"test:silent": "vitest run --silent",
 		"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",
-		"create-test": "node ./create-test-boilerplate.js"
+		"depcruise:graph": "depcruise src --output-type dot | node dependency-graph.js > dependency-graph.svg"
 	},
 	"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": "^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",
-		"eslint-plugin-import-x": "^4.2.1",
-		"inquirer": "^11.0.2",
+		"@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",
 		"jsdom": "^24.0.0",
+		"json-beautify": "^1.1.1",
 		"lefthook": "^1.6.12",
-		"msw": "^2.4.9",
 		"phaser3spectorjs": "^0.0.8",
-		"typedoc": "^0.26.4",
-		"typescript": "^5.5.3",
-		"typescript-eslint": "^8.0.0-alpha.54",
-		"vite": "^5.3.5",
+		"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",
 		"vite-tsconfig-paths": "^4.3.2",
-		"vitest": "^2.0.4",
+		"vitest": "^1.4.0",
 		"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",