Focus stuff

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]"
     }
   }

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,17 +171,45 @@ 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;
+        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: 24 * camScale,
+            size: this.opts.fontSize * camScale,
             pos: polygon.bbox().center(),
             color: this.map.kp.WHITE,
             align: "center",

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;
   }
 

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;