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?
that kind of “mainline” change usually needs buy-in from the community though - this thread is a good start.
