Suggest shifts in the fingerprint visualizer

ConfusedPolarBear.Plugin.IntroSkipper/Configuration/configPage.html

@@ -156,6 +156,8 @@
                 <span>Shift amount:</span>
                 <input type="number" min="-3000" max="3000" value="0" id="offset">
                 <br />
+                <span id="suggestedShifts">Suggested shifts:</span>
+                <br />
                 <br />
 
                 <button id="btnEraseSeasonTimestamps" type="button">
@@ -194,6 +196,7 @@
             var selectEpisode1 = document.querySelector("select#troubleshooterEpisode1");
             var selectEpisode2 = document.querySelector("select#troubleshooterEpisode2");
             var txtOffset = document.querySelector("input#offset");
+            var txtSuggested = document.querySelector("span#suggestedShifts");
             var btnSeasonEraseTimestamps = document.querySelector("button#btnEraseSeasonTimestamps");
             var timeContainer = document.querySelector("span#timestampContainer");
 
@@ -272,6 +275,7 @@
 
                 refreshBounds();
                 renderTroubleshooter();
+                findExactMatches();
             }
 
             // adds an item to a dropdown
@@ -445,6 +449,35 @@
                 }
             }
 
+            // find all shifts which align exact matches of audio.
+            function findExactMatches() {
+                let shifts = [];
+
+                for (let lhsIndex in lhs) {
+                    let lhsPoint = lhs[lhsIndex];
+                    let rhsIndex = rhs.findIndex((x) => x === lhsPoint);
+
+                    if (rhsIndex === -1) {
+                        continue;
+                    }
+
+                    let shift = rhsIndex - lhsIndex;
+                    if (shifts.includes(shift)) {
+                        continue;
+                    }
+
+                    shifts.push(shift);
+                }
+
+                txtSuggested.textContent = "Suggested shifts: ";
+                if (shifts.length === 0) {
+                    txtSuggested.textContent += "none available";
+                } else {
+                    shifts.sort();
+                    txtSuggested.textContent += shifts.join(", ");
+                }
+            }
+
             // check that the user is still on the configuration page
             function checkWindowHash() {
                 const h = location.hash;
@@ -672,7 +705,16 @@
                 for (let i in fprDiffs) {
                     const j = Number(i);
                     const y = Math.abs(offset) + j;
-                    ctx.fillStyle = fprDiffs[j] >= fprDiffMinimum ? "#2C92EF" : "#EA3535";
+                    const point = fprDiffs[j];
+
+                    if (point >= 100) {
+                        ctx.fillStyle = "#002FFF"
+                    } else if (point >= fprDiffMinimum) {
+                        ctx.fillStyle = "#2C92EF";
+                    } else {
+                        ctx.fillStyle = "#EA3535";
+                    }
+
                     ctx.fillRect(dx, y, 4, 1);
                 }
             }