Check out the respective post on my website here.
Table of Contents
Keyboard — better — navigation for OGS, the best online platform for playing the game of Go. Now, instead of only being able to play the ancient game online with your mouse, you can do it with your keyboard as well. Other handy shortcuts are also included.
Mostly, because I wanted to. But I also do believe that other players will benefit greatly from this, because:
- Using the keyboard where there are specialized keys for different actions will diminish the likelihood of missclicks.
- Even though it can be annoying to have to move the marker with across the whole board when there are drastic changes in plays' locations, on average, your playing speed will increase. And that means you're gonna have less friction between the interface and your brain, which will let you focus better on the game.
At first I didn't believe any of the benefits above, but, after trying it out for a week, I can clearly say it did help, it did improve the UI/UX.
This extension currently only works if you have all the coordinates turned on.
You might experience the extension not working when you transition to a game page. In that case, simply refresh the page and it will most likely work again.
If you don't want conflict with OGS' UI, prefer the WASD keys instead of the arrow keys. The arrow keys are disabled by default, so they won't bother you initially.
The extension has its logo right next to OGS' when active. At first, the extension will be enabled but its canvas overlay with the stone marker might not, use Ctrl + b to then enable the stone marker.
| Shortcut | Action |
|---|---|
| Ctrl + \ | Global switch: enables or disables the whole extension |
| Ctrl + m | Toggle the chat input box on a game page |
| Ctrl + b | Toggle the canvas overlay with the stone marker |
| Ctrl + ] | Toggle the arrow keys |
| w or ↑ | Move the stone marker up |
| a or ← | Move the stone marker left1 |
| s or ↓ | Move the stone marker down |
| d or → | Move the stone marker right |
| Enter or f | Click on the stone marker's location |
| Ctrl + [ | Pass |
| Ctrl + ; | Toggle AI Analysis |
| Ctrl + , | Cycle through the different board sizes2 |
| Ctrl + . | Toggle the coordinates input field3 |
| j | Press the submit button4 |
1: Using the left arrow also may activate analysis during the game, so I'm currently programmatically pressing the Back to game button in the background.
2: The extension has no way of identifying that you're on a smaller Goban size — only 19x19, 13x13 and 9x9 sizes are currently supported — so you will have to use this shortcut in order to manually achieve what you're looking for. And toggling to the right size is also necessary for the coordinates input field to work properly.
3: The coordinates should be of the form letter — lower or uppercase — and a number from 1 to 19. For example, both c11 and C11 are valid.
4: Typically used in correspondence games.
You can either install it through the Github releases or through the — future — published extensions on Google Chrome's, Microsoft Edge's and Firefox's browser extension stores.
Choose one of the links below:
| Browser Extension Store |
|---|
| Chrome |
| Firefox |
| Edge |
- Go to the releases page.
- Download the latest release's ZIP folder.
- Extract the content somewhere.
- Go to your browser's extension page.
- Activate Developer Mode.
- Load the unpacked extension.
- Unzip the extension in a local folder.
- Go to chrome://extensions/
- Activate Developer mode on the upper-right corner.
- Click on Load unpacked and choose the folder where you unzipped the extension.
- Go to about:debugging
- Click on This Firefox.
- Click on Load Temporary Add-on... and load the zip file directly.
- Unzip the extension in a local folder.
- Go to edge://extensions
- Activate Developer mode on the lower-left corner.
- Click on Load unpacked and choose the folder where you unzipped the extension.
Two other examples of keyboard navigation browser extensions:
- Web Search Navigator: probably one of the best productivity browser extensions out there.
- YouTube Kbd Nav: a way of making YouTube more navigable 95% of the time, through the keyboard1.
1: Created by me. Sorry for the self-promotion, but it is really useful — I use it every day —, I guarantee it!
I'm basically using the StoneMarkerUi class to draw a canvas on top of the existing OGS ones with the movable marker. It would be tough to make it work with the same existing canvas because erasing stuff while OGS tries to draw its own doesn't work very well in HTML.
A possibly easier way of doing all this would be to use the global variable global_goban, which OGS makes available on its pages — I didn't know of its existence until Akita Noek, the main developer of OGS, mentioned it to me. It is also kind of tricky to use global variable in browser extension contexts because most of the standardized files live in isolated worlds, but a solution to this problem can be found here.
Lastly, to draw the markers with size and positioning proportional to OGS', I essentially used a brute force approach. I've manually and visually worked out the size and positioning through approximations while with a fixed sized goban on my screen. And then I simply created a ratio property based on that goban size, which would be used to multiply the default sizes and positions I had originally worked out. Surprisingly, this approach was enough to make things work.
The JS code won't be version controlled (dist), the programmer should be able to easily recreate it by compiling it from the TS code (src).
Simply use this to compile the TS code to JS:
tsc -wAfter installing the webpack-cli package, run:
npx webpack -wto enable compilation bundling and minifying on watch mode.
If you use tsc -w, you can either use npm t to run tests with Jest or use the following to watch the tests as the code changes with tsc -w:
npm t -- --watchThe current setup will compile TS code to JS into the dist/dev folder for testing purposes (TDD), while compiling production code into the dist/prod folder for (manual) testing inside the browser.
You can achieve all of that at the same time by opening at least 3 terminals and running the following under watch mode — these commands were all described in the sections above —:
tsc -wnpx webpack -wnpm t -- --watch