add magic item images, some wpm creatures

src/assets/scripts/scripts.js

@@ -47,6 +47,7 @@ export default (() => {
                 });
             }
 
+            // put url in DuckDuckGo search on 404 page
             if (document.documentElement.className.indexOf('is404') > -1) {
                 document.getElementById('searchQuery').value =
                     window.location.pathname
@@ -54,12 +55,67 @@ export default (() => {
                         .replace(/\//g, ' ');
             }
 
+            // Add site to DuckDuckGo search
             document
                 .getElementById('searchForm')
                 .addEventListener('submit', (e) => {
                     document.getElementById('searchQuery').value +=
                         ' site:' + window.location.hostname;
                 });
+
+            // Add shadow to toolDetails that have extra content
+            // I know - ALL OF THIS CODE just for that little effect
+            const details = document.querySelectorAll('.toolDetails'),
+                setBottomShadow = (detail) => {
+                    const {
+                            clientHeight = 0,
+                            offsetHeight = 0,
+                            scrollHeight = 0,
+                            scrollTop = 0,
+                        } = detail ?? {},
+                        currentScroll =
+                            scrollTop / (scrollHeight - offsetHeight);
+
+                    if (clientHeight === scrollHeight) return;
+
+                    detail.style.boxShadow = `rgba(0, 0, 0, 0.35) 0px -${
+                        50 * (1 - currentScroll)
+                    }px 36px -28px inset`;
+                };
+
+            let isWaiting;
+            const throttle = (callback, time) => {
+                if (isWaiting) return;
+                isWaiting = true;
+                setTimeout(() => {
+                    callback();
+                    isWaiting = false;
+                }, time);
+            };
+
+            window.addEventListener(
+                'resize',
+                () =>
+                    throttle(
+                        () =>
+                            details.forEach((detail) =>
+                                setBottomShadow(detail)
+                            ),
+                        250
+                    ),
+                { passive: true }
+            );
+
+            details.forEach((detail) => {
+                detail.addEventListener(
+                    'scroll',
+                    () => throttle(() => setBottomShadow(detail), 250),
+                    { passive: true }
+                );
+                setBottomShadow(detail);
+            });
+
+            details.forEach((detail) => setBottomShadow(detail));
         }, 1);
     });
 })();