ruilisi / react-chessground Goto Github PK
View Code? Open in Web Editor NEWReact wrapper of Chessground
License: GNU General Public License v3.0
React wrapper of Chessground
License: GNU General Public License v3.0
Hey,
I've recently started working with Chessground and I've missed the default theme and assets to get it working.
It would be very useful to have your defaults there as well.
I want to check with you if it's OK to copy your assets there?
Thanks
I first want to say I love the project and the work you did here and believe that it can be useful for many projects. The one concern I have is launching the project for new coders and people new to the repo. I honestly just came across the repo today and spent a while trying to get the board to display properly. The main issue is that the class names are all wrapped in a div with a class name .merida, meaning that if you don't add the Chessground React compoenent within a div with that class name, the pieces won't render.
I am unsure of the reason for this, maybe there is a good reason or not, but I would either change the documentation or change the CSS provided. Either way, if this is something that interests you I have no problem doing it myself and created a merge request.
Thanks again for the great project!
any plans to add typescript support?
I can do a PR too if needed.
This exception started happening with version 7.8.0
of chessground
. For a temporary fix, I have hardcoded my yarn.lock file to version [email protected]
.
Most likely cased by this change. lichess-org/chessground@c190c18#diff-a2fcebf1963fad0da40a844a8d67da83R48
Creating an issue on react-chessground
because I am not sure if the root cause is the react component not sending some info to the chessground
component.
Thanks.
PS: this is reproducible in the demos if you try to rebuild the demo projects by deleting yarn.lock. I tried it with the example/demo
project.
TypeError: _a.get is not a function
computeSquareClasses
src/render.ts:221
render
src/render.ts:16
13 | if (isPieceNode(el)) {
14 | pieceAtKey = pieces.get(k);
15 | anim = anims.get(k);
> 16 | fading = fadings.get(k);
| ^ 17 | elPieceName = el.cgPiece;
18 | if (el.cgDragging && (!curDrag || curDrag.orig !== k)) {
19 | el.classList.remove('dragging');
View compiled
redrawNow
src/chessground.ts:25
22 | bounds.clear();
23 | render_1.updateBounds(state);
24 | if (elements.svg)
> 25 | svg.renderSvg(state, elements.svg);
| ^ 26 | };
27 | state.dom = {
28 | elements,
I'm given a long list of things to do when trying to start a fresh app and add react-chessground to it, none of which resolve my issue. I've found that removing this project as a dependency fixes the problem. If I run yarn start
, this error prints:
To fix the dependency tree, try following the steps below in the exact order:
- Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
- Delete node_modules in your project folder.
- Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
- Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.Check if C:\Users\null\repos\yarn-cw2\chess-wager-yarn-v2\node_modules\babel-jest is outside your project directory.
For example, you might have accidentally installed something in your home folder.Try running npm ls babel-jest in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-jest.If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
When I run npm ls babel-jest
, I see the following.
├─┬ [email protected]
│ └─┬ [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ ├── [email protected] deduped
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
├── [email protected]
└─┬ [email protected]
└─┬ [email protected]
└─┬ [email protected]
└── [email protected]
I'm pretty sure the issue is just outdated dependencies.
How to render the promotion prompt and handle promotion/cancellation events?
Can this be implemented using react-hooks and can the moves be transmitted using socket.io ?
Hi,
I'm tried to use the component with typescript, so I created my own typings but got the error :
render.js?0b07:formatted:166 Uncaught TypeError: Cannot read property 'color' of undefined
at pieceNameOf (render.js?0b07:formatted:166)
at Object.render [as default] (render.js?0b07:formatted:107)
at redrawNow (chessground.js?0a8e:17)
at redrawAll (chessground.js?0a8e:30)
at Chessground (chessground.js?0a8e:36)
at Chessground.componentDidMount (chessground.js?e2a5:43)
at commitLifeCycles (react-dom.development.js:19949)
at commitLayoutEffects (react-dom.development.js:22938)
at HTMLUnknownElement.callCallback (react-dom.development.js:182)
at Object.invokeGuardedCallbackDev (react-dom.development.js:231)
I have the same error when I try the demo without typescript or when i just use the component without any params.
The issue is when setting autoShapes to an empty array like so after it is set to an array of length > 0, the change is not reflected in the underlying chessground module
The crux of the problem is the merge
function in config.ts
in the chessground package merges the previous state and the current config (props). for const key in extend
where extend
is an empty array does nothing
I was able to hack around this problem by patching the render function in react-chessground/chessground.js
to include
if (this.cg && this.props.drawable && this.props.drawable.autoShapes) {
this.cg.setAutoShapes(this.props.drawable.autoShapes);
}
I think there is probably a better way to fix this, but I am not that familiar with React. I think cg.setAutoShapes
needs to be leveraged somehow
+ [email protected]
added 1752 packages from 643 contributors and audited 2055 packages in 362.916s
Why are there so many packages installed?
Hello, I was wondering if someone can speak to onMove
in this snippet is being invoked instead of called with parenthesis. I wrote my own validation for this and not understanding how the move that is played on chessground gets passed into the validator such as () => onMove(from, to, promoteTo)
, I see this example is using chess.js. Let me know if I can clarify anything. Thanks for your time.
Ryan
<Chessground
width="38vw"
height="38vw"
turnColor={turnColor()}
movable={calcMovable()}
lastMove={lastMove}
fen={fen}
onMove={onMove}
style={{ margin: "auto" }}
/>
I have a checkbox that toggles whether or not coordinates are shown, but the coordinates only update after a new position is loaded. Is there any way to force the board to update when the coordinates boolean is toggled?
I have to use the package.lock.json file from the example in order to get the display to work. If you delete it and reinstall the dependencies, the chessboard won't show up.
Hello everyone!
I was browsing package.json
and found some possible tweaks:
react-scripts
to devDependencies (from dependencies)react
to peerDependencies (from devDependencies)prop-types
(used in the project) to peerDependenciesWhat do you think? I've tested in on my machine and it did not break the build process.
I can write a PR with these changes, if you think they are all right.
Can you please include typescript support (types declarations)?
Here's the index.d.ts declared in my project that worked well for your library.
index.d.ts.txt
Props might be missing.
Using a default, unejected, CRA project, I'm unable to get this to render. To reproduce simply get a CRA project and copy/paste the code under installation. My App.js:
import Chessground from 'react-chessground'
import 'react-chessground/dist/styles/chessground.css'
import React from 'react';
export default class App extends React.Component {
render () {
return <Chessground />
}
}
my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
package.json
has had some dependency issues resolved, for instance, react-scripts
isn't a dependency anymore.
See also: 57f6257
Can we publish v1.6.0
to npm now?
Hello everyone!
Would it be of interest to change the board color or the chess pieces set?
I was thinking of some extra props for this component, like <Chessground board="green" pieces="alpha" />
I can write a PR if the answer is yes 👍
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.