The Project
So some of you might know, that I started a small and simple project end of last year in my free time. I started a small webApp written in Angular to play around with the new Angular Signals and some other new features. The topic and purpose of the app was to be a LOLDLE clone (basically a “Guess the character” of Riot Games’ League of Legends game) with a small twist – you can play as often as you want. The original game only has one game per day, but it is the same for any person playing.
Why I stopped it
First of all the app was working as intended which is a neck breaker for most apps (right?). I had a blast during the bad weather days and got my hands onto some new features and gained some experience in deploying Angular apps as well – which wasn’t even on my list.
So it was time to wrap up and finalize the page. Fix the UI / UX to be somewhat pleasing and show it to some friends. When I showed it to my first friend, they instantly typed in the freshly released champion that just came out and I then realized, that it does not exist in my data-set.
When I started the app back in October ’23 I had an API that cost money after some limit threshold, so I saved the data needed back then and used it for my app locally, but I never refreshed the data ever since.
So I sat back on my machine, trying to query said API – 404. The API changed? I checked their website to find out that it was discontinued. I quickly checked for other APIs but sadly didn’t find something similar.
I thought about this problem for some days and decided that it would be too much work to maintain/extend this app. Not only where there about 15 Champions missing (the API had some old data as well – but I found that out just now) but also it was missing information about Champions that it showed. To be completely honest, 168 Champions with roughly 10 pieces of data would probably take me a day to recreate, but I was frustrated and I pushed the last commit in March of this year.
Why I continued
Well I still liked the game and honestly I felt stupid. How could the original Loldle get the data somehow and I couldn’t? I checked the site over and over again and felt bad about it. I checked the http requests that it made to the server and didn’t understand where the data came from, either they obfuscated it in a way that I did not see or there was some magic happening.
Magic doesn’t fool you twice. Sometimes it does, but if you get the chance to look at it over and over again you might find out how it’s done. So I sat there, and broke it down into little pieces that my Girlfriend would understand about this problem. I told her about Frontend, Backend, Client, Server, Requests and how Websites normally work. And very quickly she said: “If there is no Request made, then the Frontend needs to know about it already, right?” – Right !
This phenomenon is called “Rubberducking”. Try to break it down into reasonable sized portions and talk about this with a rubber duck (or to anything – a Girlfriend seems to do the Trick as well).
So I checked the Frontend. Opening the DevTools of my Browser, this time not navigating to the Console or Network tab, but the Debugger. This tab also shows downloaded .html and .js files and their content. I found a file that contained the names of the champions – all 167 of them! (Yes the original Loldle is a bit slow when it comes to new releases, and so they didn’t pick up the champion of July).
Not only did I find the translations of said champions, but also the data items I needed: Gender, Race, Region and Release Date.
So I copied that huge array, together with the data I already had, it was easy to create a little script that merged those arrays into one – et voila !
Quickly added 2 new features and updated the Angular version as well – and here we are. Looking at the latest version with the most up to date info.
Help
If you read this post and found it amusing, inspiring or even interesting, it would mean a lot to me hear feedback.
Leave a Comment here or checkout the Github Repo or my Lodle App.
tl;dr
I lost my data because the API I used was discontinued.
I didn’t find a new one.
I Rubberducked my Girlfried to find out that the data was exactly where I was looking for 5 months.
I used the new Data and updated my App.
Now go read the whole thing and checkout this link and roast me for it: https://github.com/Suneeh/LoldleUnlimited
Source link
lol
