Mockup 1

src/font.ts

@@ -81,15 +81,13 @@ class Font {
       return;
     }
 
-    let wcx = Math.floor(forceWidth / this.#px);
+    let sz = this.#glyphwise(text, forceWidth, () => {});
-
-    let sz = this.#glyphwise(text, wcx, () => {});
     let offsetX = x;
     let offsetY = y;
     offsetX += (alignX == AlignX.Left ? 0 : alignX == AlignX.Center ? -sz.w / 2 : - sz.w)
     offsetY += (alignY == AlignY.Top ? 0 : alignY == AlignY.Middle ? -sz.h / 2 : - sz.h)
 
-    this.#glyphwise(text, wcx, (cx, cy, char) => {
+    this.#glyphwise(text, forceWidth, (cx, cy, char) => {
       let srcIx = char.charCodeAt(0);
       this.#drawGlyph({ctx: ctx, image: image, ix: srcIx, x: offsetX + cx * this.#px, y: offsetY + cy * this.#py});
     })
@@ -126,16 +124,16 @@ class Font {
         ch = cy + 1;
       } else {
         // console.log("cx, cy, char", [cx, cy, char])
-        callback(cx, cy, char)
+        if (wcx != undefined && cx >= wcx) {
-        cx += 1;
-        cw = Math.max(cw, cx);
-        ch = cy + 1;
-
-        if (wcx != undefined && cx > wcx) {
           cx = 0;
           cy += 1;
           ch = cy + 1;
         }
+
+        callback(cx, cy, char)
+        cx += 1;
+        cw = Math.max(cw, cx);
+        ch = cy + 1;
       }
     }
 

src/game.ts

@@ -1,6 +1,6 @@
 import {desiredHeight, desiredWidth, getScreen} from "./screen.ts";
 import {BG_OUTER} from "./colors.ts";
-import {mainFont} from "./font.ts";
+import {AlignX, mainFont} from "./font.ts";
 import {getInput} from "./input.ts";
 
 type Point = {x: number, y: number}
@@ -42,12 +42,10 @@ function getScreenLocation(state: GameState): {x: number, y: number} {
 }
 
 export class Game {
-  msg: string;
   camera: MenuCamera;
   state: GameState;
 
   constructor() {
-    this.msg = "You have been given a gift.";
     this.camera = new MenuCamera({
       position: {x: 0.0, y: 0.0},
       target: {x: 0.0, y: 0.0}
@@ -66,15 +64,11 @@ export class Game {
       this.state = "Thralls"
     }
 
-    if (getInput().isPressed("leftMouse")) {
-      this.msg = "Left click, asshole!"
-    }
-    if (getInput().isReleased("leftMouse")) {
-      this.msg = "Un-left click, asshole!"
-    }
-
     this.camera.target = getScreenLocation(this.state);
     this.camera.update();
+
+    // state-specific updates
+    this.updateOverview();
   }
 
   draw() {
@@ -93,9 +87,15 @@ export class Game {
     let xy = this.getCameraMouseXy();
     if (xy != null) {
       ctx = this.makeCameraContext();
+      ctx.globalCompositeOperation = "difference";
+      if (getInput().isDown("leftMouse")) {
+        ctx.fillStyle = "#ff0";
+      } else {
         ctx.fillStyle = "#fff";
-      ctx.strokeStyle = "#fff";
+      }
       ctx.fillRect(xy.x - 1, xy.y - 1, 3, 3);
+      ctx.fillRect(xy.x, xy.y - 1, 1, 3);
+      ctx.fillRect(xy.x - 1, xy.y, 3, 1);
     }
   }
 
@@ -157,6 +157,10 @@ export class Game {
 
   }
 
+  updateOverview() {
+
+  }
+
   drawOverview() {
     let region = this.getPaneRegionForGameState("Overview")
     let ctx = this.makeCameraContext()
@@ -165,7 +169,73 @@ export class Game {
     // ctx.strokeStyle = "#ffffff";
     // ctx.strokeRect(0.5, 0.5, region.small.size.x - 1, region.small.size.y - 1);
 
-    mainFont.drawText({ctx: ctx, text: this.msg, x: 0, y: 0})
+    // draw skills menu
+    for (let [i, skillName] of [
+      "Screech", "Stop Talking", "Flatter", "Dazzle", "Chug", "Respect Elders"
+    ].entries()) {
+      mainFont.drawText({ctx: ctx, text: skillName, x: 4, y: i * 16, alignX: AlignX.Left})
+      mainFont.drawText({ctx: ctx, text: "150", x: 160 - 4, y: i * 16, alignX: AlignX.Right, color: "#ff0"})
+    }
+
+    mainFont.drawText({ctx: ctx, text: "Stop embarrassing yourself\naround other immortals.\nKeep to yourself and they\nwon't make fun of you.\n\nCost reduced by INT and AGI", x: 160 + 4, y: 0, forceWidth: 384 - 160 - 8})
+
+    ctx.globalCompositeOperation = "difference";
+    ctx.fillStyle = "#fff"
+    ctx.fillRect(0, 16, 160, 16);
+    ctx.fillRect(160, 0, 384 - 160, 96);
+
+    // draw character profile
+    ctx = this.makeCameraContext();
+    ctx.translate(region.small.position.x, region.small.position.y)
+    // ctx.fillStyle = "#200";
+    // ctx.fillRect(0, 96, 384, 192)
+    // ctx.fillStyle = "#ff0"; ctx.fillRect(176, 176, 32, 16);
+    // draw ascii art
+    mainFont.drawText(
+      {ctx, x: 272, y: 160, text: "       \n; 0  0 \n \\    / \n  \\\\'  \n /      \n .'  '\n/_'     ", color: "#334", alignX: AlignX.Center}
+    )
+    mainFont.drawText(
+      {ctx, x: 272, y: 160, text: "      \n  0  0  \n   . . ", color: "#fff", alignX: AlignX.Center}
+    )
+    mainFont.drawText(
+      {ctx, x: 272, y: 160, text: "   ^  ^ \n<; 0  0   ", color: "#448", alignX: AlignX.Center}
+    )
+    mainFont.drawText(
+      {ctx, x: 272, y: 160, text: "      \n  0  0  ", color: "#f00", alignX: AlignX.Center}
+    )
+
+    // draw character name
+    mainFont.drawText({ctx, x: 4 + 32, y: 96 + 16 + 0, text: "Pyrex"})
+    mainFont.drawText({ctx, x: 4 + 32, y: 96 + 16 + 16, text: "Level 6", color: "#ccc"})
+
+    // draw attributes
+    for (let [i, {name, value}] of [
+      {name: "AGI", value: 10},
+      {name: "INT", value: 20},
+      {name: "CHA", value: 30},
+      {name: "PSI", value: 40},
+    ].entries()) {
+      mainFont.drawText({ctx, x: 32 + 4, y: 96 + 64 + 16 * i, text: name, color: "#fff"})
+      mainFont.drawText({ctx, x: 32 + 4 + 32, y: 96 + 64 + 16 * i, text: "" + value, color: "#ccc"})
+    }
+
+    mainFont.drawText({ctx, x: 32 + 4, y: 96 + 144, text: "MN ", color: "#fff"})
+    mainFont.drawText({ctx, x: 32 + 4 + 24, y: 96 + 144, text: "$400", color: "#ccc"})
+    mainFont.drawText({ctx, x: 32 + 4, y: 96 + 160, text: "BLD", color: "#fff"})
+    mainFont.drawText({ctx, x: 32 + 4 + 32, y: 96 + 160, text: "10cc", color: "#ccc"})
+
+    // draw character thoughts
+    // mainFont.drawText({ctx, x: 256, y: 96 + 16, text: "[I'm peckish!]\n[I must feed.]", alignX: AlignX.Center})
+    mainFont.drawText({ctx, x: 272, y: 96 + 16, text: "[Learn Stop Talking?]", alignX: AlignX.Center})
+    mainFont.drawText({ctx, x: 272, y: 96 + 32, text: "[Yes] [No]", alignX: AlignX.Center})
+
+    // draw thralls
+    ctx.fillStyle = "#f00"
+    ctx.fillRect(0, 288, 128, 96);
+    ctx.fillStyle = "#0f0"
+    ctx.fillRect(128, 288, 128, 96);
+    ctx.fillStyle = "#00f"
+    ctx.fillRect(256, 288, 128, 96);
   }
 }
 

src/screen.ts

@@ -13,6 +13,8 @@ class Screen {
     let ctx = this.#canvas.getContext("2d")!;
 
     // TODO: Other stuff to do here?
+    ctx.globalCompositeOperation = "source-over";
+    ctx.filter = "none";
     ctx.strokeStyle = "#000";
     ctx.fillStyle = "#000";
     ctx.resetTransform();