Improve tank identification and add steel wall

src/game.js

@@ -106,6 +106,7 @@
     ...brickWall(280, 280, TILE, TILE * 3),
     ...brickWall(400, 360, TILE * 4, TILE),
     ...steelWall(640, 360, TILE, TILE * 3),
+    ...steelWall(560, 240, TILE * 2, TILE),
     ...brickWall(160, 480, TILE * 2, TILE),
     ...brickWall(480, 500, TILE * 3, TILE),
   ];
@@ -473,17 +474,40 @@
   function drawTank(entity) {
     const cx = entity.x + entity.w / 2;
     const cy = entity.y + entity.h / 2;
+    const isPlayer = entity.team === "player";
     ctx.save();
     ctx.translate(cx, cy);
     ctx.rotate(directionAngle(entity.dir));
-    ctx.fillStyle = "#10140f";
-    ctx.fillRect(-17, -17, 34, 34);
+    if (isPlayer) {
+      ctx.shadowColor = "rgba(132, 238, 212, 0.75)";
+      ctx.shadowBlur = 12;
+    }
+    ctx.fillStyle = isPlayer ? "#e8fff7" : "#2c0f0a";
+    ctx.fillRect(-18, -18, 36, 36);
+    ctx.shadowBlur = 0;
+    ctx.fillStyle = isPlayer ? "#102822" : "#10140f";
+    ctx.fillRect(-15, -15, 30, 30);
     ctx.fillStyle = entity.color;
-    ctx.fillRect(-13, -13, 26, 26);
+    ctx.fillRect(-12, -12, 24, 24);
     ctx.fillStyle = "rgba(255,255,255,0.18)";
     ctx.fillRect(-7, -8, 14, 16);
-    ctx.fillStyle = "#15160f";
-    ctx.fillRect(-4, -25, 8, 19);
+    ctx.fillStyle = isPlayer ? "#f4fff8" : "#1b0805";
+    ctx.fillRect(-4, -26, 8, 20);
+    if (isPlayer) {
+      ctx.fillStyle = "#f4fff8";
+      ctx.fillRect(-2, -10, 4, 20);
+      ctx.fillRect(-10, -2, 20, 4);
+      ctx.fillStyle = "#79e5c9";
+      ctx.fillRect(-5, -5, 10, 10);
+    } else {
+      ctx.fillStyle = "#ffd2c2";
+      ctx.beginPath();
+      ctx.moveTo(0, -9);
+      ctx.lineTo(8, 8);
+      ctx.lineTo(-8, 8);
+      ctx.closePath();
+      ctx.fill();
+    }
     ctx.restore();
   }