Clash of Clans Training Menu recreated as a web app using SvelteJS

Introduction

Hello everyone, here's my crown jewel (till date) project as an aspiring Front-end Developer: A fully functional implementation of the famous game Clash of Clan's in-game training menu.

I've played the game ever since its release (I was in grade 4, used to play it on my dad's phone, fond memories🥰) and have always loved the artstyle, sound effects and the overall bright and sunshine-y aesthetic of it.

I also really really like its UI and that's what got me motivated to try recreating it as a web application. It also seemed like a perfect project to learn SvelteJS as I've heard a lot of good things about it, gotta say, it lives up to them! As mentioned, I also adore the sound effects and have included them as well throughout the application, more fun!

I also didn't want to one-to-one replicate it as firstly to hone my originality/creativity which is a must for a front-end developer and secondly it wouldn't be possible on the web (not as easily at least haha). To my jaw-dropping surprise, what I've created here is now somewhat similar to what the current 'info' tab for entities (troop, spell, sieges) looks like (as I had started this project in late August '23).

I want to give a big thank you to Clash of Clans Fandom for the detailed statistics of the entities. Of course, a big thanks to Clash of Clans for making such an enjoyable game. This project is entirely non-profit, as it is only a means to showcase my skills as a front-end developer. I have no ill-intent on/by using the resources, no copyright infringement is intended.

---

Screenshots 📷

Initial Screen (Landing)

Landing.mp4

All the glowing 'interactables' are the way to open the menu, similar to the game! Pair-wise color coding based on the 'type' of 'entity' (troops, spells, siege).

The Menu

Troops Section

Troop.Menu.mp4

Spells Section

Spell.Section.mp4

Siege Section

Siege.Section.1.mp4

Army Section + Tab Switching

Army.Section.1.mp4

So here's the face of the project, the actual menu. As can be seen, I've tried to replicate its look from the in-game counterpart but have added some more color-coding for the type of entity for better distinction and visuals :D.

Now onto the functionalities!

Menu Functionalities

Training an Entity

Full.Training.Process.mp4

This is how I've implemented the training mechanism, pretty happy with it haha! Additionally, as seen, boosting and finishing training are also implemented with (fake) gems!

Entity Information Dialog-box

Info.Tabs.mp4

All the information is stored neatly in JSON files, retrieved as demanded by the app on 'i' icon click. Curating this data was a fun and good experience!

I know at TH12 everything's not unlocked let alone at max level, call it creative liberty as I could only record my at-the-time base in high quality for the background.

Some attention-to-detail

Barracks, Spell Factories and the Workshop are all reactive i.e play "active" animation (which I have re-created from scratch in a video editor using the frame-by-frame images as I couldn't find a good enough quality gif). Once nothing's cooking, they revert back to "inactive" state.

Interactables.AtD.mp4

---

TODOs

• Improve responsiveness (especially for mobile devices, have a landscape orientation enforcement like the game).
• Optimize asset loading!
• Add Quick Train functionality.
• Add subtle attention-to-detail. (Training boost tab icons, heroes info tabs, etc.)
• Entity gallery (especially for troops, thinking alternative model art and level-wise sprites progression sequence) (will take a LOT of images)