Add lorez layer and introduce coolest fucking bug ever, it flashes th…

…e cells because of the opacity.

src/CellSprite.ts

@@ -26,6 +26,7 @@ export class CellSprite {
   public neighborCount: NeighborCount | null;
   private back: PIXI.Sprite;
   private front: PIXI.Sprite;
+  private lorez: PIXI.Sprite;
 
   public constructor(
     cell: Cell,
@@ -34,6 +35,7 @@ export class CellSprite {
     playAnimation: boolean,
   ) {
     this.neighborCount = neighborCount;
+    // todo when we zoom out a lot, we should use single-pixel texture. could do white with tint, and then remove alpha on top layer.
     const cellTexture = this.getCellTexture(cell);
     this.back = new PIXI.Sprite(cellTexture.back);
     this.front = new PIXI.Sprite(cellTexture.front);
@@ -54,14 +56,26 @@ export class CellSprite {
     this.back.y = y;
     this.back.zIndex = 1;
     this.front.zIndex = 2;
-    parent.addChild(this.back, this.front);
+    this.lorez = new PIXI.Sprite(PIXI.Texture.WHITE);
+    this.lorez.width = CELL_WIDTH;
+    this.lorez.height = CELL_WIDTH;
+    this.lorez.anchor.set(0.5);
+    this.lorez.tint = cellTexture.lorezTint;
+    this.lorez.x = x;
+    this.lorez.y = y;
+    const lorezLayer = parent.getChildByName("lorez") as PIXI.Container;
+    const foregroundLayer = parent.getChildByName("fg") as PIXI.Container;
+    foregroundLayer.addChild(this.front, this.back);
+    lorezLayer.addChild(this.lorez);
+
     if (playAnimation) this.playUpdateAnimation();
   }
 
   public update(cell: Cell) {
     const cellTexture = this.getCellTexture(cell);
     this.back.texture = cellTexture.back;
     this.front.texture = cellTexture.front;
+    this.lorez.tint = cellTexture.lorezTint;
 
     this.playUpdateAnimation();
   }
@@ -79,31 +93,58 @@ export class CellSprite {
   private getCellTexture(cell: Cell): {
     back: MyTexture;
     front: MyTexture;
+    lorezTint: number;
   } {
     const textures = getTextures();
 
     let back: PIXI.Texture;
     let front: PIXI.Texture;
+    let lorezTint: number;
 
     if (cell.isOpen) {
       back = textures.open;
-      if (cell.isMine) front = textures.mineWrong;
-      else if (this.neighborCount !== null && this.neighborCount > 0)
-        front = textures[this.neighborCount as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8];
-      else front = PIXI.Texture.EMPTY;
+      if (cell.isMine) {
+        front = textures.mineWrong;
+        lorezTint = 0xff0000;
+      } else if (this.neighborCount !== null && this.neighborCount > 0) {
+        type NeighborCountOpen = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+
+        front = textures[this.neighborCount as NeighborCountOpen];
+        lorezTint =
+          lorezTintNeighborCount[this.neighborCount as NeighborCountOpen];
+      } else {
+        front = PIXI.Texture.EMPTY;
+        lorezTint = 0x1c1c1c;
+      }
     } else {
-      back = PIXI.Texture.EMPTY;
-      front = cell.isFlagged ? textures.flag : PIXI.Texture.EMPTY;
+      back = textures.closed;
+      if (cell.isFlagged) {
+        front = textures.flag;
+        lorezTint = 0xa0a0a0;
+      } else {
+        front = PIXI.Texture.EMPTY;
+        lorezTint = 0x000000;
+      }
     }
 
     assert(front);
     assert(back);
 
-    const texture: { back: MyTexture; front: MyTexture } = {
+    return {
       back,
       front,
+      lorezTint,
     };
-
-    return texture;
   }
 }
+const lorezTintNeighborCount = [
+  undefined,
+  0x0000cd,
+  0x006700,
+  0xcd0000,
+  0x6116b1,
+  0x800000,
+  0x008080,
+  0xffffff,
+  0xaa00ff, // todo, we need to make the 8 stand out when zoomed out.
+] as const;

src/Controls.ts

@@ -25,7 +25,7 @@ export class Controls {
     Controls.fieldStorage = fieldStorage;
 
     Controls.cursor = new Cursor();
-    const foreground = rootObject.getChildByName("fg");
+    const foreground = rootObject.getChildByName("container");
     assert(foreground);
     foreground.addChild(Controls.cursor);
 
@@ -41,22 +41,24 @@ export class Controls {
     const zoomHandler = zoom().on("zoom", (rawEvent) => {
       const event = eventSchema.parse(rawEvent);
 
-      const foreground = rootObject.getChildByName("fg") as PIXI.Sprite;
+      const container = rootObject.getChildByName("container") as PIXI.Sprite;
+      const foreground = container.getChildByName("fg") as PIXI.Sprite;
       const background = rootObject.getChildByName("bg") as PIXI.TilingSprite;
 
       const x = event.transform.x;
       const y = event.transform.y;
       const scale = event.transform.k;
 
-      foreground.position.set(x, y);
-      foreground.scale.set(scale);
+      container.position.set(x, y);
+      container.scale.set(scale);
       background.tilePosition.set(x, y);
       background.tileScale.set(scale);
       function lerp(a: number, b: number, alpha: number): number {
         return a + alpha * (b - a);
       }
       const lerpedScale = lerp(-1, 0.5, scale);
       background.alpha = lerpedScale;
+      foreground.alpha = lerpedScale;
 
       // todo dedupe between touchend
       if (longPressTimer) {
@@ -84,7 +86,7 @@ export class Controls {
         // todo dedup between mousemove.
         assert(typeof touchPosition.clientX === "number");
         assert(typeof touchPosition.clientY === "number");
-        const foreground = rootObject.getChildByName("fg");
+        const foreground = rootObject.getChildByName("container");
         assert(foreground);
         const worldPos = foreground.toLocal({
           x: touchPosition.clientX,
@@ -112,7 +114,7 @@ export class Controls {
       .on("mousemove", (event: PointerEvent & ScreenPos) => {
         assert(typeof event.x === "number");
         assert(typeof event.y === "number");
-        const foreground = rootObject.getChildByName("fg");
+        const foreground = rootObject.getChildByName("container");
         assert(foreground);
         const worldPos = foreground.toLocal(event) as WorldPos;
 

src/FieldRenderer.ts

@@ -92,7 +92,13 @@ export class FieldRenderer extends PIXI.Application {
     });
 
     background.name = "bg";
-    this.fieldContainer.name = "fg";
+    const lorezLayer = new PIXI.Container({ interactiveChildren: false });
+    const foregroundLayer = new PIXI.Container({ interactiveChildren: false });
+    foregroundLayer.name = "fg";
+    lorezLayer.name = "lorez";
+    this.fieldContainer.addChild(lorezLayer);
+    this.fieldContainer.addChild(foregroundLayer);
+    this.fieldContainer.name = "container";
 
     this.clickHandler.addChildAt(background, 0);
     this.clickHandler.addChildAt(this.fieldContainer, 1);