COH3 Stats Desktop App

View stats of players in the current game of Company of Heroes 3.
Download from https://coh3stats.com/desktop-app

Setup OBS Streamer Overlay

1. Make sure you have used the Coh3 Stats Desktop App once and it displayed stats of players in your game
2. Start OBS
3. In OBS Sources section click on "Add Source"
4. Select Browser
   
5. Create a new Browser Source with any name you want
   
6. In the browser properties select local file
   
7. In the Coh3 Stats Desktop App go into settings
   
8. Copy the path to the streamerOverlay.html
   
9. In the OBS properties window click on browse to set the path to the streamerOverlay.html
   
10. An explorer window opens. Paste the copied path into the path field and hit enter
    
11. Select the streamerOverlay.html file and click open
    
12. Set the resolution to the same resolution Coh3 is running at. E.G 1920 Width and 1080 Height
    
13. Click Ok to finish creating the source
    
14. Scale the source to match the Coh3 source size

Custom CSS for the overlay

If you don't like the default style of overlay, you can modify it with custom CSS. All the elements in the overlay have CSS classes assigned. The styling is as follows:

.coh3stats-overlay {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  position: absolute;
  left: calc((100vw / 2) - 485px);
  right: calc((100vw / 2) - 485px);
  top: 65px;
}

.coh3stats-overlay-left {
  flex-grow: 1;
  flex-basis: 0;
  padding-right: 40px;
  padding-left: 10px;
}

.coh3stats-overlay-right {
  flex-grow: 1;
  flex-basis: 0;
  padding-left: 40px;
  padding-right: 10px;
}

.coh3stats-overlay-player {
  color: white;
  font-size: 20px;
  font-family: Tilt Warp;
}

.coh3stats-overlay-player-factionIcon {
  padding-right: 10px;
  width: 25px;
  height: 25px;
}

.coh3stats-overlay-player-flagIcon {
  padding-right: 10px;
  width: 25px;
  height: 25px;
}

.coh3stats-overlay-player-rank {
  padding-right: 10px;
  min-width: 4ch;
  display: inline-block;
  overflow: auto;
}

.coh3stats-overlay-player-rating {
  padding-right: 10px;
  min-width: 4ch;
  display: inline-block;
  overflow: auto;
}

.coh3stats-overlay-player-name {
  max-width: 17ch;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Steps when you want to change something. Let's say I want to move it lower and change the color to red.

1. Pick the classes you want to change and do the changes:

.coh3stats-overlay {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  position: absolute;
  left: calc((100vw / 2) - 485px);
  right: calc((100vw / 2) - 485px);
  top: 250px;
}

.coh3stats-overlay-player {
  color: red;
  font-size: 20px;
  font-family: Tilt Warp;
}

2. Open the configuration of "Overlay" in OBS
3. Paste the 2 modified classes into the box Custom CSS
4. Click OK and observe the changes

Development

Install rust on your system using rustup https://www.rust-lang.org/tools/install

Install all dependencies with:

yarn install

To start the development build with hot reload run:

yarn tauri dev

The first execution takes a bit longer as the rust libraries have to be compiled once. Any future restarts will be much faster!

To build the app and an installer run:

yarn tauri build

The build output can be found in src-tauri/target/release. The installer can be found in src-tauri/target/release/bundle/msi. We distribute the app with msi installer, so let's keep that consitent.

Running Rust BE Tests:

cargo test --package coh3-stats-desktop-app --lib

Running e2e tests:

Build the app and run

yarn test:e2e

https://tauri.app/v1/guides/testing/webdriver/introduction

• Install tauri driver cargo install tauri-driver
• Get msedgedriver.exe to your path https://tauri.app/v1/guides/testing/webdriver/introduction/#windows

Don't forget to run prettier with yarn fix. Should be covered by husky.

Release

• Increase the version in files:
  • package.json
  • src-tauri/tauri.conf.json
  • src-tauri/Cargo.toml
• Commit the updated version
• Make a new tag on master

Project Architecture

Frontend

The frontend is run on the OS native web renderer. This frontend is build with Vite + React + Typescript. The frontend related files are at the root level of the project with the React components in the src folder.

Backend

The backend wrapping the frontend code is created with Rust + Tauri. The code can be found in the src-tauri folder.

App configuration file

The main configuration file of the app is in src-tauri/tauri.conf.json.