Board - Optionally show "markers" returned by a Battlesnake

[BoldBigflank]

It would be nice to send information to highlight the grid when the snake is focused. Even if it were just one available color, it could be used to plot a snake's predicted path. A sample MoveResponse could look like this:

{
    move: 'up',
    shout: 'moving toward food',
    markers: [
        { x: 1, y: 1 },
        { x: 2, y: 1 },
        { x: 3, y: 1 },
        { x: 4, y: 1 },
        { x: 4, y: 2 }
    }
}

You could either send these to the other snakes or not, it might be used strategically by other snakes.

Then on the site if you focus a snake you might see pac-man dots on the tiles that were marked.

[BoldBigflank]

Split out shouts to its own conversation.

[BoldBigflank]

Besides plotting a path, you could also mark what went into its decision to move where it did. Things such as a red box on all adjacent tiles to bigger snake heads.

[InterestingBrainPoops]

This feels like a v3 / breaking change unless the markers field is optional. Otherwise, I do see a great use with regards to the markers, especially with tree based snakes. However an option to toggle it for specific snakes would be nice, since people might just spam it with the entire board, or put profanity in shouts.

[bvanvugt]

Looking to get this prioritized after the Winter Classic, asking now for feedback related to naming and api specifics.

[BoldBigflank]

I've added something to this myself. In my /move response, I added a thoughts array, which has objects that have an x, y, color, and r (radius) properties.

{
  "move": "left",
  "shout": "Moving left!",
  "thoughts": [
    {
      "x": 7,
      "y": 7,
      "color": "#000000",
      "r": 3
    },
    {
      "x": 6,
      "y": 7,
      "color": "#000000",
      "r": 3
    },
    {
      "x": 5,
      "y": 7,
      "color": "#000000",
      "r": 3
    },
    {
      "x": 4,
      "y": 7,
      "color": "#000000",
      "r": 3
    },
    {
      "x": 3,
      "y": 7,
      "color": "#000000",
      "r": 3
    },
    {
      "x": 3,
      "y": 8,
      "color": "#000000",
      "r": 3
    },
    {
      "x": 2,
      "y": 8,
      "color": "#000000",
      "r": 3
    },
    {
      "x": 2,
      "y": 9,
      "color": "#000000",
      "r": 3
    },
    {
      "x": 1,
      "y": 9,
      "color": "#000000",
      "r": 3
    },
    {
      "direction": "up",
      "type": "head",
      "x": 7,
      "y": 7,
      "color": "#00ff00",
      "r": 2
    }
  ]
}

[BoldBigflank]

This way I get to decide what I'm using the markers for. In this case, I'm using a small green dot to show what direction the snake decided to move, and the black dots are the computed path to the nearest food.