From b307ca30396dcc4bee2771240b6f6fb0e59562cd Mon Sep 17 00:00:00 2001
From: Clay Smalley <claysmalley@gmail.com>
Date: Mon, 5 Sep 2022 10:18:13 -0400
Subject: [PATCH 1/7] Explicitly declare fixed-width oval shields

---
 src/js/shield_defs.js | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/js/shield_defs.js b/src/js/shield_defs.js
index 676ad5d25..da8f64d30 100644
--- a/src/js/shield_defs.js
+++ b/src/js/shield_defs.js
@@ -28,6 +28,10 @@ function ovalShield(fillColor, strokeColor, textColor, rectWidth) {
   };
 }
 
+function circleShield(fillColor, strokeColor, textColor) {
+  return ovalShield(fillColor, strokeColor, textColor, 20);
+}
+
 function roundedRectShield(
   fillColor,
   strokeColor,
@@ -449,7 +453,9 @@ export function loadShields(shieldImages) {
   shields["CA:AB:primary"] = homeDownShield;
   shields["CA:AB:secondary"] = ovalShield(
     Color.shields.white,
-    Color.shields.black
+    Color.shields.black,
+    Color.shields.black,
+    30
   );
 
   // British Columbia
@@ -466,7 +472,12 @@ export function loadShields(shieldImages) {
 
   // Manitoba
   shields["CA:MB:PTH"] = homeDownShield;
-  shields["CA:MB:PR"] = ovalShield(Color.shields.black, Color.shields.white);
+  shields["CA:MB:PR"] = ovalShield(
+    Color.shields.black,
+    Color.shields.white,
+    Color.shields.white,
+    30
+  );
   shields["CA:MB:Winnipeg"] = {
     backgroundImage: shieldImages.shield_ca_mb_winnipeg,
     textColor: Color.shields.black,
@@ -2596,7 +2607,7 @@ export function loadShields(shieldImages) {
             bottom: 5,
           },
         },
-        ovalShield(Color.shields.white, Color.shields.black),
+        circleShield(Color.shields.white, Color.shields.black),
         diamondShield,
       ])
   );
@@ -3250,12 +3261,7 @@ export function loadShields(shieldImages) {
     },
   };
   shields["NZ:UR"] = homeDownShield;
-  shields["NZ:WRR"] = ovalShield(
-    Color.shields.white,
-    Color.shields.black,
-    Color.shields.black,
-    20
-  );
+  shields["NZ:WRR"] = circleShield(Color.shields.white, Color.shields.black);
 
   // Ref-specific cases. Each entry should be documented in CONTRIBUTE.md
 

From a8cd74afebb6f8ff1ba44663a82a73fd32a68be1 Mon Sep 17 00:00:00 2001
From: Clay Smalley <claysmalley@gmail.com>
Date: Mon, 5 Sep 2022 10:19:37 -0400
Subject: [PATCH 2/7] Adjust fixed-width rectangle shields to match max width

---
 src/js/shield_defs.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/js/shield_defs.js b/src/js/shield_defs.js
index da8f64d30..04e56683e 100644
--- a/src/js/shield_defs.js
+++ b/src/js/shield_defs.js
@@ -2898,7 +2898,7 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     2,
     1,
-    35
+    34
   );
 
   // Austria
@@ -2929,7 +2929,7 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     2,
     1,
-    35
+    34
   );
 
   shields["ba:Magistralne ceste"] = roundedRectShield(
@@ -2938,7 +2938,7 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     2,
     1,
-    35
+    34
   );
 
   // Belgium
@@ -2962,7 +2962,7 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     2,
     1,
-    35
+    34
   );
 
   // Belarus
@@ -2978,7 +2978,7 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     2,
     1,
-    35
+    34
   );
 
   shields["cz:national"] = roundedRectShield(
@@ -2987,7 +2987,7 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     2,
     1,
-    35
+    34
   );
 
   // Denmark
@@ -2997,7 +2997,7 @@ export function loadShields(shieldImages) {
     Color.shields.black,
     2,
     1,
-    35
+    34
   );
 
   // Estonia
@@ -3057,7 +3057,7 @@ export function loadShields(shieldImages) {
     Color.shields.black,
     2,
     1,
-    35
+    34
   );
 
   // Italy
@@ -3098,7 +3098,7 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     2,
     1,
-    35
+    34
   );
 
   // North Macedonia
@@ -3152,7 +3152,7 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     2,
     1,
-    35
+    34
   );
   shields["pl:expressways"] = shields["pl:motorways"];
   shields["pl:national"] = roundedRectShield(
@@ -3174,7 +3174,7 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     2,
     1,
-    35
+    34
   );
 
   // Serbia
@@ -3234,7 +3234,7 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     2,
     1,
-    35
+    34
   );
 
   // Ukraine

From 3734f2b82b311da019a247931d727de848d06bb5 Mon Sep 17 00:00:00 2001
From: Clay Smalley <claysmalley@gmail.com>
Date: Mon, 5 Sep 2022 10:24:53 -0400
Subject: [PATCH 3/7] Reduce horizontal padding in rounded rectangle shields

---
 src/js/shield_canvas_draw.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/shield_canvas_draw.js b/src/js/shield_canvas_draw.js
index 4a148bbc9..d401c6359 100644
--- a/src/js/shield_canvas_draw.js
+++ b/src/js/shield_canvas_draw.js
@@ -117,7 +117,7 @@ export function rectangle(ref) {
 
 export function blank(ref) {
   var shieldWidth =
-    ShieldText.calculateTextWidth(ref, genericShieldFontSize) + 5 * PXR;
+    ShieldText.calculateTextWidth(ref, genericShieldFontSize) + 2 * PXR;
   var width = Math.max(
     minGenericShieldWidth,
     Math.min(maxGenericShieldWidth, shieldWidth)
@@ -136,7 +136,7 @@ export function roundedRectangle(
 ) {
   if (rectWidth == null) {
     var shieldWidth = Math.ceil(
-      ShieldText.calculateTextWidth(ref, genericShieldFontSize) + 5 * PXR
+      ShieldText.calculateTextWidth(ref, genericShieldFontSize) + 2 * PXR
     );
     var width = Math.max(
       minGenericShieldWidth,

From a71808a3a72443af67845c80aad220553811d2a9 Mon Sep 17 00:00:00 2001
From: Clay Smalley <claysmalley@gmail.com>
Date: Mon, 5 Sep 2022 10:43:13 -0400
Subject: [PATCH 4/7] Remove outline width argument from rounded rectangle
 function

---
 src/js/shield_defs.js | 27 +++------------------------
 1 file changed, 3 insertions(+), 24 deletions(-)

diff --git a/src/js/shield_defs.js b/src/js/shield_defs.js
index 04e56683e..cc99cceeb 100644
--- a/src/js/shield_defs.js
+++ b/src/js/shield_defs.js
@@ -37,12 +37,10 @@ function roundedRectShield(
   strokeColor,
   textColor,
   radius,
-  outlineWidth,
   rectWidth
 ) {
   textColor = textColor ?? strokeColor;
   radius = radius ?? 2;
-  outlineWidth = outlineWidth ?? 1;
   return {
     backgroundDraw: (ref) =>
       ShieldDraw.roundedRectangle(
@@ -50,7 +48,7 @@ function roundedRectShield(
         strokeColor,
         ref,
         radius,
-        outlineWidth,
+        1,
         rectWidth
       ),
     textLayoutConstraint: (spaceBounds, textBounds) =>
@@ -65,15 +63,8 @@ function roundedRectShield(
   };
 }
 
-function pillShield(
-  fillColor,
-  strokeColor,
-  textColor,
-  outlineWidth,
-  rectWidth
-) {
+function pillShield(fillColor, strokeColor, textColor, rectWidth) {
   textColor = textColor ?? strokeColor;
-  outlineWidth = outlineWidth ?? 1;
   return {
     backgroundDraw: (ref) =>
       ShieldDraw.roundedRectangle(
@@ -81,7 +72,7 @@ function pillShield(
         strokeColor,
         ref,
         10,
-        outlineWidth,
+        1,
         rectWidth
       ),
     textLayoutConstraint: ShieldText.ellipseTextConstraint,
@@ -2897,7 +2888,6 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     Color.shields.white,
     2,
-    1,
     34
   );
 
@@ -2928,7 +2918,6 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     Color.shields.white,
     2,
-    1,
     34
   );
 
@@ -2937,7 +2926,6 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     Color.shields.white,
     2,
-    1,
     34
   );
 
@@ -2961,7 +2949,6 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     Color.shields.white,
     2,
-    1,
     34
   );
 
@@ -2977,7 +2964,6 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     Color.shields.white,
     2,
-    1,
     34
   );
 
@@ -2986,7 +2972,6 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     Color.shields.white,
     2,
-    1,
     34
   );
 
@@ -2996,7 +2981,6 @@ export function loadShields(shieldImages) {
     Color.shields.black,
     Color.shields.black,
     2,
-    1,
     34
   );
 
@@ -3056,7 +3040,6 @@ export function loadShields(shieldImages) {
     Color.shields.black,
     Color.shields.black,
     2,
-    1,
     34
   );
 
@@ -3097,7 +3080,6 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     Color.shields.white,
     2,
-    1,
     34
   );
 
@@ -3151,7 +3133,6 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     Color.shields.white,
     2,
-    1,
     34
   );
   shields["pl:expressways"] = shields["pl:motorways"];
@@ -3173,7 +3154,6 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     Color.shields.white,
     2,
-    1,
     34
   );
 
@@ -3233,7 +3213,6 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     Color.shields.white,
     2,
-    1,
     34
   );
 

From 959c03824d008316be8545b90a623a4116ff80c8 Mon Sep 17 00:00:00 2001
From: Clay Smalley <claysmalley@gmail.com>
Date: Mon, 5 Sep 2022 10:49:36 -0400
Subject: [PATCH 5/7] Reorder width and radius arguments

---
 src/js/shield_defs.js | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/js/shield_defs.js b/src/js/shield_defs.js
index cc99cceeb..1c25bc99b 100644
--- a/src/js/shield_defs.js
+++ b/src/js/shield_defs.js
@@ -36,8 +36,8 @@ function roundedRectShield(
   fillColor,
   strokeColor,
   textColor,
-  radius,
-  rectWidth
+  rectWidth,
+  radius
 ) {
   textColor = textColor ?? strokeColor;
   radius = radius ?? 2;
@@ -2887,7 +2887,6 @@ export function loadShields(shieldImages) {
     Color.shields.green,
     Color.shields.white,
     Color.shields.white,
-    2,
     34
   );
 
@@ -2917,7 +2916,6 @@ export function loadShields(shieldImages) {
     Color.shields.green,
     Color.shields.white,
     Color.shields.white,
-    2,
     34
   );
 
@@ -2925,7 +2923,6 @@ export function loadShields(shieldImages) {
     Color.shields.blue,
     Color.shields.white,
     Color.shields.white,
-    2,
     34
   );
 
@@ -2948,7 +2945,6 @@ export function loadShields(shieldImages) {
     Color.shields.green,
     Color.shields.white,
     Color.shields.white,
-    2,
     34
   );
 
@@ -2963,7 +2959,6 @@ export function loadShields(shieldImages) {
     Color.shields.red,
     Color.shields.white,
     Color.shields.white,
-    2,
     34
   );
 
@@ -2971,7 +2966,6 @@ export function loadShields(shieldImages) {
     Color.shields.blue,
     Color.shields.white,
     Color.shields.white,
-    2,
     34
   );
 
@@ -2980,7 +2974,6 @@ export function loadShields(shieldImages) {
     Color.shields.yellow,
     Color.shields.black,
     Color.shields.black,
-    2,
     34
   );
 
@@ -3039,7 +3032,6 @@ export function loadShields(shieldImages) {
     Color.shields.white,
     Color.shields.black,
     Color.shields.black,
-    2,
     34
   );
 
@@ -3079,7 +3071,6 @@ export function loadShields(shieldImages) {
     Color.shields.blue,
     Color.shields.white,
     Color.shields.white,
-    2,
     34
   );
 
@@ -3132,7 +3123,6 @@ export function loadShields(shieldImages) {
     Color.shields.red,
     Color.shields.white,
     Color.shields.white,
-    2,
     34
   );
   shields["pl:expressways"] = shields["pl:motorways"];
@@ -3153,7 +3143,6 @@ export function loadShields(shieldImages) {
     Color.shields.green,
     Color.shields.white,
     Color.shields.white,
-    2,
     34
   );
 
@@ -3212,7 +3201,6 @@ export function loadShields(shieldImages) {
     Color.shields.red,
     Color.shields.white,
     Color.shields.white,
-    2,
     34
   );
 

From dbbc167af87af5274613c6ceddf70d60028fa2df Mon Sep 17 00:00:00 2001
From: Clay Smalley <claysmalley@gmail.com>
Date: Mon, 5 Sep 2022 11:11:48 -0400
Subject: [PATCH 6/7] Document shield definition functions

---
 src/js/shield_defs.js | 57 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/src/js/shield_defs.js b/src/js/shield_defs.js
index 1c25bc99b..99fb4c872 100644
--- a/src/js/shield_defs.js
+++ b/src/js/shield_defs.js
@@ -12,6 +12,15 @@ export const topPadding = 1 * Gfx.getPixelRatio();
 
 export const shields = {};
 
+/**
+ * Draws a shield with an ellipse background
+ *
+ * @param {*} fillColor - Color of ellipse background fill
+ * @param {*} strokeColor - Color of ellipse outline stroke
+ * @param {*} textColor - Color of text (defaults to strokeColor)
+ * @param {*} rectWidth - Width of ellipse (defaults to variable-width)
+ * @returns a shield definition object
+ */
 function ovalShield(fillColor, strokeColor, textColor, rectWidth) {
   textColor = textColor ?? strokeColor;
   return {
@@ -28,10 +37,28 @@ function ovalShield(fillColor, strokeColor, textColor, rectWidth) {
   };
 }
 
+/**
+ * Draws a shield with circle background (special case of ovalShield)
+ *
+ * @param {*} fillColor - Color of circle background fill
+ * @param {*} strokeColor - Color of circle outline stroke
+ * @param {*} textColor - Color of text (defaults to strokeColor)
+ * @returns a shield definition object
+ */
 function circleShield(fillColor, strokeColor, textColor) {
   return ovalShield(fillColor, strokeColor, textColor, 20);
 }
 
+/**
+ * Draws a shield with a rectangle background
+ *
+ * @param {*} fillColor - Color of rectangle background fill
+ * @param {*} strokeColor - Color of rectangle outline stroke
+ * @param {*} textColor - Color of text (defaults to strokeColor)
+ * @param {*} rectWidth - Width of rectangle (defaults to variable-width)
+ * @param {*} radius - Corner radius of rectangle (defaults to 2)
+ * @returns a shield definition object
+ */
 function roundedRectShield(
   fillColor,
   strokeColor,
@@ -63,6 +90,15 @@ function roundedRectShield(
   };
 }
 
+/**
+ * Draws a shield with a pill-shaped background
+ *
+ * @param {*} fillColor - Color of pill background fill
+ * @param {*} strokeColor - Color of pill outline stroke
+ * @param {*} textColor - Color of text (defaults to strokeColor)
+ * @param {*} rectWidth - Width of pill (defaults to variable-width)
+ * @returns a shield definition object
+ */
 function pillShield(fillColor, strokeColor, textColor, rectWidth) {
   textColor = textColor ?? strokeColor;
   return {
@@ -86,6 +122,13 @@ function pillShield(fillColor, strokeColor, textColor, rectWidth) {
   };
 }
 
+/**
+ * Draws a circle icon inside a black-outlined white square shield
+ *
+ * @param {*} fillColor - Color of circle icon background fill
+ * @param {*} strokeColor - Color of circle icon outline stroke
+ * @returns a shield definition object
+ */
 function paBeltShield(fillColor, strokeColor) {
   return {
     notext: true,
@@ -93,6 +136,13 @@ function paBeltShield(fillColor, strokeColor) {
   };
 }
 
+/**
+ * Draws a rectangle icon inside a white-outlined green square shield
+ *
+ * @param {*} fillColor - Color of rectangle icon background fill
+ * @param {*} strokeColor - Color of rectangle icon outline stroke
+ * @returns a shield definition object
+ */
 function bransonRouteShield(fillColor, strokeColor) {
   return {
     notext: true,
@@ -100,6 +150,13 @@ function bransonRouteShield(fillColor, strokeColor) {
   };
 }
 
+/**
+ * Adds banner text above a shield
+ *
+ * @param {*} baseDef - Shield definition object
+ * @param {*} modifiers - Array of strings to be displayed above shield
+ * @returns a shield definition object
+ */
 function banneredShield(baseDef, modifiers) {
   return {
     ...baseDef,

From 324b9834584d6ca16e91cacd5787c445df5fc979 Mon Sep 17 00:00:00 2001
From: Clay Smalley <claysmalley@gmail.com>
Date: Mon, 5 Sep 2022 14:33:41 -0400
Subject: [PATCH 7/7] Enlarge 3-digit octagon shield

---
 icons/shield_oct_green_3.svg | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/icons/shield_oct_green_3.svg b/icons/shield_oct_green_3.svg
index d3f2dae68..a6d1970d5 100644
--- a/icons/shield_oct_green_3.svg
+++ b/icons/shield_oct_green_3.svg
@@ -1,3 +1,3 @@
-<svg width="25" height="20" xmlns="http://www.w3.org/2000/svg">
- <path fill="#0e8342" d="M 24.5,10.003325 22.84496,1.81005 12.50432,0.5 2.15504,1.81005 0.5,10.003325 2.15504,18.18995 12.50432,19.5 22.84496,18.18995 Z" style="stroke-width:1;stroke:#fff;stroke-miterlimit:4;stroke-dasharray:none;stroke-linejoin:round;fill:#006747"/>
+<svg width="28" height="20" xmlns="http://www.w3.org/2000/svg">
+ <path fill="#0e8342" d="M 27.5,10.003325 25.63808,1.81005 14.00486,0.5 2.36192,1.81005 0.5,10.003325 2.36192,18.18995 14.00486,19.5 25.63808,18.18995 Z" style="fill:#006747;stroke:#fff;stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
 </svg>