Show shape icons in statistics table.

Author: gvtulder

src/ui/grid/ShapesIcon.ts

@@ -0,0 +1,80 @@
+/**
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ * SPDX-FileCopyrightText: Copyright (C) 2025 Gijs van Tulder
+ */
+
+import { mergeBBoxItems } from "../../geom/math";
+import { Polygon } from "../../geom/Polygon";
+import { AngleUse, Shape } from "../../grid/Shape";
+import offsetPolygon from "../../lib/offset-polygon";
+import { roundPathCorners } from "../../lib/svg-rounded-corners";
+import { S, SVG } from "../shared/svg";
+import { polygonToPath } from "./TileDisplay";
+
+export class AtlasIcon {
+    svg: SVGElement;
+
+    constructor(shapes: readonly Shape[]) {
+        const polygons: Polygon[] = [];
+
+        for (const shape of shapes) {
+            if (polygons.length == 0) {
+                polygons.push(
+                    shape.constructPreferredPolygon(
+                        0,
+                        0,
+                        1,
+                        AngleUse.SetupAtlas,
+                    ),
+                );
+            } else {
+                polygons.push(
+                    shape.constructPolygonEdge(
+                        polygons[0].outsideEdges[polygons.length],
+                        0,
+                    ),
+                );
+            }
+        }
+
+        const svg = SVG("svg", "shapes-icon");
+        for (const poly of polygons) {
+            svg.appendChild(this.drawPolygon(poly));
+        }
+
+        const bbox = mergeBBoxItems(polygons)!;
+        const viewBox = [
+            bbox.minX,
+            bbox.minY,
+            bbox.maxX - bbox.minX,
+            bbox.maxY - bbox.minY,
+        ];
+        // center in a square viewbox
+        if (viewBox[2] < viewBox[3]) {
+            viewBox[0] -= (viewBox[3] - viewBox[2]) / 2;
+            viewBox[2] = viewBox[3];
+        } else if (viewBox[2] > viewBox[3]) {
+            viewBox[1] -= (viewBox[2] - viewBox[3]) / 2;
+            viewBox[3] = viewBox[2];
+        }
+        svg.setAttribute(
+            "viewBox",
+            viewBox.map((x) => (x * S).toFixed(4)).join(" "),
+        );
+
+        this.svg = svg;
+    }
+
+    drawPolygon(polygon: Polygon): SVGPathElement {
+        // shrink outline
+        const outline = offsetPolygon(polygon.vertices, -0.03);
+        // outline = shrinkOutline(outline, 0.95);
+
+        const path = polygonToPath(outline);
+        const roundPath = roundPathCorners(path, 0.08, true);
+
+        return SVG("path", null, undefined, {
+            d: roundPath,
+        });
+    }
+}

src/ui/grid/TileDisplay.ts

@@ -13,7 +13,7 @@ import { addPointToPolygon } from "../../geom/polygon/addPointToPolygon";
 import { S, SVG } from "../shared/svg";
 import { UniqueIdSource } from "../shared/uniqueSvgId";
 
-function polygonToPath(vertices: readonly Point[]): string {
+export function polygonToPath(vertices: readonly Point[]): string {
     const points = new Array<string>(vertices.length);
     for (let i = 0; i < points.length; i++) {
         points[i] =

src/ui/statistics/StatisticsDisplay.ts

@@ -11,6 +11,8 @@ import { StatisticsMonitor } from "../../stats/StatisticsMonitor";
 import { SetupCatalog } from "../../saveGames";
 import { formatNumber } from "../../i18n";
 import { clip } from "../../geom/math";
+import { AtlasIcon } from "../grid/ShapesIcon";
+import { Shape } from "../../grid/Shape";
 
 export type StatisticsSection = {
     heading?: {
@@ -21,6 +23,7 @@ export type StatisticsSection = {
     columns: (MessageDescriptor | null)[];
     rows: {
         title: MessageDescriptor;
+        icon?: readonly Shape[];
         keys: string[];
     }[];
     footer?: {
@@ -155,7 +158,11 @@ export class StatisticsDisplay extends ScreenDisplay {
                 const row = column[i];
                 if (row) {
                     const th = createElement("th", "label", tr);
-                    th.innerHTML = t(row.title);
+                    if (row.icon) {
+                        th.appendChild(new AtlasIcon(row.icon).svg);
+                        th.classList.add("with-icon");
+                    }
+                    th.appendChild(document.createTextNode(t(row.title)));
                     for (const key of row.keys) {
                         const td = createElement("td", null, tr);
                         const n = stats.counters.get(key) || 0;
@@ -223,6 +230,7 @@ const StatisticsSections: StatisticsSection[] = [
         rows: [...SetupCatalog.atlas.values()].map((atlasDef) => {
             return {
                 title: atlasDef.atlas.tilingName as MessageDescriptor,
+                icon: atlasDef.atlas.shapes,
                 keys: [
                     `HighScore.{"atlas":"${atlasDef.atlas.id}","colors":"wong4","segments":0,"uniqueTileColors":false,"rules":"same","scorer":"shape"}`,
                     `ShapeCompleted.{"atlas":"${atlasDef.atlas.id}","colors":"wong4","segments":0,"uniqueTileColors":false,"rules":"same","scorer":"shape"}`,
@@ -254,41 +262,47 @@ const StatisticsSections: StatisticsSection[] = [
                     id: "ui.statistics.counter.TilePlaced.square",
                     message: "Squares",
                 }),
+                icon: SetupCatalog.atlas.get("square")!.atlas.shapes,
                 keys: [`TilePlaced.square`],
             },
             {
                 title: msg({
                     id: "ui.statistics.counter.TilePlaced.triangle",
                     message: "Triangles",
                 }),
+                icon: SetupCatalog.atlas.get("triangle")!.atlas.shapes,
                 keys: [`TilePlaced.triangle`],
             },
             {
                 title: msg({
                     id: "ui.statistics.counter.TilePlaced.rhombus",
                     message: "Rhombi",
                 }),
+                icon: [SetupCatalog.atlas.get("penrose")!.atlas.shapes[0]],
                 keys: [`TilePlaced.rhombus`],
             },
             {
                 title: msg({
                     id: "ui.statistics.counter.TilePlaced.pentagon",
                     message: "Pentagons",
                 }),
+                icon: [SetupCatalog.atlas.get("pentagon")!.atlas.shapes[0]],
                 keys: [`TilePlaced.pentagon`],
             },
             {
                 title: msg({
                     id: "ui.statistics.counter.TilePlaced.hexagon",
                     message: "Hexagons",
                 }),
+                icon: [SetupCatalog.atlas.get("hexagon")!.atlas.shapes[0]],
                 keys: [`TilePlaced.hexagon`],
             },
             {
                 title: msg({
                     id: "ui.statistics.counter.TilePlaced.kite",
                     message: "Kites",
                 }),
+                icon: [SetupCatalog.atlas.get("deltotrihex")!.atlas.shapes[0]],
                 keys: [`TilePlaced.kite`],
             },
         ],

style/colors-dark.scss

@@ -97,6 +97,14 @@ body.dark-mode {
   // warning symbol for invalid grid in setup menu
   --invalid-grid-warning-color: #e06300;
 
+  // STATISTICS :-moz-full-screen
+
+  --statistics-shape-color: #{color.mix(
+      $button-base-color,
+      $main-bg-color,
+      35%
+    )};
+
   // GAME SCREEN
 
   // background behind buttons on top of grid

style/colors.scss

@@ -105,6 +105,14 @@ $blue: hsl(214deg, 64%, 50%);
   --invalid-grid-warning-color: #e06300;
   --undefined-tile-color: hsl(0deg, 0%, 50%);
 
+  // STATISTICS :-moz-full-screen
+
+  --statistics-shape-color: #{color.mix(
+      $button-base-color,
+      $main-bg-color,
+      70%
+    )};
+
   // GAME SCREEN
 
   // background behind buttons on top of grid

style/screens/screen-settings.scss

@@ -171,7 +171,7 @@
   article {
     position: relative;
 
-    $stats-column-width: 6em;
+    $stats-column-width: 5em;
     table,
     th,
     td {
@@ -203,6 +203,25 @@
       padding-left: 0.5em;
       border: none;
     }
+    $icon-width: 1em;
+    $icon-padding: 0.4em;
+    table th.with-icon,
+    table td.with-icon,
+    table th.label.with-icon,
+    table td.label.with-icon {
+      padding-left: calc(0.5em + $icon-width + $icon-padding);
+      text-indent: calc(-1 * $icon-width - $icon-padding);
+      border: none;
+    }
+    .shapes-icon {
+      display: inline-block;
+      fill: var(--statistics-shape-color);
+      max-width: $icon-width;
+      max-height: $icon-width;
+      padding-right: $icon-padding;
+      aspect-ratio: 1;
+      vertical-align: -0.15em;
+    }
     thead th {
       text-align: right;
       padding-right: 0.5em;