Pokemap (available at this address : http://pokemap.forgh.net/) is a simple website I developped alone for an university project in December 2015, it is my second AngularJS project.
We were instructed to create a way to visualise on a map 2D and 3D data on the subject we wanted using AngularJS, D3.JS and ThreeJS.
With my teacher's approval, I chose the last the last serie of Pokémon video-games as a playful way to satisfy the objectives that were given to us, using the following problematic:
"With 32 differents legendary and unique pokémon appearing at peculiar hours on distinct days and under various conditions, how can we simplify the way an user could know which Pokémon is available right now, while letting him know what are the requirements to obtain it?"
The D3.JS library was used to generate SVGs of the map and pokémons' sprites in order to pinpoint their exact locations.
As some of them could only appear at specific times (every 20 minutes, between 8pm and 9pm) , on specific days of the week, I opted for the crontab syntax and I wrote a simple algorithm that would parse crons I coded for every pokémon and compare to the actual time (on the user's computer) in order to guess if the Pokémon could actually appear right now on his console. If the pokémon is not available, it would appear slightly transparent.
A simple menu on the left appears by clicking on the icon on the top left corner, and allows the user to simply search and single out a pokémon (using the autocomplete search bar module I developped for my technote) and toggle the pokémons available on a single versions, after obtaining an item, etc.
By clicking on a pokémon on the map, a 3D model of the pokémon will show up with the conditions the player need to meet. To make that happen, I used 3D models and textures from the last installments of the serie and rendered them using the ThreeJS library.
Dealing with compatibility issues with the ThreeJS library and missing resources (3D models, animation files), I still wanted to give the users the opportunity to see and manipulate actual models from the last installments of the serie, by zooming in and out or rotating them. The requirements the players would need to meet in order to encounter this pokémon will then show up just beneath it.
Keywords: AngularJS, ThreeJS, D3.JS, Data Driven Documents, 3D, modules, JSON, AJAX, cron.