Overview
I worked on the World of Tanks: Console edition portal for over two years. During that time I worked on many releases and features.
https://console.worldoftanks.com
Technical Summary
- Python, Django, Jinja
- MySQL
- HTML, SCSS, Javascript
- Proprietary CMS
- Micro service consumer
General features
- Pervasive use of SVGs with styling via DOM injection
- I wrote a series of reusable components and reusable AJAX/REST libraries with robust error handling and retry logic.
- All parts of the site were fully responsive
Significant features
Clan management
Worked with the rest of the team to implement a REST driven clan management system. Features included clan creation, invoicing, promotions, demotions, editting, bad-word filtering, validation, and pervasive navigation updates.
Leaderboard
I implemented a Single Page Application for our leaderboard. This was a complete re-write of our leaderboard. The amount of code was reduced to a small fraction of the previous implementation and was much more robust and configurable. It was backed by a REST API which integrated with our internal ranking service. The UI was entirely data driven and extremely flexible, supporting multiple time periods, multiple console filters, sorting, history re-writing, player searching, player highlighting, and feature-flags. The re-write saved our team a significant amount of time during latter iterations as adding new fields and modifying existing ones were single-line changes instead of ~10 line changes in as many as 8 files.
Registration
We created a registration system so players could register for our game on our website and not just through the console. I worked on the OAuth connection to Sony and Microsoft. I also designed and implemented the redirect flows through our system and through the authentication providers. The system supported true logout, identity reselection, identity confirmation, and email verification. The system was fault-tolerant and always left the user in a consistent state in which they could resume registration.
Store
We designed and implemented a store so that players could purchase in-game content on our website. The purchasing was backed by an invoicing system which we used REST to access. I did about half of the UX work on this feature. Of interest was a foreground and background image that stayed aligned through text wrapping using just CSS despite being in different layers.
I also owned an XML import system we used to determine what to display in the store at any given point in time. I created an object-oriented conflict resolution system to this end, allowing users to resolve conflicts with confidence. The system included a preview of the import, proposed resolution options to the users, described why forbidden resolution options were forbidden, and summarized information as to not overload the user with details while making the details easily accessible if needed. The process was robust and fault-tolerant.
The store also included CMS widgets which allowed content producers to reference items in the store while maintaining a consistent look and feel. The widgets automatically adjusted to account for various conditions of items in the store and to the context of the articles.
Stats
I headed a project to re-write our stats page. I solicited actionable feedback from our players about our existing stats page and what they were looking for in a new stats page. I solicited multiple rounds of feedback internally on prototypes and comps. I then implemented the stats page which included CSS-driven data visualization. The new page was met with almost unanimously positive unsolicited feedback, which is unheard of in the industry.
Orientation scroll
I implemented JavaScript which kept the player’s current scroll position on the page when the browser was resized or when they changed the orientation of their phone. This was most visible when a user opened an image in an overlay, changed the screen orientation to view landscape, then closed the image. Instead of being disoriented by ending up in a new location in the page, they were just where they left off.
SVG packager
I created a python script to package all the SVGs on our site into a single XML document and a corresponding script that injected SVGs from the package instead of loading each SVG file individually. This ended up with a single 110k (after gzip, compared to 1.5MB if each file was gzipped individually) package representing every SVG on our entire site. This file was downloaded once then cached. It reduced the request count on our home page by around 25%.
Auto-alpha
I wrote a python script which automatically broke apart PNGs with alpha channels into a JPEG without an alpha channel and an 8bit PNG file for the alpha channel. These can be consumed using JavaScript and canvas elements to recomposite on the client, reducing the overall file size by ~50%.
Auto-resize
I wrote a python script which automatically created resized versions of images based on a folder structure. This allows content producers to make a single high-resolution image which would later be reduced in size fully automatically.
