Styling/Animation for Chips

Now that I have merged the two outstanding Pull Requests, you can open up your terminal at the master branch and run a git pull to get the changes to your local copy of the project.

When you open the checkers-flex.html file in your browser, you should be able to see the fully-setup board of chips and that they highlight when you click. The highlight is just a border that's applied via the .selected class from the CSS. The javaScript is handling the add-and-remove of the .selected class on the .chip elements.

If you want to toy with the CSS for how this looks, go ahead and make a branch for that and add some styles or effects to give it the look you want.

While you're working on that, please also consider an additional class that can be added/removed for animating the movement of a chip when a move is selected.

You'll need to consider:

a single move (without capturing an enemy chip) in any of 4 diagonal directions
a lengthier move for capturing an enemy chip in any of 4 diagonal directions

Trying to write down my thinking on how to animate in CSS & JavaScript

Animated chip move requirements:

for dev purposes, animation will happen when a selected chip is clicked again
first create just one animated move, but will need to create classes and animations for 8 different moves (4 moves to next diagonal squares + 4 moves to further diagonal squares)
keep responsiveness! Animations need to be relative to current square widths, so I can't use pixels. I can get this from JS, f.ex. var width = document.getElementById('square selected').offsetWidth;
Is there a way to transform or animate in CSS using squares as origin and end points?

Pseudocode CSS (for one animated move)

create class moveNE (North East!)
transform and translate both x and y by current square width
also scale or add z-coordinate to create effect of chip rising up?

Pseudocode JS

-Toggle classlist of selected chip, which is clicked again. -Add class "movingNE" to the chip. -Get current square width from DOM with var width = document.getElementById('square selected').offsetWidth; -pass width to CSS for the animation to be executed

@mcynowicz all comments and help are appreciated, in case I'm going in the wrong direction with this execution

sxkosone / checkers