inkfarer / ipl-overlay-controls Goto Github PK

With new features getting added frequently, the main "IPL" workspace of the dashboard has become cluttered with options.
Less frequently used options should either be toggleable (With something like a collapsible menu) or moved to a different workspace.

This dashboard should eventually be refactored to TypeScript. My plan for this to use Webpack, as it also brings features like auto-reload and the possibility to use SCSS.

Prettify the file uploader

Design mockup:

Currently, the importer for rounds and tournaments supports linking a web URL that returns a JSON file on request. An option to upload a JSON file through the dashboard may be desired if the JSON is not uploaded to a web server.

Continuation of #18 .

Along with the changes suggested previously, it may be feasible to bind array values to elements.
Idea:

Given the following template:

<div id="array-elements-wrapper" data-bind-object="listRep">
    <div data-object-id class="space">
        <input data-bind-list-value="name">
        <input data-bind-list-value="email">
    </div>
</div>

with data

{
    "IDIDID": {
        "name": "name namerson",
        "email": "[email protected]"
    },
    "DIDIDI": {
        "name": "nome nomerson",
        "email": "[email protected]"
    }
}

would produce the following result:

<div id="array-elements-wrapper" data-bind-object="listRep">
    <div id="listRep_IDIDID" class="space">
        <input value="name namerson">
        <input value="[email protected]">
    </div>
    <div id="listRep_DIDIDI" class="space">
        <input value="nome nomerson">
        <input value="[email protected]">
    </div>
</div>

When team data is imported via manual JSON fine, allow the file to contain data on the source and the tournament ID so platform-specific features can still work.

• Allow teams to be imported from specific events, not the whole tournament
  • If a tournament has a single event, choose it automatically
• Fetch additional data for players and teams:
  • Pronouns
  • Team images

To prevent compatibility issues, a way of detecting whether the currently active graphics are compatible with the current dashboard version should be implemented.

Proposal: Define a dashboardVersion attribute in the graphics' package.json files. An extension on the dashboard side can read these attributes when NodeCG is started and warn the user if incompatible versions are detected.

Existing behavior:

• Click on async button
• Import status element near button changes state to "Loading"
• Element changes state to "Success" on operation success or "Fail" on operation failure

New behavior:

• Click on async button
• Button is disabled, text changes to describe action (eg. "Updating...")
• Button changes color and re-enables on operation success or failure, text changes to reflect result

https://dev.twitch.tv/docs/api/reference#create-prediction

• Create a dummy graphic that listens to OBS scene changes
• When the gameplay scene (where the dummy graphic is placed on) is switched to, send an event back to select the next color automatically.
• If the dummy graphic is opened outside OBS, display usage instructions.
• It should be possible to disable this behavior temporarily.

Add Jest Unit Test support for running unit tests on functions and extensions

The ability to use WebSocket to receive Twitch Prediction data as updates come in via the Radia Production API.

• stages should be moved out of the meta object, as it doesn't fit the definition of metadata.
• Rename data to teams
• Convert meta.source to an enum
• Convert stages.type to an enum

Sort teams in alphabetical order so they're easier to find when there are many teams.

• An user should be able to define the round and teams being played up next.
• Store this data in a new replicant (upcomingRound?) similar to the activeRound being made in 3.0.0, but without keeping scores or winners.

Add an option to pick a team from the saved teams, and change:

• The team name
• The names of any players on the team (Maybe add players? Players should be limited to 8 per team)
• The team logo URL

Our current implementation looks like this:

<input id="text-input">

const textInput = document.getElementById('text-input');
const textRep = nodecg.Replicant('textRep');
textRep.on('change', newValue => {
    textInput.value = newValue;
});

An alternate implementation would work like this:

<input id="text-input" data-bind-replicant="textRep">

A common JS file would find elements with this data attribute and bind their values to the replicants given.

Furthermore, it may be feasible to bind object values to elements.

<input id="object-prop-input" data-bind-replicant="dataRep.text">

When updating casters:

• If given Twitter handle does not start with '@', add it
• Convert pronouns to lower case

Currently, to change team colors, the user has to open a dropdown and select a pair of colors. Since the order team colors come up in is known most of the time, this could be simplified by adding next and previous buttons to move between colors.

For example, when pressing the 'copy' button at the casters panel, when the copy finishes successfully, flash the button green and change the text to 'Done!'

This would:

• Help differentiate between what stages are intentionally unknown and what stages are unknown due to parsing errors
• Make it clearer for the viewer that the round is being played with counterpicks; "Unknown stage" isn't very clear at first glance

Use the Battlefy API to retrieve the highlighted match from a bracket to display next on stream.

Add support for Smash.gg StreamQueue for getting highlighted matches

• Edit team importer to use smash.gg IDs
• Import stream stations from smash.gg
• import streamQueue from smash.gg

Currently, this data is stored in a teamImageHidden replicant. This data should be stored per team, so the state will be retained when the team is switched out and there's a lesser chance of the toggles being forgotten when teams change.

Issues reported by an user:

• When changing team colors, they wouldn't update on stream
• Team names wouldn't show up properly on the dashboard but would on stream
• After trying to update colors, the current round scores wouldn't update

Encountered with dashboard v2.7.2 and using sos-overlays (master).

To check:

• Are these issues with the dashboard or the graphics?
• Is any other functionality broken with a clean install of the bundle?
  • Test with a production build without development dependencies (Ideally, use the build branch.)
  • Test after removing all replicants, so default values are used.

⚠May require a new major release.

When a round has completed, store the team colors that were used that round.
Theoretically, this would involve replacing the gameWinners replicant with a general gameData replicant, that can contain both the winner and colors of each round. When a round is completed (score is incremented), save what the color is set to at that moment.

This applies to the casters and rounds panels (potentially others?).

What?

• Rounds would no longer contain team data, only what stages and modes are being played.
• Introduce matches:
  • Begin a new match from a round and pair of teams from the "Upcoming Round" panel
  • Recall matches from the "Active Round" panel
  • Matches would get their initial stages and modes cloned from it's round, but the data would not be synced (Even though sets are played on the same round, they might have different stages or modes played, for example during counterpicks.)

Why?

• Handle multiple matches being played on the round.

⚠Likely requires a new major release.

In the scoreboardData replicant, instead of using the swapColorOrder boolean, swap the clrA and clrB values when swapping team colors. This would remove unneeded logic in graphics.

To clearly communicate any errors occurring in dashboard panels to the user, they should be shown at the top of dashboard panels as a message when they occur.

• After a short delay, the message would disappear.
• Error messages should be cut off at a reasonable length
• Show no more than two errors at one time, but keep showing them in the console.
• Error messages may be closed by the user before they disappear.

• Tweaks to maps - New schema:

"ID1": {
  "meta": {
    "name": "Map List 1"
  },
  "maps": [
    {
      "map": "Sturgeon Shipyard",
      "mode": "Clam Blitz"
    },
    {
      "map": "Sturgeon Shipyard",
      "mode": "Clam Blitz"
    },
    {
      "map": "Sturgeon Shipyard",
      "mode": "Clam Blitz"
    }
  ]
}

• New casters schema - Schema:

        "aAa": {
            "name": "First Caster",
            "twitter": "@CasterFirst",
            "pronouns": "he/him"
        },
        "bBb": {
            "name": "Second Caster",
            "twitter": "@CasterSecond",
            "pronouns": "she/her"
        }

• Rename scenes - "main", "teams", "stages" (Likely dropping support for LI Schedule)
• Refactor music, so overlays only need to access the "nowPlaying" replicant to get access to the currently playing song, manual or last.fm
• Allow the last.fm username to be set within the dashboard
• When creating a map list, use the generated ID as the default name
• Map importing - Make map and mode name validation case insensitive
• Rename CSS classes to be in accordance to accepted conventions (eg. className -> class-name)
• General code quality tweaks (Will probably end up installing a formatter)
• Review replicant names
• Don't concatenate team names when importing teams, leave it to the components displaying them (graphics, dashboard panels)
  (...more? Might add to the issue.)

When a new round is started:

• Store what teams played in the round.
• Store the stages and modes played, and who won.
• Store the final score
• For sorting, store whether the match is completed in a boolean, and the time the match completed.

Additionally:

• An user should be able to recall a previously finished round from the store. When this is done, the round data should be kept, but the round should be considered unfinished until it is swapped out again.

In some cases, custom components should be used in dashboard panels.

To bring an example, currently the selectors for game winners (no win, A win, B win) are pieced together from their components in the dashboard code. A cleaner solution would be to create a winner-selector custom element that the dashboard code can add to the panel.

As mentioned by #20, using Webpack can allow us to use many more neat tools to streamline development than just TS. Using SCSS would make stylesheets less repetitive and more convenient to write.

This can be done client-side.

• Instead of using the activeRoundId replicant, store the data of the active round directly in an activeRound replicant.
• This new replicant would contain:
  • The teams in play (Currently stored in scoreboardData)
  • The winners of the games played and their colors (gameData)
  • The score of the ongoing game (teamScores)
  • What stages and modes are in play (rounds & activeRoundId)
• To start a new match, a new round should be selected along with the teams in play.
• If team or round data (Value of tournamentData or rounds) updates, this replicant should too.
• When this replicant is updated, the values stored in tournamentData and rounds should reflect those changes.

Full log:

error: [ipl-overlay-controls] Guild Check Auth Error: TypeError [ERR_HTTP_INVALID_HEADER_VALUE]: Invalid value "undefined" for header "Authorization"

Occurs when NodeCG is started and radia is unset in the bundle configuration. Found on a fresh install, so radiaSettings has only default values.

https://github.com/IPLSplatoon/Radia-Productions

Currently, for example, if the dashboard fails to connect to the radia-productions API, the warning message displayed will state Unsupported Guild, unable to run predictions. , even though that isn't correct.

• Store times in UTC
  • Convert into the user's time zone in the dashboard
  • Prevents inconsistencies if there are users from multiple time zones watching values from the same dashboard
• Store the year of the next round
  • Shouldn't be user selectable
  • Helps avoid unexpected behavior - For example, the day after December 31st, 2020 is currently January 1st, 2020 in graphics logic.

Instead of having to manually extract the tournament ID out of a Battlefy tournament's URL, the dashboard should be able to do that automatically.

• Add a dashboard panel with a to-do list
• Have a default list of checks to be done
• Allow items to be added and removed from the list
• Allow the list to be reset
• Allow multiple lists to be created (ex: before stream, before round start)