From: Benjamin Auder <benjamin.auder@somewhere>
Date: Wed, 10 Jun 2026 12:35:52 +0000 (+0200)
Subject: Fix Avalam
X-Git-Url: https://git.auder.net/assets/doc/pieces/css/scripts/DESCRIPTION?a=commitdiff_plain;ds=sidebyside;p=xogo.git

Fix Avalam
---

diff --git a/variants/Avalam/class.js b/variants/Avalam/class.js
index 6c61af3..c16541f 100644
--- a/variants/Avalam/class.js
+++ b/variants/Avalam/class.js
@@ -38,35 +38,75 @@ export default class AvalamRules extends ChessRules {
     return false;
   }
 
-  pieces(color, x, y) {
-    const steps = [
-      [1, 0], [0, 1], [-1, 0], [0, -1],
-      [1, 1], [1, -1], [-1, 1], [-1, -1]
-    ];
+  setOtherVariables(fenParsed) {
+    super.setOtherVariables(fenParsed);
+    // Compute pieces drawings when required, and cache it:
+    this.svgEncodedPieces = {};
+  }
+
+  pieceDef() {
     return {
-      'b': {
-        "class": "stack",
-        both: [{steps: steps, range: 1}]
-      },
-      'c': {
-        "class": "stack2",
-        moveas: 'b'
-      },
-      'd': {
-        "class": "stack3",
-        moveas: 'b'
-      },
-      'e': {
-        "class": "stack4",
-        moveas: 'b'
-      },
-      'f': {
-        "class": "stack5",
-        moveas: 'b'
-      }
+      "class": "avalam-piece",
+      attack: [{
+        steps: [
+          [1, 0], [0, 1], [-1, 0], [0, -1],
+          [1, 1], [1, -1], [-1, 1], [-1, -1]
+        ],
+        range: 1
+      }]
     };
   }
 
+  static GetSvgNumber(n) {
+    switch (n) {
+    case 1: //unused
+      return '<path d="M130,85 v60"';
+    case 2:
+      return '<path d="M100,85 h30 v30 h-30 v30 h30"';
+    case 3:
+      return '<path d="M100,85 h30 v30 h-30 M130,115 v30 h-30"';
+    case 4:
+      return '<path d="M100,85 v30 h30 v30 M130,85 v30"';
+    case 5:
+      return '<path d="M130,85 h-30 v30 h30 v30 h-30"';
+    }
+    return ""; //never reached
+  }
+
+  // Compute piece drawing
+  getSvgEncodedPiece(piece, color) {
+    if (this.svgEncodedPieces[color + piece])
+      return this.svgEncodedPieces[color + piece];
+
+    let rawSvg = `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 230"
+           width="100%" height="100%">`;
+    rawSvg += `
+      <circle cx="115" cy="115" r="100"
+              fill="${color=='w' ? 'gold' : 'crimson'}"
+              stroke="darkslategray"
+      />`;
+    const n = piece.charCodeAt(0) - 97;
+    if (n > 1) {
+      rawSvg += V.GetSvgNumber(n) + " ";
+      rawSvg += 'fill="none" stroke-width="5" stroke="black" />';
+    }
+    rawSvg += "</svg>";
+
+    // On encode le SVG pour qu'il soit lisible dans un "url()" CSS
+    //const encodedSvg = btoa(unescape(encodeURIComponent(rawSvg)));
+    const encodedSvg = encodeURIComponent(rawSvg).replace(/#/g, '%23');
+    this.svgEncodedPieces[color + piece] = encodedSvg;
+    return encodedSvg;
+  }
+
+  // Draw piece
+  setPieceBackground(domPiece, piece, color) {
+    const encodedSvg = this.getSvgEncodedPiece(piece, color);
+    domPiece.style.setProperty('--piece-img',
+      `url('data:image/svg+xml;utf8,${encodedSvg}')`); //;base64
+  }
+
   genRandInitBaseFen() {
     let fen = "";
     if (this.options.freefill)
@@ -168,7 +208,7 @@ export default class AvalamRules extends ChessRules {
       return [];
     }
     let moves = [];
-    for (let s of this.pieces(this.turn, x, y)['b'].both[0].steps) {
+    for (let s of this.pieceDef().attack[0].steps) {
       const [i, j] = [x + s[0], y + s[1]];
       if (
         this.onBoard(i, j) &&
diff --git a/variants/Avalam/generateSVG.py b/variants/Avalam/generateSVG.py
deleted file mode 100755
index 43e1e9d..0000000
--- a/variants/Avalam/generateSVG.py
+++ /dev/null
@@ -1,41 +0,0 @@
-#!/usr/bin/env python
-
-# Compose each piece SVG with numbers
-# https://travishorn.com/removing-parts-of-shapes-in-svg-b539a89e5649
-# https://developer.mozilla.org/fr/docs/Web/SVG/Tutoriel/Paths
-
-preamble = """<?xml version="1.0" encoding="UTF-8" ?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="230" height="230">"""
-
-black = '<circle cx="115" cy="115" r="100" fill="crimson" stroke="darkslategray"/>'
-white = '<circle cx="115" cy="115" r="100" fill="gold" stroke="darkslategray"/>'
-
-digits = [
-    # 1 (unused here)
-    '<path d="M130,85 v60"',
-    # 2
-    '<path d="M100,85 h30 v30 h-30 v30 h30"',
-    # 3
-    '<path d="M100,85 h30 v30 h-30 M130,115 v30 h-30"',
-    # 4
-    '<path d="M100,85 v30 h30 v30 M130,85 v30"',
-    # 5
-    '<path d="M130,85 h-30 v30 h30 v30 h-30"'
-]
-
-final = "</svg>"
-
-for color in ["white", "black"]:
-    for number in range(5):
-        filename = color + "_stack" + (str(number + 1) if number >= 1 else "") + ".svg"
-        f = open(filename, "w")
-        f.write(preamble)
-        f.write("\n")
-        f.write(white if color == "white" else black)
-        f.write("\n")
-        if number >= 1:
-            f.write(digits[number] + ' fill="none" stroke-width="5" stroke="black"/>')
-            f.write("\n")
-        f.write(final)
-        f.close()
diff --git a/variants/Avalam/style.css b/variants/Avalam/style.css
index ab964d3..0805840 100644
--- a/variants/Avalam/style.css
+++ b/variants/Avalam/style.css
@@ -1,33 +1,7 @@
-piece.white.stack {
-  background-image: url('/pieces/Avalam/white_stack.svg');
-}
-piece.white.stack2 {
-  background-image: url('/pieces/Avalam/white_stack2.svg');
-}
-piece.white.stack3 {
-  background-image: url('/pieces/Avalam/white_stack3.svg');
-}
-piece.white.stack4 {
-  background-image: url('/pieces/Avalam/white_stack4.svg');
-}
-piece.white.stack5 {
-  background-image: url('/pieces/Avalam/white_stack5.svg');
-}
-
-piece.black.stack {
-  background-image: url('/pieces/Avalam/black_stack.svg');
-}
-piece.black.stack2 {
-  background-image: url('/pieces/Avalam/black_stack2.svg');
-}
-piece.black.stack3 {
-  background-image: url('/pieces/Avalam/black_stack3.svg');
-}
-piece.black.stack4 {
-  background-image: url('/pieces/Avalam/black_stack4.svg');
-}
-piece.black.stack5 {
-  background-image: url('/pieces/Avalam/black_stack5.svg');
+.avalam-piece {
+  background-image: var(--piece-img);
+  /*background-size: contain;
+  background-repeat: no-repeat;*/
 }
 
 .board-sq {