Speedrun Timer

An open source speedrunning timer with a decent set of features!

Features

• Timer with start/pause, end and reset hotkeys
• Delta time display (compared to PB)
• Splits (including split delta time)
• Personal best storage and display
• Chroma background for OBS
• Local storage of your times
• Configurable game name and speedrun category
• Configurable Theme
• Runs as a webserver

Planned Features

• Split storage
• Speedrun.com api
• Run exporting to a file

How to use

First, download and unzip (or clone) this repository somewhere on your computer and make sure you have npm and nodejs installed. You can find out how to do so here. Then, open up a terminal in the root folder of this repository and run npm install. This will ensure you have all the required dependencies installed. Then you can run npm start, to run the backend server. You dont need to worry about the backend server too much, unless the port it is running on is already in use. You can change said port in the backend.js at this line:

const io = new WebSocket.Server({ port: 8080 });

IF YOU CHANGE THIS ALSO CHANGE IT IN THE FRONTEND! You can do so right here in the frontend.js:

const ws = new WebSocket('ws://localhost:8080');

Similarly, you can change the port the frontend server runs on right here in the backend.js:

const frontEndPort = 3000;

In addition, if you'd like to change the keybinds through which the timer is controlled, you can do so by modifying these statements in the backend.js:

const TOGGLE_KEY = [UiohookKey.NumpadDivide]; // Toggle start/pause
const ROUND_KEY = [UiohookKey.NumpadEnter]; // Next round
const RESET_KEY = [UiohookKey.NumpadMultiply]; // Reset timer
const END_KEY = [UiohookKey.NumpadSubtract]; // End run
const CLEAR_KEY = [UiohookKey.NumpadDecimal]; // Clear rounds

For example, say you wanted the toggle action to be triggered when you press ctrl+Y, you can do the following:

const TOGGLE_KEY = [UiohookKey.Ctrl, UiohookKey.Y];

You can find the supported keys using intellisense, or optionally by looking at the library source code which can be found here.

If you want to change the theme of the timer to fit your color theme better, you can do so by modifying the index.css file. Notably these variables:

:root {
  --chroma-key-color: #00ff00;
  --bg-color: #1e1e1e;
  --bg-color2: #252525;
  --fg-color1: #ffffff;
  --border-color: #2d2d30;
}

However, if you need more control over the colors, you can always modify it further. Keep in mind that some parameters, like the color of #timer are dynamically controlled by the frontend.js. This means you will have to modify the color changing statements in the frontend.js. They look a little like this:

updateTimerColor('#ffffff');

Finally, the name of the game, and speedrun category can be changed in the frontend.js by modifying these lines:

const game = "Abandoned Archive";
const category = "Any%";

Changing any other parameters used throughout the code is not recommended unless you intend in implementing your own features. If you do so, please consider posting a pull request of your changes so they can be implemented in the main version!

FAQ

Q: If livesplit already exists, why did you make this?

A: Mainly just as a fun coding project for myself.

Q: Can i make my own modifications?

A: Absolutely! If you make any notable additions to the project, please consider posting a pull request of your changes so they can be implemented in the main version!