waltheri / wgo.js Goto Github PK
View Code? Open in Web Editor NEWJavaScript library for game of Go.
Home Page: http://wgo.waltheri.net/
JavaScript library for game of Go.
Home Page: http://wgo.waltheri.net/
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 !
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:
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
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:
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
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>
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.
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
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:
(;FF[4]SZ[9]MA[bb]DD[aa]AB[ac][bc]...AW[ab]...)
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).setTimeout(..., 0)
first and draws the batch of changes at the next turn of the event loop.Can wgo handle all this?
Thanks.
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)
For example property "AB[ac:ic]" should add a line of black stones.
On ipad web browser, click on the board, there will be flashing.
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.
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.
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.
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
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.
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.
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.])))
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.
When i use the WGO, i have 2 question,
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.
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
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());
Where is the bridge.php ? I can not find it in download section.
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?
Can you add the "problem solving mode"?
As we know, in DOM every element has dual nature:
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?
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,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!
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?
I think the WGO need add a step-tree capability include all brances, or is this functionality present somewhere?
the step-tree like below:
the picture like this:https://raw.githubusercontent.com/lifengbo/swift/master/chapter-Text/step-tree.png
Browsing to http://ps.waltheri.net/ I see this error in the console.
How to display stone number?
Thank you!
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
Essentially I need a pallette of tools: b/w stones, markup, numbers and so on.
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.
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 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,
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
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)?
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.
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.
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.
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.
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;
}
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.
How to get the list of black and white stones on the board?
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:
An edit+export feature in combination with https://github.com/klangfarbe/Go-for-WordPress would be awesome
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?
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
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.
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.
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.