JavaScript runs once, CSS handles a 24 hour animation

jmstfv · Oct 11, 2022 · f074227 · f074227
1 parent f6b466b
commit f074227
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 43 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,7 @@
 MIT License
 
 Copyright (c) 2022 Jama
+Copyright (c) 2022 Martijn van der Ven
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/assets/base.css b/assets/base.css
@@ -4,6 +4,8 @@
   --black: #2d3134;
   --gray: #a9aab1;
   --beige: #fdf5e6;
+  --start: 0s;
+  --fill: var(--green);
 }
 
 *,
@@ -74,6 +76,20 @@ ul {
   height: 4.5rem;
   width: 4.6rem;
   transition: all .5s ease-in;
+  position: relative;
+  overflow: hidden;
+}
+
+.grid-item span {
+  background-color: var(--fill);
+  transition: background-color .5s ease-in;
+  position: absolute;
+  inset: 0px;
+
+  animation-duration: 86400s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-delay: var(--start);
 }
 
 /* homegrown functional CSS framework */
@@ -86,9 +102,12 @@ div.flex-wrap { flex-wrap: nowrap; }
 .items-center { align-items: center !important; }
 .justify-around { justify-content: space-around !important; }
 
-.bg-time-passed { background-color: var(--green) !important; }
+.bg-time-passed { background-color: var(--green); }
 
-.bg-time-selected { background-color: var(--blue) !important; }
+.bg-time-selected {
+  --fill: var(--blue);
+  background-color: var(--blue);
+}
 
 .text-center { text-align: center; }
 
@@ -101,9 +120,4 @@ div.flex-wrap { flex-wrap: nowrap; }
 .p-1 { padding: 1rem; }
 .p-2 { padding: 2rem; }
 
-.border-b-3 { border-bottom: 0.3rem solid !important; }
-
-.last-grid.bg-time-selected {
-  background: transparent !important;
-  background-color: var(--blue) !important;
-}
+.border-b-3 { border-bottom: 0.3rem solid !important; }
diff --git a/assets/voodoo.js b/assets/voodoo.js
@@ -4,37 +4,33 @@ const createGrid = (rows, cols, container) => {
   for (let i = 0; i < (rows * cols); i++) {
     let gridItem = document.createElement('div');
     gridItem.classList.add('grid-item');
+    let gridFill = document.createElement('span');
+    gridItem.appendChild(gridFill);
     container.appendChild(gridItem);
   };
 };
 
-const minutesSinceMidnight = () => {
+const secondsSinceMidnight = () => {
   const now = new Date();
   const midnight = new Date().setHours(0, 0, 0, 0);
 
-  return ((now - midnight) / 1000) / 60;
+  return (now - midnight) / 1000;
 }
 
 const fillGrid = () => {
-  const minutesPassed = minutesSinceMidnight();
-
-  const fullBlocks = Math.floor(minutesPassed / 10);
-
-  document.querySelectorAll('.grid-container .grid-item').forEach((element, index) => {
-    if (index + 1 <= fullBlocks) {
-      element.classList.add('bg-time-passed');
-    } else {
-      element.classList.remove('bg-time-passed');
-      element.style = 'background: transparent'
-    }
+  const secondsPassed = secondsSinceMidnight();
+  document.styleSheets[0].insertRule(`:root { --start: -${secondsPassed}s; }`, 1);
+
+  document.querySelectorAll('.grid-container .grid-item span').forEach((element, index, { length }) => {
+    const increment = 100 / length;
+    const start = index * increment;
+    const end = start + increment;
+    document.styleSheets[0].insertRule(`@keyframes load${index} {
+      0%, ${start}% { transform: translate(-100%); }
+      ${end}%, 100% { transform: translate(0%); }
+    }`);
+    element.style.animationName = `load${index}`;
   });
-
-  const remainderBlock = (minutesPassed % 10) * 10;
-  const lastUncoloredGridItem = document.querySelector('.grid-item:not(.bg-time-passed)');
-
-  lastUncoloredGridItem.classList.add('last-grid')
-
-  lastUncoloredGridItem.style = `background: linear-gradient(to right, var(--green) ${remainderBlock}%, transparent 0%)`;
 }
 
 const enableFullScreen = () => {
@@ -54,26 +50,14 @@ document.addEventListener('DOMContentLoaded', () => {
     element.addEventListener('mouseenter', () => {
       document.querySelectorAll('.grid-container .grid-item').forEach((element, index) => {
         if (index + 1 <= rectangles) {
-          element.classList.remove('bg-time-passed');
           element.classList.add('bg-time-selected');
         }
       });
     });
 
     element.addEventListener('mouseleave', () => {
-      const minutesPassed = minutesSinceMidnight();
-      const fullBlocks = Math.floor(minutesPassed / 10);
-
-      document.querySelectorAll('.grid-container .grid-item').forEach((element, index) => {
-        if (index + 1 <= fullBlocks) {
-          element.style = "background: transparent"
-          element.classList.add('bg-time-passed');
-          element.classList.remove('bg-time-selected');
-        }
-        else if (index + 1 > fullBlocks) {
-          element.classList.remove('bg-time-selected');
-          element.classList.remove('bg-time-passed');
-        }
+      document.querySelectorAll('.bg-time-selected').forEach((element) => {
+        element.classList.remove('bg-time-selected');
       });
     });
   });
@@ -82,5 +66,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
   enableFullScreen();
   fillGrid();
-  setInterval(fillGrid, 4000);
 });