Comments (3)
Yep, this is achievable using "slots" - basically in gchessboard, any DOM element can be placed on a specific square by assigning the "slot" attribute.
In this case, your "background color of a specific square" can be achieved by thinking of it as a div overlay, with 100% width and height within a square, and styling that div with CSS.
Here's a quick CodePen with an example: https://codepen.io/mganjoo/pen/gOyGeOP
Is that what you were looking for?
from gchessboard.
Oh wow, thank you very much!
That's exactly what I'm looking for.
The documentation about the slots sounded to me like a layer above the pieces. So I though if I'm using this, the whole field is red and the piece will not be visible anymore because it's under the red layer.
But now it's a layer between the piece and the real background. So this is exactly what I'm looking for. Thanks a lot!
from gchessboard.
Yes, that's a good point! I should make that clear in the documentation - that was indeed the thinking when I designed this, that pieces would always be on top (though even with the slot element, you could manually "hack" it to show above pieces, with a high enough actually this won't work - but also I don't yet have a situation where we'd want the piece to appear below a slotted overlay. If that need arises I'll look into it later).z-index
Thanks for checking out the library!
from gchessboard.
Related Issues (19)
- Add polyfill for aspect-ratio HOT 1
- Handle resize correctly for Safari HOT 1
- Initial release feature checklist
- Use Hungarian algorithm to find piece "moves" between two positions
- Use translate instead of absolute positioning for animating chess pieces HOT 1
- Export typings
- Hover does not trigger on Safari when dragging piece HOT 1
- Rudimentary markers support
- Advanced test cases
- Drag does not complete on mobile
- Add endMove() method
- Export types from declarations file HOT 1
- Premoves HOT 1
- Add functionality for piece creation using drag-and-drop
- Add ability to draw arrows interactively
- Add sensible default color configurations
- Experiment with specifying arrows as nested web components
- User is unable to scroll the page if touch and drag gesture is initiated on top of the chessboard HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gchessboard.