Design (but don't wire up) endgame modal

src/endgamemodal.ts

@@ -1,9 +1,10 @@
 import {withCamera} from "./layout.ts";
 import {D} from "./engine/public.ts";
-import {FG_BOLD, FG_TEXT} from "./colors.ts";
+import {BG_INSET, FG_BOLD, FG_TEXT} from "./colors.ts";
-import {AlignX, Point, Rect, Size} from "./engine/datatypes.ts";
+import {AlignX, AlignY, Point, Rect, Size} from "./engine/datatypes.ts";
 import {DrawPile} from "./drawpile.ts";
 import {addButton} from "./button.ts";
+import {ALL_STATS} from "./datatypes.ts";
 
 const WIDTH = 384;
 const HEIGHT = 384;
@@ -11,12 +12,16 @@ const HEIGHT = 384;
 export class EndgameModal {
   #isShown: boolean;
   #drawpile: DrawPile;
+  #page: number;
 
   constructor() {
     this.#isShown = false;
     this.#drawpile = new DrawPile();
 
+    this.#page = 0;
+
     // debug
+    this.show();
   }
 
   get isShown(): boolean {
@@ -25,6 +30,7 @@ export class EndgameModal {
 
   show() {
     this.#isShown = true;
+    this.#page = 0;
   }
 
   update() {
@@ -37,33 +43,168 @@ export class EndgameModal {
 
   #update() {
     this.#drawpile.clear();
-    addButton(
+    if (this.#page == 0) {
-      this.#drawpile,
+      this.#drawpile.add(0, () => {
-      "Appoint a Successor",
+        D.drawText("It is time to announce the sentence of fate.", new Point(0, 0), FG_TEXT)
-      new Rect(
+        D.drawText("You are no longer a fledgling. Your new rank:", new Point(0, 32), FG_TEXT)
-        new Point(0, HEIGHT - 32), new Size(WIDTH, 32)
+        D.drawText("Progenitor", new Point(WIDTH / 2, 64), FG_BOLD, {alignX: AlignX.Center})
-      ),
+        D.drawText("You have achieved a DOMICILE STATUS of:", new Point(0, 96), FG_TEXT)
-      true,
+        D.drawText("Guest House", new Point(WIDTH / 2, 128), FG_BOLD, {alignX: AlignX.Center})
-      () => {
+        D.drawText("where you live with many friends.", new Point(0, 160), FG_TEXT)
-        alert("beep");
+        D.drawText("You have achieved:", new Point(0, 192), FG_TEXT)
-      }
+        D.drawText("48 items purloined\n96 vampiric skills\n50 mortal servants", new Point(WIDTH / 2, 224), FG_TEXT, {alignX: AlignX.Center})
-    )
+        D.drawText("48                \n96                \n50                ", new Point(WIDTH / 2, 224), FG_BOLD, {alignX: AlignX.Center})
+        D.drawText("That feels like a lot!", new Point(0, 288), FG_TEXT)
+        D.drawText("Your reign continues unimpeded from the shadows. It is now time to", new Point(0, 320), FG_TEXT, {forceWidth: WIDTH})
+      })
+      addButton(
+        this.#drawpile,
+        "Appoint a Successor",
+        new Rect(
+          new Point(0, HEIGHT - 32), new Size(WIDTH, 32)
+        ),
+        true,
+        () => {
+          this.#page += 1;
+        }
+      )
+    }
+    else if (this.#page == 1) {
+      this.#drawpile.add(0, () => {
+        D.drawText("Choose your successor:", new Point(0, 0), FG_TEXT);
+      })
+
+      this.#addCandidate(0, new Point(0, 32))
+      this.#addCandidate(1, new Point(0, 96))
+      this.#addCandidate(2, new Point(0, 160))
+
+      this.#drawpile.add(0, () => {
+        D.drawText("Plan their destiny:", new Point(0, 240), FG_TEXT);
+      })
+
+      this.#addWish(0, new Point(0, 272))
+      this.#addWish(1, new Point(128, 272))
+      this.#addWish(2, new Point(256, 272))
+
+      addButton(
+        this.#drawpile,
+        "Back",
+        new Rect(
+          new Point(0, HEIGHT - 32), new Size(WIDTH / 3, 32)
+        ),
+        true,
+        () => {
+          this.#page -= 1;
+        }
+      )
+      addButton(
+        this.#drawpile,
+        "Progenerate",
+        new Rect(
+          new Point(WIDTH/3, HEIGHT - 32), new Size(WIDTH - WIDTH / 3, 32)
+        ),
+        true,
+        () => {
+          this.#page += 1;
+        }
+      )
+    }
+
     this.#drawpile.executeOnClick();
   }
 
-  #draw() {
+  #addCandidate(ix: number, at: Point) {
-    D.drawText("It is time to announce the sentence of fate.", new Point(0, 0), FG_TEXT)
+    let names = ["Marty", "Karla", "Steve"];
-    D.drawText("You are no longer a fledgling. Your new rank:", new Point(0, 32), FG_TEXT)
+    let w = WIDTH;
-    D.drawText("Progenitor", new Point(WIDTH/2, 64), FG_BOLD, {alignX: AlignX.Center})
+    let h = 64;
-    D.drawText("You have achieved a DOMICILE STATUS of:", new Point(0, 96), FG_TEXT)
-    D.drawText("Guest House", new Point(WIDTH/2, 128), FG_BOLD, {alignX: AlignX.Center})
-    D.drawText("where you live with many friends.", new Point(0, 160), FG_TEXT)
-    D.drawText("You have achieved:", new Point(0, 192), FG_TEXT)
-    D.drawText("48 items purloined\n96 vampiric skills\n50 mortal servants", new Point(WIDTH/2, 224), FG_TEXT, {alignX: AlignX.Center})
-    D.drawText("48                \n96                \n50                ", new Point(WIDTH/2, 224), FG_BOLD, {alignX: AlignX.Center})
-    D.drawText("That feels like a lot!", new Point(0, 288), FG_TEXT)
-    D.drawText("Your reign continues unimpeded from the shadows. It is now time to", new Point(0, 320), FG_TEXT, {forceWidth: WIDTH})
 
+    let enabled = true;
+    let generalRect = new Rect(at, new Size(w, h));
+    let selected = ix == 1;
+
+    this.#drawpile.addClickable(
+      0,
+      (hover) => {
+        let [bg, fg, fgBold] = [BG_INSET, FG_TEXT, FG_BOLD];
+        if (hover || selected) {
+          [bg, fg, fgBold] = [FG_BOLD, BG_INSET, BG_INSET];
+        }
+        D.fillRect(
+          at.offset(new Point(0, 4)), new Size(w, h - 8), bg,
+        )
+        D.drawRect(
+          at.offset(new Point(0, 4)), new Size(w, h - 8), fg,
+        )
+
+        D.drawText(names[ix], at.offset(new Point(4, 8)), fgBold)
+
+        let xys = [
+          new Point(4, 24), new Point(4, 40),
+          new Point(116, 24), new Point(116, 40)
+        ];
+        let i = 0;
+        for (let s of ALL_STATS.values()) {
+          D.drawText(s, at.offset(xys[i]), fg)
+          D.drawText("10", at.offset(xys[i].offset(new Point(32, 0))), fgBold)
+          D.drawText("(+4)", at.offset(xys[i].offset(new Point(56, 0))), fg)
+          i += 1;
+        }
+
+        D.drawText("Former barista", at.offset(new Point(224, 24)), fg)
+        if (ix == 2) {
+          D.drawText("Already a vampire", at.offset(new Point(224, 40)), fg)
+        }
+      },
+      generalRect,
+      enabled,
+
+      () => {
+        alert("beep");
+      });
+  }
+
+  #addWish(ix: number, at: Point) {
+    let wishes = [
+      "Celebrity Socialite",
+      "Nightsworn Alchemist",
+      "Bat Freak"
+    ]
+    let selected = ix == 1;
+    let w = 128;
+    let h = 72;
+    let generalRect = new Rect(at, new Size(w, h));
+    let enabled = true;
+
+    this.#drawpile.addClickable(
+      0,
+      (hover) => {
+        let [bg, fg, fgBold] = [BG_INSET, FG_TEXT, FG_BOLD];
+        if (hover || selected) {
+          [bg, fg, fgBold] = [FG_BOLD, BG_INSET, BG_INSET];
+        }
+        D.fillRect(
+          at.offset(new Point(2, 4)), new Size(w - 4, h - 8), bg,
+        )
+        D.drawRect(
+          at.offset(new Point(2, 4)), new Size(w - 4, h - 8), fg,
+        )
+
+        D.drawText(wishes[ix], at.offset(new Point(w / 2,h / 2 )), fgBold, {
+          forceWidth: w - 4,
+          alignX: AlignX.Center,
+          alignY: AlignY.Middle,
+        });
+      },
+      generalRect,
+      enabled,
+
+      () => {
+        alert("beep");
+      }
+    );
+  }
+
+  #draw() {
     this.#drawpile.draw();
   }