/ Coding

World of Tanks Signatures Web Application

Throughout 2015, I built, maintained, and updated a web application that let players of the popular online game "World of Tanks" visualize their statistics for display in the form of a forum signature. With no previous web application development experience, I built a service that served over 2000 users that was very well received by the community.

Signatures

The first release of the service allowed players choose from a limited number of options to customize their signature. After logging into the site through World of Tanks's OpenID based Authentication, the user could upload a background image, and choose to show their clan tag, rank, most played vehicles, and experience earned per game they played. The draw of the service was that it updated the pictures automatically as their statistics updated, and their signature was hosted at a static URL, so they would not have to make any changes after generating their signature.

regular-2

The site was built on PHP and JavaScript with a MySQL database, and was very hacked together based on different tutorials I found online. Several exploits had to be patched throughout its lifespan, including people being able to edit other users signatures, and other security issues. Since this application was not based on any development framework, I had to write my own session managers and ways to verify that data being sent to the backend was from the correct, authenticated user.

As time went on I added GIF support, which evolved from 20 frame limited GIFs with preset playback speed, to filesize limited GIF uploading with crop and resize functionality built into the website. The statistics displayed evolved from just showing Winrate and a combined metric called WN8 to more interesting statistics such as alternate rating metrics, vehicles with top performance, and rank compared to other players.

Canvas

Canvas was an upgraded signature service based on everything I learned in the first iteration. Canvas allowed users to customize everything about their signature, adjusting exactly which stats were displayed and where on the signature they were displayed.

dukenukeem ex4 ex7

Canvas was built using the Fabric JS HTML5 canvas library. Players could position things on the html5 canvas by dragging them around and rotating them. After clicking the generate button, the positions and angles of each item were serialized into JSON and sent to the backend, where they were parsed by PHP code and written to the gif using a PHP image library. The JSON representation was also stored in a database alongside the user's other information so the signature could be re-generated as their stats updated.

Although there were a few service hiccups and outages, including me accidentally deleting everyone's custom images, Canvas was widely used by the World of Tanks North America community. 2000 people generated signatures using my website, and I received lots of feedback and support from the forum community. The service continued for a few months after I stopped playing World of Tanks, until I closed it because I no longer had interest in supporting and updating it.

Jeffrey Hanford

Jeffrey Hanford

https://github.com/Tioga060/ Masters of Science in Computer Science, USC 2018 Bachelors of Science in Electrical and Computer Engineering, Olin College of Engineering 2016

Read More