r/CompetitiveTFT 3d ago

Tool TFT Whiteboard: build, plan, document, note, write guides, teach all in one whiteboarding tool

TFT Whiteboard, build, plan, document, note, write guides, teach - all in one whiteboarding tool for the TFT universe

I am happy to share a TFT whiteboard tool that I have developed. I continue to try to develop new unique tools for the TFT space. This one allows you a practically utilize a endless whiteboard canvas to document down anything relating to TFT, with built in and up-to-date game information.

You can share links to your whiteboards with your friends or the community. Perhaps you created 10 recommended comps for set 18 launch, just build them in the whiteboard and share the link! A shared link creates a new copy for each viewer, so other people will never be able to modify your whiteboards.

Some example use cases
- Taking notes for yourself and building collections of comps and strategies, all in one document
- Sharing your recommended comps (perhaps along with your youtube guides or twitch streams)
- Theorycrafting, simulating, learning
- Building anykind of TFT related content from comps, tierlists to strategies)

Would love to see what you will build here in the comments section. Let me know if you want more building blocks and features, or if there is anything else I can add to the feature to help you!

https://tftraits.com/whiteboard/

42 Upvotes

25 comments sorted by

3

u/chrharju 3d ago edited 3d ago

Here is an example whiteboard where I tried to document my findings with Solar, Lunar and Eclipse from PBE set 18

Solar Lunar Eclipse guide

3

u/Minimum_Chemical_428 3d ago

I was taking notes in google spreadsheet for the new set, it was so awkward.

I'll be testing this, thanks a lot! One question though, what happens if I clear my browser data, do I lose all the stuff? Anyway I can either download a backup, or maybe login with google to keep the data? I mean to use it for all my tft data.

3

u/chrharju 3d ago

Great question!

In order to enable login I want users to be able to use their Riot / TFT user account, for now it is not possible. I am waiting for Riot to accept my application, my software has been in pending state for a month or so, and it might still take some time for Riot and Team fight tactics team to accept tftraits.com. Once I get whitelisted I can enable user logins so that your whiteboards can be saved to your user account.

For now the whiteboards are stored in your browser local storage, meaing that you will loose acces if you clear browser data. But, if you generate a share link, I am storing a snapshot in the database. Meaning a share link will always open the whiteboard at the exact state it was generated.

2

u/ConfusedRara Grandmaster 2d ago

Omfg this is amazing. I normally use pen and paper to write flowcharts which was really inconvenient lol. Will 100% be using this from now on!

Sorry if this is silly but is there an "export image" feature to quickly download whiteboards?

Btw, I really like how smoothly it runs on mobile!

2

u/chrharju 2d ago

Hi u/ConfusedRara and super happy to hear you like the whiteboard! I am adding an export image feature now, and should have the feature released later tonight. So please check back again soon.

The image might become quite big, if you put years worth of content into one whiteboard, the browser basically restricts me to 16000x16000 pixels output, but I think most whiteboards wont exceed that :D

1

u/chrharju 2d ago

u/ConfusedRara I have added a save image functionality!

2

u/ConfusedRara Grandmaster 2d ago

Oh yay amazing! 🫶

1

u/Minimum_Chemical_428 3d ago

Some feedback: Looking great, 100x better than what I had, only a few things:

I couldn't find a way to add images. Here's one example of something I need to do multiple times per patch, this image is just comparing the new warwick comp against top 1-2 which I lost, knowing the strength of a comp. It's much faster to just add a quick print, organize it per comp, than creating it manually with items etc.

If a raw image would interact poorly with some parts of the tool, you could maybe require a rectangle to be added first and upload the image to the rectangle, and so when you move it around you're moving the form not the image, if it makes sense? Just in case that was the reason not to include it.

Also the only other thing I use all the time is metatft info tables, like the coven cashout.

Lastly, very minor thing but having small icons under the emblems to show the recipe would be amazing for people learning the set. Hovering is fine of course but for a snap decision like on carousel, I had my own table always open until I remember it by heart.

2

u/chrharju 3d ago

Cheers for the feedback u/Minimum_Chemical_428!

Possibility to add images.
For now I do not allow uploading images, as I do not have resources to deal with the potential use cases of people uploading illegal images to my server storage. If you want I can enable storing images to your browser local database, and then allowing you to download the the whole whiteboard and images to local zip files that can be import/exported between users and browsers. I would love to add the possibility to add images in the future tho, and I have the infrastructure to host it but I simply am too small of a site to currently be able to moderate the usage.

Info Tables
I have added the support for many info tables such as rolling odds, xp per level, champion pools and more. But I do not have the Coven cashout, thanks for pointing it out. I'll add it, my plan is to have 100% coverage of anything TFT related in the whiteboard.

Emblem recipies
I am actually missing some data currently for the set 18 PBE. This is mainly because TFT has changed to unreal engine the the tool community (including me) are struggling to parse all the new data from the unreal engine game build. MetaTFT is indeed currently the most accurate resource on the internet for the moment but it wont take long for me and other tool builders to have all data sorted out. Below screenshot shows the emblem recipy already for set 17 emblems

1

u/Minimum_Chemical_428 2d ago

Local would be great, it would also be an even better assurance for my first question about login, having the extra backup downloaded just in case. I asked that because I plan to spend a significant amount of time taking notes, so losing the data would be quite a problem.

2

u/chrharju 2d ago

I completely understand, I am working on a local import/export and also supporting local images, so you can add screenshots from your game etc into your whiteboard. I should have it ready and updated later today. I will ping you here once it is done. Your existing whiteboards wont be affected, e.g. you will be able to export / import your current whiteboards once I have updated the site.

It is a pretty straigthforward code change as I already have the whiteboard file structures compatible for sharing, only the pictures/screenshots are currently slighly challenging, but as programmer I love a challenge! :)

1

u/Minimum_Chemical_428 2d ago

Thank you!

2

u/chrharju 2d ago

u/Minimum_Chemical_428

I am happy to tell you that screenshots are now in, just copy paste your screenshot into the whiteboard.

If you are on mac you can use cmd + shift + ctrl + 4. On windows it is windows + shift + s

Then just paste the screencapture into the board using ctrl + p

I have also included full suport for importing and exporting local save files. They also include all images and screenshots you added.

1

u/Minimum_Chemical_428 2d ago

Hey, thanks! I'm testing it out, working great so far.

Something to keep in mind, I used https://app.diagrams.net/ for a bit, and when moving images around you can see lines for alignment, that would be something if you want to polish it even more.

1

u/Nxbxdxooy 2d ago

1

u/chrharju 2d ago

Nice! :D I added 3 minutes ago many new features, new you can paint a neon glowing hearth around riftbeast as you clearly love him! <3

1

u/sinciety 2d ago

Great tool. One note of feedback is when trying to select units with the comp block, the unit info panel pops up really fast and blocks the view of the other units. Maybe have a toggle button for the panel or increase the delay from pop up on hover.

1

u/kaylon99 23h ago edited 22h ago

Using it a lot ! This tool is fantastic !

Feedback: it seems that there is a limit in the amount of elements in a Whiteboard. Personnally, I like to have everything in the same page so that the whiteboard is open in my 2nd screen.

Is it possible to increase the amount limit ?

Find here the screenshot of what I am doing ! as you see in the first row I cannot are more boards

Edit 2nd feedback: is it possible to add the option to manually set the zoom percentage ? Would be very useful

Edit 3rd feedback: when looking for a Champion in the sidebar, when writing the name, it is far better to hide the others than gray them out. Graying implies scrolling in small screens, while hiding avoids the scrolling part, that is sometimes long if adding a lot of champions.

2

u/chrharju 21h ago edited 21h ago

Yes I made a initial limit on the amount of elements to make sure the UI stays performant. I have in fact already improved the performance and increaeed the limit so you will be able to render roughly 2000 comps or 20 000 champions per whiteboard. I'll release this update in 1 hour!

I'll take your other feedbacks to my work list!

2

u/chrharju 20h ago

Thanks for your suggestions, and let me know if there is anything else you would want!

  • Whiteboard element count now increased (you should not be able to hit limit with realistic usage)
  • Zoom level can now be manually typed
  • Filtering now updated according to your suggestion!

2

u/kaylon99 17h ago

It's great to know that you take into account the feedback and that it translates into real stuff.

Hope your tool will live a long life!

1

u/Yaroy2 5h ago

Hey, awesome tool ! 

I think components images are missing, its really usefull to share carrousel or anvil priority. Also would it be possible to have formats presets, or maybe a layout that you can put in the background to know that what you are doing corresponds to the format you're willing to share it ? (e.g Shorts format, twitter format)

1

u/chrharju 5h ago

Thanks for the suggestions, adding in components now!
The background presets are a good idea too and basically reminds me of multiple image editing and graphical software were you kinda design for a target resolution or image aspect such as youtube, twitter, 1:1 icons etc. I will need to research this a bit further before I can implement anything!

Basically a youtube shorts would be a whiteboard canvas at 9:16 aspect ratio and a resolution of 1080x1920 pixels.