[Update v2] Filler game by Robin

It's been a couple of weeks now since my last update to this game, but today I managed to push the recent changes!

The previous version was capable of the following:

• Play against yourself (or someone on the same maschine)
• Get suggestions about the best move
• See percentage complated
• Toggle owner icon on cells
• Toggle display of suggestions
• Start over again with a new game

So what's new?

• New design for blocks
• CPU enemy available (makes moves with a delay of 1.2 seconds)
• CPU enemy can be turned on/off

Some interesting stuff

I wanted to give the board with the blocks a better look and went with CSS gradients.
The gradient should use the solid color given as hex code and should go from black-ish over the given color to a lighter version to reach the desired effect.

How to lighten a color hex code without css-preprocessors?
My hexcode of the solid color was in a state variable:
this.state.cell.color.hex

The css part looks like this:

linear-gradient(141deg, #2c3340 0%, #solidColorHex 51%, #lighterColorHex 75%)

Since I am in react and therefore can use javascript to manipulate variables, I convert the color hexcode to a rgba value first:

export const hexToRgbA = hex => {
  var c;
  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
    c = hex.substring(1).split('');
    if (c.length == 3) {
      c = [c[0], c[0], c[1], c[1], c[2], c[2]];
    }
    c = '0x' + c.join('');
    return {r: (c >> 16) & 255, g: (c >> 8) & 255, b: c & 255, a: 1};
  }
  throw new Error('Bad Hex');
};

Then I just change the alpha channel to manipulate the color and interpolate the whole thing with variables as my style object on the react side:

import {hexToRgbA} from '../helpers';
// ...

const rgbaCol = hexToRgbA(this.state.cell.color.hex);

return (
  <div
    className="cell"
      style={{
        background: `linear-gradient(141deg, #2c3340 0%, rgba(${rgbaCol.r}, ${rgbaCol.g}, ${rgbaCol.b}, 0.6) 51%, ${this.state.cell.color.hex} 75%)`,
        ...
        }}>
        ...
  </div>
);

git clone https://github.com/DarkSmile92/filler-game-react.git filler-game-react
cd filler-game-react
yarn
yarn start