feat: palette generation

app/game/gm/gm.ts

@@ -1,10 +1,9 @@
 import _ from "lodash";
 
-import { STANDARD_COLOR } from "../view/constants";
-
 import { Land } from "./land";
 import { Matrix } from "./matrix";
 import type { Pos } from "./matrix";
+import { Palette } from "./palette";
 
 /**
  * Gm extended from a Matrix of Lands, which knows its mode and
@@ -55,22 +54,26 @@ export class Gm extends Matrix<Land> {
   }
 
   /**
-   * Creates a random gm with given height and width.
+   * Creates a random gm and a palette with given height and width.
    */
   static random(mode: Gm["mode"], height: number, width: number) {
-    return new this(
+    const n = _.random(10, 50);
+    const palette = Palette.colors(n);
+    const gm = new this(
       mode,
       Matrix.defaultWith(
         height,
         width,
         () =>
           new Land(
-            _.random(0, STANDARD_COLOR.length - 1),
+            _.random(0, n),
             _.sample(Object.values(Land.Type))!,
             _.random(1, 9) * Math.pow(10, _.random(0, 9))
           )
       )
     );
+
+    return { gm, palette };
   }
 
   /**

app/game/gm/palette.test.ts

@@ -0,0 +1,10 @@
+import { expect, it } from "vitest";
+
+import { Palette } from "./palette";
+
+it("creates a palette", () => {
+  const palette = Palette.colors(20);
+
+  expect(palette).toHaveLength(21);
+  expect(palette[0]).toBe(0x808080);
+});

app/game/gm/palette.ts

@@ -0,0 +1,28 @@
+import generateColors from "iwanthue";
+
+/**
+ * A palette consisting of different standard colors.
+ */
+export class Palette extends Array<number> {
+  /**
+   * Not meant to be called directly.
+   */
+  constructor(...args: ConstructorParameters<typeof Array<number>>) {
+    super(...args);
+  }
+
+  /**
+   * Creates a Palette with (n + 1) standard colors.
+   *
+   * The first color is fixed to grey.
+   */
+  static colors(n: number) {
+    return new Palette(
+      0x808080,
+      ...generateColors(n, {
+        colorSpace: [0, 360, 25, 85, 45, 70],
+        clustering: "force-vector"
+      }).map(color => parseInt(color.substring(1), 16))
+    );
+  }
+}

app/game/view/baseRenderer.ts

@@ -22,6 +22,7 @@ import type { Gm } from "../gm/gm";
 import { Land } from "../gm/land";
 import type { Pos } from "../gm/matrix";
 import { Matrix } from "../gm/matrix";
+import type { Palette } from "../gm/palette";
 
 import {
   BORDER_COLOR,
@@ -35,7 +36,6 @@ import {
   MOBILE_ZOOM_RATE,
   MOUNTAIN_COLOR,
   R,
-  STANDARD_COLOR,
   TEXT_COLOR,
   TEXT_SIZE,
   UNKNOWN_COLOR
@@ -51,6 +51,7 @@ export default abstract class BaseRenderer {
   app = new Application();
   graphics = new Graphics();
   gm: Gm;
+  palette: Palette;
 
   /**
    * Land types.
@@ -84,8 +85,9 @@ export default abstract class BaseRenderer {
    */
   selected?: Pos;
 
-  protected constructor(gm: Gm) {
+  protected constructor(gm: Gm, palette: Palette) {
     this.gm = gm;
+    this.palette = palette;
   }
 
   /**
@@ -100,7 +102,13 @@ export default abstract class BaseRenderer {
       powerPreference: "high-performance",
       canvas,
       height,
-      width
+      width,
+      eventFeatures: {
+        move: false,
+        globalMove: false,
+        click: false,
+        wheel: false
+      }
     });
 
     this.app.stage.addChild(this.graphics);
@@ -359,7 +367,7 @@ export default abstract class BaseRenderer {
   updateGraphics(pos: Pos) {
     const land = this.gm.get(pos);
 
-    let fillColor = STANDARD_COLOR[land.color];
+    let fillColor = this.palette[land.color];
 
     if (!land.visible()) {
       fillColor = UNKNOWN_COLOR;
@@ -456,10 +464,14 @@ export default abstract class BaseRenderer {
 
     // Clear graphics.
     this.graphics.clear();
+    this.graphics.interactiveChildren = false;
+    this.graphics.eventMode = "none";
 
     // Remove images.
     this.imageContainer.destroy({ children: true });
     this.imageContainer = new Container({ isRenderGroup: true });
+    this.imageContainer.interactiveChildren = false;
+    this.imageContainer.eventMode = "none";
     this.app.stage.addChild(this.imageContainer);
 
     // Remove texts.
@@ -493,7 +505,6 @@ export default abstract class BaseRenderer {
     // Add texts.
     this.texts = Matrix.defaultWith(this.gm.height, this.gm.width, () => {
       const text = new BitmapText({
-        text: "",
         style: { fontFamily: "text", fontSize: TEXT_SIZE }
       });
       text.interactiveChildren = false;
@@ -512,6 +523,7 @@ export default abstract class BaseRenderer {
     for (const pos of this.hitAreas.positions()) {
       const hitArea = this.hitAreas.get(pos);
       hitArea.interactiveChildren = false;
+      hitArea.eventMode = "static";
 
       const { x, y } = this.topLeft(pos);
       hitArea.position.set(x * R, y * R);
@@ -521,8 +533,6 @@ export default abstract class BaseRenderer {
       );
 
       this.hitAreaContainer.addChild(hitArea);
-
-      hitArea.eventMode = "static";
     }
 
     // Redraw everything.

app/game/view/constants.ts

@@ -16,12 +16,6 @@ export const MOBILE_ZOOM_RATE = 0.007;
 
 export const BORDER_COLOR = 0xffffff;
 
-export const STANDARD_COLOR = [
-  0x808080, 0xff0000, 0x4363d8, 0x008000, 0x008080, 0xf58231, 0xf032e6,
-  0x800080, 0x800000, 0xb09f30, 0x9a6324, 0x0000ff, 0x483d8b, 0xd81b60,
-  0x03a9f4, 0x9c27b0, 0x4caf50, 0x5c6bc0, 0xff5722, 0x673ab7, 0xcddc39,
-  0xffc107, 0x9acd32, 0xff1493, 0x3e2cbb, 0xff6347
-];
 export const EMPTY_COLOR = 0xdcdcdc;
 export const MOUNTAIN_COLOR = 0xbbbbbb;
 export const UNKNOWN_COLOR = 0x393939;

app/game/view/renderer.ts

@@ -1,14 +1,15 @@
 import { Gm } from "../gm/gm";
 import type { Pos } from "../gm/matrix";
+import type { Palette } from "../gm/palette";
 
 import BaseRenderer from "./baseRenderer";
 
 /**
  * Full-featured renderer with mode support and interaction.
  */
 export default class Renderer extends BaseRenderer {
-  constructor(gm: Gm) {
-    super(gm);
+  constructor(gm: Gm, palette: Palette) {
+    super(gm, palette);
   }
 
   shape([i, j]: Pos) {

app/routes/map.tsx

@@ -22,9 +22,9 @@ export default function Map() {
   }
 
   useEffect(() => {
-    const gm = generateGm();
+    const { gm, palette } = generateGm();
 
-    const _renderer = new Renderer(gm);
+    const _renderer = new Renderer(gm, palette);
 
     void _renderer.init(canvas.current!);
 
@@ -53,7 +53,9 @@ export default function Map() {
             return;
           }
 
-          renderer.current.gm = generateGm();
+          const { gm, palette } = generateGm();
+          renderer.current.gm = gm;
+          renderer.current.palette = palette;
           renderer.current.reset();
         }}
       />

app/routes/user.$username.tsx

@@ -111,7 +111,7 @@ export default function User() {
   const anchor = useRef<HTMLDivElement>(null);
   const currentUser = useOptionalUser();
   const [edit, setEdit] = useState(false);
-  const actionData: string = useActionData<typeof action>();
+  const actionData = useActionData<typeof action>();
 
   useEffect(() => {
     canScroll &&

package.json

@@ -57,6 +57,7 @@
     "i18next": "latest",
     "i18next-browser-languagedetector": "latest",
     "isbot": "latest",
+    "iwanthue": "latest",
     "katex": "latest",
     "lodash": "latest",
     "lz-string": "latest",
@@ -133,7 +134,7 @@
     "bufferutil": "latest",
     "utf-8-validate": "latest"
   },
-  "packageManager": "pnpm@9.0.6",
+  "packageManager": "pnpm@9.1.0",
   "pnpm": {
     "supportedArchitectures": {
       "os": [