diff --git a/README.md b/README.md index d9a7331..a60b7a0 100644 --- a/README.md +++ b/README.md @@ -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]" } } diff --git a/assets/scripts/KaplayMap/gameobj.js b/assets/scripts/KaplayMap/gameobj.js index 5872c24..b175562 100644 --- a/assets/scripts/KaplayMap/gameobj.js +++ b/assets/scripts/KaplayMap/gameobj.js @@ -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); diff --git a/assets/scripts/KaplayMap/mapper.js b/assets/scripts/KaplayMap/mapper.js index bf1aa18..9b85ccc 100644 --- a/assets/scripts/KaplayMap/mapper.js +++ b/assets/scripts/KaplayMap/mapper.js @@ -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; } diff --git a/scripts/server.js b/scripts/server.js index e9a9787..a824756 100644 --- a/scripts/server.js +++ b/scripts/server.js @@ -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;