Introducing CSSBattle PRO

chinchang

Kushagra Gour

Posted on July 12, 2019

Introducing CSSBattle PRO

We're proud to introduce CSSBattle PRO, where you can upgrade your CSSBattle experience 🥳. For those who have not heard about CSSBattle before, CSSBattle is the first ever code-golfing game for CSS lovers.

CSSBattle PRO gives you access to the following features:

Add plugins to the code editor 🔌

With plugins, you can add custom scripts to enhance the editor and make it faster to reach the optimized solutions. For example, you can use it to automatically minify your code or convert the units to smaller character units. Here's a simple minification script to get you started:

function run(code) {
    processedCode = code
      .replace(/\<\!--\s*?[^\s?\[][\s\S]*?--\>/g,'')
      .replace(/\>\s*\</g,'><')
      .replace(/\/\*.*\*\/|\/\*[\s\S]*?\*\/|\n|\t|\v|\s{2,}/g,'')
      .replace(/\s*\{\s*/g,'{')
      .replace(/\s*\}\s*/g,'}')
      .replace(/\s*\:\s*/g,':')
      .replace(/\s*\;\s*/g,';')
      .replace(/\s*\,\s*/g,',')
      .replace(/\s*\~\s*/g,'~')
      .replace(/\s*\>\s*/g,'>')
      .replace(/\s*\+\s*/g,'+')
      .replace(/\s*\!\s*/g,'!')

  return processedCode;
}
Enter fullscreen mode Exit fullscreen mode

Advanced target stats 📊

Get a bird's-eye view on your performance in battles with these advanced stats. See where you're performing well and where you're lagging behind. Here's what it looks like:

Advanced stats showing where you lag

Light theme ☀️🌙

This is one of our favourite features! You'll be able to switch between light and dark themes and customize the experience as you like. Here's what the light theme looks like:

Light theme on CSSBattle

PRO badge 🎖

Apart from all the above features, you'll also get a shiny PRO badge next to your name wherever it appears across CSSBattle. Pro

Upcoming features

We're also planning to add these features very soon which will make your PRO experience even better.

  • Create public community targets: Create your own targets for the community with your own rules. All the targets will be rated by the community and we'll feature new targets every week.
  • Organize your own battles: Create your own custom battles with your own targets or choose from the community targets. You can also make it invite only which is great for conferences or workplaces.

You can upgrade to CSSBattle PRO for $3/month (a special launch price). This price may change in the future depending upon features but will remain the same for you if you decide to upgrade now.

We hope you enjoy CSSBattle PRO!

Giveaway 🎁

To celebrate the launch, we are giving away 1 month free access to 5 lucky players who Retweet the following tweet!

💖 💪 🙅 🚩
chinchang
Kushagra Gour

Posted on July 12, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Introducing CSSBattle PRO
css Introducing CSSBattle PRO

July 12, 2019

CSS games are fun!
showdev CSS games are fun!

May 28, 2019