Try to fix overlapping trails

src/MatrixBackground.tsx

@@ -33,7 +33,7 @@ const ALPHABET = (() => {
 const MEMES = [
     "ABFAHRT",
     "BALLERN",
-    "NOSLEEP",
+    "NO SLEEP",
     "ｱﾔﾔｱﾔﾔ", // Ayaya Ayaya
     "ｵﾏｴﾊﾓｳｼﾝﾃｲﾙ", // Omae wa mou shindeiru
 ]
@@ -86,11 +86,22 @@ function randomTrail(): Trail {
 
             // Pick and add a random meme
             const meme = choice(MEMES);
-            content.push({
+
-                chars: meme,
+            // If the meme has spaces, replace them with random characters
-                fillStyle: MEME_STYLE,
+            // This also places a random character after the meme, ensuring
-            });
+            // that two memes don't come immediately after each other
-            totalLength += meme.length;
+            for (let chunk of meme.split(" ")) {
+                content.push({
+                    chars: chunk,
+                    fillStyle: MEME_STYLE,
+                });
+                content.push({
+                    chars: choice(ALPHABET),
+                    fillStyle: NORMAL_STYLE,
+                });
+
+            }
+            totalLength += meme.length + 1;
         } else {
             // No meme, just add one random character
             current += choice(ALPHABET);
@@ -136,7 +147,15 @@ const MatrixBackground = () => {
         const width = canvas.width;
         const height = canvas.height;
 
-        const trails: Trail[] = new Array(TRAIL_COUNT).fill(0).map((_) => randomTrail());
+        const safe = new Array(COLS).fill(ROWS);
+        const trails: Trail[] = new Array(TRAIL_COUNT).fill(null);
+        for (let i in trails) {
+            let trail = randomTrail();
+            trail.head = Math.min(trail.head, safe[trail.col]);
+            safe[trail.col] = Math.min(safe[trail.col], trail.head - trail.length - 1);
+
+            trails[i] = trail;
+        }
 
         const matrixEffect = () => {
             ctx.fillStyle = "#000";
@@ -170,6 +189,12 @@ const MatrixBackground = () => {
                 }
             }
 
+            // update the safe respawn locations
+            safe.fill(ROWS);
+            for (let trail of trails) {
+                safe[trail.col] = Math.min(safe[trail.col], trail.head - trail.length - 1);
+            }
+
             // update all trails
             for (let i in trails) {
                 trails[i].head += 1;
@@ -177,6 +202,12 @@ const MatrixBackground = () => {
                 if (trails[i].head - trails[i].length > ROWS) {
                     // trail is completely off-screen, generate a new one
                     trails[i] = randomTrail();
+
+                    // If the trail potentially overlaps, bump it up until it can't
+                    trails[i].head = Math.min(trails[i].head, safe[i]);
+
+                    // update the safe respawn locations
+                    safe[i] = Math.min(safe[i], trails[i].head - trails[i].length - 1);
                 }
             }
         }