![](https://cdn.steemitimages.com/DQmT2kUY6kboYYN7pAMt4a7GNtMcLe7Pq86P7jrSVSKJn2o/image.png) ^{https://github.com/amosbastian/lol-pmtc} ### What is **lol-pmtc**? It's a Vue.js application which allows users to paste a League of Legends match history URL, and outputs a scoreboard that can be used in post-match threads on [/r/LeagueOfLegends.](https://reddit.com/r/leagueoflegends/). It is currently being hosted on Heroku, and can be found on https://lol-pmtc.herokuapp.com/. --- Last year I posted about [a similar project](reddit.com/r/leagueoflegends/) (read more about *why* this project exists there) which used Python to do this. Unfortunately it broke a long time ago because of parts of it being hardcoded, and I haven't been maintaining it. Since I am learning Vue.js, and I've been noticing a need for it on the subreddit (see [this](https://www.reddit.com/r/leagueoflegends/comments/b48gv2/snake_vs_oh_my_god_lpl_2019_spring_week_9/) for example), I decided to revive the project! https://github.com/amosbastian/lol-pmtc/pull/1 ### Getting the data ![](https://cdn.steemitimages.com/DQmRVcMuNfR3Qd8s4wzksN5HvqihRugN76FEUA7kUxjNkuE/image.png) Given a [match history URL](https://matchhistory.euw.leagueoflegends.com/en/#match-details/ESPORTSTMNT04/900392?gameHash=4a7a3c01f43bf708&tab=overview), a regex is then used to extract parts of the URL into variables. With these variables two new URLs are created: [the endpoint containing the game's stats](https://acs.leagueoflegends.com/v1/stats/game/ESPORTSTMNT04/900392?gameHash=4a7a3c01f43bf708) and [the endpoint containing the game's timeline](https://acs.leagueoflegends.com/v1/stats/game/ESPORTSTMNT04/900392/timeline?gameHash=4a7a3c01f43bf708) (e.g. when monsters were taken, wards were placed and more). ### Creating the thread ![](https://cdn.steemitimages.com/DQmZ2XBF9KeXNuhm5jwkwo2bh9Rg7ZwxQ77cYBeecL7Mrhr/image.png) In `matchHistory.js` a lot of functions have been created to aid with the creation of the thread. The main function, `createThread()`, calls all these functions to build up the thread incrementally, and then combines all parts together to create the finished thread. This is then returned and shown on the website. See it in action here: ![](https://thumbs.gfycat.com/SereneMadeupCoypu-small.gif) ^{Click [here](https://giant.gfycat.com/SereneMadeupCoypu.webm) to see it fullscreen} As you may have seen there is a small toast when copying the thread, so the user knows everything was successful. Of course there is also some kind of indication if something has gone wrong as well. For example, when trying to enter a URL which doesn't match the regex the user will see an error message! ![](https://thumbs.gfycat.com/ScentedMadeupGuillemot-small.gif) ^{Click [here](https://giant.gfycat.com/ScentedMadeupGuillemot.webm) to see it in fullscreen} ### Contributing If you want to contribute, then you can add me on Discord at Amos#4622, or simply create an issue. I am around most of the time, so should respond pretty quickly. ### Roadmap I am working out if the match history URLs can be determined before they are available, and if so, I will create a schedule where users can easily find the URL and create a thread by clicking a button for example. Am still learning, so will have to see how feasible this is. Am also learning more about Tailwind CSS, so will probably improve the CSS in the future. Maybe I will also create some more components and add some stuff where I need to use Vuex - I'll have to wait and see since I'm starting my thesis soon.