Battle Buddy - A Teamfight Tactics App

A desktop app that displays the top tier compositions in the meta along with the best units to run and their best-in-slot items. Updated each patch with data gathered from challenger tier lists!

Comment

Meet the developers

Christina Raganit [Github | LinkedIn]

A graduate from British Columbia Institute of Technology's Computer Systems Technology program and a second-year student in Simon Fraser University's Interactive Arts and Technology program. UI/UX designer and junior developer for BC-based startup Karma Well Health Technologies. Skilled in in frontend web development, graphic design, business communications, and fantasy writing.

Ray Gong [Github]

A third-year Honours student studying for his Bachelor of Science degree with a specialty in Computer Science. Strong knowledge in mathematics, calculus, software development with Python and Java, and game development with C# in Unity. Avid video gamer.

What is Teamfight Tactics?

Teamfight Tactics is an auto battler game developed and published by Riot Games. The game is a spinoff of League of Legends and is based on Dota Auto Chess, where players compete online against seven other opponents by building a team to be the last one standing.

Teamfight Tactics is the property of Riot Games. Resources, art, champion designs, and names have not been created by neither team members. Neither Ray Gong nor I, Christina Raganit, have any affiliation to Riot Games.

Inspiration behind Battle Buddy

I've been crazy about Teamfight Tactics for a really long time, and in this game, I just wanted to be the very best (like no one ever was), so I actively sought many tools to help me along the way. I stumbled upon this spreadsheet on the Competitive TFT subreddit, and it was the most informative tool for climbing that I ever found. I climbed from Silver to Diamond 1 95 LP (so close to Masters, yet so far away) in Set 4.5 with this spreadsheet. In Set 5.5, I used this tool to climb in the TFT Hyper Roll game mode to Hyper Tier and am currently sitting at 4,256 LP. (I peaked at one point at rank #904 in all of North America.) The only issue with this spreadsheet? It's really difficult to find the data you need in such high-stress situations.

Ray and I decided that we wanted to create a desktop app that displayed all the data in a way that was easy-to-read while in-game. We wanted to create a simple user interface that shows all the information that the user needs to know to win their lobbies.

What it does

Battle Buddy parses the data displayed on the Teamfight Tactics spreadsheet with the use of Python before displaying it into human-readable information in a desktop app, perfect for tabbing in and out when in-game!

How we built it

First, Christina created the wireframes and the user interface on Figma. Then, Ray performed the backend tasks in parsing the data from the spreadsheet using Python, while Christina worked on the frontend tasks such as programmatically creating elements using JavaScript, HTML, and CSS.

Challenges we ran into

Christina: I would say that the biggest challenge we encountered was time management, as we spent a huge chunk of Friday playing in a League of Legends tournament, so we hardly had any time to prepare!

Ray: We were very ambitious with our project, and we did not have as much time as we liked to create it, especially due to the inconsistency of the formatting of the spread sheet. In terms of technical difficulties, the decision to use Python to parse the spreadsheet introduced quite a few problems such as the somewhat poor performance and also the lack of an easy way to communicate between Node and Python, but I like to say that the final product went very well.

Accomplishments that we're proud of

Christina: I would say the accomplishment that I am most proud of is taking into account the many edge cases of displaying information when designing the user interface. I think because we have a clear image of how the information will be displayed, we always had a general idea on how things had to be done.

Ray: Connecting the backend with the frontend was initially very frustrating, but when we got it working, it felt very rewarding. It was something big and beautiful that we created together as a team, and in the moment we got it working, I felt like no one could take that away from us.

What we learned

Christina: I would say I am very proud of myself for learning how to use Electron as a tool! I have been wanting to develop desktop applications for a very long time, and I think this knowledge will only serve me in the future.

Ray: I learned Electron and a little bit of frontend development with JavaScript.

What's next for Battle Buddy

Ray and Christina intend to introduce more features that would be useful for any Teamfight Tactics player, such as a loaded dice tool to determine the probability of rolling a dice. Christina would also like to include maps to show players what the optimal positioning is for the top tier meta comps.

Share this project:

Updates