tftoverlay

A transparent overlay for Teamfight Tactics that tracks recent placements and current rank. Inspired by tracker.gg streaming overlay.

Installation

• Go to Releases
• Download the latest .7z and extract it
• Run tftoverlay.exe

Screenshots

Rank Overlay

Summoner Search

Overlay In-Game

How it Works

Application sends multiple requests to Riot Games' api through an AWS proxy (PuuID, Match History, Rank, Division, etc).

• renderer.js - process handles rendering the UI and any changes made to it.
• main.js - process handles creation of browser windows and system operartions such as closing and setting the windows to be always on top.
• preload.js - process handles exposing Node.js modules to the renderer as renderer.js is a browser instance and does not have access to these modules by default.
• forge.condfig.js - handles the options for packaging.

For Developers

• Install Node.js
• Install Npm dependancies with npm install
• Rebuild output.css with npx tailwindcss -i ./renderer/input.css -o ./renderer/output.css --watch
• Run with npx electronmon .
• Make a distributable version with npm run make

Credits

Riot Games API