Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

love what you're doing here! a few questions.. #1

Closed
vesper8 opened this issue Feb 10, 2020 · 7 comments
Closed

love what you're doing here! a few questions.. #1

vesper8 opened this issue Feb 10, 2020 · 7 comments

Comments

@vesper8
Copy link

vesper8 commented Feb 10, 2020

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!

@justinfagnani
Copy link
Owner

Hi @vesper8. I finally pushed a bunch of doc site change that were piling up in my local repo. That's going to free me up to fix a reported problem with import.meta.url and think about publishing a bundle.

The element is already published to npm as chessboard-element as noted here: https://justinfagnani.github.io/chessboard-element/download/

Right now I'm assuming that app developers will do npm i chessboard-element and import the module into their project. Bundling the project should bundle this package along with it. I'm not sure what to recommend for projects without a build. Possibly they can use https://justinfagnani.github.io/chessboard-element/js/chessboard-element.bundled.js but maybe I should publish a bundle to npm for use with unplg.com.

I would appreciate a click-to-move PR. I'm not sure I can add a new feature myself any time soon, though I'll let you know if I try. Please open a separate issue for that though.

@vesper8
Copy link
Author

vesper8 commented Mar 22, 2020

Glad to see you have a little time to move things along @justinfagnani. I have no problem doing the import, in fact it's my preferred way of doing it, I only tried to include the bundle because I was struggling to figure out the cause of the import.meta.url error. Now that I understand it more I know I wasn't doing anything wrong in the way I was pulling it in.. the issue is with Webpack itself and its incompatibility with import.meta.url

If you could reply to this post once you replace import.meta.url by something more widely supported, that would be appreciated, I can't use this at all until that's done. Once it's done I'd like to see how much effort will be involved in swapping the vanilla chessboard.js with this implementation.

Looking forward to future commits!

@justinfagnani
Copy link
Owner

Just pushed 0aa5810 which adds support for general piece rendering functions, and changed the default to render SVG pieces that are statically imported. Should be all good for bundling now.

Please open other issues for any other features so we can take them one-by-one.

Thanks!

@justinfagnani
Copy link
Owner

Published in 1.0.0-pre.8

@vesper8
Copy link
Author

vesper8 commented Sep 12, 2020

@justinfagnani if you have ~30 minutes at some point I think you would find that using my approach described here oakmac#175 (comment) on how I added click-to-move to the "old chessboard 1.0" very easily and simply, would probably also allow you to add it to this new version MUCH easier than I could.. because I don't understand TS very well for starters and because I'd need to first understand all the changes you made.. for example your checks for "assertDragging" did not really exist in the "old version" and they would need to be circumvented to add this alternative way of moving the pieces that doesn't use dragging and dropping.

On the previous version adding this was really simple and only amounted to ~10 new lines of code. I think it would be a very welcome addition!

Thanks for your continued development of this package : )

@justinfagnani
Copy link
Owner

@vesper8 could you open a new issue with a few details? I'll try to get to it!

@vesper8
Copy link
Author

vesper8 commented Sep 13, 2020

done! #7

Thanks for taking a crack at this!

I've started to use your library now, previously I hadn't been able to but now I have it working within my Vue project and I'll slowly be migrating over to it from chessboardjs.. excited to see the performance improvements and extendability I'll be able to get from using a more modern version!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants