DEV Community

loading...
Cover image for [Update v2] Filler game by Robin

[Update v2] Filler game by Robin

darksmile92 profile image Robin Kretzschmar ・2 min read

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%)
Enter fullscreen mode Exit fullscreen mode

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');
};

Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

GitHub logo DarkSmile92 / filler-game-react

The classic Filler game implemented as react app!

Filler game as react app!

Get started

Run the following commands in the terminal of your choice:

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

Demo

Visit https://darksmile92.github.io/filler-game-react/ for a demo.

Tweaks

Suggestions

Right now the game finds the best next step simply by calculating the max number of cells possibly to acquire with each color and using the max value as suggestion. The button with that color will be rendered with a border. If there are more than one equal possibillities, only the first is taken into consideration.

Solving algorhythm

At the moment there is no algorhythm to take steps automatically. Take on the challenge, create solvers under the ./src/solver/ path and share them!

Debugging with Visual Studio Code

First install the extension Chrome Debugger to your VSCode instance.

Run yarn start in your terminal, set your breakpoints in VSCode and press F5 to start debugging.

Discussion (3)

pic
Editor guide
Collapse
darksmile92 profile image
Robin Kretzschmar Author

@peter update is online! Check it out, you can continue your new addiction :)

Collapse
peter profile image
Peter Kim Frank

Super fun! 1-0 against the CPU :)

Collapse
darksmile92 profile image
Robin Kretzschmar Author

Awesome! If you have any strategic ideas, let me know :)