New boards

couldn’t have said it better

1 Like

I was just looking for something like this, so the topic was perfect timing… I like the flat style of GoKibitz, for some reason I find it calm and peaceful and friendly, so I wanted to replicate it in OGS. Specifically I really wanted the flat edges on the white stones, but since the OGS plain style has a black border on the white stones, and uses HTML canvas to draw the board, I had to make some JavaScript changes. In order for this to work, you will need to use Tampermonkey which injects a user script into the page. Here is the script.

I tested it with a quick bot game and a demo board, but I’m usually a backend programmer so there definitely might be bugs :smile: just a warning, if something looks wrong in the middle of a game, turn off Tampermonkey and refresh the page

edit: Oh and by the way I also found out you can do something like user scripts in iOS (I usually play on my iPad)… there is something called “Shortcuts” that can inject Javascript. It’s a lot harder to get it working but if anyone wants I can help

15 Likes

I think that looks wonderful my dude! i like the more simple style like that. Often where there is too much going on in the backround it can make focusing on the game quite difficult. So i can certainly see the appeal!

2 Likes

That’s amazing! I’m playing around with it now, finally I can change how the stones look!

Edit: Just realised how horrible the above must look for a red/green colourblind person :stuck_out_tongue:
It’s not easy to play with either, still needs some improvement.

19 Likes

OMG! when you get this down, and simplified for the code simpletons like me, then please. please, PLEASE!!! let us know how! Then we can turn this thread in to a board and stones appriciation page XD

4 Likes

Thank you everyone, especially @Vsotvep and @michiakig, for figuring it out. I think a lot of people can appreciate small improvements like that.

Is it possible to maybe go a step further and make a browser extension for OGS customization?

And find somewhere good default images that can be used?

6 Likes

Wouldn’t it be easier to just add it to the main site?


I don’t have time to actually program it, by the way. Nor do I have the skills.

3 Likes

Okay, it took me way to long to recognize the game.

3 Likes

How about this:

20 Likes

I finally started playing 19x19 last week … I think I’m getting distracted from learning how to play the big board… After I saw this post on Reddit, I just had to try :joy:

I wanted to make the bottom of the board like the screenshot but my pixel art + CSS skills are pretty bad. anyway here is the script again if anyone wants to try it or improve
https://greasyfork.org/en/scripts/405417-ogs-8-bit-style

Oh and I meant to agree with Vsotvep, I think it would be easier to add to the main site, otherwise any plugin is just going to break eventually. But the front end of OGS is open source, maybe they would accept a pull request … Unfortunately I also don’t have the skills or time to do it, or at least not do it right

10 Likes

I am pretty sure anoek would accept a pull like this :smiley:

Actually uploading images might be troublesome as it would require backend support and would open the risks of running out of storage and stuff, but perhaps simple link to an outside source stored in a cookie might work for starters?
A good chance for glory and eternal gratefullnes of the community for anyone who picks it up :smiley: Would be fun to then share usable images…
If no one goes for it I will try to finally also start contributing code next month and make this my first project, but no promises.

10 Likes

If someone’s already doing this, would it be difficult to add options to make the “last move” circle more prominent, possibly looking like a 75% size stone, and the black and white stones set with transparency 100% so that blind go could be played?

OMG thats awesome! I love i!

This is legitimatly amazing.

THank you @Vsotvep & @michiakig for helping code free people such as myself easily create a customised setup. I managed to make it look like this which I’m pretty happy with.

13 Likes

oh wow nice one, i really like the combination background image and top bar! i’m glad it worked for you :blush:

3 Likes

On the off chance, someone else was considering coding a PR for this, as not to double our efforts, I have looked at it today and think I can make it happen. So find something else to work on :smiley:

I think it should be doable? Will keep it in mind.

13 Likes

Just happen to be watching a couple of wonderful players and testing out my new bamboo board style. Thanks @Vsotvep! I look forward to putting it to the real test with a live game here in a little while.

7 Likes

Having fun with this.

Can you guys help by posting the tags for the elements?

I’ve figured out .Goban and .black.player-container but I would also like to control the color of the timers, lines, stone images, last move color, ect…

If we have a .class list it will make it easier for everyone I think.

.Goban

.black.player-container

.white.player-container

or both

.player-container

8 Likes

The best way is to right click anything and use “inspect element” which should help find CSS classes or IDs. You can then override easily with !important in your user stylesheet.

The stones and lines are drawn with HTML canvas so I’m not sure if it’s easy to swap images using CSS alone. But here’s a quick script that will hopefully help, it does nothing but replace the stones with gems … https://greasyfork.org/en/scripts/405885-ogs-custom-stones

To swap with some other images, just install with Tampermonkey, open the dashboard and open the script source code, then replace the two imgur URLs in the script with your own images, and save the script. It should work… but if it doesn’t I can try to help

(actually I thought this would be ugly but I think I kind of like it with the dark background :stuck_out_tongue_winking_eye: )

Changing the color of the lines I think is as simple as this Javascript:
data.setDefault("custom.line", "pink");
(data is a global from OGS source I think so this can go anywhere)

edit: I think custom line color only works with the “plain” style so best if you are also overloading the background… probably a better way but too sleepy to read more OGS source for tonight

I’m not sure where the color for the circle on the last moved stone is but I think it’s also Javascript

11 Likes