Flipping now works correctly with rotation

Author: Perlkonig

docs/glyphs.md

@@ -171,8 +171,8 @@ Each glyph object in the legend supports these properties. `name` and `text` are
 | `opacity` | number | `1` | 0 (transparent) to 1 (opaque); applied to player-tagged fills and strokes. |
 | `rotate` | number \| null | `0` | Degrees, −360 to 360. Negative is counter-clockwise. |
 | `orientation` | `"fluid"` \| `"vertical"` | `"fluid"` | After rotation, `"vertical"` keeps text upright. |
-| `flipx` | boolean | `false` | Mirror horizontally. |
-| `flipy` | boolean | `false` | Mirror vertically. |
+| `flipx` | boolean | `false` | Mirror horizontally. With **`fluid`** (default sheet glyphs), flip is in piece/board coordinates and rotates with the board. With **`vertical`** or text glyphs, flip is relative to the **screen** (left/right stays fixed when `board.rotate` changes). |
+| `flipy` | boolean | `false` | Mirror vertically. Same **`fluid`** vs **`vertical`** / text behaviour as `flipx`. |
 | `nudge` | `{ dx, dy }` | — | Offset from centre in cell units; negative `dx`/`dy` move left/up. |
 | `fontFamily` | string | — | CSS font family for text glyphs. |
 | `fontWeight` | string \| number | — | CSS font weight for text glyphs. |

src/renderers/_base.ts

@@ -12,7 +12,7 @@ import { unionPolys } from "../common/polys";
 import { hex2rgb, rgb2hex, afterOpacity, lighten } from "../common/colours";
 import { CompassDirection, edges2corners, getBoardFill, BoardReturn } from "../boards";
 import { cairoCatalan, cairoCollinear, cobweb, conhex, conicalHex, dvgc, fracturedFlat, hexOfCir, hexOfHex, hexOfTri, hexOfTriF, hexSlanted, moon, onyx, pentagonal, bentTri, star, pyramidHex, rectOfHex, rectOfTri, snubSquare, snubSquareCells, sowing, squares, squaresDiamonds, squaresStacked, stackingTriangles, vertex, wheel } from "../boards";
-import { isoFaceGlyphDrawSize, isoFaceGlyphPlacement, resolveGlyphRotationDegrees } from "./isometric/faceGlyphFit";
+import { isoFaceGlyphDrawSize, isoFaceGlyphPlacement, resolveGlyphFlipAxes, resolveGlyphRotationDegrees } from "./isometric/faceGlyphFit";
 import {
     computeAnnulusPlacement,
     computeSidebarPlacement,
@@ -1030,11 +1030,14 @@ export abstract class RendererBase {
                 size = factor * cellsize;
             }
 
-            if (g.flipx !== undefined && g.flipx) {
-                use.flip("x");
+            const { flipx, flipy } = resolveGlyphFlipAxes(g, boardRotation, rotationOpts);
+            const flipOriginX = layout === "isoFace" ? layerIsoFaceX + layerIsoFaceDrawSize / 2 : 0;
+            const flipOriginY = layout === "isoFace" ? layerIsoFaceY + layerIsoFaceDrawSize / 2 : 0;
+            if (flipx) {
+                use.scale(-1, 1, flipOriginX, flipOriginY);
             }
-            if (g.flipy !== undefined && g.flipy) {
-                use.flip("y");
+            if (flipy) {
+                use.scale(1, -1, flipOriginX, flipOriginY);
             }
 
             if (g.nudge !== undefined) {

src/renderers/isometric/faceGlyphFit.ts

@@ -124,6 +124,37 @@ export const resolveGlyphRotationDegrees = (
     return rotation;
 };
 
+export type GlyphFlipAxes = { flipx: boolean; flipy: boolean };
+
+/** Effective flip axes at bake time; upright flat glyphs swap at 90°/270° for screen-stable mirrors. */
+export const resolveGlyphFlipAxes = (
+    g: Glyph,
+    boardRotation: number,
+    opts?: GlyphRotationOptions,
+): GlyphFlipAxes => {
+    const flipx = g.flipx === true;
+    const flipy = g.flipy === true;
+    if (!flipx && !flipy) {
+        return { flipx: false, flipy: false };
+    }
+
+    const counterRotate = opts?.counterRotateWithBoard !== false;
+    const stabilize =
+        counterRotate &&
+        glyphKeepsUpright(g) &&
+        opts?.rotateFluidWithBoard !== true;
+
+    if (!stabilize) {
+        return { flipx, flipy };
+    }
+
+    const r = ((boardRotation % 360) + 360) % 360;
+    if (r === 90 || r === 270) {
+        return { flipx: flipy, flipy: flipx };
+    }
+    return { flipx, flipy };
+};
+
 /**
  * Conservative shrink so a centered square in face UV stays inside a skewed cube face parallelogram.
  */

test/faceGlyphFit.test.ts

@@ -10,6 +10,7 @@ import {
     multiplyIsoAffine,
     projectedTopCenterMatrix,
     resolveFaceInset,
+    resolveGlyphFlipAxes,
     resolveGlyphRotationDegrees,
 } from "../src/renderers/isometric/faceGlyphFit";
 import { genCube } from "../src/renderers/isometric/cubes";
@@ -121,4 +122,23 @@ describe("iso face glyph fit", () => {
         expect(resolveGlyphRotationDegrees({ name: "piecepack-number-1", colour: 1, orientation: "vertical" }, 90, { counterRotateWithBoard: true })).to.equal(-90);
         expect(resolveGlyphRotationDegrees({ name: "piecepack-number-1", colour: 1 }, 90, isoTop)).to.equal(90);
     });
+
+    it("should swap flip axes for upright legend glyphs at 90° and 270° board rotation", () => {
+        const verticalFlip = { name: "arimaa-camel", colour: 1, orientation: "vertical" as const, flipx: true };
+        const legendOpts = { counterRotateWithBoard: true, rotateFluidWithBoard: false };
+        const isoTop = { counterRotateWithBoard: true, rotateFluidWithBoard: true };
+
+        expect(resolveGlyphFlipAxes(verticalFlip, 0, legendOpts)).to.deep.equal({ flipx: true, flipy: false });
+        expect(resolveGlyphFlipAxes(verticalFlip, 180, legendOpts)).to.deep.equal({ flipx: true, flipy: false });
+        expect(resolveGlyphFlipAxes(verticalFlip, 90, legendOpts)).to.deep.equal({ flipx: false, flipy: true });
+        expect(resolveGlyphFlipAxes(verticalFlip, 270, legendOpts)).to.deep.equal({ flipx: false, flipy: true });
+
+        const fluidFlip = { name: "arimaa-camel", colour: 1, orientation: "fluid" as const, flipx: true };
+        expect(resolveGlyphFlipAxes(fluidFlip, 90, legendOpts)).to.deep.equal({ flipx: true, flipy: false });
+
+        expect(resolveGlyphFlipAxes(verticalFlip, 90, isoTop)).to.deep.equal({ flipx: true, flipy: false });
+
+        const bothFlip = { name: "arimaa-camel", colour: 1, orientation: "vertical" as const, flipx: true, flipy: true };
+        expect(resolveGlyphFlipAxes(bothFlip, 90, legendOpts)).to.deep.equal({ flipx: true, flipy: true });
+    });
 });