diff --git a/src/MatrixBackground.tsx b/src/MatrixBackground.tsx index 1406272..283ff6f 100644 --- a/src/MatrixBackground.tsx +++ b/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, - fillStyle: MEME_STYLE, - }); - totalLength += meme.length; + + // If the meme has spaces, replace them with random characters + // This also places a random character after the meme, ensuring + // that two memes don't come immediately after each other + 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 - ctx.fillStyle = (idx === trail.head ? HEAD_STYLE : item.fillStyle); + // draw the character, overwriting any that are already there 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; } } }