| Current v1.1.6 | 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 ...?
Unfortunately, we don't ever plan on officially supporting Safari since Apple requires us to shell out $100/year for the Apple Developer Program just to distribute a singular free extension on the App Store.
Thanks Tim!
Not all hope is lost, fortunately! 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 Code |
|---|
Warning
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.
nodev18.0.0+yarn(Classic) v1.22.0+bash(Windows WSL, macOS, or Linux)
Note
If your browser is already configured for extension development, you can skip this part.
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
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 setting up your Android device and Firefox for Android Nightly installation for extension development.
Note
These instructions are for building the extension 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 theba62349commit, which adds support for Gen 9, among other many things not published in the v0.7.0 release on npm (as of the time of writing on 2023/07/30). Additionally, a custom modification interface calledShowdexCalcModswere added to the exportedcalculate()function, which allows the Calcdex to tap into specific parts of the damage calculation algorithm to implement moves like Beat Up. Finally, attack & defense stat override properties were implemented in the mechanics files for older gens.
scrollIntoView()is responsible for auto-scrolling theMenuListto the focused option that is overflowed (i.e., out of view). It's also responsible for auto-scrolling to the selected option when theMenuListfirst opens. When used in conjunction withsimplebar(viaScrollable), thescrollRefofScrollablemay not be available as soon as it mounts, so thesetTimeout()gives themenuListReftime to set (by placing thescrollIntoView()call at the top of the call stack). Patch forsimplebaradds 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.
Note
yarn devis an alias ofyarn dev:chrome.
cd showdexyarn dev:chromeoryarn dev:firefox
Warning
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.
Note
yarn buildis an alias ofyarn build:chrome && yarn build:firefox.
cd showdexyarn build:chromeoryarn build:firefox
Warning
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 (e.g., chrome, firefox) 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.
(ﾉ◕ヮ◕)ﾉ* :･ﾟ✧ 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 could potentially block Showdex from downloading sets!).
If possible, including the following would be immensely helpful!
- Device (e.g., Custom PC, MacBook Pro 2023, eMachines eTower 400i, Samsung Smart Fridge, etc.)
- OS & Version (e.g., Windows 11, macOS Ventura, Ubuntu 22, Android 14, etc.)
- Browser (e.g., Chrome, Firefox, Opera, Netscape Navigator, etc.)
- Showdex Version (e.g., v1.1.6)
- Format, if applicable (e.g., Gen 9 National Dex AG)
- Replay, if applicable & possible
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?
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 ✧ﾟ･ | ･ﾟ✧ goddess mina ✧ﾟ･ | ･ﾟ✧ Zzodz ✧ﾟ･ |
| ･ﾟ✧ benzyne ✧ﾟ･ |
| ･ﾟ✧ BruhMomentMaker ✧ﾟ･ | ･ﾟ✧ Christopher Y ✧ﾟ･ | ･ﾟ✧ TheNexyr ✧ﾟ･ |
༼ つ ͡° ͜ʖ ͡° ༽つ
| ･ﾟ✧ Angie L ✧ﾟ･ | ･ﾟ✧ Fubwubs ✧ﾟ･ | ･ﾟ✧ Timothy B ✧ﾟ･ |
| ･ﾟ✧ PastGenOUFan ✧ﾟ･ | ･ﾟ✧ joshtheking7 ✧ﾟ･ | ･ﾟ✧ Michael L ✧ﾟ･ |
| ･ﾟ✧ Bongphan ✧ﾟ･ | ･ﾟ✧ GenOne ✧ﾟ･ | ･ﾟ✧ Lunarvania ✧ﾟ･ |
| ･ﾟ✧ Leman T ✧ﾟ･ | ･ﾟ✧ Sunny B ✧ﾟ･ | ･ﾟ✧ Peter T ✧ﾟ･ |
| ･ﾟ✧ Sam P ✧ﾟ･ | ･ﾟ✧ PokePastry ✧ﾟ･ | ･ﾟ✧ DoubleCaret ✧ﾟ･ |
| ･ﾟ✧ momalaharris ✧ﾟ･ | ･ﾟ✧ FR1E5 ✧ﾟ･ | ･ﾟ✧ Tanuj C ✧ﾟ･ |
| ･ﾟ✧ GoldenGottaGo ✧ﾟ･ |
(づ￣ ³￣)づ
another big thank to these fine people for helping with development!
| SpiffyTheSpaceman | malaow3 · GitHub |
...and finally, big thank to these fine people who helped improve Showdex!
\ (•◡•) /