Official or Non-Official Compact Mode (for better chat view)

Hello all;

I’m wondering if there’s any interest in an officially supported “compact mode”, sort of like Zen mode, except that it keeps all the UI elements, and removes the empty space in order to use as much space as possible, combined with some elements changing their normal position.

Taking a step back, I sometimes encounter the issue of wanting to re-view a long chat between me/my opponent/chat members, while the chat window is incredibly small, which makes it really hard. I’ve read in some other topic that it’s possible to resize the game-controls window to make up some space, but that alone doesn’t really achieve much. Consider this screenshot, with an almost fully collapsed game-controls window, which still results in a very small chat.

On the other hand, there is so much empty space on the page, that it seems like it should be possible to at least consider the possibility of shuffling UI elements around to use it fully. I understand that not having empty space has its own kind of issues, but when I’m in a moment where I’d like to read the chat, that would take the precedence. E.g., one possibility, as illustrated above, would be to have the chat window be its own separate column, such that it can exploit the full vertical space.

So, my first question is, as stated previously, whether it could be possible to have something along those lines as an official modality; sort of like Zen mode.

My second question concerns trying to achieve this in an unofficial manner, using GreaseMonkey. When inspecting the HTML, I notice that none of the elements exist in the source itself, so they must be loaded dynamically through JS when the page is loaded. That’s fine; I inspect some more, and find the classes of the relevant UI elements, and write a simple GreaseMonkey script that creates a new column and moves the chat window in it. The problem is that I don’t know how to make the script run only after the elements have been created dynamically. I found on stack-overflow one way that supposedly achieves that exact effect, but it still won’t work, it seems like the code remains stuck waiting for the element to be created.

Here is the script for reference:

// ==UserScript==
// @name     Move chat window
// @version  1
// @include  https://online-go.com/game/*
// @grant    none
// ==/UserScript==


// from https://stackoverflow.com/questions/12897446/userscript-to-wait-for-page-to-load-before-executing-code-techniques
// from https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists
function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}


var container = await waitForElm("div.Game");
console.log('Container is ready');
console.log(container);
    
var right_col = await waitForElm("div.Game > div.right-col");

console.log('Right col');
console.log(right_col);
 
var chat = await waitForElm("div.Game > div.right-col > div.GameChat");
  
console.log('Chat');
console.log(chat);

var chat_col = document.createElement("div");
chat_col.classList.add("right-col");

console.log('Chat col');
console.log(chat_col);

chat_col.appendChild(chat);

container.insertBefore(chat_col, right_col);

Given all that context, my question now is: what is a reliable way to manipulate the dynamically created elements, that will run after the elements themselves have been created?

4 Likes

That’s a very interesting layout idea!

I don’t have a good answer for where to do the dynamic JS (and i wouldnt recommend it anyway because you might confuse React), but one thought - maybe you can achieve your goals with just css? Since these are just layout changes?

Along more official lines… you may know already, but the web client is open source. You may be able to try stuff out by hacking on that codebase (or even get a PR merged) :slight_smile: that kind of “mainline” change usually needs buy-in from the community though - this thread is a good start.

1 Like

Any project with maximum sized board will always get my interest.
Do you have some plan on mobile too?

Support for compact landscape on mobile would be nice for e.g. chromecasting a game to a big screen. Right now it looks ridiculous if you try that.

3 Likes

good point; I don’t know anything about react or typescript, but I do have some very basic experience with webprogramming, simple stuff though. I’ll try to see the repo to see if anything clicks as well. Since zen-mode is already a thing, I assume it should be somewhat simple to use that as an baseline to create another layout.

1 Like

Going back to the unofficial solution, you’re right that this should be possible to solve via CSS; I thought I would need to restructure the document altogether, but I think that’s not necessary thanks to flexbox. I’m not too familiar with it, in fact I tend to shy away from using it, but I’ve done some reading and it’s actually fairly simple. I managed to use the following CSS adjustments to achieve a decent result when the analysis window is not active,

.MainGobanView .right-col {
    flex-basis: 50%;  /* was 25% */
    flex-wrap: wrap;  /* allows chat to wrap */
}

Unfortunately, things break when the analysis window is active, and after spending a good amount of time on this, I still cannot figure out why this is happening and how to fix it.

I know it’s something to do with the element with id “move-tree-container”, but I cannot figure out how to adapt its width, or why it’s so much wider now than before. Any help/tip from people with more experience or more web-dev know-how would be greatly appreciated.

2 Likes

Finally found a solution; probably not the best way, but it works. The problem seems to be the analysis button groups that end up being stacked horizontally to the full extent, and because the column is now that much wider, it means that they can all be placed in a single row. I didn’t think it was them because I tried removing them, but the column would stay the same. The thing that confused me is that even if I remove the button stacks, the column width remains the same… but that is just because the move-tree-container takes the available width when created, and therefore that will also have the full width of the button groups.

Anyway, long story short, here’s a simple CSS to apply

.MainGobanView .right-col {
    flex-basis: 50%;
    flex-wrap: wrap;
}

.MainGobanView .right-col > div:not(.Dock) {
   width: 50%;
}

And here are the results

Not particularly appealing, but functional nonetheless.

4 Likes

Super cool idea. I think lots of folks have wider screens these days and having this as an automatic response for wider screens makes sense to me.

2 Likes