`showdex`

Current v1.2.3	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 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?

Navigation

Planned Features	Known Bugs

Suggest a Feature	Report a Bug	Contribute/Translate

Developer Zone

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.

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

Requirements

Warning 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.

node LTS Hydrogen v18
yarn Classic v1.22.0+
bash (Windows WSL, macOS, or Linux)

① Setup

Note
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 (typically true by 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.

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

Note
Standalone builds remove all Web Extension API dependencies so that Showdex can be directly embedded into your pokemon-showdown-client. This includes the manifest.json, which will be omitted completely during the build process. That being said, you'll be manually doing what the content script would do to the index.html file in the following steps.

Warning
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 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 script & some Google Fonts into the client's index.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_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.

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 the js/* & 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 !! -->
<!-- async, async="true", or async="async" ??? doesn't matter (all truthy), so the choice is yours c: -->
<script src="/showdex/main.js" async="true"></script>

② Installation

Note
These are instructions for installing the development environment for building Showdex locally from source.

cd into your favorite directory.
git clone [email protected]:doshidak/showdex.git
cd showdex
yarn

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 requires cz-customizable-ghooks, which requires ghooks.

Node v18 doesn't allow you to run extensionless files (such as .git/hooks/commit-msg), which ghooks poops out, so patch-ghooks 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, which reads from the patches directory and applies the diff to the corresponding package in your node_modules.

Patch for @babel/plugin-transform-typescript adds a custom option called yeetEmptyImportElisions, 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 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 incorporates all the changes up to the ad544eb commit. 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 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.

Patch for simplebar adds typings for the untyped scrollableNode and contentNode options, which is actually used inside SimpleBar class, but not typed. These two options are required if the internal <div>s are provided outside of SimpleBar (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.

③ Development

Note
yarn dev is an alias of yarn dev:chrome.

Warning
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 showdex
yarn dev:chrome or yarn dev:firefox or yarn dev:standalone (not recommended!)

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 chrome sub-directory in build.
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.xpi in build.
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

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.

Environment Variables

Note
More information coming soon!

uhhhhhh for now, check the .env

④ Building

Note
yarn build is an alias of yarn build:chrome && yarn build:firefox.

cd showdex
yarn build:chrome or yarn build:firefox or yarn 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.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.

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'.)

Start your webserver & you should hopefully see Showdex!

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 (i.e., chrome, firefox or standalone) containing all the bundled files, as well as:

For Chrome, a packaged extension under showdex-...chrome.zip in dist, and
For Firefox, a packaged extension under showdex-...firefox.xpi in dist.

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].html in dist.

Pro-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.1, Ubuntu 22.04.3 LTS, Android 12, etc.)

Browser (e.g., Chrome, Firefox, Opera, Netscape Navigator, etc.)

Showdex Version (e.g., v1.2.3)

Format, if applicable (e.g., Gen 9 VGC 2024 Reg F 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/calc Maintainers & 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 ✧ﾟ･	･ﾟ✧ Swift Mochi ✧ﾟ･
･ﾟ✧ Zzodz ✧ﾟ･

Pop Bombers

･ﾟ✧ benzyne ✧ﾟ･

Blazikens

･ﾟ✧ GabrielPBC ✧ﾟ･	･ﾟ✧ BruhMomentMaker ✧ﾟ･	･ﾟ✧ TheNexyr ✧ﾟ･
･ﾟ✧ Christopher Y ✧ﾟ･	･ﾟ✧ PokePastry ✧ﾟ･	･ﾟ✧ Kristen G ✧ﾟ･
･ﾟ✧ Michael K ✧ﾟ･	･ﾟ✧ Wan L ✧ﾟ･

༼ つ ͡° ͜ʖ ͡° ༽つ

Donors

･ﾟ✧ CPL593H ✧ﾟ･	･ﾟ✧ Angie L ✧ﾟ･	･ﾟ✧ Fubwubs ✧ﾟ･
･ﾟ✧ Timothy B ✧ﾟ･	･ﾟ✧ PastGenOUFan ✧ﾟ･	･ﾟ✧ Luc H ✧ﾟ･
･ﾟ✧ Snacky98 ✧ﾟ･	･ﾟ✧ joshtheking7 ✧ﾟ･	･ﾟ✧ Michael L ✧ﾟ･
･ﾟ✧ Bongphan ✧ﾟ･	･ﾟ✧ Pulse_kS ✧ﾟ･	･ﾟ✧ Thilo P ✧ﾟ･
･ﾟ✧ GenOne ✧ﾟ･	･ﾟ✧ Jacek L ✧ﾟ･	･ﾟ✧ Lunarvania ✧ﾟ･
･ﾟ✧ Leman T ✧ﾟ･	･ﾟ✧ Sunny B ✧ﾟ･	･ﾟ✧ Peter T ✧ﾟ･
･ﾟ✧ Sam P ✧ﾟ･	･ﾟ✧ PokePastry ✧ﾟ･	･ﾟ✧ DoubleCaret ✧ﾟ･
･ﾟ✧ JesskyKhemically ✧ﾟ･	･ﾟ✧ Plague von Karma ✧ﾟ･	･ﾟ✧ MrMimikry ✧ﾟ･
･ﾟ✧ momalaharris ✧ﾟ･	･ﾟ✧ 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!

105C	85percent	A_Wild_Noob_Appeared!	AhmedA1559
aim	alchemistake	Alhen	AndViet
Baloor	Bice	BlackCapCoder	brokenmotor
Catri	cbruegg · GitHub	Celestia	ChrisPBacon
Clastia	Cloyster Chowder	coral fan	CPL593H
cynicproject	DarkPhoenix911	dex	Ducky
dyrana	Ehmcee	Elitemagikarp · GitHub	Fitah_
Furret4ssb	IHatePasswords	Iodyne	ITR
jmynes	ketchuppainting	Kibo	kirito_1707
Lazosful	Legend-Recalls	lighthouse64	MachJacob
madamadam-c	Mandibuladel5555	Maxouille · GitHub	mdragon13
Mia · GitHub	MoltenGluten	mpique	mnittsch
Nails	orangelego21	paolode99	_Pea_
pokeblade101	PokeChess	Pulse_kS	Runoisch
ry4242	Sabelette	SeaSoil	Shiox
Shock3600 · GitHub	sh0shin	ShrikeNW	Singiamtel · GitHub
Sorrica	Surgent James	TheDebatingOne	ThornxRose
ThrohKing	TJ	Timboberino	TrainerX493
Tree69420 · GitHub	Turtlek	zooki2006	zuils · GitHub

\ (•◡•) /

eppin / showdex Goto Github PK

showdex's Introduction

showdex

Navigation

Developer Zone

Developer SparkNotes™

Requirements

① Setup

② Installation

③ Development

④ Building

Contributing

Issues

PRs

Credits

Supporters

Supreme Overlords

Pop Bombers

Blazikens

Contributors

showdex's People

Contributors

Recommend Projects

Recommend Topics

Recommend Org

`showdex`