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

.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

.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

.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

.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,12 +25,9 @@
 <!-- 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?

.github/workflows/deploy-beta.yml

@@ -1,9 +1,8 @@
 name: Deploy Beta
 
 on:
-  push:
+  push: {}
-    branches:
+  pull_request: {}
-      - beta
 
 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
 

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

.gitignore

@@ -40,4 +40,3 @@ coverage
 /typedoc
 
 /dependency-graph.svg
-/.vs

README.md

@@ -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)
+  - Firel (Custom Laboratory, Metropolis, Seabed, and Space biome music)
-  - Lmz (Custom Ancient Ruins, Jungle, and Lake biome music)
+  - Lmz (Custom Jungle biome music)
-  - Andr06 (Custom Slum and Sea 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,
+            imports: imports.configs.recommended,
-            '@stylistic/ts': stylisticTs,
             '@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
+            "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
         }
     }
 ]

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;
+  transform-origin: top !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;
 }
 
 /* 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 {
+#dpad, #apad {
-  opacity: var(--touch-control-opacity);
-}
-
-.control-group {
   position: fixed;
-  display: flex;
+  bottom: 1rem;
-  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);
 }
 
-#configToolbar .button:active {
+@media (orientation: portrait) {
-  opacity: var(--touch-control-opacity)
+  #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;
+  left: 1rem;
-  opacity: 0.8;
+}
+
+#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 {
+#apad > * {
-  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-small {
+#apad .apadBtn {
-  width: var(--small-control-size);
+  width: var(--controls-size);
-  height: var(--small-control-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 {
+#apad .apadLabelSmall {
-  font-size: var(--small-control-size);
+  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);
+  padding-right: 10%;
-  height: var(--small-control-size);
+  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 {
+#apad .apadSqBtn {
-  width: var(--small-control-size);
+  border-radius: 10%;
-  height: var(--small-control-size);
+  width: calc(var(--controls-size) * 0.3);
+  height: calc(var(--controls-size) * 0.3);
 }
 
-.apad-circle {
+#apad .apadBtnContainer {
-  width: var(--controls-size);
+  position: relative;
-  height: var(--controls-size);
+  display: flex;
-  border-radius: 50%;
 }
 
-/* Defaults:*/
+#apad .apadRectBtnContainer {
-
+  flex-wrap: wrap;
-#control-group-dpad {
+  margin-top: calc(var(--controls-size) * -0.8);
-  left: var(--controls-padding);
+  left: calc(var(--controls-size) * 0.175);
-  bottom: var(--controls-padding);
+  height: calc(var(--controls-size) * 0.8);
 }
 
-#control-group-action {
+#apad .apadSqBtnContainer {
-  right: var(--controls-padding);
+  flex-wrap: wrap;
-  bottom: var(--controls-size-with-padding);
+  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 {
+#apad .apadRectBtnContainer > #apadMenu {
-  right: var(--controls-size-with-wide-padding);
+  align-self: flex-end;
-  bottom: var(--controls-padding);
 }
 
-#control-group-extra-1 {
+#apad .apadRectBtnContainer > .apadSqBtn:not(:first-child) {
-  right: var(--control-group-extra-1-offset);
+  margin-left: 10%;
-  bottom: var(--control-group-extra-1-offset);
 }
 
-#control-group-extra-2 {
+#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode='SETTINGS']):not([data-ui-mode='SETTINGS_DISPLAY']):not([data-ui-mode='SETTINGS_AUDIO']):not([data-ui-mode='SETTINGS_GAMEPAD']):not([data-ui-mode='SETTINGS_KEYBOARD']) #apad .apadRectBtnContainer > .apadSqBtn:not(.apadBattle),
-  width: var(--control-group-extra-wide-size);
+#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode='SETTINGS']):not([data-ui-mode='SETTINGS_DISPLAY']):not([data-ui-mode='SETTINGS_AUDIO']):not([data-ui-mode='SETTINGS_GAMEPAD']):not([data-ui-mode='SETTINGS_KEYBOARD']) #apad .apadSqBtnContainer > .apadSqBtn:not(.apadBattle)
-  right: var(--control-group-extra-2-offset);
+{
-  bottom: var(--control-group-extra-2-offset);
+  display: none;
 }
 
-/* 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="dpad" class="unselectable">
-			<div id="control-group-dpad" class="control-group control-group-dpad">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
-				<div id="dpad" data-control-key="DPAD">
+				<path id="dpadUp" data-key="UP" d="M48,5.8C48,2.5,45.4,0,42,0H29.9C26.6,0,24,2.4,24,5.8V24h24V5.8z" />
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
+				<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="dpadUp" data-key="UP"
+				<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" />
-							d="M48,5.8C48,2.5,45.4,0,42,0H29.9C26.6,0,24,2.4,24,5.8V24h24V5.8z" />
+				<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" />
-						<path id="dpadRight" data-key="RIGHT"
+				<rect id="dpadCenter" x="24" y="24" width="24" height="24" />
-							d="M66.2,24H48v24h18.2c3.3,0,5.8-2.7,5.8-6V29.9C72,26.5,69.5,24,66.2,24z" />
+			</svg>
-						<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 class="right">
+		<div id="apad" class="unselectable">
-			<div id="control-group-action" class="control-group">
+			<div id="apadAction" class="apadCircBtn apadBtn" data-key="ACTION">
-				<div id="apadAction" class="apad-button apad-circle" data-key="ACTION">
+				<text id="apadLabelAction" class="apadLabel">A</text>
-					<span class="apad-label">A</span>
+			</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 class="apadBtnContainer apadSqBtnContainer">
-			<div id="control-group-cancel" class="control-group">
+				<div id="apadCycleForm" class="apadSqBtn apadBtn" data-key="CYCLE_FORM">
-				<div id="apadCancel" class="apad-button apad-circle" data-key="CANCEL">
+					<text class="apadLabel apadLabelSmall">F</text>
-					<span class="apad-label">B</span>
+				</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}

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": "vitest run",
-		"test:cov": "vitest run --project pre && vitest run --project main --coverage",
+		"test:cov": "vitest run --coverage",
-		"test:watch": "vitest run --project pre && vitest watch --project main --coverage",
+		"test:watch": "vitest watch --coverage",
-		"test:silent": "vitest run --project pre && vitest run --project main --silent",
+		"test:silent": "vitest run --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": "^8.0.0-alpha.54",
+		"@typescript-eslint/eslint-plugin": "^7.10.0",
-		"@typescript-eslint/parser": "^8.0.0-alpha.54",
+		"@typescript-eslint/parser": "^7.10.0",
-		"@vitest/coverage-istanbul": "^2.0.4",
+		"@vitest/coverage-istanbul": "^1.4.0",
-		"dependency-cruiser": "^16.3.10",
+		"axios": "^1.6.2",
-		"eslint": "^9.7.0",
+		"axios-cache-interceptor": "^1.3.2",
-		"eslint-plugin-import-x": "^4.2.1",
+		"eslint": "^8.57.0",
-		"inquirer": "^11.0.2",
+		"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",
+		"pokenode-ts": "^1.20.0",
-		"typescript": "^5.5.3",
+		"typedoc": "^0.25.13",
-		"typescript-eslint": "^8.0.0-alpha.54",
+		"typescript": "^5.4.5",
-		"vite": "^5.3.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",