change border color when players consume

dlgr/griduniverse/experiment.py

@@ -921,6 +921,7 @@ def __init__(self, **kwargs):
         self.recruiter_id = kwargs.get("recruiter_id", "")
         self.add_wall = None
         self.current_item = None
+        self.just_consumed = False
 
         # Determine the player's color. We don't have access to the specific
         # gridworld we are running in, so we can't use the `limited_` variables
@@ -960,6 +961,8 @@ def tremble(self, direction):
     def move(self, direction, tremble_rate=None, timestamp=None):
         """Move the player."""
 
+        self.just_consumed = False
+
         if not self.grid.movement_enabled:
             return
 
@@ -1057,6 +1060,7 @@ def serialize(self):
             "identity_visible": self.identity_visible,
             "recruiter_id": self.recruiter_id,
             "current_item": self.current_item and self.current_item.serialize(),
+            "just_consumed": self.just_consumed,
         }
 
 
@@ -1487,6 +1491,7 @@ def handle_build_wall(self, msg):
 
     def handle_item_consume(self, msg):
         player = self.grid.players[msg["player_id"]]
+        player.just_consumed = True
         player_item = player.current_item
         if player_item is None or not player_item.calories:
             error_msg = {

dlgr/griduniverse/static/scripts/demo.js

@@ -184,6 +184,7 @@ var Player = function (settings, dimness) {
   this.identity_visible = settings.identity_visible;
   this.dimness = dimness;
   this.replaceItem(settings.current_item || null);
+  this.just_consumed = settings.just_consumed;
   return this;
 };
 
@@ -603,6 +604,7 @@ var players = playerSet({'ego_id': undefined});
 
 pixels.canvas.style.marginLeft = window.innerWidth * 0.03 / 2 + "px";
 pixels.canvas.style.marginTop = window.innerHeight * 0.04 / 2 + "px";
+pixels.canvas.style.border = "5px solid #000000"
 document.body.style.transition = "0.3s all";
 document.body.style.background = "#ffffff";
 
@@ -624,6 +626,16 @@ pixels.frame(function() {
     return newColor;
   });
 
+  // Did someone just consume something?
+    players.each(function (i, player) {
+      if (player.just_consumed) {
+        pixels.canvas.style.border = "5px solid " + player.color;
+        setTimeout(() => {
+          pixels.canvas.style.border = "5px solid #000000"
+        }, 1000);
+      }
+    });
+
   for (const [position, item] of gridItems.entries()) {
     if (players.isPlayerAt(position)) {
       if (!item.interactive && item.calories) {