Square highlight misalignment in .svg board themes

[johndoknjas]

The bug from #16381 seems to apply to seven board themes, six of which are .svg. This may be because of a bug in Chrome, so this PR offers a temporary fix for five of the .svg themes by replacing them with pngs. The five svgs are still used for their theme thumbnails, but for the foreseeable future the plan is for that to be it.

The remaining two themes that have the problem are "newspaper.svg" and "wood.png". For newspaper the new png size was getting pretty big (dozens of KBs), and the issue is probably the least noticeable on it. For wood I'm not sure what's causing the issue, the cause may or may not be related to the svg stuff.

[ornicar]

The problem with that change is that it removes the border radius of all boards, giving them pointy edges, when the site is designed for rounded borders.

It seems that, at least on Chrome 130, adding a border-radius causes the element background to render differently, which causes the squares misalignment.

[johndoknjas]

@ornicar Ah didn't notice that. Wonder if there's some other way to accomplish this then. I just tried it on edge as well and seems to be the same issue.

[samthegitguy]

Edge is Chromium, so it'll probably have the same or similar bugs as chrome. The bug does not occur on Firefox.
\

Also, I just noticed this bug also occurs after a normal move (in Chromium browsers), but it's less noticeable.

[samthegitguy]

@ornicar is this potentially a chrome bug then? Should someone make a bug report?

[ornicar]

Looks like the PNG boards are not distorted by the border-radius, well done!

[ornicar]

Before I merge... the PNG boards are very small in size (1.4kb) which is great. However they're "only" 1024x1024 pixels, and, more importantly, don't scale up very well: the lines between squares become blury.

So should we go for larger (2048?) board sizes? They might not weight that much more, and would look better on high-DPI screens.

[schlawg]

stretch goal - just render solid square boards using canvas.

async function makeBoardPng(boardSize: number, lightSquare = '#f0d9b5', darkSquare = '#b58663') {
  const squareSize = boardSize / 8;
  const canvas = new OffscreenCanvas(boardSize, boardSize);
  const ctx = canvas.getContext('2d')!;

  for (let row = 0; row < 8; row++) {
    for (let col = 0; col < 8; col++) {
      ctx.fillStyle = (row + col) % 2 === 0 ? lightSquare : darkSquare;
      ctx.fillRect(col * squareSize, row * squareSize, squareSize, squareSize);
    }
  }
  return await canvas.convertToBlob({ type: 'image/png' });
}

[johndoknjas]

@schlawg Thanks for the suggestion, I ran a python version of your script and updated the pngs. Seems to have helped the file size a bit, and provided the ic theme.

[schlawg]

i meant make boards at render time (using a blob url for the cg-board::before's background-image property). but that's even more work to reduce some assets that are small anyway. that's why i called it a stretch goal and i probably should not have poked my head in here!

carry on.

[ornicar]

There is something wrong with the new files, squares are off by one pixel. Zoomed in:

I selected a 1x1px region to highlight the issue.

What I expected to see instead, and what can be seen on the current SVG board:

[johndoknjas]

@ornicar whoops my bad, I'll take a look at it