Smash Soda Overlay

Overlay application to accompany Smash Soda
Latest Release · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Setup
3. Testing
4. OBS
5. Contributing
6. License
7. Contact
8. Acknowledgements

About the Project

Here is the source code for the overlay application included with Smash Soda. It has been developed with Electron. It is not intended to be run standalone, and won't work with Parsec Soda V's Web Sockets widget. The overlay uses WebView2.

The source code is made public in case anybody wants to modify and compile for their own purposes (or contribute to the project!).

Issues and feature requests should be made in the Smash Soda repository.

Download Download latest version

Issues Report issues and request features

Discord Join the Discord community!

Wiki Read the full wiki guide here!

Setup

The overlay is built in the Wails framemwork. Follow their guide for setting up a development environment here. (Note this overlay is compatible with Smash Soda version 6 onwards).

Once wails is installed, clone the project, cd in to the frontend subfolder, and install the node packages.

git clone https://github.com/Smash-Soda-Team/smash-soda-overlay
cd smash-soda-overlay/frontend
npm install

To run the overlay in dev mode:

wails dev

To build the application:

wails build

---

Socket messages from Smash Soda to come in this JSON format:

{
  "event": "event name",
  "data": {}
}

This is than transmitted across the app with the eventBus, which I just hooked on to the window object to keep things simple. You can then listen to events like:

window.$eventBus.on('event name', (data: any) => {
  // Do thing
});

Testing

The overlay has a new theming system. You can put custom CSS files inside the themes folder alongside the built app, and select themes in Smash Soda. When developing a theme, you can run the overlay in "design mode". This will stop the overlay from trying to connect to Smash Soda and display some placeholder widgets on the overlay:

wails dev -appargs design

You can display the browser inspector in dev mode by passing the inspector argument:

wails dev -appargs inspector

The overlay has a built in websocket server if you have your own testing setup for the websocket messages:

wails dev -appargs server

The server is served at:

ws://localhost:8080/ws

When providing multiple arguments, put inside quotes:

wails dev -appargs "design inspector server"

OBS

The Smash Soda overlay application is primarily intended for users who want to see details about their room at all times and only have one monitor. For those wishing to build their own OBS overlays, it's as simple as connecting to the websocket server that Smash Soda creates when hosting, and then displaying the info how you want.

Check out the obs_example.html for a very basic example of how to make a static HTML with vanilla JavaScript, to render data from Smash Soda.

Here is a static web page template for displaying your Parsec room chat in OBS...it'll also broadcast display Twitch chat in your Parsec room!

https://github.com/soda-arcade/twitch-overlay-widget

Contributing

See the open issues for a list of proposed features (and known issues).

Would you like to contribute to the project? That's great! Here's what you do:

1. Open a new issue reporting what you're going to do.
2. Fork this repository.
3. Create a branch for your feature.
4. Make your local changes.
5. Submit a pull request.

If this is helpful to you and you'd like to say thanks, you could buy me a coffee if you want!

License

See LICENSE.txt for more information.

Contact

Project Link: https://github.com/MickeyUK/SmashSoda

Acknowledgements

• [MickeyUK] - GitHub - Smash Soda Project Lead