| Current v1.1.2 | Install on Chrome · Opera · Edge · Brave · Firefox · Safari | Discuss on Smogon |
|---|
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.
Fully supported on Chrome (+ any native Chromium browser, like Opera, Edge & Brave) & 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 [email protected]: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 (as opposed to ye olde CommonJS), 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
@smogon/calcincorporates all the changes up to the77334facommit, which adds support for Gen 9 & implements some Gen 9-specific mechanics, such as Supreme Overlord. These changes are unpublished on npm as Gen 9 support in@smogon/calcis considered experimental (at the time of writing on 2023/01/06). Not all Gen 9 mechanics are supported however, such as Rage Fist, Glaive Rush & Electromorphosis, so the Calcdex will handle these mechanics until native support for them are added. Additionally, the patch adds support for independently toggling the Protosynthesis & Quark Drive abilities without the need for the Booster Energy item or updating field conditions, which can affect damage calculations (e.g., Knock Off, Acrobatics, Fire/Water-type moves from the Sun).Patch for
react-selectwraps thescrollIntoView()call in thecomponentDidUpdate()of theSelectcomponent in asetTimeout()so that the internalmenuListRefis available when the menu first opens.
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 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.
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!
- OS (e.g., Windows, macOS, Android, etc.)
- Browser (e.g., Chrome, Firefox, etc.)
- Showdex Version (e.g., v1.1.2)
- Format, if applicable (e.g., Gen 9 National Dex AG)
If you would like to be credited for your contribution, please also include your username on Smogon Forums. 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? 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:
- camdawgboi for the idea & UI/UX design,
- ttoki for being our first tester,
- 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!
| ･ﾟ✧ Angie L. ✧ﾟ･ | ･ﾟ✧ Max B. ✧ﾟ･ | ･ﾟ✧ Michael L. ✧ﾟ･ | ･ﾟ✧ Jonathan M. ✧ﾟ･ |
| ･ﾟ✧ Leman T. ✧ﾟ･ | ･ﾟ✧ Sunny B. ✧ﾟ･ | ･ﾟ✧ Connor M. ✧ﾟ･ | ･ﾟ✧ Nate M. ✧ﾟ･ |
(づ￣ ³￣)づ
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!
\ (•◡•) /