The Brawlback Launcher is a desktop application for Brawlback built on the Electron framework with a React frontend in Typescript. It is being built to handle updating Brawlback's Dolphin Build, playing Brawlback Online with major Brawl mods through Lylat, launching and analyzing replays, and more. This repository is part of the Brawlback ecosystem handled by the Brawlback Team. To see all of the Brawlback projects repos, visit https://github.com/Brawlback-Team.
This launcher is built on a fork of the Slippi Launcher from the Project Slippi team from commit 15db4bd
These are the applications you will need to install in order to build this project:
- Clone the repo via:
git clone https://github.com/project-slippi/slippi-launcher.git
- Navigate into the directory and run:
yarn install
to install all dependencies - Use
yarn run start
to run the app in develop mode - Use
yarn run package
to build a release
For development, we recommend using VSCode with the following plugins:
These extensions will provide automatic formatting and warnings about code quality issues before you commit/push.
common
- Code shared between both
main
andrenderer
processes. Thus the code written should be agnostic to which thread its being imported from.
- Code shared between both
main
- Code for the main process. e.g. electron config, menubars etc.
renderer
- Code for the React frontend
<module>
- Modules for the main process that handles specfic tasks should be kept in their own folder with a clear name e.g. settings, dolphin etc.
components
- "Dumb" components reusable throughout the app. These should not directly access or modify state but should accept handlers and state info via props.
containers
- Components that piece multiple dumb components together into a single "container". These can modify state and bind logic to the components but make sure most complex logic is in
lib
.
- Components that piece multiple dumb components together into a single "container". These can modify state and bind logic to the components but make sure most complex logic is in
lib
- Reusable logic, such as hooks, goes here to keep the components mainly representative and visual.
styles
- Code for app styles and theming.
views
- The root pages of the app. Give a starting point for finding components.
While not required most <modules>
will use Electron's IPC to facilitate communication between the main and renderer processes of the application. In order to ensure proper type safety these folders are structured in a specific way as well. To add onto an existing IPC api endpoint or create a new one, follow this structure:
types.ts
- Interfaces and Types used throughout the
<module>
.
- Interfaces and Types used throughout the
api.ts
- Functions that are exposed to the renderer process as api endpoints or events via
window.electron.<module>.<function>
. Events are subscribed to in theuseAppListeners.ts
file atrenderer/lib/hooks
. Each api is exposed to the renderer process inmain/preload.ts
- Functions that are exposed to the renderer process as api endpoints or events via
ipc.ts
- Event and Handler signatures for main and renderer processes using the design pattern described in
utils/ipc
. Writing the signature using themakeEndpoint
function fromutils/ipc
allows us to ensure proper type safety in both the main and renderer processes while also using Electron'scontextBridge
andipcRenderer
.
- Event and Handler signatures for main and renderer processes using the design pattern described in
setup.ts
- Implements all handlers from the
api
andipc
files for the main process in one exported function that is called inmain/installModules.ts
.
- Implements all handlers from the
Modules will have other files that are more specific to how they are organized, but this is the general structure for using Electron's IPC in a type safe manner.
Contributions are welcome! Check the Discord under the webdev-general
channel for what's currently being worked on. To ensure dev channels don't get crowded we ask everyone to get verification first from the dev-role-verification
channel before being allowed to write in them. When making a PR, ensure you are not PRing your main
branch and always describe the feature and what testing you've done so far.
This application uses Electron React Boilerplate as a base and includes most changes up to commit 10c22e5.
Brawlback Launcher is released as open source software under the GPL v3 license. See the LICENSE file in the project root for the full license text.