sabakihq / shudan Goto Github PK
View Code? Open in Web Editor NEWA highly customizable, low-level Preact Goban component.
License: MIT License
A highly customizable, low-level Preact Goban component.
License: MIT License
$ npm run build-demo
> @sabaki/[email protected] build-demo /home/coder/Workspace/Shudan
> webpack --entry ./demo/main.js -o ./demo/bundle.js --progress --mode production
/home/coder/Workspace/Shudan/node_modules/webpack-cli/bin/config-yargs.js:89
describe: optionsSchema.definitions.output.properties.path.description,
^
TypeError: Cannot read property 'properties' of undefined
at module.exports (/home/coder/Workspace/Shudan/node_modules/webpack-cli/bin/config-yargs.js:89:48)
at /home/coder/Workspace/Shudan/node_modules/webpack-cli/bin/webpack.js:60:27
at Object.<anonymous> (/home/coder/Workspace/Shudan/node_modules/webpack-cli/bin/webpack.js:515:3)
at Module._compile (internal/modules/cjs/loader.js:805:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
at Module.load (internal/modules/cjs/loader.js:672:32)
at tryModuleLoad (internal/modules/cjs/loader.js:612:12)
at Function.Module._load (internal/modules/cjs/loader.js:604:3)
at Module.require (internal/modules/cjs/loader.js:711:19)
at require (internal/modules/cjs/helpers.js:14:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @sabaki/[email protected] build-demo: `webpack --entry ./demo/main.js -o ./demo/bundle.js --progress --mode production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @sabaki/[email protected] build-demo script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/coder/.npm/_logs/2019-04-18T04_18_49_169Z-debug.log
修改package.json到v3.3.0后解决
Sabaki是极好的项目,Shudan够美的棋盘,谢谢你这么好的作品。
我已用Vue.js重写了Shudan: https://github.com/roocky-lab/vue-shudan
中间有一些技术细节,请教一下:
shudan-random_${random}
,没有发现相关CSS,这是为什么功能预留?Is there any easy way to automatically remove the stone when it no longer has liberty.
In a personal open source project I'm working on, I'm gonna need the feature of region selection, something similar to what's present on Waltheri's Pattern Search or AI Sensei.
Is this available on Shudan? Is it also on Sabaki? If so, how do you use it?
I'm very surprised nobody has placed a request for this but Sabaki definitely needs this. Because squinting your eyes to correctly place a stone using a mouse on the goban is ridiculous in my opinion and this ghost stone feature would greatly help. Once,this feature is selected then seeing a ghost stone on the board would greatly enhance accuracy in placing stones on the goban. Just like KGS, OGS and Pandanet. So let's get this one added for a release please?
As far as I know, Sabaki
is using .png
images as the stones. However, they do not scale well with the size of the screen.
What I would suggest then is to use .svg
or .eps
formats, which use vectorial standards. This way, the image is drawn from a set of rules and not from pixels themselves. The image quality is independent of the size of the image then.
You can easily use convertio.co to convert the images you have into whatever format you have — but do it under incognito mode so you have an infinite amount of conversion credit.
Is there any configuration i can set so i can make it responsive based on screen size.
When I start a 7x7 board, all 9 star/hoshi points are joined together.
I think Maybe leave only one center is good enough.
Could anyone please create an example repository that use Goban in react project, i can't make it work together.
REQUESTING A VOLUNTEER!
I only have a limited understanding of coding so it would be a major undertaking for me to make what should be a relatively simple enhancement. (I have tried already and run into unexplained problems even getting Visual Studio Code to do the command "git clone"!)
This issue appears to relate to the Shudan section API Reference/Goban/Component/Coordinates Props (as described in the README Documentation relating to Shudan).
When using Sabaki I would like to be able to choose the alternative coordinate system "Simple coordinates". See Senseis Library reference at https://senseis.xmp.net/?Coordinates#toc7
Using Simple Coordinates, on the 19x19 goban the x and y axes are both labelled 1 2 3 4 5 6 7 8 9 X 9' 8' 7' 6' 5' 4' 3' 2' 1'
Examples (default coords first, simple coords second): D4=44; C16=34'; K10=XX; R17=3'3'.
It would only be appropriate to use Simple Coordinates on gobans up to 19x19. (I would be very happy if I only had the option to use Simple Coordinates on the 19x19 goban.)
If it wasn't a difficult coding task then it would be good to have the option to use Simple Coordinates on all goban sizes up to 19x19. Alternatively, it would be good to have the option on the 9x9 and 13x13 gobans. However 19x19 alone would be great!
9x9 goban: both axes are labelled 1 2 3 4 5 4' 3' 2' 1'
13x13 goban: both axes are labelled 1 2 3 4 5 6 7 6' 5' 4' 3' 2' 1'
I hope someone would like to take on this project. Many thanks in advance!
I got this issue
Class constructor Goban cannot be invoked without 'new'
I use it directly on react like this.
const signMap = [
[0, 0, 1, 0, -1, -1, 1, 0, 0],
[1, 0, 1, -1, -1, 1, 1, 1, 0],
[0, 0, 1, -1, 0, 1, -1, -1, 0],
[1, 1, 1, -1, -1, -1, 1, -1, 0],
[1, -1, 1, 1, -1, 1, 1, 1, 0],
[-1, -1, -1, -1, -1, 1, 0, 0, 0],
[0, -1, -1, 0, -1, 1, 1, 1, 1],
[0, 0, 0, 0, 0, -1, -1, -1, 1],
[0, 0, 0, 0, 0, 0, 0, -1, 0]
];
<Goban vertexSize={24} signMap={signMap} />
Hi!
I'm trying to use Shudan within a simple React app, using the info found in other issues, I figured I could use Shudan with React by aliasing preact/react, which I did, but I'm still encountering a problem. It seems like Vertex.js
tries to import from preact/hooks
, which doesn't seem to exist in React. I'm a bit of a noob, and I'm using this project idea both as a means to develop a cool utility and to learn about React itself, so I might be missing something simple.
Here's the error when I start the app:
> [email protected] start
> webpack serve --config ./webpack.config.js --mode development
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.16.101.214:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/bais/Downloads/endgame-app/public' directory
asset bundle.js 1.4 MiB [emitted] (name: main)
runtime modules 27.4 KiB 13 modules
modules by path ./node_modules/ 1.26 MiB
modules by path ./node_modules/webpack-dev-server/client/ 55.8 KiB 12 modules
modules by path ./node_modules/@sabaki/shudan/src/*.js 25.7 KiB 9 modules
modules by path ./node_modules/webpack/hot/*.js 4.59 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
modules by path ./node_modules/react-dom/ 1000 KiB 3 modules
modules by path ./node_modules/react/ 85.7 KiB 2 modules
modules by path ./node_modules/scheduler/ 17.3 KiB 2 modules
+ 3 modules
modules by path ./src/ 913 bytes
./src/index.js 250 bytes [built] [code generated]
./src/components/App.jsx 663 bytes [built] [code generated]
ERROR in ./node_modules/@sabaki/shudan/src/Vertex.js 2:0-43
Module not found: Error: Package path ./hooks is not exported from package /home/bais/Downloads/endgame-app/node_modules/react (see exports field in /home/bais/Downloads/endgame-app/node_modules/react/package.json)
@ ./node_modules/@sabaki/shudan/src/Goban.js 16:0-33 158:16-22
@ ./node_modules/@sabaki/shudan/src/main.js 1:0-31 4:0-31
@ ./src/components/App.jsx 6:16-41
@ ./src/index.js 3:0-35 6:46-49
webpack 5.75.0 compiled with 1 error in 1903 ms
Thanks in advance for the assistance, Shudan is really cool!
When using Shudan to render boards, all the gridlines have the same thickness. This is perfectly fine if the whole board is shown, as there is not much cause for confusion as to where the borders are. However, I find it a bit hard to quickly determine whether a gridline represents the board border or not in the case where the rangeX and rangeY props are given.
e.g., in this example, I don't know why expecially if points are partially covered by stones, it takes me a couple seconds to determine the real boundaries of the board.
Consider instead how much clearer this situation would be if the goban borders were styles with thicker lines, e.g.,
Unfortunately the grid lines are rendered as svg rectangles, and styling the thickness of the gridlines means manipulating the height/width attributes, rather than the element style. This means that this kind of change cannot be implemented via CSS alone, and that javascript must be used. That's ok though.
The real issue is to identify which elements correspond to the board boundary and which not. Currently all these rects are selectable through classes .shudan-gridline, .shudan-vertical, and .shudan-horizontal, but nothing that indicates whether it is a boundary gridline or not. I hope/assume that the internal logic of shudan has this information available, but does not expose it. Would it be possible to add another class .shudan-boundary to the gridlines that represent the goban boundary?
Is there a way to use Shudan in a React app without webpack? My project uses TypeScript and ESBuild, but I don't know how to translate the webpack instructions to TS.
When I try to use <Goban>
in my TSX, this is the error I get:
src/index.tsx:127:4 - error TS2786: 'Goban' cannot be used as a JSX component.
Its type 'ComponentClass<GobanProps, {}>' is not a valid JSX element type.
Type 'ComponentClass<GobanProps, {}>' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
Property 'refs' is missing in type 'Component<GobanProps, {}>' but required in type 'Component<any, any, any>'.
Hello;
I'm facing two separate issues that concern setting the size of the goban; I use BoundedGoban to try and fix an exact width, but I can't get the desired behavior of a constant goban size.
First, the one I get when I refresh the page / the app from the beginning
And then the one I get when I flip the signMap and re-render.
After re-rendering, the size then remains (approximately) the right size from then on, never going back to the smaller size.
How hard would it be to use this lib in a React project? I found a lot of examples to use React components into Preact projects but the other way...
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.