| Currently v1.2.5 | 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 Arc, Edge & Brave), Opera & Firefox.
༼ つ ಥ_ಥ ༽つ Safari ...?
Despite Apple requiring us to shell out $100/year for the Apple Developer Program 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 (Source on GitHub), currently available on the App Store, bundles Showdex along with the Enhanced Tooltips & Randbats Tooltip 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 (Smogon · GitHub).
| Would you like to know more? |
|---|
| Planned Features | Known Bugs |
|---|
| Suggest a Feature | Report a Bug | Contribute · Translate |
|---|
Powered by showdex-calc · v1.2.5 |
|---|
Served by bakedex Repository · 2024.09.29 |
@pkmn/smogon Repository |
|---|
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.
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.
Important
Due to the removal of --experimental-specifier-resolution=node starting in node v19, v18 is required (i.e., ^18.0.0) to build this project. Use something like nvm to install v18 (nvm install lts/hydrogen) alongside your current node installation.
nodeLTS Hydrogen v18yarnClassic v1.22.0+bash(Windows WSL, macOS, or Linux)
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
- Navigate to the Chrome extensions page (
chrome://extensions). - Enable Developer mode in the top-right corner.
- Verify that the Load unpacked option is available.
Mozilla Firefox
- Navigate to the Advanced Preferences page (
about:config). - Search for the preference
xpinstall.signatures.required. - Set the preference's value to
false(typicallytrueby default). - Navigate to the Debugging page (
about:debugging). - Select This Firefox on the left-hand panel.
- 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.
For now, see these instructions from Mozilla 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. This includes themanifest.json, which will be omitted completely during the build process. That being said, you'll be manually doing what thecontentscript would do to theindex.htmlfile 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-clientto run this off of (surprising, I know), but in theory, it should work! Essentially Showdex only uses the Web Extension APIs to inject the transpiledmainscript & some Google Fonts into the client'sindex.html, but other than that, everything else is good 'ol JavaScript.
- Figure out where you'll be storing the built files by setting the
STANDALONE_RESOURCE_PROTOCOL&STANDALONE_RESOURCE_PREFIXenvironment variables accordingly.
- By default, the protocol is blank & prefix is
'showdex', which means Showdex will expect its resources to be available in a/showdexpath 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.
- In your client's
index.html, add the following Google Fonts used by Showdex anywhere inside the<head>:
<!-- the "preconnect" one below is optional, but recommended for optimizing loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap">- 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<body>after all thejs/*&data/*scripts:
<!-- example of what your index.html may contain inside the <body> -->
<script src="data/search-index.js" onerror="loadRemoteData(this.src)"></script>
<script src="data/teambuilder-tables.js" onerror="loadRemoteData(this.src)"></script>
<script src="js/battle-dex-search.js"></script>
<script src="js/search.js"></script>
<script src="data/aliases.js" async="async" onerror="loadRemoteData(this.src)"></script>
<!-- plop this in AFTER all of the <script> tags !! -->
<script src="/showdex/main.js"></script>- If you find
Apperrors in your console (& ultimately no Hellodex appearing) when Showdex'smain.jsbundle 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.appglobal, i.e., the Showdown client runtime. - Workaround (as proposed by StaraptorOP) is to programmatically inject the
<script>tag when the window loads:
<!-- use this instead of the <script src="/showdex/main.js"> one above -->
<script>
window.onload = () => {
// manually instantiate the Showdown client `App` in case it wasn't already
// (which we'll know based on whether the `app` window global exists)
if (!window.app) {
window.app = new App();
}
const script = document.createElement('script');
script.src = '/showdex/main.js';
document.body.appendChild(script);
};
</script>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
| Post-Installation Scripts |
|---|
Each time you run yarn (including yarn add & yarn remove), the postinstall script will automatically run afterwards, which itself runs the following:
yarn patch-ghooks→./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, which requirescz-customizable-ghooks, which requiresghooks.Node v18 doesn't allow you to run extensionless files (such as
.git/hooks/commit-msg), whichghookspoops out, sopatch-ghooksadds.jsat 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, which reads from thepatchesdirectory and applies thediffto the corresponding package in yournode_modules.Patch for
@babel/plugin-transform-typescriptadds a custom option calledyeetEmptyImportElisions, which, during the transpilation process from TS/TSX to JS, will completely remove theimportstatement if there aren't any imported modules left after removing alltypemodules (e.g.,import { type SomeType } from 'some-package';becomesimport {} from 'some-package';, which will be removed if the aforementioned custom option is enabled; however, in the case ofimport { type SomeType, SomeModule } from 'some-package';, this import won't be removed asSomeModuleremains after removing thetype'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-typescriptsimply passesyeetEmptyImportElisionsto@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/calcincorporates all the changes up to thead544ebcommit. Additionally, some direct modifications such as disabling internal boosts applied to some abilities & moves like Pixiliate & 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 calledShowdexCalcModswas added to the exportedcalculate()function, which allows the Calcdex to tap into specific parts of the damage calculation algorithm to implement Beat Up.Patch for
simplebaradds typings for the untypedscrollableNodeandcontentNodeoptions, which is actually used insideSimpleBarclass, but not typed. These two options are required if the internal<div>s are provided outside ofSimpleBar(by default, it will create its own<div>s inside the provided container element). For use with React, we must provide these internal<div>s ourselves, as React doesn't like it when a vanilla JS library adds and removes DOM elements that React isn't aware of.
Tip
yarn dev is an alias of yarn 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
- Navigate to
chrome://extensions. - Select Load unpacked.
- Point to the
chromesub-directory inbuild. - Verify the extension appears in the list.
- Navigate to Pokémon Showdown.
- Play or spectate a battle.
Mozilla Firefox
- Navigate to
about:debugging. - Select Load Temporary Add-on.
- Point to the
showdex-...-dev.firefox.xpiinbuild. - Verify the extension appears under Temporary Extensions.
- Navigate to Pokémon Showdown.
- 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.
For now, see these instructions from Mozilla for running the extension on your Android's Firefox for Android Nightly installation.
"Hot" Reloading
| "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 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.
Tip
yarn build is an alias of yarn build:chrome && yarn build:firefox.
cd showdexyarn build:chromeoryarn build:firefoxoryarn build:standalone
Standalone
- 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.htmlis, which should be in the root of your webserver. - By default,
STANDALONE_RESOURCE_PREFIXis'showdex', so this entails creating a directory called'showdex', which should be accessible viahttps://showdown.example.com/showdex.
- Move all of the built files in the
dist/standalonedirectory to the one you just created on your webserver.
- Make sure you don't move the
standalonedirectory itself, but rather, all of its contents. - Alternatively, you can just rename
standalonetoshowdex& move that directory to your webserver. - In other words, make sure the
main.jsbundle is accessible viahttps://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 theSTANDALONE_RESOURCE_PREFIXto'showdex/standalone'.)
- 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?
| 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, especially since AMO enforces a 5 MB size limit per file.
- Bundle size analysis is written to
showdex-...[BUILD_TARGET].htmlindist.
[!TIP] Don't want to wait the extra 30 seconds for the analysis during builds? You can run the
build:fastscript 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.
(ﾉ◕ヮ◕)ﾉ* :･ﾟ✧ Issues & PRs (Pull Requests) are very welcome! ✧ﾟ･: *ヽ(◕ヮ◕ヽ)
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" Late Nov 2023, eMachines eTower 400i, Samsung Smart Fridge, etc.)
- OS & Version (e.g., Windows 11 Pro 24H2, macOS Sequoia 15.1, Ubuntu 24.10 Oracular Oriole LTS, Android 15 Vanillla Ice Cream, etc.)
- Browser (e.g., Chrome, Firefox, Opera, Safari, Arc, Edge, Brave, Netscape Navigator, etc.)
- Showdex Version (e.g., v1.2.5)
- Format, if applicable (e.g., Gen 9 VGC 2024 Reg H 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 |
|---|
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 |
|---|
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 ???
big ･ﾟ✧ sparkly thank ✧ﾟ･ to these fine individuals for their generous support!
| ･ﾟ✧ Dastardlydwarf ✧ﾟ･ | ･ﾟ✧ Ah Ok Got It ✧ﾟ･ | ･ﾟ✧ ADVs Nuts ✧ﾟ･ |
| ･ﾟ✧ Swift Mochi ✧ﾟ･ | ･ﾟ✧ Picachuleboss ✧ﾟ･ | ･ﾟ✧ Roy ✧ﾟ･ |
| ･ﾟ✧ Zzodz ✧ﾟ･ |
| ･ﾟ✧ benzyne ✧ﾟ･ |
| ･ﾟ✧ GabrielPBC ✧ﾟ･ | ･ﾟ✧ BruhMomentMaker ✧ﾟ･ | ･ﾟ✧ PokePastry ✧ﾟ･ |
| ･ﾟ✧ TheNexyr ✧ﾟ･ | ･ﾟ✧ FurryKrisp ✧ﾟ･ | ･ﾟ✧ Michael K ✧ﾟ･ |
| ･ﾟ✧ Wan L ✧ﾟ･ | ･ﾟ✧ RadiantShackles ✧ﾟ･ | ･ﾟ✧ Trent L ✧ﾟ･ |
| ･ﾟ✧ Christopher Y ✧ﾟ･ | ･ﾟ✧ qizwn ✧ﾟ･ | ･ﾟ✧ Janaval ✧ﾟ･ |
| ･ﾟ✧ buyuuh ✧ﾟ･ |
༼ つ ͡° ͜ʖ ͡° ༽つ
| ･ﾟ✧ Texas Cloverleaf ✧ﾟ･ | ･ﾟ✧ CPL593H ✧ﾟ･ | ･ﾟ✧ Angie L ✧ﾟ･ |
| ･ﾟ✧ Fubwubs ✧ﾟ･ | ･ﾟ✧ Timothy B ✧ﾟ･ | ･ﾟ✧ PastGenOUFan ✧ﾟ･ |
| ･ﾟ✧ Luc H ✧ﾟ･ | ･ﾟ✧ Snacky98 ✧ﾟ･ | ･ﾟ✧ Wesley L ✧ﾟ･ |
| ･ﾟ✧ James G ✧ﾟ･ | ･ﾟ✧ joshtheking7 ✧ﾟ･ | ･ﾟ✧ Roy ✧ﾟ･ |
| ･ﾟ✧ 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 ✧ﾟ･ |
(づ￣ ³￣)づ
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!
\ (•◡•) /
