Fix overlap, Add memes

src/MatrixBackground.tsx

@@ -33,7 +33,9 @@ const ALPHABET = (() => {
 const MEMES = [
     "ABFAHRT",
     "BALLERN",
-    "NOSLEEP",
+    "NO SLEEP",
+    "ZOCKEN ALTER",
+    "MEGA KRASSE LAN",
     "ｱﾔﾔｱﾔﾔ", // Ayaya Ayaya
     "ｵﾏｴﾊﾓｳｼﾝﾃｲﾙ", // Omae wa mou shindeiru
 ]
@@ -86,11 +88,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);
@@ -160,9 +173,11 @@ const MatrixBackground = () => {
                             continue;
                         }
 
-                        // draw the character
+                        // draw the character, overwriting any that are already there
-                        ctx.fillStyle = (idx === trail.head ? HEAD_STYLE : item.fillStyle);
                         const y = idx * CHAR_HEIGHT;
+                        ctx.fillStyle = "#000";
+                        ctx.fillRect(x, y - CHAR_HEIGHT, CHAR_WIDTH, CHAR_HEIGHT);
+                        ctx.fillStyle = (idx === trail.head ? HEAD_STYLE : item.fillStyle);
                         ctx.fillText(char, x, y);
 
                         idx += 1;
@@ -177,6 +192,7 @@ const MatrixBackground = () => {
                 if (trails[i].head - trails[i].length > ROWS) {
                     // trail is completely off-screen, generate a new one
                     trails[i] = randomTrail();
+                    trails[i].head = 0;
                 }
             }
         }