sabakihq / shudan Goto Github PK

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?

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...

Could anyone please create an example repository that use Goban in react project, i can't make it work together.

直接编译

$ 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后解决

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.

My friend use xiaomi and found this issue, it does work will on desktop and many mobile phones though. Is there any suggestion of why this bug might happened ?

I have to modify code in Goban right this so it can be built in preact-cli without any problems, am i missing something here ?

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} />

Is there any easy way to automatically remove the stone when it no longer has liberty.

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!

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!

When I start a 7x7 board, all 9 star/hoshi points are joined together.
I think Maybe leave only one center is good enough.

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?

Sabaki是极好的项目，Shudan够美的棋盘，谢谢你这么好的作品。

我已用Vue.js重写了Shudan: https://github.com/roocky-lab/vue-shudan
中间有一些技术细节，请教一下：

• Vertex.js: shudan-random_${random}，没有发现相关CSS，这是为什么功能预留？
• Goban.js: animate落子效果启用后，200ms后会取消，实现的目的是？
• BoundedGoban.js: vertexSize这么计算的目的是？会否导致部分场景尺寸不正常？
  (比如Sabaki的Web版本，我Chrome 73.0.3683.86访问，初始棋盘尺寸极小，缩放窗口后正常）

@yishn

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.

1. In my application, I change the signMap shown on the goban, basically to show different section of the board and different problems. I also have controls that are able to rotate or flip the board, and flip the colors. What happens when I open my app, is that the board will start out with a size that is quite different from the one specified to BoundedGoban, and it is only after I re-render (by changing the signMap and/or flipping / rotating the contents) that the board size becomes that specified by maxWidth and maxHeight. I can verify this in the boxmodel shown before:

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.

2. This is a bit of a more niche problem; I've noticed that when I change the contents of the goban and re-render, I don't always get exactly the same sizes, but there's often just a little bit of error. I think this is happening as a consequence of the different contents having different number of horizontal and/or vertical vertices, since I'm trying to use the same goban to show different local situations at different levels of zoom. The differences are small, just within 1-2 pixels, but they are noticeable when the contents of the goban are changed. Is there anything that I can do to fix the goban total size even when displaying different contents?

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!
Sometimes, when i resize window, i can see bold lines, like this:

In web vesion too.

Is there any configuration i can set so i can make it responsive based on screen size.