Transparent railroads (#2153)

## Description:

Make the railroads fade before disappearing

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

Mr. Box

src/client/graphics/layers/RailroadLayer.ts

@@ -96,11 +96,15 @@ export class RailroadLayer implements Layer {
 
   renderLayer(context: CanvasRenderingContext2D) {
     this.updateRailColors();
-    if (this.transformHandler.scale <= 2) {
-      // When zoomed out, don't show the railroads
-      // to prevent map clutter.
+    const scale = this.transformHandler.scale;
+    if (scale <= 1) {
       return;
     }
+    const rawAlpha = (scale - 1) / (2 - 1); // maps 1->0, 2->1
+    const alpha = Math.max(0, Math.min(1, rawAlpha));
+
+    context.save();
+    context.globalAlpha = alpha;
     context.drawImage(
       this.canvas,
       -this.game.width() / 2,
@@ -108,14 +112,11 @@ export class RailroadLayer implements Layer {
       this.game.width(),
       this.game.height(),
     );
+    context.restore();
   }
 
   private handleRailroadRendering(railUpdate: RailroadUpdate) {
     for (const railRoad of railUpdate.railTiles) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const x = this.game.x(railRoad.tile);
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const y = this.game.y(railRoad.tile);
       if (railUpdate.isActive) {
         this.paintRailroad(railRoad);
       } else {