Skip to content

Added "Simple Elements" directory under Overlays with simple party browser source options#5

Open
BeatnikAU wants to merge 2 commits intoReadek:mainfrom
BeatnikAU:main
Open

Added "Simple Elements" directory under Overlays with simple party browser source options#5
BeatnikAU wants to merge 2 commits intoReadek:mainfrom
BeatnikAU:main

Conversation

@BeatnikAU
Copy link
Copy Markdown

@BeatnikAU BeatnikAU commented Jun 14, 2025

I created a new directory under Overlays called "Simple Elements" with html files for separate layouts of the pokemon party by itself. I created the 3x2 layout to add to my existing stream layout and thought it might be useful for others, so created alternate layouts as well. I chose the directory name as something agnostic rather than "Party" so that it could be expanded on with other elements to add to your stream individually.

All I've done to create these is make a copy of the "X and Y" directory, strip the other elements out of the html and css files, then duplicate, rename, and adjust the remaining css for the desired layout. I haven't made any changes to existing files outside of this new directory.

I only know basic web development and I'm pretty rusty, so feel free to suggest better ways to code this or make changes yourself.

I'd love to add the same for badges, but I haven't been able to figure out how the badges work since I'm working through USUM and the badge layout is so different.

3x2 layout example

@BeatnikAU BeatnikAU changed the title Added simple party browser source options Added "Simple Elements" directory under Overlays with simple party browser source options Jun 14, 2025
@Readek
Copy link
Copy Markdown
Owner

Readek commented Jun 15, 2025

Cool idea! Some observations as of now:

  • 6x1 layout appears to be broken.
  • Layouts break whenever a trainer battle starts (if using auto for gen 6/7), I don't think this can be fixed without script changes but having a GUI setting that disables the battle overlay could be something to work on.
  • I believe this could be achieved with a single html file by simply having the list be responsive to wrap whenever there's no space left, depending on browser window:
#botPokes {
  height: 260px;
  flex-wrap: wrap;
}

This will make it work like a 3x3 layout when the browser width is at like 1000px, for example (someone else asked about this a while ago). Of course a fixed layout like 1x6 would need some more css rules.

As for badges, I think I'll need to do some work for non-standard badges (gen2, gen7, gen9) before this can happen, as of right now the scripts can really only do standard 8 badges without modifications.

@BeatnikAU
Copy link
Copy Markdown
Author

Thanks for the suggestion and code. I've changed it to a single html and css file with flex-wrap and checked this displays correctly in all widths in OBS.

I've amended the readme in Overlays/Simple Elements to reflect this as well. Let me know if you wanted anything added to the main readme if you're happy with this.

@Readek
Copy link
Copy Markdown
Owner

Readek commented Jun 19, 2025

Tested it again! I'm sure this will be useful for some people.

  • Atm, pokemon are only centered when there's more than one row, meaning that there will be mismatches in positions depending on number of pokes in the party.
    • This can be fixed by dropping #partyPokes's position: absolute in favor of just adding some padding-top or margin-top so some pokes don't cut off the top (i suggest more than 20px).

As for battle overlay breaking the overlay, I think a quicker solution could be for the html to load a custom Overlay.js that just loads the party ignoring battle conditionals, redirecting the rest of the function calls to their proper scripts. That can be out of the scope of this PR, but I can easily do it once this is merged. This could also help adding the badges (as long as they're standard 8 atm).

Everything good for the README as long as the battle overlay issue gets fixed after so we don't have to warn about it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants