Displaying Chess.com's Analysis & Review screens LARGER using CSS overriding and Stylus

Sort:
Durian_Defense

Hi All

I've made my browser show Chess.com's Game Review and Analysis screens & fonts LARGER by using Stylus to override the CSS code of the Game Review and Analysis webpages. This action is client-side and only affects my browser. The grey preview board is now bigger too - 600x600px. Any chess com devs reading this? HOW do I get crisper & sharper pieces in the grey preview board?

BEFORE (i.e., Standard Chess.com Analysis screen)

 

AFTER (using client-side CSS overriding and Stylus to make the screen content LARGER)


The chess pieces in the white/grey preview mini-chessboard were originally displayed on a 160x160 pixel chess board PNG file. The pieces look okay on such a small-sized PNG file. However, in the second screenshot above, as I'm displaying the engine move preview chessboard as a 600x600 chessboard, the preview chess pieces look pixelated and very clunky.

How do I get the chess pieces in the "mouse cursor hover" preview chessboard to be clearer and crisper?

Regards
Frankie "Durian Defense" Kam
Malaysia

P.S., The main reason why I am doing this mini-project of mine, is two-fold.
(1) For enjoyment, entertainment - to make the Game Review and Analysis screens of Chess.com LARGER and MORE viewable to viewers when streaming live on Twitch; in my humble opinion, the default fonts in the Analysis screen are too small to be viewed by the viewer.
(2) For the personal educational factor - with the larger fonts, bigger move lists and bigger preview chessboards, I am now enjoying, more than ever, Chess.com's Game Review and Analysis features. With the larger fonts, I find that I am able to focus on what the Stockfish engine has to offer. In my humble opinion, for chess amateurs like myself, Chess.com's Game Review and Analysis screens are, the best there is among chess portals.

I have been working on the CSS overriding with Stylus for five days now. Eventually I intend to show you how you too can display the Game Review and Analysis screens LARGER on your browser. This will benefit the streamer who is streaming chess content on Youtube or Twitch, and the viewers will be able to digest the analysis of a chess game, using Chess.com excellent Game Review and Analysis tools.

By the way, here's what the Game Review screen looks now that I managed to override the CSS code:

GAME REVIEW TAB
Before

 

After

 

Before:

 

After


Finally two more screenshots. Here's what the Analysis Tab content looks like with the CSS code overriding.

ANALYSIS TAB
Before:

 

After

Hope you like these 'larger' screens.

--xoOox--

vprahara

wow Nice, really like it.

Mardock

Where I can get it?

Durian_Defense

Turaluin

So cool ! Nice work !