X-Git-Url: https://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=index.html.in;h=345c432b5d591b325f2aa5c39000a19392e44fe7;hb=fe64fd48133a3d77a824615ab1534971825189e9;hp=f6d7cceeae17a5c23024d489400225f880e686cd;hpb=49074c5f3f869c3d6724271cf13cae6973fe5861;p=charm-bypass.git

diff --git a/index.html.in b/index.html.in
index f6d7cce..345c432 100644
--- a/index.html.in
+++ b/index.html.in
@@ -81,7 +81,7 @@
           url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
       }
 
-      #serviceletter {
+      #serviceid {
         font-family: "CharmBypass Bold", sans-serif;
         font-weight: bold;
       }
@@ -257,6 +257,21 @@
       }
 
 
+      /******************************/
+      /* Set the service identifier */
+      /******************************/
+      function set_service_id() {
+        const sid = document.getElementById("serviceid");
+
+	/* Get the "serviceid" from the querystring if it's there */
+        let params = new URLSearchParams(document.location.search);
+        if (params.get("serviceid")) {
+          sid.textContent = params.get("serviceid");
+        }
+
+	/* Otherwise, leave it at "F" */
+      }
+
       /****************************************/
       /* Set and reposition the security code */
       /****************************************/
@@ -289,9 +304,10 @@
       function center_code() {
         /* Center the security code inside its red box */
         const ct = document.getElementById("codetext");
+        const bg = document.getElementById("codebg");
 
         /* First, find the center of the red box */
-        const r1 = document.getElementById("codebg").getBoundingClientRect();
+        const r1 = bg.getBoundingClientRect();
         const c1 = r1.left + (r1.width / 2);
 
         /* Now the center of the code text */
@@ -301,12 +317,30 @@
         /* What do we add to c2 to make it equal to c1? */
         const hdelta = c1 - c2;
 
+	/* We've measured everything so far in "client rect"
+         * coordinates, because that's the only available measurement
+         * we have for the width of the <text> element after futzing
+         * with its contents. But when we reposition that <text>
+         * element, it will be by adjusting its "x" attribute, and
+         * that attribute uses a different coordinate system than the
+         * client rect does. Specifically, "x" refers to an offset
+         * within the SVG's coordinate system, and the client rect
+         * coordinates are pixels on-screen. To convert between the
+         * two, we can take the "width" attribute of the background
+         * element and compare it to the width of the background
+         * element's client rect. Since the size of the background is
+         * fixed, this should give us a multiplier that turns client recr
+         * distances (what we have) into SVG distances (what we want) */
+        const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
+
+        /* Convert hdelta from client rect to SVG coordinates */
+        const svg_hdelta = hdelta * client_to_svg;
+
         /* Since this <text> element has an "x" attribute it's easier for
          * us to shift that than it is to mess with the "left" style. */
-        ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + hdelta);
+	ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
       }
 
-
       /*****************************************/
       /* Next, set up the ticket date and time */
       /*****************************************/
@@ -374,17 +408,16 @@
       /* Re-center the ticket when the window is resized */
       window.addEventListener("resize", center_ticket);
 
+      /* Set the service identifier when the page has loaded */
+      window.addEventListener("load", set_service_id);
+
       /* Set the security code text when the page has loaded */
       window.addEventListener("load", set_code);
 
-      /* Center the security code text when the page has loaded;
-       * in particular, after we set it */
+      /* Center the security code text when the page has loaded; in
+       * particular, after we set the code. */
       window.addEventListener("load", center_code);
 
-      /* Re-center the security code when the window is resized,
-       * and in particular after the ticket is re-centered */
-      window.addEventListener("resize", center_code);
-
       /* Set the ticket expiration date/time upon page load */
       window.addEventListener("load", set_ticket_expiry);