wasd2022-frontend

about

This is a NodeCG bundle used for broadcast graphics for the videogame speedrunning marathon event Warwick's Awesome Speedruns & Demos 2021 Summer.

It also uses nodecg-cli to setup the bundles.

dependant NodeCG bundles

• nodecg-speedcontrol for run detail management, run timing and Twitch detail integration
• nodecg-tiltify for pulling donation and reward information for a campaign from Tiltify.com
• nodecg-tiltify-donation-history for displaying a reader in the NodeCG interface
• ncg-spotify for displaying the currently playing song used as background music being played via Spotify

dependant JS packages

• mithril for a hyperscript based framework for creating the web graphics and interfaces.
• gsap for providing animations for web graphics
• fitty for dynamically resizing text to fit in dimension in web graphics.
• lodash for the get function to fetch deeply nested values
• moment for providing time conversion convenience functions
• rollup and it's plugins for bundling the source JS code and it's assets for use with NodeCG.

screenshots

break screen

game screen

installation

Tested with node 16.13.1 and npm 8.1.2

clone and install NodeCG and bundles

npm install nodecg-cli -g

# Create repo
nodecg setup

# Install bundles
nodecg install speedcontrol/nodecg-speedcontrol
nodecg install ericthelemur/nodecg-tiltify
nodecg install EwanLyon/ncg-spotify

# Install this bundle 
cd bundles
git clone https://github.com/uwcs/wasd2023-nodecg

build

cd wasd2023-nodecg
npm ci
npm run build

configuration

Copy the JSON config files to /nodecg/cfg. In wasd2022-frontend:

cp cfg/* ../../cfg

Edit the JSON files in /nodecg/cfg to populate them with credentials. See the README files of the dependent NodeCG bundles for how to obtain these credentials.

running

In wasd2022-frontend:

npm run start

dev

Run npm run start to host, and npm run watch to incrementally build.

license

All source code in this repository is licensed under the MIT license, aside from exceptions mentioned below. See the license.txt file for full license terms.

exceptions

• Obtained from fonts.google.com and is licensed under the Apache License, Version 2.0:

  • src/dashboard/assets/roboto-v20-latin-regular.woff2

• Obtained from 1001Fonts and is licensed under the 1001Fonts Free For Commercial Use License:

  • src/graphics/assets/daggersquare-oblique.otf

• Obtained from the WASD Organisers and is copyright of the WASD Organisers, used with permission:

  • src/graphics/assets/wasd-avatar.png
  • src/graphics/assets/wasd-keys.svg

• Obtained from Font Awesome and is licensed under the Create Commons Attribution 4.0 International License:

  • src/graphics/assets/microphone-alt-solid.svg
  • src/graphics/assets/running-solid.svg
  • src/graphics/assets/twitch-brands.svg

• Obtained from SpecialEffect and is Copyright of SpecialEffect, used with permission:

  • src/graphics/assets/specialeffect-white.png

• Obtained from Twitch and is Copyright of Twitch Interactive, Inc:

  • src/graphics/assets/not_like_this.png