lichess-org · ornicar · Jun 11, 2024 · May 4, 2024 · May 4, 2024 · May 4, 2024
diff --git a/app/controllers/Coordinate.scala b/app/controllers/Coordinate.scala
@@ -11,12 +11,10 @@ final class Coordinate(env: Env) extends LilaController(env):
 
   private def serveHome(using ctx: Context): Fu[Result] =
     ctx.userId
-      .so { userId =>
+      .so: userId =>
         env.coordinate.api.getScore(userId).map(_.some)
-      }
-      .flatMap { score =>
+      .flatMap: score =>
         Ok.page(views.coordinate.show(score))
-      }
 
   def score = AuthBody { ctx ?=> me ?=>
     bindForm(env.coordinate.forms.score)(

diff --git a/modules/coordinate/src/main/CoordinateUi.scala b/modules/coordinate/src/main/CoordinateUi.scala
@@ -71,6 +71,7 @@ final class CoordinateUi(helpers: Helpers):
     trans.coordinates.findSquare,
     trans.coordinates.nameSquare,
     trans.coordinates.showCoordinates,
+    trans.coordinates.showCoordsOnAllSquares,
     trans.coordinates.showPieces,
     trans.storm.score,
     trans.study.back,

diff --git a/modules/coreI18n/src/main/key.scala b/modules/coreI18n/src/main/key.scala
@@ -1177,6 +1177,7 @@ object I18nKey:
     val `youHaveThirtySeconds`: I18nKey = "coordinates:youHaveThirtySeconds"
     val `goAsLongAsYouWant`: I18nKey = "coordinates:goAsLongAsYouWant"
     val `showCoordinates`: I18nKey = "coordinates:showCoordinates"
+    val `showCoordsOnAllSquares`: I18nKey = "coordinates:showCoordsOnAllSquares"
     val `showPieces`: I18nKey = "coordinates:showPieces"
     val `startTraining`: I18nKey = "coordinates:startTraining"
     val `findSquare`: I18nKey = "coordinates:findSquare"

diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "ab": "github:lichess-org/ab-stub",
-    "chessground": "^9.0.5",
+    "chessground": "^9.1.1",
     "eslint": "^8.57.0",
     "lint-staged": "^15.2.2",
     "onchange": "^7.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/translation/source/coordinates.xml b/translation/source/coordinates.xml
@@ -13,6 +13,7 @@
   <string name="youHaveThirtySeconds">You have 30 seconds to correctly map as many squares as possible!</string>
   <string name="goAsLongAsYouWant">Go as long as you want, there is no time limit!</string>
   <string name="showCoordinates">Show coordinates</string>
+  <string name="showCoordsOnAllSquares">Coordinates on every square</string>
   <string name="showPieces">Show pieces</string>
   <string name="startTraining">Start training</string>
   <string name="findSquare">Find square</string>

diff --git a/ui/common/css/theme/board/_chessground.scss b/ui/common/css/theme/board/_chessground.scss
@@ -212,3 +212,51 @@ html.transp body:not(.simple-board) cg-board {
     //filter: hue-rotate(calc(var(---board-hue) * 3.6deg));
   }
 }
+
+coords.squares {
+  text-transform: uppercase;
+  text-align: right;
+  flex-flow: column-reverse;
+  height: 100%;
+  width: 12.5%;
+
+  &.black {
+    flex-flow: column;
+  }
+
+  &.left {
+    text-align: left;
+  }
+
+  coord {
+    padding: 6% 4%;
+  }
+
+  &.rank2 {
+    transform: translateX(100%);
+  }
+
+  &.rank3 {
+    transform: translateX(200%);
+  }
+
+  &.rank4 {
+    transform: translateX(300%);
+  }
+
+  &.rank5 {
+    transform: translateX(400%);
+  }
+
+  &.rank6 {
+    transform: translateX(500%);
+  }
+
+  &.rank7 {
+    transform: translateX(600%);
+  }
+
+  &.rank8 {
+    transform: translateX(700%);
+  }
+}
diff --git a/ui/common/css/theme/board/_coords-colors.scss b/ui/common/css/theme/board/_coords-colors.scss
@@ -5,16 +5,21 @@ coords {
   text-shadow: var(---cg-cs, $coord-shadow-default);
 }
 
-.orientation-white .files coord:nth-child(2n + 1),
-.orientation-white .ranks coord:nth-child(2n),
-.orientation-black .files coord:nth-child(2n),
-.orientation-black .ranks coord:nth-child(2n + 1) {
+/** Alternating colors in rank/file/square labels */
+.orientation-white .ranks :nth-child(even),
+.orientation-white .files :nth-child(odd),
+.orientation-black .ranks :nth-child(odd),
+.orientation-black .files :nth-child(even),
+coords.squares:nth-of-type(odd) :nth-child(odd),
+coords.squares:nth-of-type(even) :nth-child(even) {
   color: var(---cg-ccw, $coord-color-default);
 }
 
-.orientation-white .files coord:nth-child(2n),
-.orientation-white .ranks coord:nth-child(2n + 1),
-.orientation-black .files coord:nth-child(2n + 1),
-.orientation-black .ranks coord:nth-child(2n) {
+.orientation-white .ranks :nth-child(odd),
+.orientation-white .files :nth-child(even),
+.orientation-black .ranks :nth-child(even),
+.orientation-black .files :nth-child(odd),
+coords.squares:nth-of-type(odd) :nth-child(even),
+coords.squares:nth-of-type(even) :nth-child(odd) {
   color: var(---cg-ccb, $coord-color-default);
 }
diff --git a/ui/coordinateTrainer/css/_coordinateTrainer.scss b/ui/coordinateTrainer/css/_coordinateTrainer.scss
@@ -43,9 +43,7 @@
     }
 
     h1 {
-      font-size: 1.5em;
-      padding: 0 !important;
-      text-align: center;
+      margin-bottom: 1rem;
     }
   }
 
@@ -136,6 +134,7 @@
     @extend %flex-column;
     align-items: center;
     justify-content: space-around;
+    gap: 1em;
   }
 
   .explanation {

diff --git a/ui/coordinateTrainer/src/chessground.ts b/ui/coordinateTrainer/src/chessground.ts
@@ -26,6 +26,7 @@ function makeConfig(ctrl: CoordinateTrainerCtrl): CgConfig {
     orientation: ctrl.orientation,
     blockTouchScroll: true,
     coordinates: ctrl.showCoordinates(),
+    coordinatesOnSquares: ctrl.showCoordsOnAllSquares(),
     addPieceZIndex: ctrl.config.is3d,
     movable: { free: false, color: undefined },
     drawable: { enabled: false },

diff --git a/ui/coordinateTrainer/src/ctrl.ts b/ui/coordinateTrainer/src/ctrl.ts
@@ -183,6 +183,16 @@ export default class CoordinateTrainerCtrl {
     this.chessground?.redrawAll();
   };
 
+  showCoordsOnAllSquares = withEffect<boolean>(
+    storedBooleanProp('coordinateTrainer.showCoordsOnAllSquares', document.body.classList.contains('kid')),
+    (show: boolean) => this.onShowCoordsOnAllSquaresChange(show),
+  );
+
+  onShowCoordsOnAllSquaresChange = (show: boolean) => {
+    this.chessground?.set({ coordinatesOnSquares: show });
+    this.chessground?.redrawAll();
+  };
+
   showPieces = withEffect<boolean>(storedBooleanProp('coordinateTrainer.showPieces', true), () =>
     this.onShowPiecesChange(),
   );

diff --git a/ui/coordinateTrainer/src/side.ts b/ui/coordinateTrainer/src/side.ts
@@ -225,7 +225,7 @@ const backButton = (ctrl: CoordinateTrainerCtrl): VNode =>
   h('div.back', h('a.back-button', { hook: bind('click', ctrl.stop) }, `« ${ctrl.trans('back')}`));
 
 const settings = (ctrl: CoordinateTrainerCtrl): VNode => {
-  const { trans, redraw, showCoordinates, showPieces } = ctrl;
+  const { trans, redraw, showCoordinates, showCoordsOnAllSquares, showPieces } = ctrl;
   return h('div.settings', [
     ctrl.mode() === 'findSquare'
       ? toggle(
@@ -245,6 +245,17 @@ const settings = (ctrl: CoordinateTrainerCtrl): VNode => {
       trans,
       redraw,
     ),
+    toggle(
+      {
+        name: 'showCoordsOnAllSquares',
+        id: 'showCoordsOnAllSquares',
+        checked: showCoordsOnAllSquares(),
+        change: showCoordsOnAllSquares,
+        disabled: !ctrl.showCoordinates(),
+      },
+      trans,
+      redraw,
+    ),
     toggle(
       { name: 'showPieces', id: 'showPieces', checked: showPieces(), change: showPieces },
       trans,
@@ -264,9 +275,9 @@ const playingAs = (ctrl: CoordinateTrainerCtrl): VNode => {
 };
 
 const side = (ctrl: CoordinateTrainerCtrl): VNode =>
-  h('div.side', [
-    h('div.box', h('h1', ctrl.trans('coordinates'))),
-    ...(ctrl.playing
+  h(
+    'div.side',
+    ctrl.playing
       ? [
           scoreBox(ctrl),
           !ctrl.timeDisabled() ? timeBox(ctrl) : null,
@@ -279,7 +290,7 @@ const side = (ctrl: CoordinateTrainerCtrl): VNode =>
           ...configurationButtons(ctrl),
           ctrl.isAuth && ctrl.hasModeScores() ? scoreCharts(ctrl) : null,
           settings(ctrl),
-        ]),
-  ]);
+        ],
+  );
 
 export default side;
diff --git a/ui/coordinateTrainer/src/view.ts b/ui/coordinateTrainer/src/view.ts
@@ -34,7 +34,8 @@ const textOverlay = (ctrl: CoordinateTrainerCtrl): VNode | false => {
 
 const explanation = (ctrl: CoordinateTrainerCtrl): VNode => {
   const { trans } = ctrl;
-  return h('div.explanation', [
+  return h('div.explanation.box', [
+    h('h1', trans('coordinates')),
     h('p', trans('knowingTheChessBoard')),
     h('ul', [
       h('li', trans('mostChessCourses')),