waltheri / wgo.js Goto Github PK

Browsing to http://ps.waltheri.net/ I see this error in the console.

Have you thought at all about adding animation to WGo?

None of the SGF Viewers I've seen have animation, but it adds a lot to the beauty of a player when it's added. (Here's a very simple example from a player I was working on a while ago.)

I hacked together a quick proof-of-concept on WGo over my lunch break, and I think making a more serious attempt to add animation to WGo wouldn't be too difficult. But I was curious whether this is something you'd already thought about and had any opinion on.

On ipad web browser, click on the board, there will be flashing.

It seems as though WGo has no territory-counting capabilities, an essential for scoring of games. Is this functionality present somewhere although not documented? Thanks in advance.

Hey!

I love this project and it looks amazing, so I just have a small suggestion that would be great for my use case. I'm developing http://goban.co and I already have my own visual board implementation which uses canvas and it's customized with the specific features I need.

I would really love to use the kifu JSON standard proposed in this project though, as well as the sgf parser. The problem for me is that it's not very easy to extract those components and re use them in my project, and I have no need of the html player provided here.

If we could have a way to separate the visual board from the backend game logic I think this library would be more flexible and cover more use cases.

Hi,before all I love this project.
I'm building a website where i can see sgf files using wgo.js, the problem comes when i using ajax.

Without using ajax:

div data-wgo="/static/{{c.partida.path}}"

Translates to

div id="wgo_0" class="wgo-player-main wgo-twocols wgo-large" data-wgo="/static/sgf/antonionu-sakunoCC3.sgf"

and it works.

Using ajax

div data-wgo='/static/"+data[i].respuestas[j].partida+"'

Translates to

div data-wgo="/static/sgf/ersev-hindoX41.sgf"

and it doesn't works.

How can i add wgo sgf player via ajax?

It appears as though a game (WGo.Game instance) does not have a resign method (thus ending) nor does it end automatically after 2 consecutive passes. No big deal. I'll track those states in code but wondering if these 2 concepts are deserving of a feature request.

I'll close this "issue" after 2 weeks of inactivity.

Hello and thanks a lot for WGo, which I am planning to use in my own project.
As detailed in links below, using for..in syntax on arrays is not recommended:

• Google: https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml#for-in_loop
• Mozilla: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#Array_iteration_and_for...in
• Stack Overflow: http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea

In my case this is breaking because I added methods to the prototype of Array class.
I will fork your repo and make a PR. Feel free to accept it or decide otherwise.
Cheers

Hi: yesterday I had a user on GoKibitz upload a game that had been heavily edited with Multigo as a game review. (Here's the original SGF). The variations seemed to be shifted to the wrong moves, resulting in the same color moving twice in a row and invalid move errors (just try to go to the next move) from moves being sent to a coordinate that already had a stone.

I created a stand-alone test with just the WGo.js player to make sure GoKibitz wasn't affecting anything, and it seems to display the same behavior.

The game appears to be valid, but, notably, Eidogo also has the same problem WGo.js does with the SGF in question. Both cGoban and SmartGo seem to be able to parse the SGF without any errors.

I spent a while looking into this last night, but can't see anything obvious about the file that would cause any problems. Is there any chance you might have some insight into the issue? I'd love to be able to have a clear answer for the uploader, since encouraging WGo & GoKibitz as a tool for more sophisticated game reviews is a win for us both. 😄

Hi, this program is wonderful!.
I'm not good at javascript, but I feel this is well-programmed.
I want to set up this several ways to show sgf file, but I cannot found the way.
Your four menus are off setting at first screen, so I want it to make on setting.
For example, Coordinates on at first setting, or edit mode at first setting.
And I found additional problem, if I turn on the coordinates, then the board turns to 19X19 whole board, even if I set it part.
Thank you.

Hi, when I use WGo in Chrome on my PC every stone looks good. However in Chrome on my Nexus 5 Android phone the black stones are more like a simple black disc (no "light" glow on them). The white stones look fine.
See below...

I think the WGO need add a step-tree capability include all brances, or is this functionality present somewhere?
the step-tree like below:

• 1
  • 1-1
  • 1-2
  • 1-3
  • 1-4
    • 1-4-1
    • 1-4-2
• 2
  • 2-1
  • 2-2
  • 2-3
• 3
• 4
• 5

the picture like this:https://raw.githubusercontent.com/lifengbo/swift/master/chapter-Text/step-tree.png

Hi,
wgo player doesn't open .sgf files on my computer.
When I try:

data-wgo="game.sgf"

The player launch and doesn't show the "File error" popup.
But it doesn't detect the game infos and I can't use it (next move, last move, click on the board...).
Note the help and menu buttons appears to be working.

To be sure it's not due to strange sgf file, I copy/past a sgf present in your exemples into game.sgf.
When I past the sgf file directly inside the wgo-data="" (as in you exemples) it work like a charm.

On Xubuntu 14.04 and FIrefox 28

Currently in the edit mode wgo can only add b/w stones and doesn't even let add a few b stones in a row. It would be more convenient if wgo allowed to

1. Add a few stones of the same color in a row.
2. Mark a few intersections with SL or MA.

Essentially I need a pallette of tools: b/w stones, markup, numbers and so on.

Small bug here, not in the actual code base but on the website - in the html example, change the second title tag from <title> to </title>

It seems to set the repeating member in a wrong place. I have fixed this in my local copy of wgo and the fix seems to work: it lets me repeat previous positions. Could you take a look at the fix and check whether it makes sense?

hi,all
Is there anybody try to add this feature:
when the mouse move, a red circle will display and fallow the mouse, showing that which position the mouse is hovering?
Is that a setting to control it?
Any help is welcome, thanks!

Right should be

But

SGF

(;GM[1]FF[4]SZ[19]AP[SmartGo:3.0.1]CA[utf-8]
GN[GP1072]
SO[ehubin]
AB[nb:nc][rb][lc:mc][oc:pc][sc:sd][pd:rd]
AW[na][lb:mb][ob:qb][jc:kc][qc:rc]GE[tesuji]DI[3d]DP[12]CO[5]
C[^B to play.]
(;B[oa]TE[1];W[pa]
(;B[sa]TE[1]
(;W[ma]
(;B[qa];W[ra]LB[kb:A]
C[Ko is best.])
(;B[kb];W[jb]
(;B[qa]
C[Ko.])
(;B[ka];W[ja];B[qa]
C[Ko.])))
(;W[kb];B[qa]
C[Ko.]))
(;B[ra]BM[1];W[sb];B[sa];W[kb]
C[^W is connected.])
(;B[ma]BM[1];W[la];B[sa];W[ma];B[qa];W[ra]LB[kb:A]
C[Two-step ko.]))
(;B[qa]BM[1];W[oa]
C[^W is connected.])
(;B[ra]BM[1];W[oa]
C[^W is connected.])
(;B[ma]BM[1];W[la];B[oa];W[pa];B[sa];W[ma]
(;B[qa]BM[1];W[ra]LB[kb:A]
C[Two-step ko.])
(;B[kb]TE[1];W[jb];B[qa]
C[Ko.]))
(;B[kb]TE[1]
(;W[jb]TE[1];B[oa];W[pa];B[sa];W[ka];B[qa]
C[Ko.])
(;W[oa]BM[1];B[ma];W[la];B[ka];W[ma];B[qa]
C[^W is dead.])))

Using the demo player:
http://wgo.waltheri.net/demo/player/1
and playing with different window widths, I noticed the following odd behavior in the automatic player resizing.

When resizing the window over widths >643 pixels, the player is needlessly scaled down proportional to the width of the window, even though there is still white space to the right of the player. This effectively maintains a large portion of whitespace to the right of the player, thus not fully utilizing the width of the screen, which seems quite arbitrary given that the sizing does not seem to be dependent on another factor, such as the vertical height of the screen.

It seems that the comments panel is not shown for some window widths. Oddly, for >932 pixels wide the comments panel is shown, for 932 to 644 pixels wide the comments panel is not shown, for 643 to 566 pixels wide the comments panel is shown, and >566 pixels the comments panel is not shown again. I think this alternating behavior has to do with how the player switches between vertical and horizontal layouts while resizing.

Hello,

I'm writing (well, trying to write) a tsumego solver in js and found that it's exceptionally hard to debug it: the solver is a complicated search algorithm that walks thru the dynamically generated tree of go positions (a snapshot of the tree is essentially an SGF file) and evaluates them based on some algorithms. Since it's hard to keep in mind the exact state of the search, I'm in need of a tool that would render the dynamically generated SGF as I step thru it.

Currently I'm using eidogo and it seems to work reasonably well, but unfortunately it seems to be abandoned as the last commit was made there in 2013. So I'm looking at alternatives because eidogo has some missing features that I need. What I need from this "tsumego debugger" is:

1. Render a basic setup from an SGF string: (;FF[4]SZ[9]MA[bb]DD[aa]AB[ac][bc]...AW[ab]...)
2. Add custom markup, i.e. a colored dot by CD[#ff8c40]. As you see in the previous example, I have to use MA (a cross) to denote the target which needs to be captures and DD (dark background) to list all possible moves for the solver (it's not advanced enough at the moment to figure out this list itself).
3. Edit the tree at runtime: make a move, undo, pass. Preferrably, such changes should be batched, i.e. when I tell the UI to add/remove stones, it doesn't do that immediately, but setTimeout(..., 0) first and draws the batch of changes at the next turn of the event loop.
4. Add a comment for a node: after the solver is done with a node, it can add a comment with the result and if I disagree with that, I can debug and see where the solver failed.
5. Add a subtree: after a solver has found a solution (aka "a proof tree") it needs to be added to the current node. This is useful in the "step over" (F10) feature: if I find the current move not interesting, I can press F10 and skip it, but the solver must add the solution to the tree so that I could quickly check it.
6. 9x9 board with coordinates (eidogo cannot render labels for this board bc labels are hardcodd in a png background file for 19x19 only).
7. Have a sort of an event channel from the UI to the code, i.e. if I make a move in the UI, I'd like to pass this move to the solver and see how it handles it. I could do this in the dev console, but it would be much easier to do this in the UI.

Can wgo handle all this?

Thanks.

Since JS lacks the notion of types and interfaces, it's pretty hard to grasp the structure of the API. This could be solved by either jsdoc-style comments with a jsdoc parser or with a separate interface definition file. I've started writing one for wgo, but obviously I won't be able to write it accurately and I can't write meaningful comments. If you could write one, that would be very helpful. Here is an excerpt from my file:

    interface BasicPlayer {
        new (target: HTMLElement, options: BasicPlayer.Options): BasicPlayer;

        board: Board;
        kifuReader: KifuReader;

        next(nodeIndex: number): void;
        previous(): void;
        update(): void;
        /** Shows/hides side goban labels. */
        setCoordinates(value: boolean): void;
    }

How to get the list of black and white stones on the board?

When using the go player on mobile devices, it's rather cumbersome to use the controls above the playing fields with your thumbs, as it always obscures the playing field while using the buttons.

I would love the buttons to move below the board for all platforms, but it would also be great if the widget adapts to it's surroundings (for example via media queries) and moves the controls accordingly.

I need to create and dispose lots of Tsumego objects. How to dispose a Tsumego object? Should I handle all the event listeners etc. myself?

As we know, in DOM every element has dual nature:

1. On one side it's a root of its DOM tree: we can traverse the subnodes without parsing anything, we can remove and add them and so on.
2. On the other side it's an HTML string: we can read the HTML representation of the node from its innerHTML property or we can replace it with something else.

The combination of the two simple-looking features is very powerful: we can do e.innerHTML = "..." and then read the parsed DOM tree or we can modify the tree and read the produced HTML.

In wgo this would allow to modify the tree like this:

node.innerSGF === ";W[fh]";
node.innerSGF += "C[this is a common tesuji]";
node.appendChild(";B[gg]");
node.innerSGF === ";W[fh]C[this is a common tesuji];B[gg]";

The main benefit as I see it is a very simple and yet powerful interface: with innerSGF there is no need to learn the internals of wgo in order to modify the SGF. And wgo already has somewhat DOM-like .appendChild method, so why not to go further in that direction and add .innerSGF?

When I use the board's method removeEventListener is seemly not work, like that:

    // function handling board clicks in normal mode
    var board_click_default = function(x,y) {
        // do somethis
        console.log("==x: " + x + "--y: " + y);
    }
        board.addEventListener("click", board_click_default.bind(player));
    board.removeEventListener("click", board_click_default.bind(player));

but the board's last click listener is not remove.

Solved

Solution here: https://github.com/waltheri/wgo.js/blob/master/build.sh

Is there an unminified version of wgo.player.js available?

I am getting a number of errors where a black overlay appears and says...

TypeError

this.setMessage is not a function

... or ...

InvalidMoveError

Invalid move in kifu detected. Trying to play black move on Q12, but this move is a suicide., but this position already occured.

... (when this is not in fact the case). As far as I can tell the code that triggers this is in wgo.player.min.js, so it would be good to have an unminified version to help track down the cause.

when i use editable.set(true),i chess a point.
use editable.set(false) my last point will disappear.

i have found through debug," this.originalReader" is wrong.
i think it is
this.originalReader = this.player.kifuReader; this.originalReader.goTo(this.player.kifuReader.path)

I seem to have trouble displaying SGF files which use handicap stones, as saved by e.g. cgoban3.

The handicap stones are not displayed. I have not checked if they are completely missing or just invisible.

If handicap games are supposed to be working, I can add an example of an SGF file displaying the faulty behavior here.

For example property "AB[ac:ic]" should add a line of black stones.

How to display stone number?

Thank you!

I think getMousePos() in wgo.js is incorrect.
(wgo.js (line: 1151))
e.layerX, e.layerY get negative values or huge values, depended on browser expansion rate and element width.
It may be bug.

thanks

I've briefly looked at the SGF parser of wgo and thought that it can be dramatically simplified by rewriting it in a form of a recursive descent LL(*) parser. This way it could be written in just 5 lines of code:

https://github.com/d180cf/tsumego.js/blob/master/src/sgf.ts#L27-L45

It seems that copyright and licensing info is missing from this repository.

I saw that your website (http://wgo.waltheri.net/) mentions that "All code is free, licensed under the MIT license". Is this true for all of the content in this repository?

I'm asking since I'm interested in using some of the wood grain and stone images in another open-source project (https://github.com/yewang/besogo).

In particular, I see that @atarnowsky contributed some image files in wgo.js/wgo/stones/. Are those also covered under the MIT license? What is appropriate copyright attribution for those files (i.e., should I attribute these to @atarnowsky)?

Here is a simple tsumego with 3 variations:

(;FF[4]SZ[7]MA[ac]
 C[B => W][B+1 => W][W => W+aa,ab,ba,bb,ca,cb,da,db]
 AB[fa][fb][fc][ad][bd][cd][dd][ed][fd]
 AW[ea][eb][ac][bc][cc][dc][ec]
 SL[aa][ab][ba][bb][ca][cb][da][db]

    (;AB[aa][ca][cb][bb]
      AW[ab]
      C[B => W][B+1 => B+da,db][W+1 => W])

    (;AB[aa][ba][ca][cb]
      AW[bb][da]
      C[B => W][W => W])

    (;AB[ba][da][cb]
      AW[bb]
      C[B => W][W => W][W+1 => W+ab][B+1 => B+ca,ab]))

Wgo is able to display the first position and can also swicth to the 1st variation if I click the > button. However it's not able to display the other two variations.

Hello, I was thinking on using your library to build a Go APP, but I can' t find a LICENSE file wich explains the use that it is allowed for.

It would be great to have one.

Thank you

When i use the WGO, i have 2 question,

1. I want to save sgf file when complete go game, I use the function:

var sgf = player.kifuReader.kifu.toSgf();

this usage is correctly?

2.I'm not familiar with js. I use the follewing method to remove stone:

var removeStone = {x : x, y: y, c:this.player.kifuReader.game.position.get(x, y)};
board.removeObject(removeStone);
this.player.kifuReader.game.position.set(x,y, 0);

it's work, but when i store the sgf like :

var sgf = player.kifuReader.kifu.toSgf();

This sgf file is incorrect, can you provide a example for remove stone and save the go game for sgf, thinks.

I am trying to use the wgo npm module in Angular.

typings.d.ts:

declare module WGo {
    export default function WGo();
}

in a directive:

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import WGo from "wgo";
@Directive({
  selector: '[appGoBoard]'
})
export class GoBoardDirective implements OnInit {
  @Input("appGoBoard") sgfData: string;
  elem: ElementRef;
  constructor(el: ElementRef) {
    this.elem = el;
  }

  ngOnInit() {
    let board = WGo.Board(
      this.elem.nativeElement, { 
        width: 200
      }
    );
  }
}

This code produces a js error in the browser:

ERROR TypeError: this.init is not a function
    at Object.Board (Board.js:55)
    at GoBoardDirective.webpackJsonp.204.GoBoardDirective.ngOnInit (go-board.directive.ts:16)
    at checkAndUpdateDirectiveInline (core.es5.js:10705)
    at checkAndUpdateNodeInline (core.es5.js:12084)
    at checkAndUpdateNode (core.es5.js:12052)
    at debugCheckAndUpdateNode (core.es5.js:12681)
    at debugCheckDirectivesFn (core.es5.js:12622)
    at Object.View_SnippetsListComponent_1.currVal_0 [as updateDirectives] (SnippetsListComponent.html:10)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12607)
    at checkAndUpdateView (core.es5.js:12019)

This is a feature request I had from a user on GoKibitz:

Hey Nate, I had a thought about a possible feature for Go Kibitz. I was wondering if there was a way to have the letter and number associated with a point on the board light up when someone hovers their cursor over that point? (This feature could be toggled on and off.) It's possible that this would be more annoying than helpful, but sometimes it's hard to eyeball the coordinates on a go board when talking about possible moves.

neagle/gokibitz#50

I think this is a nice idea, so I thought I'd drop it in as a feature request here. If I get the chance, I might try to get to it myself as a PR, but if you like the idea you could consider adding it to your to-do list for a future release.

It would be really nice to have a "Tsumego mode" where you can load a problem in SGF (http://jeudego.org/maxiGos/_maxigos/_sample/_sgf/problem/p3_en.sgf). It should:

1. Display the description comment (for example "Black to kill")
2. Automatically play the reply move after each user move
3. Have callbacks functions in case of either success or failure (so the web page can save the result for that player)

Right now the only way to do 1 and 2 (3 is not supported) is using MaxiGos (or MiniGos)
http://jeudego.org/maxiGos/_maxigos/en/documentation.php

hi, watheri,
when I trying to parse the sgf below, not all of the white stone is display:

(;CA[gb2312]AB[ch][dg][df][ce][cd][cc][bc][cb][ca][ah][ai][bi]AW[ba][bb][ac][bd]
[be][cf][cg][bg][bh][af][ag]C[black first]AP[MultiGo:4.4.4]SZ[13]AB[ci]MULTIGOGM[1]
;B[ad];W[ae];B[ab])

the stone [ba][bb][ac][bd] will be display， but other stones，[be][cf][cg][bg][bh][af][ag], is missing.

I guess the bug is in sgfparser.js,line 95:
var reg_seq = /(|)|(;(\s_[A-Z]+\s_(([])|([(.|\s)?([^\]])))+))/g;
It seen there is a bug in this reg express. Can you tell me how to fix it?

Not sure yet why and how but I bumped into an issue when adding several boards into a div.
The Y coordinate of the clicked vertex was returned wrong.
By replacing "layerY" by "offsetY" all now works fine. (offsetX works good, though in my case the X coordinate seemed ok with the current code)

Is it a known problem?

I found this article:
http://help.dottoro.com/ljcpdudj.php

The layerX property is rarely useful, use other event properties instead.
To get the position relative to the top-left corner of the document, use the pageX and pageY properties.
If you need the position of the mouse pointer relative to the top-left corner of the browser window's client area, use the clientX and clientY properties.
To get the position relative to the top-left corner of the screen, use the screenX and screenY properties.
Or, if you need the element that is located at a specified position, use the elementFromPoint method.

error code
this.originalReader.change = pos_diff(this.player.kifuReader.getPosition(),this.originalReader.getPosition());

this.originalReader.change = pos_diff(this.originalReader.getPosition(),this.player.kifuReader.getPosition());

In wgo there is an editing mode in which I can add stones. Is there a way to somehow add a listener to wgo and make it invoke that listener whenever a stone is added?

I need this feature to simplify testing the tsumego solver: if the solver's found a solution, it would be convenient to just play moves in wgo and let the solver play a reply.

Where is the bridge.php ? I can not find it in download section.

This affects the small player version (class "wgo-small" applied):

When inside an element with CSS setting "display: table" applied, the initial player size is correct (100 %), but when scaling down the window, the player does not change size. This breaks responsive layouts.

Here's an example: http://codepen.io/anon/pen/WvLrjP

Hi there,

In the player documentation one can read:

data-wgo-diagram | Like data-wgo but disables all controls and renders a static diagram

and

To create a read-only diagram you can use the attribute data-wgo-diagram instead. This will disable all controls and renders only the board. This is a shortcut for specifying an empty layout and disable the wheel and key input and does not mark the last move made with a circle.

I tried it and the wgo player is not showing at all when using <div data-wgo-diagram="test.sgf"></div>.

I couldn't find an exemple of this diagram use so I was wondering if I was doing something wrong or If it was a bug in wgo.

If you get curious, this is what we are working on.

Thanks for this great sgf viewer !

Can you add the "problem solving mode"?

Like http://eidogo.com/problems

Hi, waltheri,
thanks for your wgo.js, it's the best go board I found. I'm trying to use it in my project, but I miss a problem. I need to replace board_click_default function, but I don't know how to do it outside the wgo.js. Is that any hook to do this? thanks!

It would be really nice to have an export feature in wgo.js-Player. Such a feature would be pretty neat. I know it from GoSWF, the Flash-SGF-Viewer.
See: http://www.gludion.com/go/edit-mode.html

WGo-Player already has the possibility to replay and edit the SGF-Files, but it's not possible to export variations.

Unlike in GoSWF it would be nice to have to different kind of export modes:

1. Export complete SGF including the variation (this is the same feature like in GoSWF)
2. Export Variation only. This would be pretty nice. If you are using WGo on a community website. It makes it much easier to discuss about several variations. No more need to create several SGF-Files an external SGF-Viewer and upload all one by one. Just export the SGF-Variation and copy-paste it as static wgo-layout.

An edit+export feature in combination with https://github.com/klangfarbe/Go-for-WordPress would be awesome