justinfagnani / chessboard-element Goto Github PK

First of all, thank you for this wonderful chessboard component! It's awesome!

But I didn't find anything that would make the moves be undone and redone. So no undo and redo yet? It would be nice that the mouse wheel event would undo/redo moves if scrolling up/down is done in the chessboard area.

A movelist would also be nice. Just a simple table that displays all the moves.

Just my 2 cents.

Status:

Chrome console warnings (on for each square?) for non-passive events:

Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make 
the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

It spits out this warning 64 times when you refresh the page.

This is happening in my app but you can also see it here:

https://react-chess-board.stackblitz.io/

I'm trying to align a button bar to sit flush underneath the chess board and this is extremely difficult it seems. For some reason there is always a margin/padding at the bottom of the board and this does not seem to be controlled by any css.. it seems to be taken up by the canvas. I can't figure out how to get rid of that padding so it's very difficult to align anything flush with the bottom of the board

@justinfagnani any idea what's causing this and how to work around it?

Hello Justin,

Thank you for this element. I've used it in a project that can be seen here http://polyglot-spa-root-config.s3-website.us-east-2.amazonaws.com/

I found an issue in the docs that say the property draggable-pieces can be set to "true" or "false" but this is not the behavior described https://lit-element.polymer-project.org/guide/properties#conversion. The presence of the property no matter the value makes the pieces draggable. To prevent dragging the pieces the property has to be set to NULL or undefined.

I'm getting this error when i load a new fen to the board

callstack:
Uncaught (in promise) TypeError: Cannot read property 'getBoundingClientRect' of null
at HTMLElement._getAnimationStyles (chessboard-element.js?a3ca:504)
at HTMLElement._renderBoard (chessboard-element.js?a3ca:435)
at HTMLElement.render (chessboard-element.js?a3ca:330)
at HTMLElement.update (lit-element.js?0906:219)
at HTMLElement.performUpdate (updating-element.js?b22b:554)
at HTMLElement._enqueueUpdate (updating-element.js?b22b:507)

It still load the position without issue but i don't know if this is a serious issue or i just ignore it.
I'm testing it in a react application and loading the script in the entry point 'index.js' of the application
// First line of index.js
import 'chessboard-element';

I've been using chessboard-element for well over a year within a Vue 2 project and I've never had any issues with it, it just worked perfectly.

Recently I migrated my project to Vue 3 / Vite and I noticed one pretty jarring issue.

It appears as though the board will ONLY load if the <chess-board> element is available BEFORE the import 'chessboard-element';

This didn't use to be a problem somehow, but since migrating to Vue 3, order really matters now and it's problematic. I've kind of hacked my way around the issue by including my import 'chessboard-element'; inside a child component every time I have a chess-board element, this ensures that the chess-board is available in the dom before its child component has finished mounting.

I'm a bit baffled as to what's causing change in behaviour all of a sudden.

It would be useful if there was a global (attached to window for example) command I could issue to "look for chess-board elements and activate" any new elements that weren't present the last time.

On a side note, I would also find it useful if there was a "ready" event that I could listen to on the chess-board.

If you have any ideas how I may work around this oddity in a less hacky way, I'd really love to hear it!

Many thanks

Hi, thanks for this wonderful forking job.
It looks like flex-shrink is not compatible as the board is not shrinking when I resize down the window.
I can grow however but never shrink back...
Do you have a tip?

Here is a simple prototype

Thanks

This suggestion may not make sense as I may not fully understand the role of the element. Currently, the #dragged-pieces element in the shadow root takes up a square's worth of space below the visible chessboard. This element is never visible AFAICT (it appears to be used as a holding container for temporary pieces affixed to the cursor while dragging), so it isn't immediately obvious why it needs to take up space in the layout. Would it be okay to change it so that it does not take up space?

I'm confused here, when I install your package via NPM the contents of the chessboard-element folder inside my node_modules folder has a bunch of .js files that are nowhere to be found in this repository

I decided to fork your package so I can immediately use my click-to-move PR and when I tried to reference my fork inside my package.json I end up with an error because those .js files are not present

But when I install your package then they are present

What voodoo magic is at play here? Is there a command that needs to be run to generate the .js files?

I would love to have more information so I can get my fork working

Many thanks

I have typescript code like this:

    board.addEventListener("drop", async (e) => {
      const { source, target, oldPosition } = e.detail as any;
    });

I'd like to get rid of the any cast if there were typings available for the event detail.

First of all, thanks so much @justinfagnani for the great work on this project (and of course on lit-html & LitElement)!

I've been using the chess-board component along with chess.js and in general it's been working wonderfully. However I'm sporadically getting errors like the following:

chessboard-element.ts:1405 Uncaught TypeError: Cannot read property 'removeEventListener' of null
    at HTMLDivElement.transitionComplete (chessboard-element.ts:1405)

Unfortunately so far I've not been able to deduce a pattern (other than this happens when my parent component renders) and so cannot yet provide reliable steps to reproduce. Here's the markup for the chess-board element in my parent component's render function:

          <chess-board
            @drag-start="${this.dragStart}"
            @drop="${this.drop}"
            draggable-pieces
            .orientation=${this.orientation}
            style="width: 80%"
            drop-off-board="snapback"
            position="${this.fen}"
          >
          </chess-board>

Is there anything I'm obviously doing wrong or perhaps do you have any troubleshooting tips? Thanks much!

With the two random functions playing each other, after a few dozen moves, it stops clearing up the move highlights.

Hey there,

I am trying to get the current move in plain text instead of the fen format.

The docs here mention the use of Chessboard.fenToObj but Chessboard is undefined.
If I simply import it like this

import * as Chessboard from "chessboard-element";

and attempt to use it like this

console.log(Chessboard.fenToObj(value));

I am getting the error Uncaught SyntaxError: Cannot use import statement outside a module.

Any chance you can guide me on how it should be used?

Thanks for this awesome package!

EDIT:
What I am actually looking for is a way to get the actual move when it happens.

board.addEventListener('change', (e) => {
        if ('' === game.pgn()) {
            return;
        }

        const {value, oldValue} = e.detail;

       console.log(formatValue(value)); // returns 'd4' or 'd4-d5'
});

I am looking for the formatValue above

• it is missing in npm package
• the file points to .ts files

I have seen the docs earlier, they were good. Please bring them back with the correct link.
justinfagnani.github.io/chessboard-element/

first of all, I really love what you decided to do here.. it gives me a lot of hope for the future knowing that this library is being modernized

I'm a bit puzzled at how I'm supposed to use it. Do I have to clone it, then run npm install && npm run bundle in order to generate the chessboard-element.bundled.js which I can then load up in my project?

Currently, I'm using chessboard.js by simply installing it as a npm dependency and importing it in my Vue project.

Will you be creating a new repo and publishing to npm soon? So that we might be able to use this as a dependency too? Or is this already possible?

My other question is, in this comment here I explain how I very easily added the click-to-move functionality to the chessboardjs 1.0 oakmac#175 (comment)

All it took is just a few lines of code. This click-to-move alternative to drag-and-drop is a very cool feature that I was missing a lot. Ideally though I would have liked it to work a bit differently, right now it picks up the piece on the first click and then drops it on 2nd click.. works great.. but what I would really prefer is if it left the clicked piece there but instead highlighted that square, and then possibly added a dot on the squares where that piece can move to (fancy, optional), and then upon clicking a legal square, it moves it there.

Since you're very familiar with your new code, is there any way you could either implement my very simple click-to-move or if you're feeling ambitious.. the even better version I just described?

Thanks! Looking forward to your reply!

I'm never going to be able to catch a screenshot of this. But its reproducible on the homepage for me.

• Scroll down to the second example on the homepage (important that the page is scrolled)
• Drag any of the pieces around
• Notice a quick one-frame flash of the piece further up in the page.

Suspect its an offsetting problem since it only happens with page scrolled, in fact the offset of the undesired flash appears to be the same as the scroll offset.

Hey @justinfagnani ,
Is it possible to implement a way to disable right click movement of pieces ?

I've added annotations(circle and arrows) along with this package.
Right click for a circle
Right click and drag for arrows... -> This is also moving the piece which is not wanted.

Hope I explained the issue properly.... 😅

(see code below) I am Having trouble just doing simple things with react , I have a button set orientation and it set the value to black or white though I don't see any changes on the board?

also is there any more any more examples on this being used with react, I have working website www.chessonline.app
you can just sign up with [email protected] (you can register using a fake email and play one game) ,

I am trying to better the user experience
at the moment if you play and move a piece to the position and then goes back to where you moved it from and then loads were you moved it too,

I would like to try and implement this board as perhaps the drag and drop is smoother?

import React, { useState, useEffect} from 'react'

import { Chessboard } from "react-chessboard";

export default function ReactChessBoard() {

const[color, setColor] = useState("black");

//eslint-disable-next-line
const setBlackOrWhite = () => {
if(color === "white"){
setColor("black")
alert("set black")

} else {
    setColor("white")
    alert("set white")
}

}

return (

</div>
</div>

I was able to add click-to-move to https://github.com/oakmac/chessboardjs rather simply and easily

Only took a few extra lines to make it work and it did not interfere with any of the existing logic

These are the few simple steps I used to add it to https://github.com/oakmac/chessboardjs 1.0

replace

    var squareSize = 16

by

    var squareSize = 16
    var clickMove = false

replace

    function dropDraggedPieceOnSquare (square) {

      removeSquareHighlights()

by

    function dropDraggedPieceOnSquare (square) {

      // if destination is same as source, piece stays picked up and is dropped at the next clicked square.
      if (clickMove == false) {
        if (square === draggedPieceSource) {
          clickMove = true;
          return;
        }
      }

      clickMove = false;

      removeSquareHighlights()

replace

    function stopDraggedPiece (location) {
      // determine what the action should be
      var action = 'drop'

      if (location === 'offboard' && config.dropOffBoard === 'snapback') {
        action = 'snapback'
      }

by

    function stopDraggedPiece (location) {
      // determine what the action should be
      var action = 'drop'

      if (location === 'offboard' && config.dropOffBoard === 'snapback') {
        action = 'snapback'
        clickMove = false;
      } else {
        if (clickMove == false) {
          // pick up spare piece and put it down on next clicked square
          clickMove = true;
          return;
        } else {
          // drop piece back on its origin square
          clickMove = false;
        }
      }

It would be great if you could add the functionality to chessboard-element.

I had a look to see how similar the modification would be and because of your changes it seems like it may be a little trickier since you make use of assertDragging in a few places which would need to be modified to allow for an alternative way of moving the pieces around. Since I'm not too familiar with your code and am also extremely new at Typescript, I figured it would be much easier if you added it since you understand the implications already.

This is what it looks like in action by the way (hard to tell that I'm not dragging but actually clicking):

Hello,

Is it possible to have autocompletion with props of the component ?

I declared the component as JSX element but of course, autocompletion is not available:

declare namespace JSX {
    interface IntrinsicElements {
        "chess-board": any;
    }
}

Hi @justinfagnani ,
Thank you for this element! Have you managed to use it in any React projects or can you guide me on how to make this usable in React projects...?

Hi,

i have problems with F7Vue.

The only way it works is with "require('yrlib") => So, yr install docu not (for me!)

inside the vue template i use these "chess-board" tags, but that is only working, if the markup is already visible at startup (not to say, that my IDE is unhappy with this tags).

Width also not working, but i just use "f7-col" for it.
Well, my MAIN problem is invisible markup at startup of component. with chessboard inside.

Can y help me?