TourKOAL (Tournament Knowledge and Overlay Assistant for Livestreams)

v1.3.2 - Check it out!

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!

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.
  • These images are artwork from Pokémon games. These images are believed to be 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.
• Logo design by bonbombs.
• UNOWN font created by Arien Epic.