change border color when players consume

dlgr/griduniverse/experiment.py

@@ -1551,6 +1551,14 @@ def handle_item_consume(self, msg):
             for player_to in self.grid.players.values():
                 player_to.score += player_item.public_good
 
+        consumed_msg = {
+            "type": "item_consumed",
+            "player_id": player.id,
+            "player_color": player.color,
+            "player_item": player_item and player_item.serialize(),
+        }
+        self.publish(consumed_msg)
+
     def handle_item_pick_up(self, msg):
         player = self.grid.players[msg["player_id"]]
         player_item = player.current_item

dlgr/griduniverse/static/scripts/demo.js

@@ -483,6 +483,7 @@
 
   pixels.canvas.style.marginLeft = (window.innerWidth * 0.03) / 2 + "px";
   pixels.canvas.style.marginTop = (window.innerHeight * 0.04) / 2 + "px";
+  pixels.canvas.style.border = "5x solid #000000";
   document.body.style.transition = "0.3s all";
   document.body.style.background = "#ffffff";
 
@@ -901,6 +902,14 @@
     }
   }
 
+  function onItemConsumed(msg) {
+    console.log("Item consumed by player " + msg.player_id + ": " + msg.player_item.id);
+    pixels.canvas.style.border = "5px solid " + msg.player_color;
+    setTimeout(() => {
+      pixels.canvas.style.border = "5px solid #000000"
+    }, 1500);
+  }
+
   function onDonationProcessed(msg) {
     var recipient_id = msg.recipient_id,
       team_idx,
@@ -1288,6 +1297,7 @@
         stop: gameOverHandler(player_id),
         wall_built: addWall,
         move_rejection: onMoveRejected,
+        item_consumed: onItemConsumed
       },
     };
     const socket = new socketlib.GUSocket(socketSettings);