option for having larger legends on chessground coords | lichess.org | Page 1

rich frigate May 9, 2025, 6:36 PM

#

    const orientClass = s.orientation === 'black' ? ' black' : '';
    const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : '';

    if (s.coordinatesOnSquares) {
      const rankN: (i: number) => number = s.orientation === 'white' ? i => i + 1 : i => 8 - i;
      files.forEach((f, i) =>
        container.appendChild(
          renderCoords(
            ranks.map(r => f + r),
            'squares rank' + rankN(i) + orientClass + ranksPositionClass,
          ),
        ),
      );
    } else {
      container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass));
      container.appendChild(renderCoords(files, 'files' + orientClass));
    }
  }

#

This is where the ledgends are rendered,

#

.cg-wrap coords {
position: absolute;
display: flex;
pointer-events: none;
opacity: 0.8;
font-family: sans-serif;
font-size: 9px;
}

#

this is the css for coords,

#

.cg-wrap coords.bigger {
font-size: 15px;
}

#

I want to make a class like this, to allow for bigger legends, but ...

#

  const el = createEl('coords', className);
  let f: HTMLElement;
  for (const elem of elems) {
    f = createEl('coord');
    f.textContent = elem;
    el.appendChild(f);
  }
  return el;
}

#

So I believe I could add the class to the element here no?

#

(sorry, I have brain damage and a poor memory. I find it productive to work through problems through dialog. Then I can refer to what I was thinking before. Sometimes I even have good ideas xD)

#

#

I added a class

.bigger {
  font-size: 15px;
}```

function renderCoords(elems: readonly string[], className: string): HTMLElement {
const el = createEl('coords', className);
let f: HTMLElement;
for (const elem of elems) {
f = createEl('coord');
// if bigger
f.classList.add("bigger");
f.textContent = elem;
el.appendChild(f);
}
return el;
}

#

And now I just have to add the toggle.

IDK if it will really scale right or whatever. But it is just an option. If it does not work right, turn it off

#

I will look at the way other options are toggled. Say the quordinates themselves.

rich frigate May 9, 2025, 9:27 PM

#

so I think the HeadlessState interface is what confers the qualities onto the chessground.

#

I modifyed it like so:

#

  pieces: cg.Pieces;
  orientation: cg.Color; // board orientation. white | black
  turnColor: cg.Color; // turn to play. white | black
  check?: cg.Key; // square currently in check "a2"
  lastMove?: cg.Key[]; // squares part of the last move ["c3"; "c4"]
  selected?: cg.Key; // square currently selected "a1"
  largerLabels?: boolean; // make quarantine labels larger

rich frigate May 10, 2025, 6:50 PM

#

This is what I would like to be able to achieve without CSS fiddling

rn_image_picker_lib_temp_45510d86-c493-493b-8fba-d8c87d04c198.jpg

rich frigate May 11, 2025, 1:42 AM

#

#

ops

rich frigate May 11, 2025, 2:26 AM

#

    const orientClass = s.orientation === 'black' ? ' black' : '';
    const ranksPositionClass = s.ranksPosition === 'left' ? ' left' : '';

    if(s.largerCoordinate) {
        const maybeLargeCoords = " largerCoordinates ";
    } else {
      const maybeLargeCoords = "";
    }

    if (s.coordinatesOnSquares) {
      const rankN: (i: number) => number = s.orientation === 'white' ? i => i + 1 : i => 8 - i;
      files.forEach((f, i) =>
        container.appendChild(
          renderCoords(
            ranks.map(r => f + r),
            'squares rank' + rankN(i) + maybeLargerCoords + orientClass + ranksPositionClass,
          ),
        ),
      );
    } else {
      container.appendChild(renderCoords(ranks, 'ranks' + orientClass + ranksPositionClass + maybeLargeCoords));
      container.appendChild(renderCoords(files, 'files' + orientClass + maybeLargeCoords));
    }
  }

#

Not very concise, but it is a start

rich frigate May 11, 2025, 2:47 AM

#

#

const maybeLargeCoords = s.largerCoordinates ? " largerCoordinates " : "";

#

LOL

#

#

Now just to fix this

rich frigate May 11, 2025, 11:20 PM

#

#

#

rich frigate May 12, 2025, 12:58 AM

#

http://71.17.188.37/

static coral May 12, 2025, 1:41 AM

#

it looks like your css rules affect the other demos (the positions of the rank and coordinate characters is slightly off for example). could you add a new demo board to demo.html that highlights the feature of your PR? and keep the other demos unchanged, that way we can make sure it doesn't have any breaking changes when comparing

rich frigate May 12, 2025, 3:27 PM

#

Yes, good idea.

Good idea. I will work on that, thanks.

rich frigate May 12, 2025, 4:23 PM

#

#

Thanks for the suggestion, cleaned up my styles and fixed an opsie

rich frigate May 12, 2025, 4:44 PM

#

closing tags are hard

#

Ok, thanks for the suggestion. Improved my pr and resulted in much better result.

#

http://nrv773.bounceme.net/

#

here is v 2.0

#

well 0.2 lol

static coral May 12, 2025, 5:11 PM

#

thanks for the demo link, makes it easier to review 🙂

#

it looks like the coordinates overflow the square

rich frigate May 12, 2025, 5:16 PM

#

Strange. What is your platform?

works on my machine, haha

#

I will increase the gap, see if that helps out.

#

What is the resolution and browser?

see if I can rep.

static coral May 12, 2025, 5:22 PM

#

chrome on linux, Version 134.0.6998.165 (Official Build) (64-bit)

#

browser window is 3824x2023 right now

#

but i can repro on any browser size at the moment

rich frigate May 12, 2025, 5:25 PM

#

ok. Works on firefox smh monkastop

#

have a tweek, will make live in t - 100

rich frigate May 12, 2025, 5:41 PM

#

[245849:245849:0512/114036.135459:ERROR:content/browser/gpu/gpu_process_host.cc:956] GPU process exited unexpectedly: exit_code=135
[0512/114036.179232:ERROR:third_party/crashpad/crashpad/util/process/process_memory_linux.cc:50] pread64: Input/output error (5)
[245849:245849:0512/114036.474562:ERROR:content/browser/gpu/gpu_process_host.cc:956] GPU process exited unexpectedly: exit_code=135
[0512/114036.516728:ERROR:third_party/crashpad/crashpad/util/process/process_memory_linux.cc:50] pread64: Input/output error (5)
[245849:245849:0512/114036.807623:ERROR:content/browser/gpu/gpu_process_host.cc:956] GPU process exited unexpectedly: exit_code=135
[0512/114036.850619:ERROR:third_party/crashpad/crashpad/util/process/process_memory_linux.cc:50] pread64: Input/output error (5)
[245849:245849:0512/114037.138566:ERROR:content/browser/gpu/gpu_process_host.cc:956] GPU process exited unexpectedly: exit_code=135
[245849:245849:0512/114037.138596:FATAL:content/browser/gpu/gpu_data_manager_impl_private.cc:416] GPU process isn't usable. Goodbye.
[0512/114037.148321:ERROR:third_party/crashpad/crashpad/snapshot/elf/elf_dynamic_array_reader.h:64] tag not found
[0512/114037.148497:ERROR:third_party/crashpad/crashpad/snapshot/elf/elf_dynamic_array_reader.h:64] tag not found
[0512/114037.148688:ERROR:third_party/crashpad/crashpad/snapshot/elf/elf_dynamic_array_reader.h:64] tag not found
[0512/114037.150722:ERROR:third_party/crashpad/crashpad/snapshot/elf/elf_dynamic_array_reader.h:64] tag not found
[0512/114037.151234:ERROR:third_party/crashpad/crashpad/snapshot/elf/elf_dynamic_array_reader.h:64] tag not found
[0512/114037.151431:ERROR:third_party/crashpad/crashpad/snapshot/elf/elf_dynamic_array_reader.h:64] tag not found
[1]    245849 trace trap (core dumped)  google-chrome

#

fun stuff

#

tweek is live, but I have some messing around to do

#

just did the FlatPak. with my tweeks:

#

updated http://nrv773.bounceme.net/

rich frigate May 13, 2025, 4:52 PM

#

did fixup on just rank and file

rich frigate May 13, 2025, 5:52 PM

#

#

ff vs chrome.

rich frigate May 13, 2025, 6:40 PM

#

chrome is slightly higher for the rank and file legends.

If anyone uses Oprah (crashes on my machine, intel gpu problem) could you give it a look?

#

changed coords to be propper case

#

#

My partner in instruction said he would like the legends to be correct case. I tend to agree.

#

alright. "Larger ledgends" is not at a 1.0

rich frigate May 13, 2025, 10:23 PM

#

So, the grounds is changed with an API:

https://github.com/lichess-org/chessground/blob/master/src/api.ts

I should be able to use that information to discover how other aspects are changed.

rich frigate May 14, 2025, 12:26 AM

#

I am having some difficulty with this, try again tomorrow.

rich frigate May 14, 2025, 5:03 PM

#

so in page.scala:98
val baseClass = s"${pref.currentBg} coords-${pref.coordsClass}"

I think I need to mod the coordsClass

rich frigate May 14, 2025, 8:22 PM

#

@mixin fluid-size($prop, $min-size, $max-size, $min-vw: $vp-min-width, $max-vw: $vp-max-width) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-size);
  $u4: unit($max-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      #{$prop}: $min-size;

      @media (min-width: $min-vw) {
        #{$prop}: calc(
          #{$min-size} + #{strip-unit($max-size - $min-size)} *
            ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
        );
      }

      @media (min-width: $max-vw) {
        #{$prop}: $max-size;
      }
    }
  } @else {
    @error "fluid-size requires that all values have the same unit";
  }
}

This is where the text size is determined? I know nothing aboat sass

rich frigate May 14, 2025, 8:40 PM

#

@include fluid-size('font-size', 8px, 12px);

Can anyone help me out?

I am a sass no nothing. I am trying to translate:

  font-size: 25px;
}

.ranks.larger-coords {
  top: -20px !important;
  left: 4px !important;
}

.files.larger-coords {
  bottom: 20px !important;
  left: 15px !important;
}

into sass.

this is in the chessground.base.css

#

I am going to go touch grass, ttyl

#

now I need to get sass to build a comprable stylesheet and wait on my pr

rich frigate May 15, 2025, 12:26 AM

#

touched grass, was nice.

Going to sleep on this.

rich frigate May 15, 2025, 3:14 AM

#

https://youtu.be/Zz6eOVaaelI?si=ukBA2W5-vro0F5I3

YouTube

developedbyed

Learn Sass In 20 Minutes | Sass Crash Course

Check out my courses here!
https://developedbyed.com

In this mini crash course we are going to learn everything about Sass.
What Sass allows us to do is write alot of cool things that we would normally wouldn't be able to do in normal CSS.

With Sass we can create variables, use imports and partials to separate our css code into smaller chunks,...

▶ Play video

#

So the mixin is setting text size

rich frigate May 15, 2025, 3:02 PM

#

coords {
@include fluid-size('font-size', 8px, 12px);

#

so this is what sets the font size for coords

#

$vp-min-width: 320px !default;
$vp-max-width: 1200px !default;

  @return $value / ($value * 0 + 1);
}

@mixin fluid-size($prop, $min-size, $max-size, $min-vw: $vp-min-width, $max-vw: $vp-max-width) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-size);
  $u4: unit($max-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      #{$prop}: $min-size;

      @media (min-width: $min-vw) {
        #{$prop}: calc(
          #{$min-size} + #{strip-unit($max-size - $min-size)} *
            ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
        );
      }

      @media (min-width: $max-vw) {
        #{$prop}: $max-size;
      }
    }
  } @else {
    @error "fluid-size requires that all values have the same unit";
  }
}

So this is messing up my cmpt 101 CSS

rich frigate May 15, 2025, 3:51 PM

#

#

rtfm to maybe

rich frigate May 15, 2025, 4:29 PM

#

    js: Map[String, SplitAsset],
    css: Map[String, String],
    hashed: Map[String, String],
    modified: Instant
)

final class AssetManifest(getFile: GetRelativeFile)(using Executor):
  private var maps: AssetMaps = AssetMaps(Map.empty, Map.empty, Map.empty, java.time.Instant.MIN)

  private val logger = lila.log("assetManifest")

  def css(key: String): String             = maps.css.getOrElse(key, key)

#

ok, I am too brain damaged for this

rich frigate May 16, 2025, 11:12 PM

#

#

#

http://nrv773.bounceme.net/

#

I also changed coordinates legends to be correct case bc my co-instructor was triggered by the capitals.

#

Huh, it appears that was only in the chessground css

#

++

#

I don't know why, but dark on dark

#

the lichess current coords are not perfect, so that makes me feel better about moding them.

rich frigate May 17, 2025, 12:03 PM

#

https://github.com/lichess-org/chessground/pull/324

Well, I need to revise and review.

GitHub

Added a larger coordinate option to HeadlessState. by nicvagn · Pu...

See:

It boils down to a addition of largerCoordinates css class.
the relevant snippet:
if (s.coordinates) {
const orientClass = s.orientation === 'black' ? ' black&am...

#

So I have to figure out how to add CSS from Scala...

Probably a better place, but I have to understand.

I will review the existing code.

rich frigate May 17, 2025, 2:33 PM

#

css class should instead be set by the user on the chessground wrapper.
The same way it's done for the board theme and piece set.
(for referace)

rich frigate May 17, 2025, 3:29 PM

#

So, Scala, Scala scares me to be perfectly honest.

I did a grep -Rl "theme" src in the chessground :. I belive the board theme is handled in Scala land.

From some fellas suggestion on my pr, it is done for the peice set.

I have to go explore. wml

rich frigate May 17, 2025, 4:12 PM

#

So I will come back to this at a later date. Time to live.

rich frigate May 17, 2025, 8:12 PM

#

So as a stop gab solution, I used: https://addons.mozilla.org/en-CA/firefox/addon/styl-us/
with a style:

    font-size: 40px;
}```

Stylus – Get this Extension for 🦊 Firefox (en-CA)

Download Stylus for Firefox. Redesign your favorite websites with Stylus, an actively developed and community driven userstyles manager. Easily install custom themes from popular online repositories, or create, edit, and manage your own personalized CSS stylesheets.

#

If anyone wants a simmilar rez

#

📎 lichess-large-coords-stylus.json

rich frigate May 18, 2025, 1:14 AM

#

/* least changes */
.cg-wrap coords {
font-size: 40px;
}

coord {
align-self: center;
}

So this is my minimal example.

#

#

this is a nice view. Rather than a crazy maelstrom of options, I might just add one for this minor tweak. I still have to test on mobile and figure out what that fella was on about about one simple class option.

#

#

but the problem of how to scale aptly is a thing I need help with.

#

This is not a problem for hack tweaks, but it is prolly not tenable for a full blown cite feature

rich frigate May 18, 2025, 3:15 PM

#

  ---cg-ccw: #9f90b0;
  ---cg-ccb: #7d4a8d;
  ---cg-cs: none
}
body[data-board=purple-diag] .is2d cg-board::before {
  background-image:url(../hashed/purple-diag.303094fe.png)
}
body[data-board=purple-diag] .is2d coords {
  ---cg-ccw: #e5daf0;
  ---cg-ccb: #957ab0;
  ---cg-cs: none
}```

I think this is beyond me.

#

or, my current understanding

rich frigate May 18, 2025, 4:38 PM

#

https://github.com/lichess-org/chessground/pull/326

GitHub

Proof of concept demo added for Larger coordinates by nicvagn · Pu...

Done with just a css change. :. can be toggled by just the addition of a css class to the cg-wrapper. I believe this to be what was suggested.
This is a proof of concept for an option in lichess pr...

#

I implemented it with only css changes I think. This is just a proof of concept.

#

full spanning Legends are not going to be easily implemented without changes to how the chessground is constructed. But this improves legibility without destroying scalability. At least that was my intention.

rich frigate May 18, 2025, 4:58 PM

#

works resonably well on ff mobile adabtive checker thing

rich frigate May 19, 2025, 2:34 PM

#

And it works on mobile. F
ff and chrome

rich frigate May 19, 2025, 4:34 PM

#

Ok, so now I have the raw css I would like to see an option to enable on lichess.org. But I have to learn how.

rich frigate May 20, 2025, 8:23 PM

#

      board: Position,
      orient: Color,
      lastMove: List[Square] = Nil,
      blindfold: Boolean,
      pref: Pref
  ): Frag =

#

I am on to hackin on lila, and am stuck

rich frigate May 20, 2025, 11:59 PM

#

option for having larger legends on chessground coords

#option for having larger legends on chessground coords