From f571368cd4a75d13171b8615ab469be7fc49ff50 Mon Sep 17 00:00:00 2001
From: Tanner Heffner <tannerjheffner@gmail.com>
Date: Mon, 22 Jan 2024 20:04:29 -0800
Subject: [PATCH 1/2] Add shadow to emoji wall

---
 src/lib/components/Emojis.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Emojis.svelte b/src/lib/components/Emojis.svelte
index 5a94431..85bd925 100644
--- a/src/lib/components/Emojis.svelte
+++ b/src/lib/components/Emojis.svelte
@@ -73,7 +73,7 @@
   {#each shuffled as f, i}
     <!-- <span>{i}</span> -->
     <button
-      class="emoji emoji-{i} p-1 m-1"
+      class="emoji emoji-{i} p-1 m-1 text-shadow"
       style="mix-blend-mode: {f.b}"
       data-emoji={f.e}
       data-blend={f.b}

From d5e01d2a19c177efef8dcac55db849f6ee924fde Mon Sep 17 00:00:00 2001
From: Tanner Heffner <tannerjheffner@gmail.com>
Date: Tue, 23 Jan 2024 17:44:32 -0800
Subject: [PATCH 2/2] make emoji wall more fun

---
 src/lib/components/EmojiWall.svelte | 65 +++++++++++++++++++
 src/lib/components/Emojis.svelte    | 96 -----------------------------
 src/routes/(main)/+page.svelte      |  4 +-
 3 files changed, 67 insertions(+), 98 deletions(-)
 create mode 100644 src/lib/components/EmojiWall.svelte
 delete mode 100644 src/lib/components/Emojis.svelte

diff --git a/src/lib/components/EmojiWall.svelte b/src/lib/components/EmojiWall.svelte
new file mode 100644
index 0000000..9c7c864
--- /dev/null
+++ b/src/lib/components/EmojiWall.svelte
@@ -0,0 +1,65 @@
+<script>
+  const WALL_SIZE = 84
+
+  // The first emoji in the array becomes the dominant background
+  // The others intersperse randomly
+  const emojis = [
+    ['🌊','🦑','🦀','🐳','🦐','🐡','🐠','🦈','🏄‍♂️','🏝'],
+    ['🌳','🦥','🦜','🐊','🐸','🐒','🌺','🍄','🐯','🐜'],
+    ['🏜','🌵','🌞','🦂','🐍','🤠','🦇','🦉','🐫'],
+    ['🏔','🏕','🌲','🦅','🌝','🏂']
+  ]
+
+  // randomly replace array elements with something else
+  function fillRandom(array, fill, count) {
+    return function () {
+        const indices = new Set();
+        do {
+          indices.add(Math.floor(Math.random() * array.length));
+        } while (indices.size < count)
+        return array.map((v, i) => indices.has(i) ? fill[Math.floor(Math.random() * fill.length)] : v);
+    };
+  }
+
+  // Create the emoji walls.
+  const scenes = []
+  emojis.forEach(set => {
+    const background = set.shift()
+    let wall = Array(WALL_SIZE).fill(background)
+    wall = fillRandom(wall, set, 18)()
+
+    return scenes.push(wall)
+  })
+
+  // sort an array by random map, unmap to get new order
+  function shuffleArray(array) {
+    return array
+        .map(value => ({ value, sort: Math.random() }))
+        .sort((a, b) => a.sort - b.sort)
+        .map(({ value }) => value)
+  }
+
+  // increment counter and update visible wall
+  function changeWall() {
+    initial++
+    if (initial === scenes.length) initial = 0
+
+    visible = shuffleArray(scenes[initial])
+  }
+
+  // set default wall
+  let initial = 0
+  let visible = shuffleArray(scenes[initial])
+</script>
+
+<div class="block text-shadow text-4xl md:text-6xl mt-4 lg:mt-8 w-full max-h-[400px] md:max-h-[450px] overflow-hidden lg:overflow-visible">
+  {#each visible as f, i}
+    <!-- <span>{i}</span> -->
+    <button
+      class="emoji emoji-{i} p-1 m-1 text-shadow"
+      on:click={() => changeWall()}
+    >
+      {f}
+    </button>
+  {/each}
+</div>
diff --git a/src/lib/components/Emojis.svelte b/src/lib/components/Emojis.svelte
deleted file mode 100644
index 85bd925..0000000
--- a/src/lib/components/Emojis.svelte
+++ /dev/null
@@ -1,96 +0,0 @@
-<script>
-  const blendMode = [
-    "normal",
-    "multiply",
-    "screen",
-    // "overlay",
-    // "darken",
-    // "lighten",
-    "color-dodge",
-    "color-burn",
-    // "hard-light",
-    // "soft-light",
-    "difference",
-    "exclusion",
-    "hue",
-    "saturation",
-    "color",
-    "luminosity",
-    // "plus-darker",
-    // "plus-lighter",
-  ]
-
-  const emojis = [
-    '🏔',
-    '🌊',
-    '🏜',
-    '🥏',
-    '👨‍🍳',
-    '👻',
-    '🌲',
-    '🦌',
-    '🦑',
-    '🤠',
-    '🍳'
-  ]
-
-  // all combinations of the above two arrays
-  // ex: { e: '🌊', b: 'exclusion'}
-  const full = emojis.map(
-    e => {
-      const bm = []
-
-      blendMode.forEach(b => {
-        return bm.push({e, b})
-      })
-
-      return bm
-    }
-  ).flat()
-
-  // sort by random map, unmap to get new order
-  function shuffleArray(array) {
-    return array
-        .map(value => ({ value, sort: Math.random() }))
-        .sort((a, b) => a.sort - b.sort)
-        .map(({ value }) => value)
-  }
-
-  // reconstruct item from what was clicked, filter array to remove it
-  function handleRemoval(event) {
-    const data = event.target.dataset
-    const r = {e: data.emoji, b: data.blend}
-
-    const items = shuffled.filter(e => !(e.e === r.e && e.b === r.b))
-    shuffled = shuffleArray(items)
-  }
-
-  // set initial shuffle to full list
-  let shuffled = shuffleArray(full)
-</script>
-
-<div class="block text-shadow text-4xl mt-4 lg:mt-8 w-full max-h-[400px] lg:max-h-fit overflow-hidden lg:overflow-visible">
-  {#each shuffled as f, i}
-    <!-- <span>{i}</span> -->
-    <button
-      class="emoji emoji-{i} p-1 m-1 text-shadow"
-      style="mix-blend-mode: {f.b}"
-      data-emoji={f.e}
-      data-blend={f.b}
-      on:click={(event) => handleRemoval(event)}
-    >
-      {f.e}
-    </button>
-  {/each}
-</div>
-
-{#if shuffled.length < 50 && shuffled.length > 25}
-  <p class="text-accent font-semibold text-xl my-4">keep going...</p>
-{/if}
-{#if shuffled.length <= 25 && shuffled.length > 0}
-  <p class="text-accent font-semibold text-xl my-4">almost there...</p>
-{/if}
-{#if shuffled.length === 0}
-  <!-- svelte-ignore a11y-distracting-elements -->
-  <marquee class="text-shadow font-bold text-6xl py-8">🎉 {full.length} emojis clicked 🎉</marquee>
-{/if}
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
index e865913..03551b2 100644
--- a/src/routes/(main)/+page.svelte
+++ b/src/routes/(main)/+page.svelte
@@ -1,7 +1,7 @@
 <script>
   import Slice from '$lib/components/Slice.svelte'
   import Card from '$lib/components/Card.svelte'
-  import Emojis from '$lib/components/Emojis.svelte'
+  import EmojiWall from '$lib/components/EmojiWall.svelte'
   import {
     SITE_URL,
     SITE_TITLE,
@@ -37,7 +37,7 @@
     <h1 class="text-shadow text-3xl font-bold lg:text-5xl">
       welcome to my page
     </h1>
-    <Emojis />
+    <EmojiWall />
   </Slice>
 
   <Slice title="Hello World!">