Tool for filtering civilisations of the game Age of Empire 2 based on units and technologies of your choice
aoetwools.firebaseapp.com
Motivation behind this project
I started building this application during the covid period where a group of my friends started playing on the new Age of Empires II: Definitive Edition version and were a little overwhelmed by all the different civilisations.
It also served as a personnal challenge and a footstep into the React ecosystem for me.
I made this repository public because I cannot keep up with all the Updates in the game anymore while adding features with the limited time I have to put into this project, and also mainly so that more people would be aware this tool exist and could help them. Also some people wanted to have a look at the code.
In its current state this project is by no mean a clean professional production ready product (a lot can be improved) and was never the goal given the time and resources I could allocate to it. However I still tried to keep it structured, maintainable, somewhat easy to understand and have its parts separated for low coupling.
Key features
-
Filtering: clics on units and technologies in the main frame remove civilisations that do not have access to them in the top list.
-
Tech tree: clicking a civilisation in the top list displays its technology tree (by greying out units and technologies that this civilisation do not have access to)
-
Information: hovering a civilisation in the top list, or a unit or a technology in the main frame display a panel with detailed information
Other features
-
Fully upgraded and Excluded: Hovering over the top right button in the top civilisation list shows 2 options that can be checked:
- Show Fully upgraded: checking this option displays the list of civilisations that have access to all selected Units and all their corresponding Upgrades
- Show Excluded: checking this option displays the list of civilisations that do not satisfy the current filter
-
Main frame options: at the top left corner of the main frame are 3 different buttons
-
Change the size of the icons: clicking the first button changes the size of all Units and Technologies alternating between normal and small sizes
-
Information panel: clicking the second button changes the display mode of the tooltips for Units and Technologies between none (no tooltip will appear), display (tooltips will appear on hover and disappear on leave) and locked (tooltips will appear on hover and maintain as long as the cursor is hover the panel allowing the user to check further information in the panel)
-
Reset filters: clicking the reset button removes all filters (Civilisations, Units and Technologies)
-
-
Language: Two languages are available English and French
You can contribute multiple ways and that do not necessary require technical skills:
For more details see Contribution guidelines for this project
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Launches the test runner in the interactive watch mode.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
Deploy the application from the build folder to the firebase host.
Hosted application is reachable here https://aoetwools.firebaseapp.com