The Plan
This is an evolution of an idea. At first, I wanted to see if it would be possible to use grid-areas to set up a minimalist che...
For further actions, you may consider blocking this person and/or reporting abuse
Why didn't you name the areas A1 to H8 - that way it becomes exactly like chess and makes it even easier to implement moves according to normal chess rules (B2 to B4) etc.
Anyway that is only a minor point, this is a great way to do it using grid! ❤
Done and done. Easier change than I'd expected - update the CSS
grid-template-areas, then update the class to calculate the clicked grid-area (usingMath.ceil()rather thanMath.floor()), and working fine.Thank you again!
I had actually realized this yesterday, I'm working on this very thing. It's a great point, and thanks to the flexibility of grid-template-area, easily implemented.
Thanks for the feedback!
I guess this also has support for CSS animations perhaps?
I was working on that, and not as easy as I'd first thought. I can't figure if transitions are available from one grid-area to another, as that's not necessarily a numeric (quantitative) transform. But I might find a workaround, if I do I'll mention it here.
I had the same thought and see no reason it wouldn’t be able to achieve pretty cool animations with very little overhead.
So I had put this aside for a long while, moved on to other ideas and projects, but recently working through the logic of the Knight's Travels problems, and the fact that this was still in issue bugged the crap out of me. So I did a little digging, and found github.com/aholachek/animate-css-grid - which very cleanly, easily handles the animation between grid-areas!
The nice thing about it is, I can remove the static CSS initial values, and it was a seamless, modular update. The replit is using the animation, check it out!
Cool
Glad you like it! The fun bit comes with the javascript, to my mind. Though when I get there, I find I'm already rethinking some of the Piece factory functionality. Never satisfied, me.
Very clearly thought out. Love the design.
It was an evolution, like I said. I first just wanted to see if the grid thing works. Then Eric Elliot's book really got me thinking and wanting to do more with functional, composed objects, and it grew from there.
It is still in a state of flux, I can see a few improvements I'd like to make - I'll likely continue this series with those improvements. :D