DEV Community

Cover image for Introducing CSSBattle PRO
Kushagra Gour
Kushagra Gour

Posted on

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!

Top comments (0)