Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fomtarro/pkmn-tournament-overlay-tool
Web-based tool for creating professional-level stream overlays for your Pokémon tournament!
https://github.com/fomtarro/pkmn-tournament-overlay-tool
html javascript obs openbroadcastersoftware overlay pokemon stream streaming tournament vgc
Last synced: 11 days ago
JSON representation
Web-based tool for creating professional-level stream overlays for your Pokémon tournament!
- Host: GitHub
- URL: https://github.com/fomtarro/pkmn-tournament-overlay-tool
- Owner: FomTarro
- Created: 2023-12-16T17:19:00.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-11T10:05:41.000Z (2 months ago)
- Last Synced: 2024-09-11T14:26:15.151Z (2 months ago)
- Topics: html, javascript, obs, openbroadcastersoftware, overlay, pokemon, stream, streaming, tournament, vgc
- Language: JavaScript
- Homepage: https://www.skeletom.net/pkmn/tournament-overlay/
- Size: 13.7 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TourKOAL (Tournament Knowledge and Overlay Assistant for Livestreams)
[v1.3.2 - Check it out!](https://www.skeletom.net/pkmn/tournament-overlay/)
## The Why
Are you a Pokémon Professor? Have you organized a local tournament? Have you tried streaming those locals like they do for Regionals? It's not easy, right?
Back at the start of the 2024 season, I helped run the stream for a local Mid-Season Showdown. The setup involved having a folder of Pokémon images, which were indexed by national dex number. Then, each, round, as players sent out their Pokémon, we'd have to quickly figure out what its national dex number was, find the corresponding image, and update an OBS source, all just-in-time. Then, at the end of the match, we'd have to manually reset all 8 OBS sources and prepare to do it again. And items? Forget about it, there was just no time to do the same thing for those.
This process was both very labor-intensive and very error-prone. I figured it must be possible to engineer a better workflow. What if you could accomplish the same results as the above, plus much more, all with a single click? Could we build in guard rails to drastically reduce the odds of displaying the wrong information?
The answer, of course, was yes! Which brings us to this tool...
## The What
The goal of this tool is to easily compile player and team information such that it can be quickly displayed on the fly during tournament matches,
helping you build a professional-quality overlay for your broadcast with as little manual work as possible.
No longer will you need to scramble through hundreds of image files by hand as players reveal which of their Pokémon they brought to the game,
nor will you need to manually adjust OBS sources when items are consumed or Pokémon faint! You can even automatically track and update player pairings and standings to display on stream!
The tool runs entirely in the browser as well, making it very portable and easy to run on venue stream setups without needing to download or install any additional software. No player information is sent or stored on a remote server, or anything of the sort.
### Features include the ability to:
* Quickly and easily display battle information, such as:
* Player's Name
* Player's Score
* Which Pokémon they have revealed
* The status of their Pokémon
* The Tera Type of their Pokémon
* The held items of their Pokémon
* The status of their held items
* Display and automatically update tournament metadata, such as:
* Player Pairings (up to 32 tables)
* Player Standings (up to top 32)
## The How
This tool connects with OBS via WebSocket. If you're running an OBS of version `28.0.0` or later, this comes built-in. If you're on an earlier version, you can [install a plugin](https://github.com/obsproject/obs-websocket/releases)!
Once connected, just point the various outputs to your desired OBS sources. Most of the outputs are Text sources, but the Pokémon/Item displays are Browser sources!
After that, you can begin to fill in your player roster at the bottom of the tool. Then, when your players come to the stream table, you can easily select them and their team members from drop-downs during the battle as needed.
### TOM Integration
This tool also supports a few integrations with the official Play! Pokémon Tournament Operations Manager software (TOM), to further streamline the workflow.
1) **ROSTER**: You can import a complete player roster from the ``...roster.html`` report file that TOM generates.
2) **STANDINGS**: You can track standings live in real-time by pointing the tool to a `...standings.html` report file to watch. Every time this report is regenerated by TOM, the tool will automatically update your overlay accordingly.
3) **PAIRINGS**: You can track pairings live in real-time by pointing the tool to a `...pairings.html` report file to watch. Every time this report is regenerated by TOM, the tool will automatically update your overlay accordingly.
The files necessary for the above integrations can be found in your `TOM/data/reports` directory.
### PokéPaste Integration
As of version 1.3.0, this tool also supports the ability to import teams via a PokéPaste text format. This is the standard team list format that you will see from other tools such as Showdown, PokéPaste and PokéBin.
Simply click the "Import Team" button beneath the player's name on their table row and paste in the text to populate their team records.
For example, try using the following Paste (my beloved Regulation E Little Cup team):
```
Dirty Work (Glimmet) @ Eviolite
Ability: Toxic Debris
Level: 50
Tera Type: Grass
- Toxic
- Sludge Bomb
- Power Gem
- Protect
Demon's Eye (Charmander) (M) @ Choice Specs
Ability: Solar Power
Level: 50
Tera Type: Flying
- Heat Wave
- Overheat
- Dragon Pulse
- Tera Blast
C'mon C'mon (Murkrow) (F) @ Covert Cloak
Ability: Prankster
Level: 50
Tera Type: Ghost
- Dual Wingbeat
- Tailwind
- Sunny Day
- Haze
Landslide (Mudbray) (F) @ Choice Band
Ability: Inner Focus
Level: 50
Tera Type: Grass
- Earthquake
- Rock Slide
- Close Combat
- Iron Head
Aja (Misdreavus) (F) @ Assault Vest
Ability: Levitate
Level: 50
Tera Type: Electric
- Shadow Ball
- Draining Kiss
- Charge Beam
- Night Shade
Gaucho (Munchlax) @ Leftovers
Ability: Thick Fat
Level: 50
Tera Type: Fairy
- Stomping Tantrum
- Rock Slide
- Brick Break
- Protect
```
### Customization
Under the hood, the Pokémon/Item displays (Team Icons) are simple HTML pages with the required images already loaded. This setup provides a few benefits:
1) It allows for a rich density of information (both species and item, as well as their conditions) in just a single source.
2) It allows the user to further style the display using custom CSS in their OBS Browser source, if they desire.
With regards to custom CSS, some selectors to be aware of are:
* `#content`: The entire container.
* `#mon`: The image tag representing the Pokémon species.
* `#item`: The image tag representing the held item.
* `#tera`: The image tag representing the Tera type.
* `.fainted`: The class applied to `#content` when the Pokémon faints and to `#item` when the item is consumed.
The following selectors are used to style Team Icons:
* `.outline`: The class applied to `#mon`, `#item` and `#tera` when the "Outline" icon effect is selected.
* `.shadow`: The class applied to `#mon`, `#item` and `#tera` when the "Drop Shadow" icon effect is selected.
* `.shadow_outline`: The class applied to `#mon`, `#item` and `#tera` when the "Outline + Drop Shadow" icon effect is selected.
* `.custom`: The class applied to `#mon`, `#item` and `#tera` when the "Custom" icon effect is selected. This class provides no styling out-of-the-box; it is meant to be used in conjuction with custom CSS from OBS.
## Credits and Acknowledgements
* Pokémon renders and item icons downloaded from [Serebii.net](https://www.serebii.net).
* These images are artwork from Pokémon games. These images are believed to be [fair use](https://en.wikipedia.org/wiki/Fair_use) on the grounds that they are not being used to claim ownership or official affiliation with the source material, nor are they being used to gain profit. Furthermore, they do not constitute a "substantial portion" of the copyrighted work.
* OBS WebSocket JavaScript Client Library from [obs-websocket](https://github.com/obsproject/obs-websocket).
* Logo design by [bonbombs](https://twitter.com/chiffles_).
* UNOWN font created by [Arien Epic](https://www.dafont.com/unown.font).