Suggestion for Ultra Widescreen User Interface improvement (CSS)

[tabletopper]

Clans of Caledonia doesn't seem to have good CSS styling for ultra wide screen monitors. Other games such as Caverna and Viticulture DO seem to have it. What I mean is, on a 3440 x 1440 screen, the player game boards should flow to the right side of the main game board. But in CoC the player boards are below the main board, requiring some scrolling.

I made a simple TamperMonkey script to solve this just for my computer:

Code: Select all

// ==UserScript==
// @name        Clans of Caledonia Ultra Widescreen UI improvement on boardgamearena.com
// @namespace   Violentmonkey Scripts
// @match       https://boardgamearena.com/**/clansofcaledonia
// @grant       none
// @version     1.0
// @author      tabletopper
// @description 1/19/2023, 9:43:03 AM
// ==/UserScript==

(function () {
  var finished = false;
  var attemptsToFind = 20;

  window.console.log("*** Loading custom TamperMonkey script...");

  function waitLoop() {
    if (finished || attemptsToFind < 1) {
      return;
    }

    attemptsToFind--;

    let playerBoards = document.getElementById('players-zone');

    if (!playerBoards) {
      setTimeout(waitLoop, 1000);
    } else {
      finished = true;
      mainFunction();
    }
  }

  let mainFunction = function () {
    let playerBoards = document.getElementById('players-zone');
    let mainBoard = document.getElementById('board-row');
    playerBoards.style.display = "inline-block";
    playerBoards.style.marginLeft = "8px";
    mainBoard.style.verticalAlign = "top";
  };

  waitLoop();

})();

Not the best code but you get the idea, basically once it detects the game is loaded, it moves the player boards by making it "inline-block".


Comparison screen shots:

Currently:



With UI fix:

[bananasplay]

I'll try to remember this post if I ever upgrade my setup to have a wider monitor, but either way, thanks for sharing your efforts with the community!

[MATV0]

Hi, does this work for all games here on BGA? Do you just paste it into the CSS window? Thanks!