override styles moved to collage

assets/annotate.js

@@ -1619,14 +1619,10 @@ class AnnotationPlayer extends HTMLElement {
         styleEl.textContent = `
         :host{
             overflow: hidden;
-        }
+            --disactive-path: rgba(220,220,220,.7)
-
-        :host(.active){
-            --override-color: orange
         }
 
         svg{
-            --disactive-path: rgba(220,220,220,.7)
         }
 
         div.imgWrap{
@@ -1856,13 +1852,16 @@ class AnnotationPlayer extends HTMLElement {
         .play:not(.crop-selection) details .config-future{
             display:none;
         }
-        .annotation path.path{stroke: var(--override-color) !important; transition: stroke 1s;}
+        .annotation path.path{
+            stroke: var(--override-color) !important;
+            transition: stroke 1s;
+        }
         `;
 
-        if(config.stroke_color) {
+        // if(config.stroke_color) {
-            // styleEl.textContent += `.annotation path.path{stroke: ${config.stroke_color} !important;}`
+        //     // styleEl.textContent += `.annotation path.path{stroke: ${config.stroke_color} !important;}`
-            styleEl.textContent += `:host{--override-color: ${config.stroke_color}; }`
+        //     styleEl.textContent += `:host{--override-color: ${config.stroke_color}; }`
-        }
+        // }
 
         this.shadowRoot.appendChild(styleEl);
         this.shadowRoot.appendChild(imgWrapEl);

canvas.html

@@ -84,6 +84,20 @@
         const canvasCenter = [20077 / 2, 10331 / 2]
 
         let scale = .5;
+        const sheet = new CSSStyleSheet
+        sheet.replaceSync(
+            `
+            :host(){
+                --override-color: gray
+            }
+            :host(.active){
+                --override-color: blue;
+            }
+
+            :host(.ending){
+                --override-color: blue;
+                --disactive-path: rgba(100,100,100,.7)
+            }`);
 
 
         function easeInOutQuart(x) {
@@ -114,9 +128,18 @@
             scroll_offsets = calculateScrollOffsets()
 
             const windowEl = document.getElementById('collage_window')
+            const anchorEls = document.getElementsByClassName('anchor')
+
+            const lastAnchorEl = anchorEls[anchorEls.length - 1];
+            console.log(lastAnchorEl)
+
+            for(const player of windowEl.children){
+                player.shadowRoot.adoptedStyleSheets = [sheet];
+            }
 
 
             function updateScroll() {
+                // calculate the zooming & positioning of the plot
                 center_y = window.scrollY + window.innerHeight / 2
                 prev = null;
                 next = null;
@@ -174,6 +197,19 @@
                 windowEl.style.transform = `scale(${scale})`
                 windowEl.style.left = `${x}px`
                 windowEl.style.top = `${y}px`
+
+                // calculate whether we're nearing the conlusion, and color accordingly
+                const last = Math.max(...Array.from(anchorEls).map((e) => e.getBoundingClientRect().bottom))
+                console.log(last)
+                if (last < 0) {
+                    for (const playerEl of windowEl.children) {
+                        playerEl.classList.add('ending')
+                    }
+                } else {
+                    for (const playerEl of windowEl.children) {
+                        playerEl.classList.remove('ending')
+                    }
+                }
             }
 
             windowEl.style.transform = `scale(${scale})`
@@ -189,7 +225,7 @@
 
             let options = {
                 // root: document.querySelector("#scrollArea"), // viewport by default
-                rootMargin: `${-Math.round(innerHeight/3)}px`, //"0px",
+                rootMargin: `${-Math.round(innerHeight / 3)}px`, //"0px",
                 threshold: 0,
             };
 
@@ -197,11 +233,11 @@
                 entries.forEach((entry) => {
                     index = entry.target.dataset.i;
                     console.log(entry)
-                    if(index >= windowEl.children.length) {
+                    if (index >= windowEl.children.length) {
                         return;
                     }
                     playerEl = windowEl.children[index];
-                    if(entry.isIntersecting){
+                    if (entry.isIntersecting) {
                         playerEl.classList.add('active')
                     } else {
                         playerEl.classList.remove('active')
@@ -209,7 +245,7 @@
                 })
             }, options);
 
-            const anchorEls = document.getElementsByClassName('anchor');
+            // const anchorEls = document.getElementsByClassName('anchor');
             for (const anchorEl of anchorEls) {
                 observer.observe(anchorEl)
             }