Fix flagging, unflagging and opening

src/CellSprite.ts

@@ -11,8 +11,10 @@ type MyTexture = PIXI.Texture;
 
 type NeighborCount = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
-// todo rename to neighborcount
-function numberToValueNumber(value: number): NeighborCount {
+export function numberToNeighborCount(
+  value: number | null,
+): NeighborCount | null {
+  if (value === null) return value;
   assert(value % 1 === 0);
   assert(value >= 0);
   assert(value <= 8);
@@ -21,17 +23,17 @@ function numberToValueNumber(value: number): NeighborCount {
 }
 
 export class CellSprite {
-  private value: NeighborCount | null;
+  public neighborCount: NeighborCount | null;
   private back: PIXI.Sprite;
   private front: PIXI.Sprite;
 
   public constructor(
     cell: Cell,
-    value: number | null,
+    neighborCount: NeighborCount | null,
     parent: PIXI.Container,
     playAnimation: boolean,
   ) {
-    this.value = value === null ? null : numberToValueNumber(value);
+    this.neighborCount = neighborCount;
     const cellTexture = this.getCellTexture(cell);
     this.back = new PIXI.Sprite(cellTexture.back);
     this.front = new PIXI.Sprite(cellTexture.front);
@@ -50,8 +52,6 @@ export class CellSprite {
     this.front.y = y;
     this.back.x = x;
     this.back.y = y;
-    this.back.name = "bg";
-    this.front.name = "fg";
     this.back.zIndex = 1;
     this.front.zIndex = 2;
     parent.addChild(this.back, this.front);
@@ -80,20 +80,19 @@ export class CellSprite {
     back: MyTexture;
     front: MyTexture;
   } {
-    // todo create a getter, maybe call load every time
     const textures = getTextures();
 
-    let back;
-    let front;
+    let back: PIXI.Texture;
+    let front: PIXI.Texture;
 
     if (cell.isOpen) {
       back = textures.open;
       if (cell.isMine) front = textures.mineWrong;
-      else if (this.value !== null && this.value > 0)
-        front = textures[this.value as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8];
+      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;
     } else {
-      back = textures.closed;
+      back = PIXI.Texture.EMPTY;
       front = cell.isFlagged ? textures.flag : PIXI.Texture.EMPTY;
     }
 

src/FieldRenderer.ts

@@ -5,12 +5,12 @@
 import * as PIXI from "pixi.js";
 import { getTextures } from "./Textures.js";
 import { Controls } from "./Controls";
-import { CellSprite } from "./CellSprite";
+import { CellSprite, numberToNeighborCount } from "./CellSprite";
 import { Cell } from "./Cell.js";
 import { Field } from "./Field.js";
 import { FieldPersistence } from "./FieldPersistence.js";
 
-// todo bug: when i flag a safe cell, then unflag, then open, then the cell looks like it is a 0.
+// todo bug: when i open a mine, and the mine has only a single neighbor which is a closed mine, then right pressing the mine flags the
 type CellSprites = Record<
   number,
   Record<number, CellSprite | undefined> | undefined
@@ -46,13 +46,17 @@ export class FieldRenderer extends PIXI.Application {
       this.cellSprites[cell.y] = {};
     }
     let cellSprite = this.cellSprites[cell.y]![cell.x];
+    const neighborCount = numberToNeighborCount(
+      this.field.value(cell.x, cell.y),
+    );
+
     if (cellSprite) {
+      cellSprite.neighborCount = neighborCount;
       cellSprite.update(cell);
     } else {
-      const value = this.field.value(cell.x, cell.y);
       cellSprite = new CellSprite(
         cell,
-        value,
+        neighborCount,
         this.fieldContainer,
         playAnimation,
       );
@@ -71,12 +75,11 @@ export class FieldRenderer extends PIXI.Application {
 
   // todo inline
   private setup(): void {
-    // todo migrate away from tilingsprite
-    const background = new PIXI.TilingSprite(
-      getTextures().closed,
-      this.renderer?.width ?? window.innerWidth,
-      this.renderer?.height ?? window.innerHeight,
-    );
+    const background = new PIXI.TilingSprite({
+      texture: getTextures().closed,
+      width: this.renderer?.width ?? window.innerWidth,
+      height: this.renderer?.height ?? window.innerHeight,
+    });
 
     window.addEventListener("resize", () => {
       const width = window.innerWidth;