About Code Food Work

The Clash Royale League – World Finals

Date: October 2018 Client: Supercell Role/Team: Developer SEE IT LIVE
Tool(s) Used:
  • JavaScript – Vanilla, ES6
  • React
  • Styled Components
  • SCSS/CSS – Flexbox
  • CSS Animation
CRL Esports Monitor

Firstborn created a one pager for the Clash Royale League (CRL) – World Finals! CRL "is Supercell’s official team-based esports league, featuring the best Clash Royale teams and players. With divisions in Europe, Asia, North America, Latin America & Mainland China."

Due to its international fan base, our site is supported in nine languages. Supporting multiple languages requires an additional QA and testing because some languages are more verbose than English. We made sure that the content was rendering correctly within each component's given space and the content's spacing was legible to the native speakers.

My role as a developer was to build reusable components for the main page. After receiving the design, I converted any module that shares common features into a one reusable component. For example, Event Info module (see below) renders all of the four cards as a single module in the desktop version but renders them as a single slide in a modal on mobile. Since we do not want to have two separate codes that do the same thing, I created the card as a separate component that is static within its module in the desktop version and a slide within the modal on mobile.

CRL Esports Event Info Tablet CRL Esports Event Info Phone

We used Styled Components as our CSS-in-JS. It was my first time using CSS-in-JS and although it felt weird at first to write CSS in JS, it was much better than maintaining lots of stylesheets at the end. It helped me keeping my CSS code clean and minimal. I loved that the CSS rules are automatically vendor prefixed. I will definitely use it again in the future.

Below is a code sample that I created for pulsing buttons that are used to indicate CRL divisions in the map. There are many examples for pulsing buttons on Codepen but a lot of the examples use 'box-shadow' to create this animation which is a big no no since 'box-shadow' property slows down performance.