[arcade] Characters now react to being clicked on

Wouldn't you?

pages/api/arcade/inventory.js

@@ -29,7 +29,7 @@ export default async function handler(req, res) {
     flavorText().then(d => data.flavor = d),
   ])
 
-  const result = data.inventory.filter(record => record.fields["Enabled"]).map(record => {
+  const inventoryResults = data.inventory.filter(record => record.fields["Enabled"]).map(record => {
     return {
       name: record.fields['Name'],
       smallName: record.fields['Name Small Text'],
@@ -51,5 +51,18 @@ export default async function handler(req, res) {
     }
   })
 
-  res.status(200).json(result)
+  const selfClicks = {}
+  data.flavor.filter(f => f.fields['Self Click']).forEach(record => {
+    const char = record.fields["Character (from Shopkeepers)"][0]
+    const charURL = record.fields["Image Link (from Shopkeepers)"][0]
+    const charMsg = record.fields["Message"]
+    selfClicks[char] = selfClicks[char] || []
+    selfClicks[char].push({
+      message: charMsg,
+      characterURL: charURL,
+      character: char
+    })
+  })
+
+  res.status(200).json({inventory: inventoryResults, selfClicks})
 }

public/arcade/index.html

@@ -27,9 +27,8 @@
     const randomContainer = () => sample(containerImages)
 
     window.addEventListener("load", async () => {
-      const inventory = await fetchedData()
+      const { inventory, selfClicks } = await fetchedData()
       const itemList = document.querySelector('.item-list')
-      console.log("populating page")
       inventory.sort((a, b) => {
         // sort by hours, but not everything will have hours set– put the stuff without hours at the end
         if (a.hours && b.hours) {
@@ -45,8 +44,6 @@
 
       function characterImage(character) {
         return {
-          // "Dino": "https://cloud-6rd1boq71-hack-club-bot.vercel.app/0image.png",
-          // "Raccoon": "https://cloud-6rd1boq71-hack-club-bot.vercel.app/1image.png"
           "Dino": "https://cloud-h4wi9l5hg-hack-club-bot.vercel.app/2005.png",
           "Raccoon": "https://cloud-nfmmdwony-hack-club-bot.vercel.app/1001.png"
 
@@ -56,11 +53,16 @@
       const raccEl = document.querySelector('#shopkeeper-left')
       const dinoEl = document.querySelector('#shopkeeper-right')
 
-      inventory.forEach((inv, i) => {
-        const el = document.createElement('div')
-        el.classList.add('cell')
+      raccEl.addEventListener('click', () => {
+        handleClick({name: "Raccoon", flavorText: selfClicks["Raccoon"]})
+      })
 
-        el.addEventListener('click', () => {
+      dinoEl.addEventListener('click', () => {
+        handleClick({name: "Dino", flavorText: selfClicks["Dino"]})
+      })
+
+      function handleClick(inv) {
+        console.log(inv)
           if (firstPlay) {
             toggleMusic()
           }
@@ -89,7 +91,13 @@
           } else {
             document.querySelector('.shop-dialogue').innerHTML = '...'
           }
-        })
+      }
+
+      inventory.forEach((inv, i) => {
+        const el = document.createElement('div')
+        el.classList.add('cell')
+
+        el.addEventListener('click', () => handleClick(inv))
 
         const smallNameDiv = inv.smallName ? ' <span class="small-name">' + inv.smallName + '</span>' : ''
 
@@ -135,7 +143,7 @@
         firstPlay = false
       }
 
-      document.querySelector('#open-shop').addEventListener('click', toggleMusic)
+      // document.querySelector('#open-shop').addEventListener('click', toggleMusic)
     })
   </script>
 </head>

public/arcade/style.css

@@ -292,7 +292,7 @@ a:hover {
 
 .shopkeeper {
   animation: idle 2s infinite alternate;
-  filter: contrast(20%);
+  filter: contrast(60%);
 }
 
 .shopkeeper.talking {