Focus stuff

This commit is contained in:
MeowcaTheoRange 2024-06-08 11:36:42 -05:00
parent a6aded4e8e
commit 2850588b58
4 changed files with 93 additions and 26 deletions

View file

@ -46,6 +46,7 @@ This object gets represented in the app as a map poly.
"lang": {
"[IETF LANGUAGE TAG]": {
"name": "[SINGLE-LINE STRING]",
"shortName": "[INITIALS OF NAME]",
"description": "[SINGLE-LINE STRING]"
}
}

View file

@ -1,13 +1,30 @@
export class GameObjManager {
map;
opts = {
bgColor: "303030",
bgFocusColor: "505030",
bgHoverColor: "505050",
bgFocusHoverColor: "707050",
bgClickColor: "202020",
bgFocusClickColor: "404020",
borderColor: "000000",
borderFocusColor: "808000",
font: "monospace",
fontSize: 24,
maxFontWidth: 16,
};
mainmanager;
floorObject;
roomObjects = new Map([]);
constructor(map) {
constructor(map, opts = {}) {
this.map = map;
this.opts = {
...this.opts,
...opts,
};
}
generateFloor() {
@ -56,8 +73,8 @@ export class GameObjManager {
const height = this.map.kp.height();
// Get bbox size
const bBoxWidth = boundingBox.width * 1.5;
const bBoxHeight = boundingBox.height * 1.5;
const bBoxWidth = boundingBox.width * 2;
const bBoxHeight = boundingBox.height * 2;
// Compare bounds
const scaledWidth = width / bBoxWidth;
@ -102,8 +119,8 @@ export class GameObjManager {
const obj = this.map.kp.make([
this.map.kp.polygon(polygon.pts),
this.map.kp.outline(1, this.map.kp.BLACK),
this.map.kp.color(this.map.kp.Color.fromHex("303030")),
this.map.kp.color(this.map.kp.Color.fromHex(this.opts.bgColor)),
this.map.kp.opacity(0.5),
this.map.kp.area(),
this.map.kp.pos(),
this.map.kp.z(6),
@ -113,23 +130,37 @@ export class GameObjManager {
},
]);
obj.onHover(() => {
obj.color = this.map.kp.Color.fromHex("505050");
});
obj.onHoverEnd(() => {
obj.color = this.map.kp.Color.fromHex("303030");
});
this.roomObjects.set(room.id, obj);
obj.onUpdate(() => {
const camScale = 1 / this.map.kp.camScale().y;
obj.outline.width = 8 * camScale;
const roomFocused = this.mainmanager.getCurrentFocus("room") == room.id;
if (roomFocused) {
obj.z = 7;
} else {
obj.z = 6;
}
if (obj.isHovering()) {
if (roomFocused)
obj.color = this.map.kp.Color.fromHex(this.opts.bgFocusHoverColor);
else obj.color = this.map.kp.Color.fromHex(this.opts.bgHoverColor);
} else {
if (roomFocused)
obj.color = this.map.kp.Color.fromHex(this.opts.bgFocusColor);
else obj.color = this.map.kp.Color.fromHex(this.opts.bgColor);
}
if (this.map.kp.isMousePressed() && obj.isHovering()) {
obj.startClickPosition = this.map.kp.mousePos();
obj.color = this.map.kp.Color.fromHex("202020");
}
if (this.map.kp.isMouseDown() && obj.isHovering()) {
if (roomFocused)
obj.color = this.map.kp.Color.fromHex(this.opts.bgFocusClickColor);
else obj.color = this.map.kp.Color.fromHex(this.opts.bgClickColor);
}
if (this.map.kp.isMouseReleased() && obj.isHovering()) {
@ -140,22 +171,50 @@ export class GameObjManager {
) {
window.location.hash = room.id;
}
obj.color = this.map.kp.Color.fromHex("505050");
if (roomFocused)
obj.color = this.map.kp.Color.fromHex(this.opts.bgFocusHoverColor);
this.map.clearMouseMode();
}
});
obj.onDraw(() => {
const camScale = 1 / this.map.kp.camScale().y;
this.map.kp.drawText({
text: room.name,
width: polygon.bbox().width,
size: 24 * camScale,
pos: polygon.bbox().center(),
color: this.map.kp.WHITE,
align: "center",
anchor: "center",
const roomFocused = this.mainmanager.getCurrentFocus("room") == room.id;
this.map.kp.drawPolygon({
pts: polygon.pts,
pos: this.map.kp.vec2(0),
fill: false,
outline: {
color: this.map.kp.Color.fromHex(
roomFocused ? this.opts.borderFocusColor : this.opts.borderColor
),
width: 8 * camScale,
},
});
if (
this.opts.maxFontWidth * camScale * room.name.length >
polygon.bbox().width
)
this.map.kp.drawText({
text: room.shortName + "…",
size: this.opts.fontSize * camScale,
pos: polygon.bbox().center(),
color: this.map.kp.WHITE,
align: "center",
anchor: "center",
});
else
this.map.kp.drawText({
text: room.name,
width: polygon.bbox().width,
size: this.opts.fontSize * camScale,
pos: polygon.bbox().center(),
color: this.map.kp.WHITE,
align: "center",
anchor: "center",
});
});
this.floorObject.add(obj);

View file

@ -14,7 +14,13 @@ export class EventMapperManager {
uimanager;
gameobjmanager;
constructor(map, mapUi) {
constructor(
map,
mapUi,
opts = {
gameobj: {},
}
) {
this.map = map;
this.langmanager = new LangManager("en-US");
@ -29,7 +35,7 @@ export class EventMapperManager {
this.uimanager = new UIManager(mapUi);
this.uimanager.mainmanager = this;
this.gameobjmanager = new GameObjManager(this.map);
this.gameobjmanager = new GameObjManager(this.map, opts.gameobj);
this.gameobjmanager.mainmanager = this;
}

View file

@ -66,6 +66,7 @@ app.get('/data/:lang/rooms/:floor', async (req, res) => {
const lang = req.params.lang;
const merged = rooms.map(room => {
room.name = room.lang[lang]?.name ?? "";
room.shortName = room.lang[lang]?.shortName ?? "";
room.description = room.lang[lang]?.description ?? "";
delete room.lang;
return room;