showdex
| Current v1.2.4 | Install on Chrome · Opera · Firefox · Safari | Discuss on Smogon · Discord |
|---|
Showdex is a browser extension for Pokémon Showdown that brings the Damage Calculator you know & love right into your battle! Automatically syncs all Pokémon & field conditions as you play, so you can spend less time shitting brix & more time hitting kicks.
Officially supported on Chrome (+ any native Chromium browser, like Edge & Brave), Opera & Firefox.
༼ つ ಥ_ಥ ༽つ Safari ...?
--- Despite [Apple requiring us to shell out $100/year for the Apple Developer Program](https://developer.apple.com/documentation/safariservices/safari_web_extensions) just to distribute a singular *free* extension on the App Store, thanks to the many generous contributions from the awesome Showdown community over the years, we're now planning on officially supporting Showdex on iOS & macOS in the future! In the meantime, [**Enhanced Tooltips for Showdown**](https://apps.apple.com/us/app/enhanced-tooltips-for-showdown/id1612964050) ([Source on GitHub](https://github.com/cbruegg/Enhanced-Tooltips-for-Showdown)), currently available on the App Store, bundles Showdex along with the [Enhanced Tooltips](https://github.com/rowin1/Pokemon-Showdown-Enhanced-Tooltips) & [Randbats Tooltip](https://github.com/pkmn/randbats) extensions. Note that the bundled Showdex is not officially supported, so questions regarding Showdex running on Safari should be directed towards the maintainer of the aforementioned App Store app, [Christian Brüggemann](https://cbruegg.com/enhanced-tooltips-for-showdown-support) ([Smogon](https://smogon.com/forums/members/cbruegg.585763) · [GitHub](https://github.com/cbruegg)). [Would you like to know more?](https://smogon.com/forums/threads/showdex-an-auto-updating-damage-calculator-built-into-showdown.3707265/post-9368925) | --- | ---Navigation
| Planned Features | Known Bugs |
|---|
| Suggest a Feature | Report a Bug | Contribute/Translate |
|---|
Developer Zone
[!CAUTION] You are about to get in the zone, the developer zone.
If you do not wish to get in the zone, the developer zone, please visit the Smogon Forums post instead.
Developer SparkNotes™
[!NOTE] This section is a work-in-progress.
This extension is written in TypeScript, which is essentially JavaScript on crack, using:
- React for the UI frontend (e.g., Hellodex, Calcdex),
- Redux for global state management (e.g., Calcdex state),
- RTK Query for global data management (e.g., downloaded Smogon sets),
- Babel for TypeScript transpilation (in lieu of
tsc), - ESLint for suggestive code linting, and
- webpack for chunking & bundling.
How It's Made™
---
> [!NOTE]
> More information coming soon!
[uhhhhhhhhh](https://youtube.com/watch?v=GcSfbaac9eg&t=29s)
---
Requirements
[!IMPORTANT] Due to the removal of
--experimental-specifier-resolution=nodestarting innodev19, v18 is required (i.e.,^18.0.0) to build this project. Use something likenvmto install v18 (nvm install lts/hydrogen) alongside your currentnodeinstallation.
nodeLTS Hydrogen v18yarnClassic v1.22.0+bash(Windows WSL, macOS, or Linux)
① Setup
[!TIP] If your browser is already configured for extension development, you can skip this part. If you're building for
'standalone', don't skip this part.
When building this as an extension (i.e., the BUILD_TARGET env is either 'chrome' or 'firefox'), you'll need to apply some slight tweaks to your browser in order to directly install extensions from your local disk.
Google Chrome
--- 1. Navigate to the **Chrome extensions** page (`chrome://extensions`). 2. Enable **Developer mode** in the top-right corner. 3. Verify that the **Load unpacked** option is available. ---Mozilla Firefox
--- 1. Navigate to the **Advanced Preferences** page (`about:config`). 2. Search for the preference `xpinstall.signatures.required`. 3. Set the preference's value to `false` (typically `true` by default). 4. Navigate to the **Debugging** page (`about:debugging`). 5. Select **This Firefox** on the left-hand panel. 6. Verify that the **Temporary Extensions** section and the **Load Temporary Add-on...** option are available. ---Mozilla Firefox for Android
--- > [!INFO] > More information coming soon! > Though instructions aren't currently provided, this project supports [developing on **Firefox for Android Nightly**](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android). For now, see [these instructions from Mozilla](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/#set-up-your-computer-and-android-emulator-or-device) for setting up your Android device and **Firefox for Android Nightly** installation for extension development. ---When building in 'standalone' mode (for embedding Showdex into your own pokemon-showdown-client), you'll need to mimic what the content script does in your client's index.html file.
Standalone
--- > [!IMPORTANT] > *Standalone* builds remove all Web Extension API dependencies so that Showdex can be directly embedded into your [`pokemon-showdown-client`](https://github.com/smogon/pokemon-showdown-client). This includes the [`manifest.json`](./src/manifest.json), which will be omitted completely during the build process. That being said, you'll be **manually** doing what the [`content`](./src/content.ts) script would do to the [`index.html`](https://github.com/smogon/pokemon-showdown-client/blob/cd181c26946136a3118582b0176fd83c88726e33/play.pokemonshowdown.com/index.template.html) file in the following steps. > [!CAUTION] > This is considered to be an **experimental** feature. In other words, it's untested beyond the build process as I don't have my own [`pokemon-showdown-client`](https://github.com/smogon/pokemon-showdown-client) to run this off of (surprising, I know), but in theory, it should work! Essentially Showdex only uses the Web Extension APIs to inject the transpiled [`main`](./src/main.ts) script & some Google Fonts into the client's [`index.html`](https://github.com/smogon/pokemon-showdown-client/blob/cd181c26946136a3118582b0176fd83c88726e33/play.pokemonshowdown.com/index.template.html), but other than that, everything else is good 'ol JavaScript. 1. Figure out where you'll be storing the built files by setting the `STANDALONE_RESOURCE_PROTOCOL` & `STANDALONE_RESOURCE_PREFIX` environment variables accordingly. - By default, the protocol is blank & prefix is `'showdex'`, which means Showdex will expect its resources to be available in a `/showdex` path relative to your client's root domain. - For instance, when it requests `'file.jpg'`, it will look for `/showdex/file.jpg`. - See the comments for these environment variables for more information. 2. In your client's `index.html`, add the following Google Fonts used by Showdex anywhere inside the ``: ```html ``` 3. Also in the `index.html`, based on where Showdex will be stored in the first step (e.g., `/showdex`, by default), add the following inside the `` **after** all the `js/*` & `data/*` scripts: ```html ``` - If you find `App` errors in your console (& ultimately no Hellodex appearing) when Showdex's `main.js` bundle tries to load, Showdex may have loaded before the Showdown client. - Showdex will only attempt to inject itself into the Showdown client once whenever its bundle is loaded, based on the availability of the `window.app` global, i.e., the Showdown client runtime. - Workaround (as proposed by [**StaraptorOP**](https://staraptorshowdown.com)) is to programmatically inject the ` ``` ---② Installation
[!IMPORTANT] These are instructions for installing the development environment for building Showdex locally from source.
cdinto your favorite directory.git clone git@github.com:doshidak/showdex.gitcd showdexyarn
Post-Installation Scripts
---
Each time you run `yarn` (including `yarn add` & `yarn remove`), the [**`postinstall`**](./package.json#L26) script will **automatically** run afterwards, which itself runs the following:
* **`yarn patch-ghooks`** → [**`./scripts/patch-ghooks.sh`**](./scripts/patch-ghooks.sh)
> This project is configured for **ES Modules** (ESM) (as opposed to ye olde **CommonJS** [CJS]), while also making use of [`cz-customizable`](https://github.com/leoforfree/cz-customizable), which requires [`cz-customizable-ghooks`](https://github.com/uglow/cz-customizable-ghooks), which requires [**`ghooks`**](https://github.com/ghooks-org/ghooks).
>
> Node v18 doesn't allow you to run extensionless files (such as `.git/hooks/commit-msg`), which `ghooks` poops out, so [**`patch-ghooks`**](./scripts/patch-ghooks.sh) adds `.js` at the end of each pooped out file (e.g., `.git/hooks/commit-msg.js`).
>
> Otherwise, Node will complain about running an extensionless file and critically fail when you attempt to make a `git commit`.
* **`yarn patch-package`**
> This runs [**`patch-package`**](https://github.com/ds300/patch-package), which reads from the [**`patches`**](./patches) directory and applies the `diff` to the corresponding package in *your* `node_modules`.
>
>
> [Patch for `@babel/plugin-transform-typescript`](./patches/@babel+plugin-transform-typescript+7.22.9.patch) adds a custom option called [`yeetEmptyImportElisions`](./babel.config.json#L7), which, during the transpilation process from TS/TSX to JS, will completely remove the `import` statement if there aren't any imported modules left after removing all `type` modules (e.g., `import { type SomeType } from 'some-package';` becomes `import {} from 'some-package';`, which will be removed if the aforementioned custom option is enabled; however, in the case of `import { type SomeType, SomeModule } from 'some-package';`, this import won't be removed as `SomeModule` remains after removing the `type`'s, i.e., `import { SomeModule } from 'some-package';`). This is to prevent *side-effects* resulting from simply importing the file, even when no exported module in that file is actually being imported. [Path for `@babel/preset-typescript`](./patches/@babel+preset-typescript+7.22.5.patch) simply passes `yeetEmptyImportElisions` to `@babel/plugin-transform-typescript`. (Also, the terrible name for the custom option was intentional to indicate that this was a custom option I put in LOL.)
>
> [Patch for `@smogon/calc`](./patches/@smogon+calc+0.8.1.patch) incorporates all the changes up to the [`ad544eb`](https://github.com/smogon/damage-calc/commit/ad544eb560da162201d0e521644c26c838680fd2) commit. Additionally, some direct modifications such as disabling internal boosts applied to some abilities & moves like [*Pixiliate*](https://smogon.com/dev/sv/abilities/pixilate) & [*Acrobatics*](https://smogon.com/dex/sv/moves/acrobatics), for instance, since they're handled by the Calcdex, as well as implementing offensive & defensive stat overrides in older gens. Finally, a custom modification interface called `ShowdexCalcMods` was added to the exported `calculate()` function, which allows the Calcdex to tap into specific parts of the damage calculation algorithm to implement [*Beat Up*](https://smogon.com/dex/sv/moves/beat-up).
>
> [Patch for `simplebar`](./patches/simplebar%2B5.3.8.patch) adds typings for the untyped `scrollableNode` and `contentNode` options, which is actually [used inside `SimpleBar` class](https://github.com/Grsmto/simplebar/blob/5507296404f7e8f393ec48898a900068afaff5e5/packages/simplebar/src/simplebar.js#L179-L184), but [not typed](https://github.com/Grsmto/simplebar/blob/5507296404f7e8f393ec48898a900068afaff5e5/packages/simplebar/simplebar.d.ts#L27-L36). These two options are required if the internal `③ Development
[!TIP]
yarn devis an alias ofyarn dev:chrome.[!CAUTION] While developing in
'standalone'mode is possible, I don't recommend it as you'll need to manually move the built files to your webserver every time (& they can pile up between hot-reloads!). Skip this step if you're intending on just embedding a production build of Showdex into your Showdown client.
cd showdexyarn dev:chromeoryarn dev:firefoxoryarn dev:standalone(not recommended!)
[!IMPORTANT] Although this project makes use of TypeScript & ESLint, they are only used suggestively. In other words, your code will still compile even if you have errors!
Built contents will be dumped into a build directory in the project root (will be created if it doesn't exist).
Google Chrome
--- 1. Navigate to `chrome://extensions`. 2. Select **Load unpacked**. 3. Point to the `chrome` sub-directory in `build`. 4. Verify the extension appears in the list. 5. Navigate to [Pokémon Showdown](https://play.pokemonshowdown.com). 6. Play or spectate a battle. ---Mozilla Firefox
--- 1. Navigate to `about:debugging`. 2. Select **Load Temporary Add-on**. 3. Point to the `showdex-...-dev.firefox.xpi` in `build`. 4. Verify the extension appears under **Temporary Extensions**. 5. Navigate to [Pokémon Showdown](https://play.pokemonshowdown.com). 6. Play or spectate a battle. ---Mozilla Firefox for Android
--- > [!NOTE] > More information coming soon! > Though instructions aren't currently provided, this project supports [developing on **Firefox for Android Nightly**](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android). For now, see [these instructions from Mozilla](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/#install-and-run-your-extension-in-firefox-for-android) for running the extension on your Android's **Firefox for Android Nightly** installation. ---
"Hot" Reloading
---
> [!WARNING]
> Hot-reloading is a bit of a mess right now since it requires you to reload the extension and refresh Pokémon Showdown. Will figure out a better system in the future.
While `yarn dev:chrome` or `yarn dev:firefox` is running, Webpack will trigger a re-compilation of the bundle when files are changed in the [`src`](./src) directory.
* For **Chrome**, you'll need to select the **reload icon** button in the **Chrome extensions** page (`chrome://extensions`). Once reloaded, **refresh** Pokémon Showdown to see your changes.
* For **Firefox**, you'll need to **Reload** the extension in the **Debugging** page (`about:debugging`). Once reloaded, **refresh** Pokémon Showdown to see your changes.
---
Environment Variables
---
> [!NOTE]
> More information coming soon!
uhhhhhh for now, check the [`.env`](./.env)
---
④ Building
[!TIP]
yarn buildis an alias ofyarn build:chrome && yarn build:firefox.
cd showdexyarn build:chromeoryarn build:firefoxoryarn build:standalone
Standalone
--- 1. Create the directory in your webserver that will house the built Showdex bundle & assets. - This should be created relative to where your Showdown client's `index.html` is, which should be in the root of your webserver. - By default, `STANDALONE_RESOURCE_PREFIX` is `'showdex'`, so this entails creating a directory called `'showdex'`, which should be accessible via `https://showdown.example.com/showdex`. 2. Move all of the built files in the `dist/standalone` directory to the one you just created on your webserver. - Make sure you don't move the `standalone` directory itself, but rather, all of its contents. - Alternatively, you can just rename `standalone` to `showdex` & move that directory to your webserver. - In other words, make sure the `main.js` bundle is accessible via `https://showdown.example.com/showdex/main.js`. - If it's only accessible via `https://showdown.example.com/showdex/standalone/main.js`, then you did it wrong! (That is unless you set the `STANDALONE_RESOURCE_PREFIX` to `'showdex/standalone'`.) 3. Start your webserver & you should *hopefully* see Showdex! ---[!IMPORTANT] As mentioned in the Development section, TypeScript & ESLint are configured to be suggestive, so your code will still compile even if you have errors!
Built contents will be dumped into a dist directory in the project root (will be created if it doesn't exist).
There will be an un-zipped directory named after the BUILD_TARGET env (i.e., chrome, firefox or standalone) containing all the bundled files, as well as:
- For Chrome, a packaged extension under
showdex-...chrome.zipindist, and - For Firefox, a packaged extension under
showdex-...firefox.xpiindist.
What's the HTML file?
---
Builds for each target come with their very own bundle size pie chart, showing you exactly which modules in the bundle are too **thicc**. Particularly useful for finding modules to [chunk](https://webpack.js.org/guides/code-splitting), especially since [AMO](https://addons.mozilla.org) enforces a 5 MB size limit per file.
* Bundle size analysis is written to `showdex-...[BUILD_TARGET].html` in `dist`.
> [!TIP]
> Don't want to wait the extra 30 seconds for the analysis during builds? You can run the `build:fast` script instead, e.g., `yarn build:fast`, `yarn build:chrome:fast`, etc. Note that the term "fast" used in the aforementioned scripts doesn't imply a more optimal build process as it's the same process minus the analysis & ironically takes longer to type the extra characters to run this build mode.
---
Contributing
(ﾉ◕ヮ◕)ﾉ* :･ﾟ✧ Issues & PRs (Pull Requests) are very welcome! ✧ﾟ･: *ヽ(◕ヮ◕ヽ)
Issues
Found a bug? · Got a cool idea? · Have suggestions? · Hate these questions & demand answers?
Thanks for your help in making Showdex better for everyone!
I'm not a stickler for how these should be formatted; just make sure you provide enough info for me to work off of. If you're having trouble running Showdex, please make sure you first try turning off your other extensions before opening an issue. This will help me narrow down the problem (e.g., your ad-blocker, productivity enforcer &/or distraction minimizer could potentially block Showdex from downloading sets!).
If possible, including the following would be immensely helpful!
- Device (e.g., Custom PC, MacBook Pro 14" 2023, eMachines eTower 400i, Samsung Smart Fridge, etc.)
- OS & Version (e.g., Windows 11, macOS Sonoma 14.5, Ubuntu 22.04.4 LTS, Android 14, etc.)
- Browser (e.g., Chrome, Firefox, Opera, Netscape Navigator, etc.)
- Showdex Version (e.g., v1.2.4)
- Format, if applicable (e.g., Gen 9 VGC 2024 Reg G Bo3)
- Replay, if applicable
If you would like to be credited for your contribution, please also include your username on Smogon Forums or Pokémon Showdown. Otherwise, your GitHub username will be used, unless you don't want to be credited.
Create a GitHub Issue --- |
No GitHub? No problem!
We're also listening for feedback & bug reports on our Showdex thread on Smogon Forums.
Post on Smogon Forums --- |
Not on Smogon Forums? All good!
We also created a Discord community with channels where you can report bugs, request features & get help.
Join Our Discord --- |
No Discord? Still, no problem!
Feel free to contact me directly via email.
Slide Into My Inbox --- |
PRs
Fixed a bug? · Added something cool? · A translation, perchance?
Not a stickler with these either, but at the very least, please:
- Fork this repo & commit changes to your fork,
- Style your code according to the ESLint rules,
- Create a PR from your fork to this repo, and
- Provide a brief description of your changes in your PR.
Although this project makes use of Commitizen, you don't need to format your commit messages this way. Use whatever you're comfortable with!
Additionally, I don't make use of any fancy automations like CI (Continuous Integration), so each PR will be manually reviewed. Your patience is greatly appreciated!
Fork Me on GitHub --- |
Credits
big thank to:
- analogcam for the idea & UI / UX design,
- ttoki for being our first tester,
- goddess mina for moderating our Discord community,
- Smogon Dev Team & the
@smogon/calcMaintainers & Contributors for the sauce, - pre & pkmn.cc for keeping the Smogon sets hot, fresh & downloadable,
- Austin for the endorsement & support,
- Honko for the O.G damage calculator,
- Zarel & the Showdown Staff & Contributors for this would literally be nothing without them,
- Game Freak & Nintendo for good game (plz don't sue us lol), and
- sumfuk ???
Supporters
big ･ﾟ✧ sparkly thank ✧ﾟ･ to these fine individuals for their generous support!
Patrons
Supreme Overlords
| ･ﾟ✧ Dastardlydwarf ✧ﾟ･ | ･ﾟ✧ Ah Ok Got It ✧ﾟ･ | ･ﾟ✧ ADVs Nuts ✧ﾟ･ |
| ･ﾟ✧ Swift Mochi ✧ﾟ･ | ･ﾟ✧ Picachuleboss ✧ﾟ･ | ･ﾟ✧ Zzodz ✧ﾟ･ |
Pop Bombers
| ･ﾟ✧ benzyne ✧ﾟ･ |
Blazikens
| ･ﾟ✧ GabrielPBC ✧ﾟ･ | ･ﾟ✧ BruhMomentMaker ✧ﾟ･ | ･ﾟ✧ TheNexyr ✧ﾟ･ |
| ･ﾟ✧ Christopher Y ✧ﾟ･ | ･ﾟ✧ PokePastry ✧ﾟ･ | ･ﾟ✧ FurryKrisp ✧ﾟ･ |
| ･ﾟ✧ Michael K ✧ﾟ･ | ･ﾟ✧ Wan L ✧ﾟ･ | ･ﾟ✧ RadiantShackles ✧ﾟ･ |
| ･ﾟ✧ Trent L ✧ﾟ･ | ･ﾟ✧ qizwn ✧ﾟ･ | ･ﾟ✧ buyuuh ✧ﾟ･ |
| ･ﾟ✧ Janaval ✧ﾟ･ |
༼ つ ͡° ͜ʖ ͡° ༽つ
Donors
| ･ﾟ✧ Texas Cloverleaf ✧ﾟ･ | ･ﾟ✧ CPL593H ✧ﾟ･ | ･ﾟ✧ Angie L ✧ﾟ･ |
| ･ﾟ✧ Fubwubs ✧ﾟ･ | ･ﾟ✧ Timothy B ✧ﾟ･ | ･ﾟ✧ PastGenOUFan ✧ﾟ･ |
| ･ﾟ✧ Luc H ✧ﾟ･ | ･ﾟ✧ Snacky98 ✧ﾟ･ | ･ﾟ✧ Wesley L ✧ﾟ･ |
| ･ﾟ✧ James G ✧ﾟ･ | ･ﾟ✧ joshtheking7 ✧ﾟ･ | ･ﾟ✧ Michael L ✧ﾟ･ |
| ･ﾟ✧ Bongphan ✧ﾟ･ | ･ﾟ✧ Pulse_kS ✧ﾟ･ | ･ﾟ✧ Thilo P ✧ﾟ･ |
| ･ﾟ✧ Emile L ✧ﾟ･ | ･ﾟ✧ Nima R ✧ﾟ･ | ･ﾟ✧ Pinachi ✧ﾟ･ |
| ･ﾟ✧ GenOne ✧ﾟ･ | ･ﾟ✧ Jacek L ✧ﾟ･ | ･ﾟ✧ Rodrigo S ✧ﾟ･ |
| ･ﾟ✧ Lunarvania ✧ﾟ･ | ･ﾟ✧ Leman T ✧ﾟ･ | ･ﾟ✧ Sunny B ✧ﾟ･ |
| ･ﾟ✧ Peter T ✧ﾟ･ | ･ﾟ✧ Sam P ✧ﾟ･ | ･ﾟ✧ PokePastry ✧ﾟ･ |
| ･ﾟ✧ DoubleCaret ✧ﾟ･ | ･ﾟ✧ JesskyKhemically ✧ﾟ･ | ･ﾟ✧ Plague von Karma ✧ﾟ･ |
| ･ﾟ✧ MrMimikry ✧ﾟ･ | ･ﾟ✧ Ethan D ✧ﾟ･ | ･ﾟ✧ Jonas H ✧ﾟ･ |
| ･ﾟ✧ Itamar M ✧ﾟ･ | ･ﾟ✧ sylvthesizer ✧ﾟ･ | ･ﾟ✧ Joseph A ✧ﾟ･ |
| ･ﾟ✧ momalaharris ✧ﾟ･ | ･ﾟ✧ Sylvee1 ✧ﾟ･ | ･ﾟ✧ FR1E5 ✧ﾟ･ |
| ･ﾟ✧ Tanuj C ✧ﾟ･ | ･ﾟ✧ GoldenGottaGo ✧ﾟ･ |
(づ￣ ³￣)づ
Contributors
another big thank to these fine people for helping with development!
| SpiffyTheSpaceman | malaow3 · GitHub | Cureja · GitHub |
now that Showdex went mr worldwide, big thank to these fine people for helping with translations!
| Sykless · Français | Betcheg · Français |
also big thank to this fine person for providing us with dank bundled sets!
| nerd-of-now · NCP VGC |
...and finally, big thank to these fine people who helped improve Showdex!
\ (•◡•) \/