Refactor shields with common shapes

CONTRIBUTING.md

@@ -189,10 +189,10 @@ In addition, the following style guidelines are recommended:
 
 In general, this style is not trying to exactly replicate highway shields as seen on signage. Instead, we are trying to extract the key stylistic elements so that the graphics are recognizable as simplifications of their real-world counterparts. Here are some examples of Americana's simplified shields for small-size readability:
 
-| Network                | Real-world Shield                                                                                          | Americana Representation                                                                                                              |
-| ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| NJ Turnpike            | <img src="https://upload.wikimedia.org/wikipedia/commons/a/af/New_Jersey_Turnpike_Shield.svg" width="40"/> | <img src="https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/shield40_us_nj_njtp_noref.svg" width="40"/> |
-| Washington State Route | <img src="https://upload.wikimedia.org/wikipedia/commons/5/52/WA-blank.svg" width="40"/>                   | <img src="https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/shield40_us_wa.svg" width="40"/>            |
+| Network                | Real-world Shield                                                                                          | Americana Representation                                                                                                            |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| NJ Turnpike            | <img src="https://upload.wikimedia.org/wikipedia/commons/a/af/New_Jersey_Turnpike_Shield.svg" width="40"/> | <img src="https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/shield_us_nj_njtp_noref.svg" width="40"/> |
+| Washington State Route | <img src="https://upload.wikimedia.org/wikipedia/commons/5/52/WA-blank.svg" width="40"/>                   | <img src="https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/shield_us_wa.svg" width="40"/>            |
 
 More complicated shields may be more challenging to simplify. Consider taking some inspiration from the [rebusurance](https://github.com/1ec5/rebusurance) project, which effectivly simplifies a number of complex state shield designs by stretching, compressing, omitting, or simplifying graphic elements.
 
@@ -245,6 +245,7 @@ The `loadShields` function in js/shield_defs.js contains a definition object for
 - **`textColor`** – The color of the inscribed text to superimpose on the background.
 - **`textHaloColor`** – The color of the halo surrounding the inscribed text.
 - **`textLayoutConstraint`** – A strategy for constraining the text within the background image, useful for shields of certain shapes. By default, the text will expand to fill a rectangle bounded by the specified padding while maintaining the same aspect ratio.
+- **`verticalReflect`** – Set this property to `true` to draw the shield image upside-down.
 
 If special code is necessary to style a specific `ref` in a particular network, `overrideByRef` can be used to define and override any of the above properties. `overrideByRef` is an object mapping `ref` values to partial shield definition objects, containing whichever properties are to be overridden for that particular `ref` value. If necessary, this can be used to override the entire shield definition.
 

src/js/shield.js

@@ -5,7 +5,7 @@ import * as ShieldText from "./shield_text.js";
 import * as ShieldDraw from "./shield_canvas_draw.js";
 import * as Gfx from "./screen_gfx.js";
 
-function loadShield(ctx, shield, bannerCount) {
+function loadShield(ctx, shield, bannerCount, verticalReflect) {
   var drawCtx = Gfx.getGfxContext(shield.data);
   var imgData = drawCtx.createImageData(shield.data.width, shield.data.height);
 
@@ -15,11 +15,25 @@ function loadShield(ctx, shield, bannerCount) {
 
   drawCtx.putImageData(imgData, 0, 0);
 
-  ctx.drawImage(
-    drawCtx.canvas,
-    0,
-    bannerCount * ShieldDef.bannerSizeH + ShieldDef.topPadding
-  );
+  if (verticalReflect == null) {
+    ctx.drawImage(
+      drawCtx.canvas,
+      0,
+      bannerCount * ShieldDef.bannerSizeH + ShieldDef.topPadding
+    );
+  } else {
+    ctx.save();
+    ctx.scale(1, -1);
+    ctx.drawImage(
+      drawCtx.canvas,
+      0,
+      bannerCount * ShieldDef.bannerSizeH +
+        ShieldDef.topPadding -
+        drawCtx.canvas.height -
+        2 * ShieldDraw.PXR
+    );
+    ctx.restore();
+  }
 }
 
 function drawBannerPart(ctx, network, drawFunc) {
@@ -145,7 +159,7 @@ function drawShield(ctx, shieldDef, routeDef) {
       bannerCount * ShieldDef.bannerSizeH + ShieldDef.topPadding
     );
   } else {
-    loadShield(ctx, shieldArtwork, bannerCount);
+    loadShield(ctx, shieldArtwork, bannerCount, shieldDef.verticalReflect);
   }
 
   return ctx;