BesoGo: yet another web-based SGF editor

Oh wow, @yebellz, that’s beau-ti-ful!

I’ve made a few minor changes to this project since the last time I posted about it

  1. Changed the license to MIT (although one can still use AGPL if they prefer)
  2. The code is now released on npm, thanks to the help of another GitHub user. See BesoGo on npm and this GitHub issue discussion
  3. Added the shift+click to jump to particular move as suggested by @Pempu
  4. Added tools for changing promoting/demoting the order of variations

I have not really worked on this in a long while, but I think I want to get back to it.
Here are some thoughts for my ToDo list:

  1. Update the code to modern javascript practices. Specifically, packing things into a proper module (I need to learn how to do this)
  2. Refactor colors to reside fully in the CSS, which will make full color customization much easier
  3. Add a problem mode widget for presenting go problems
  4. Work on something that could be cleanly integrated into these forums, in order to support embedded SGF files

Regarding the last ToDo item:
We used to have EidoGo as a plugin here (on these forums) for directly embedding diagrams, SGF files, problems, but that no longer works and was disabled. Would there be interest and support to use BesoGo as a replacement?

2 Likes

I don’t care if it’s an alpha… There is no excuse for releasing a version 0.0.0 :persevere:

As long as it doesn’t break any forum features as eidogo ended up doing, that would be great :heart:

2 Likes

What’s wrong with starting the absolute count at all zeros?

By the way, the latest “release” is now “0.0.2-alpha”

At the end of the day, numbering and naming of releases are all a bit arbitrary.

3 Likes

I was trying to embed OGS goban in the forum, but got distracted on the way.

3 Likes

Obviously nothing lol you can name it how you like… Just to me any change at all from initial document creation would be grounds for a 0.0.1 release lol so in my head 0.0.0 would just be a bunch of empty file stubs and thus couldn’t be released

This is really nice board.
It is absolutely relaxing!

2 Likes

For example, here is what a minimal SGF viewer widget might look like (just a screenshot)

The theme, color-template, look and feel, orientation, tool panels, options, etc. could all be tweaked.

3 Likes

I think coordinates would be a must, or if you want it as an option at least default on for forum use.

2 Likes

Yep, no problem. My widget supports several and can be configured to make coordinates on (of various styles) the default.

The last one is a corner-relative system that I discussed here: Tournament Shorthand?

4 Likes

Looks awesome already, but the brightness of White (in these screenshots) hurts my eyes, I think I’d prefer it much if it were dimmed down a bit.

<edit> Looking at your “realistic rendering” though, it looks BEAU-TI-FUL! And I realize I said that already in 2016 :roll_eyes: </edit>

2 Likes

Thank you, @trohde

As for the colors and style, those are all readily customizable via CSS. I can even adjust line thickness, stone diameter, hoshi diameter/shape, etc. Before deploying anything on the forums, I would gladly make a few polls to figure out what design people preferred.

As for providing something easier on the eyes, back in 2016, I even made a theme (inspired by Eidogo) based on your suggestion:

3 Likes

Oh yeah, now I see I even “liked” that one also back then :man_facepalming: … at least I can find some comfort by telling myself that it was 40 years ago (as I’ve been aging ten years for every year lived in the past few ones :wink:)

Anyway, @yebellz, you’re creating some really nice things :slight_smile: I wonder whether you’ve also made other stuff a macOS/iOS user could play around with.

1 Like

I haven’t made anything specifically for macOS/iOS, but BesoGo is designed to (and hopefully does) run on all platforms with a modern web browser. Actually, I don’t currently have or use any Apple devices.

1 Like

I’d suggest to implement score calculation.

1 Like

Thanks for the suggestion and interest in my software!

I think that would be a nice feature, but it could be a bit tricky to implement.

I think mere counting with some sort of interface to manually mark dead stones, neutral points, and selecting between territory and area could be doable, although still require significant interface design.

Having some sort of system to estimate life/death would be trickier (and probably require connecting to an external engine to do properly), and that would probably be beyond my abilities and efforts.

What type of score calculation did you have in mind? Any particular suggestions for the interface. options, etc.?

I love BesoGo! I found it scouring GitHub the other day for a nice goban and I started making some modifications for my own uses. I’ve basically just commented out lines of code so the ui serves my needs better, haha.

Unfortunately, I don’t have much coding skills, but if really love to be able to figure out how to embed it on my site and send it certain parameters from my site (not just the url params).

Here is a peak at my layout preference: https://fraze.github.io/testing.html?theme=darkwood&size=9&realstones=on

I’d really love to be able to set the handicap via some method and have the board start with those stones.

1 Like

@Devin_Fraze, I’m glad that you are finding it useful.

I’m guessing that you want your site to automatically load with the options that you set in the URL, i.e., hard-code the options into the HTML instead of passing via the URL params?

This can be done with a file like this (which I modified from your testing.html):

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BadukClub Goban</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" type="text/css" href="css/besogo.css">
<link rel="stylesheet" type="text/css" href="css/board-darkwood.css">

<script src="js/besogo.js"></script>
<script src="js/editor.js"></script>
<script src="js/gameRoot.js"></script>
<script src="js/svgUtil.js"></script>
<script src="js/parseSgf.js"></script>
<script src="js/loadSgf.js"></script>
<script src="js/saveSgf.js"></script>
<script src="js/boardDisplay.js"></script>
<script src="js/coord.js"></script>
<script src="js/toolPanel.js"></script>
<script src="js/filePanel.js"></script>
<script src="js/controlPanel.js"></script>
<script src="js/namesPanel.js"></script>
<!-- <script src="js/commentPanel.js"></script> -->
<!-- <script src="js/treePanel.js"></script> -->

<body style="padding: 0px; margin: 0px; overflow-x: hidden; overflow-y: hidden">
<div class="besogo-editor" size="9" realstones="on"></div>
<script>besogo.autoInit()</script>

</body>
</html>

Just copy-paste the above into the index.html file in your repo, then I think visiting just https://fraze.github.io will give you what you want. Note: I removed the code for reading parameters from the URL, which I assume you were okay with, but let me know if that’s not what you wanted.

This should be pretty easy to implement, and I can help with that. What did you have in mind in terms of an interface for this? Like a new tool panel button? Where exactly should the handicap stones be placed?

Thanks for offering to help yebellz!
So my use case is to help people record in person games.

What i’m doing now

Currently, my interface for that looks like this:

When people click on “Open Goban”, I display an iframe of my github page and I generate the url based on the parameters available to me (so ?size=19&style=darkwood, etc).

But I am unable to pass in things such as players, ranks, handicap, etc to be saved with the SGF. Also, I am unable to save the sgf straight to my website’s database nor am I able to load an sgf from my database.

The proper solution

So what I should be doing is integrate your code into my actual site instead of just sending parameters to an external site displayed in an iframe. The problem lies in the fact that I’m using a “no-code” app builder to create my website. To my knowledge it is possible to add javascript, html, and css to the no-code site, but I think the real trick is figuring out how to make the two communicate together.

If you’d be interested in putting our heads together on this I would be very grateful. Just shoot me a PM and I’ll send you a link to my project. If not, no worries, I’m just grateful for the time you’ve already put in.

Handicap stones

In regards to handicap stones. I’d like to have a similar experience to OGS. If the game is using a ruleset with pre-places stones (ei. Japanese, AGA, etc), then I’d like the stones to be arranged as such with white to play the first move. If the game ruleset has black choose the location of the handicap stones (ei. chinese, etc) then I’d like black to first play x moves (where x is the number of handicap stones) before a white stone is played.

This would allow me to simplify the tool panel even further. Currently I’ve kept the option for “play mode”,“black stone”, and “white stone”. But since my use case is so narrow, these features don’t serve me as long as handicap stones can be automatically placed.

1 Like