some improvements

henry-lang · henry-lang · commit a9dea39c7b8d · 2023-03-19T18:39:38.000-04:00
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -8,7 +8,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="preload" as="font" href="/assets/fonts/iosevka-regular.woff2" type="font/woff2" crossorigin="anonymous">
-    <link rel="preload" as="script" href="/assets/scripts/palette.js" >
+    <link rel="preload" as="script" href="/assets/scripts/palette.js">
     <link rel="stylesheet" href="/assets/styles/styles.css">
 </head>
 <body>
diff --git a/assets/scripts/effects.js b/assets/scripts/effects.js
@@ -3,7 +3,7 @@
 // Initial ascii stuff (Look, I don't like creating a temporary canvas either, but...)
 
 const context = document.createElement('canvas').getContext('2d')
-context.font = getComputedStyle(document.querySelector(".ascii")).font
+context.font = getComputedStyle(document.querySelector('.ascii')).font
 const charDimensions = context.measureText('.') // Monospace font assumed
 const charWidth = charDimensions.width
 const charHeight = charDimensions.fontBoundingBoxAscent
@@ -17,6 +17,29 @@ const seaTPS = 3;
 const seaText = []
 const seaChars = ['~']
 
+function setOptimizedInterval(element, render, tps) {
+    render()
+    let handle = setInterval(render, 1000 / tps)
+    new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if(entry.intersectionRatio >= 0.05) {
+                if(handle === null) {
+                    console.log('Show animation on', element)
+                    handle = setInterval(render, 1000 / tps)
+                }
+            } else if(handle != null) {
+                console.log('Hide animation on', element)
+                clearInterval(handle)
+                handle = null
+            }
+        })
+    }, {
+        root: null,
+        rootMargin: '0px',
+        threshold: [0.05, 0.06],
+    }).observe(element)
+}
+
 function randomSeaChar() {
     return seaChars[Math.floor(Math.random() * seaChars.length)]
 }
@@ -33,5 +56,4 @@ function updateSea() {
     seaElement.innerText = seaText.join('')
 }
 
-updateSea();
-window.setInterval(updateSea, 1000 / seaTPS)
+setOptimizedInterval(seaElement, updateSea, seaTPS)
diff --git a/assets/scripts/palette.js b/assets/scripts/palette.js
@@ -14,22 +14,12 @@ function rotateUserPalette() {
         : 'light'
 }
 
-function getAppliedPalette(palette) {
-    if (palette === 'light') {
-        return 'light'
-    }
-
-    if (palette === 'dark') {
-        return 'dark'
-    }
-}
-
 function setAppliedPalette(palette) {
     document.documentElement.dataset.palette = palette
 }
 
 const userPalette = getUserPalette()
-setAppliedPalette(getAppliedPalette(userPalette))
+setAppliedPalette(userPalette)
 document.querySelector("#toggle-palette").addEventListener("click", () => {
     const newPalette = rotateUserPalette(getUserPalette())
     setAppliedPalette(newPalette)
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
@@ -1,6 +1,3 @@
----
----
-
 @font-face {
     font-family: Iosevka;
     font-display: swap;
@@ -73,6 +70,7 @@ a {
     position: absolute;
     bottom: 0vh;
     left: 0;
+    /* animation: water 1s ease-in-out 0s infinite alternate; */
 }
 
 .navbar {
diff --git a/index.html b/index.html
@@ -15,5 +15,9 @@
     <h1 id="name">Henry Langmack</h1>
     <p class="ascii sea"></div>
 </header>
+<!-- 
+{% for num in (1..100) %}
+<br>
+{% endfor %} -->
 
 <button id="toggle-palette"></button>
