View stats of players in the current game of Company of Heroes 3.
Download from https://coh3stats.com/desktop-app or from release page.
This application needs WebView2 Runtime. This is by default part of Windows 10 and 11. If you are missing the runtime, the installer will be automatically triggered. But if for any reason you don't want to install the WebView into your system, you can donwload the release called "fullBundle" which has all deps included. Download Full Bundle from releases
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.
.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;
}
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!
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.
cargo test --package coh3-stats-desktop-app --lib
Build the app and run
yarn test:e2e
https://tauri.app/v1/guides/testing/webdriver/introduction
cargo install tauri-driver
Don't forget to run prettier with yarn fix
. Should be covered by husky.
package.json
src-tauri/Cargo.toml
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.
The backend wrapping the frontend code is created with Rust + Tauri. The code can be found in the src-tauri folder.
The main configuration file of the app is in src-tauri/tauri.conf.json
.