X-Git-Url: https://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=index.html.in;h=96dd04a437b2dab5ae75e188045850419311e235;hb=893bee273e48207ef4609e7f20de688007970699;hp=4e6c5f274ffe049c9267593a9335129948617f6e;hpb=8c70fa721a3209d211948a91ad2af160b5b5a863;p=charm-bypass.git

diff --git a/index.html.in b/index.html.in
index 4e6c5f2..96dd04a 100644
--- a/index.html.in
+++ b/index.html.in
@@ -55,7 +55,7 @@
           url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
       }
 
-      #servicename, #tickettime, #ticketdate, #codetext {
+      #servicename, #tickettime, #ticketdate, #codetext, #zone {
         font-family: "CharmBypass Regular", sans-serif;
       }
 
@@ -215,11 +215,11 @@
       <h2>doing transit equity whether they like it or not</h2>
 
       <p>
-	<em>Hint:</em> If you think the driver or fare inspector will
-	actually check it, the daily security code is the same on a
-	$2.00 BaltimoreLink ticket as it is on a $9.00 MARC Train
-	ticket. It's also the same on your friend's phone, or for
-	anyone else in Maryland that day.
+        <em>Hint:</em> If you think the driver or fare inspector will
+        actually check it, the daily security code is the same on a
+        $2.00 BaltimoreLink ticket as it is on a $9.00 MARC Train
+        ticket. It's also the same on your friend's phone, or for
+        anyone else in Maryland that day.
       </p>
 
       <form>
@@ -250,7 +250,7 @@
             <label for="code2">
               Daily security code (optional):
             </label>
-	    <input id="code2"
+            <input id="code2"
                    name="code"
                    type="text"
                    minlength="2"
@@ -287,11 +287,11 @@
         <fieldset>
           <legend>MARC Train</legend>
 
-	  <div>
+          <div>
             <label for="code3">
               Daily security code (optional):
             </label>
-	    <input id="code3"
+            <input id="code3"
                    name="code"
                    type="text"
                    minlength="2"
@@ -420,9 +420,9 @@
         /* Otherwise, leave it at "F" */
       }
 
-      /******************************/
+      /************************/
       /* Set the service name */
-      /******************************/
+      /************************/
       function set_service_name() {
         const sid = document.getElementById("servicename");
 
@@ -435,6 +435,30 @@
         /* Otherwise, leave it at "BaltimoreLink" */
       }
 
+
+      /************************/
+      /* Set the service zone */
+      /************************/
+      function set_service_zone(zone) {
+        /* We can take the zone as a parameter too; this allows
+         * us to use this function for the (computed) MARC Train
+         * zone and not just the querystring Commuter Bus zone */
+        const z = document.getElementById("zone");
+        const params = new URLSearchParams(document.location.search);
+
+        if (zone) {
+          z.textContent = zone;
+          z.style.display = "block"; /* It's hidden by default */
+        }
+        else if (params.get("zone")) {
+          /* Get the "zone" from the querystring if it's there */
+          z.textContent = params.get("zone");
+          z.style.display = "block"; /* It's hidden by default */
+        }
+
+        /* Otherwise, leave it blank (and hidden) */
+      }
+
       /***********************************************************/
       /* Resize the  ticket background based on the service name */
       /***********************************************************/
@@ -442,11 +466,11 @@
       function resize_ticket() {
         /* Get the "servicename" from the querystring if it's there */
         const params = new URLSearchParams(document.location.search);
-        if (params.get("servicename") == "Commuter Bus") {
-          const tbg = document.getElementById("ticketbg");
-          const t = document.getElementById("ticket");
-          const sn = document.getElementById("servicename");
+        const tbg = document.getElementById("ticketbg");
+        const t = document.getElementById("ticket");
+        const sn = document.getElementById("servicename");
 
+        if (params.get("servicename") == "Commuter Bus") {
           /* The top of the background is initially at y=246.859, and
            * we scale it by a factor of 1.12 to y=276.482 for a change
            * of 29.623. So after we scale it, we translate it upwards
@@ -454,7 +478,9 @@
           tbg.setAttribute("transform", "translate(0 -29.623) scale(1 1.12)");
 
           /* Now translate the entire ticket up by the magic amount, 1/5
-           * of the size change we made to the background. */
+           * of the size change we made to the background. This ratio
+           * was found by measuring pixels in side-by-side screenshots
+           * of BaltimoreLink and Commuter Bus tickets. */
           t.setAttribute("transform", "translate(0 -9.33)");
 
           /* More magic numbers discovered by comparing the two
@@ -462,7 +488,11 @@
           sn.setAttribute("transform", "translate(0 64.28)");
         }
         else if (params.get("servicename") == "MARC Train") {
-          /* hi */
+          /* insane tricks are explained above */
+          tbg.setAttribute("transform",
+                           "translate(0 -72.378) scale(1 1.2932)");
+          t.setAttribute("transform", "translate(0 -67.17)");
+          sn.setAttribute("transform", "translate(0 131.0)");
         }
 
         /* Otherwise, leave it alone. The SVG was designed with the
@@ -667,8 +697,7 @@
           const dest = params.get("destination");
           const zone = compute_marc_zone(src, dest);
 
-          /* TODO: actually set the zone */
-          alert(zone);
+          set_service_zone(zone);
         }
       }
 
@@ -711,6 +740,9 @@
         /* Set the service name when the page has loaded */
         window.addEventListener("load", set_service_name);
 
+        /* Set the service zone when the page has loaded */
+        window.addEventListener("load", set_service_zone);
+
         /* Resize the ticket background if necessary */
         window.addEventListener("load", resize_ticket);
 
@@ -724,8 +756,8 @@
         /* Set the ticket expiration date/time upon page load */
         window.addEventListener("load", set_ticket_expiry);
 
-       /* Set the MARC Train zone, if applicable */
-       window.addEventListener("load", set_marc_zone);
+        /* Set the MARC Train zone, if applicable */
+        window.addEventListener("load", set_marc_zone);
 
         /* Swap colors when the screen is tapped */
         document.body.addEventListener("click", swap_colors);