Fish Train Streaming Tips

Are you a streamer wanting to run a fun fish train event with your community? Wouldn't it be awesome to include the details about the next fish in real-time right in your stream? Well, now you can!

Start by creating your fish train. Select the fish for your event, and once you've finished making the schedule, click the Generate Train Pass open to create the URL. Not only can you distribute this URL to your viewers (I'd recommend using a URL shortening service as the links get pretty long), but that same URL can provide an overlay in OBS.

1. In OBS, select your scene then in the sources tab, create a new Browser source.
2. Give it a name such as "Fish Train Overlay" and click OK.
3. Paste the URL generated for the Fish Train Pass in the URL field.
4. Set the Width to ~1000 and the Height to ~400. Don't worry, the overlay itself isn't this big, in fact it's usually much smaller. This just gives it a maximum space to work with.
5. Leave all of the checkboxes unchecked.
6. Set Page permissions to "No access to OBS". The overlay does not require any interaction with OBS.

Once you've configured the browser source, the last thing to fill in is the Custom CSS field. This is how all the amazing magic happens. Start by copying and pasting this entire block in:

:root {
    /*
     * Change this to "left", "center", or "right" depending on where you position the
     * overlay in your scene. This will effectively snap the table to that alignment.
     */
    --alignment: left;
}

/* DO NOT EDIT BELOW UNLESS FAMILIAR WITH CSS */

body {
    background-color: rgba(0, 0, 0, 0) !important;
    margin: 0px auto;
    overflow: hidden;
}

.ui.main.container > *:not(.fishtrain-schedule-list) {
    display: none;
}

.ui.fixed.menu {
     display: none;
}

.ui.ui.ui.main.container {
    padding: 0;
    margin: 0 !important;
    width: auto;
    display: flex;
    align-items: var(--alignment);
    justify-content: var(--alignment);
}

.ui.fishtrain-schedule-list.segment {
    margin: 0;
    /*
     * This padding controls the rounded border around the table.
     * I don't recommend removing it as the width of the table make change based on the
     * displayed info.
     */
    padding: 0.5em;
}

.ui.fishtrain-schedule-list.segment .scroll-context {
    overflow-y: hidden;
    max-height: initial;
    min-height: calc(1rem + (2 * 59.5px));
}

.scheduled-fish-entry.expired {
    display: none;
}

th.fish-caughtStatus-col, td.fish-caughtStatus {
    display: none;
}

.scheduled-fish-entry.upcoming.upcoming.upcoming-nth-1,
.scheduled-fish-entry.fish-intuition-row.upcoming.upcoming-nth-1,
.scheduled-fish-entry.upcoming.upcoming.upcoming-nth-2 {
    display: revert;
}
.scheduled-fish-entry.fish-intuition-row.upcoming {display: none; }
.scheduled-fish-entry.upcoming { display: none; }


/*
 * To reduce "dead space" in the table, you should leave each of these set to "min-content".
 * However, if you would prefer the table's width remain constant, you can comment out these
 * rules, or change min-width to a specific length. Experimentation may require advanced knowledge
 * so I would leave them set to these defaults.
 */
.fishtrain-schedule-list thead tr th.fish-name-col {
    min-width: min-content;
}
.fishtrain-schedule-list thead tr th.fish-availability-col {
    min-width: min-content;
}
.fishtrain-schedule-list thead tr th.fish-location-col {
    min-width: min-content;
}
.fishtrain-schedule-list thead tr th.fish-requirements-col {
    min-width: min-content;
}

The only configurable setting at the moment is the alignment property. This is useful if you need to place the overlay on the right, or center and makes it so the table snaps to that alignment. By default, only the current, active fish, and up to 2 upcoming windows are ever displayed. The columns themselves will only grow large enough to fit this information (which is why the alignment is important to set.)

In the future, I plan to include options for changing the colors too.

If you have any further questions, or suggestions, please contact Carby on Discord. They can be reached via the Fish'cord.