EMOJIS, CHESSCAPTCHA AND LARAVEL 5

Elio Cat
2 min readJun 4, 2016

So you don’t really like chess but you’d like to use it anyway. We got you covered. Did you know that you can use any icon set for the chesscaptcha board pieces? Well if you don’t like any chess related piece style on your board challenge you can create a custom icon set of 6 or 12 icons and set chesscaptcha to create the boards from it.

CUSTOM ICON SET

First of all you need to find the icons you want to use. I went over to emoji cheatsheet and chose 6 icons.

WHY ONLY 6 ICONS? THERE ARE 12 PIECES!

I want to demonstrate another setting. Chesscaptcha also supports a color tolerance feature where you can tell it to ignore the piece color upon validation, rendering the white and black pieces equivalent and the validation color agnostic. Of course if you want you can use 12 different icons and choose wether or not you want to enable color tolerance in this case. Note that you can have the two different color styles and still set it to color tolerant. Now rename the icons like this:

And place the emojis directory in the pieces directory of your application. To keep everyone on the same page I’ll be referring to this Chesscaptcha and Laravel tutorial. So in this case it will be under /public/images/pieces

CHESSCAPTCHA OPTIONS

We now have to change the options of the captcha and change the piece style. Head over to the register.blade.php file and change the piecestyle to emojis (that is the folder name) and while at it change also the colors of the squares:

‘whitesquare’=>’#DB6EFF’,
‘blacksquare’=>’#36CDFF’,
….‘pieceStyle’=>’emojis’

We’ll also have to make the validation ignore the colors. This is done in the validator method in the Auth/AuthController.php file by setting the color tolerance to true.

$colorTolerance = true;….

THAT’S IT!

In your browser visit /auth/register and you’ll see something like this:

Chesscaptcha and Laravel article here.

--

--

Elio Cat

Aerospace & Mechanical Engineer MSc experienced in helicopters - Web, mobile and embedded developer. Senior dev at http://dev.emar.gr/