Add option to override food display with image.

BattlesnakeOfficial · Nov 25, 2020 · 00e83ea · 00e83ea
1 parent ac6d3e3
commit 00e83ea
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/src/components/avatar.jsx b/src/components/avatar.jsx
@@ -45,7 +45,7 @@ const Author = styled("span")(({ theme }) => ({
 }));
 
 const Latency = styled("span")(({ theme, latency }) => ({
-  color: latency == "0" ? "red" : "inherit",
+  color: latency === "0" ? "red" : "inherit",
   marginLeft: "auto",
   textShadow: theme === themes.dark ? "0 1px 2px rgba(0,0,0,0.90)" : null
 }));

diff --git a/src/components/board.jsx b/src/components/board.jsx
@@ -10,6 +10,7 @@ class Board extends React.Component {
         <Grid
           snakes={this.props.snakes}
           food={this.props.food}
+          foodImage={this.props.foodImage}
           hazards={this.props.hazards}
           columns={this.props.columns}
           rows={this.props.rows}

diff --git a/src/components/game.jsx b/src/components/game.jsx
@@ -148,6 +148,7 @@ class Game extends React.Component {
             <Board
               snakes={currentFrame.snakes}
               food={currentFrame.food}
+              foodImage={options.foodImage}
               hazards={currentFrame.hazards}
               columns={this.props.grid.width}
               rows={this.props.grid.height}

diff --git a/src/components/grid.jsx b/src/components/grid.jsx
@@ -423,7 +423,7 @@ class Grid extends React.Component {
     );
 
     if (!this.props.highlightedSnake) {
-      // track all of the grid cells that will have a snake part drawn in them.  Successive snake parts 
+      // track all of the grid cells that will have a snake part drawn in them.  Successive snake parts
       // drawn in the same cell need to be flagged so they render differently and layer properly
       let gridCellsWithSnakeParts = Array(this.props.rows);
       for (let i = 0; i < gridCellsWithSnakeParts.length; i++) {
@@ -433,7 +433,7 @@ class Grid extends React.Component {
         }
       }
 
-      // Go through each snake, in the order they will be drawn and mark the cells they will occupy.   
+      // Go through each snake, in the order they will be drawn and mark the cells they will occupy.
       // flag parts that would be drawn in cells that are already claimed
       for (let i = 0; i < sortedSnakes.length; i++) {
         let snake = sortedSnakes[i];
@@ -507,16 +507,30 @@ class Grid extends React.Component {
           );
         })}
 
-        {food.map((f, foodIndex) => (
-          <circle
-            key={"food" + foodIndex}
-            cx={toGridSpace(f.x) + CELL_SIZE / 2}
-            cy={toGridSpace(f.y) + CELL_SIZE / 2}
-            r={FOOD_SIZE}
-            fill={colors.food}
-            shapeRendering="optimizeQuality"
-          />
-        ))}
+        {food.map((f, foodIndex) => {
+          if (this.props.foodImage) {
+            return (
+              <image
+                key={"food" + foodIndex}
+                x={toGridSpace(f.x)}
+                y={toGridSpace(f.y)}
+                width={CELL_SIZE}
+                height={CELL_SIZE}
+                href={this.props.foodImage} />
+            );
+          } else {
+            return (
+              <circle
+                key={"food" + foodIndex}
+                cx={toGridSpace(f.x) + CELL_SIZE / 2}
+                cy={toGridSpace(f.y) + CELL_SIZE / 2}
+                r={FOOD_SIZE}
+                fill={colors.food}
+                shapeRendering="optimizeQuality"
+              />
+            );
+          }
+        })}
 
         {hazards.map((o, hazardIndex) => (
           <rect