Mockup 1
This commit is contained in:
parent
4f95714a92
commit
7470174ff3
18
src/font.ts
18
src/font.ts
@ -81,15 +81,13 @@ class Font {
|
||||
return;
|
||||
}
|
||||
|
||||
let wcx = Math.floor(forceWidth / this.#px);
|
||||
|
||||
let sz = this.#glyphwise(text, wcx, () => {});
|
||||
let sz = this.#glyphwise(text, forceWidth, () => {});
|
||||
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)
|
||||
cx += 1;
|
||||
cw = Math.max(cw, cx);
|
||||
ch = cy + 1;
|
||||
|
||||
if (wcx != undefined && cx > wcx) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
94
src/game.ts
94
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user