Merge branch 'arcade' of https://github.com/hackclub/site into arcade

public/arcade/index.html

@@ -45,6 +45,9 @@
         }[character] || "https://cloud-6rd1boq71-hack-club-bot.vercel.app/0image.png"
       }
 
+      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')
@@ -53,13 +56,20 @@
           let msg = sample(inv.flavorText)
           if (msg) {
             console.log(`${msg.character}:${msg.message}`)
-            document.querySelector('#shopkeeper').src = msg.characterURL || characterImage(msg.character)
             document.querySelector('.shop-dialogue').innerHTML = msg.message
             if (msg.character === 'Dino') {
-              yap(msg.message, {baseRate: 3.9, rateVariance: 1})
+              dinoEl.src = msg.characterURL || characterImage(msg.character)
+              dinoEl.classList.add('talking')
+              yap(msg.message, {baseRate: 3.9, rateVariance: 1, endCallback: () => {
+                dinoEl.classList.remove('talking')
+              }})
             } else {
               // raccoon
-              yap(msg.message, {baseRate: 2.9, rateVariance: 1})
+              raccEl.src = msg.characterURL || characterImage(msg.character)
+              raccEl.classList.add('talking')
+              yap(msg.message, {baseRate: 2.9, rateVariance: 1, endCallback: () => {
+                raccEl.classList.remove('talking')
+              }})
             }
           } else {
             document.querySelector('.shop-dialogue').innerHTML = '...'
@@ -178,8 +188,9 @@
 
     
     
-  <div class="shop-stand" style="position:sticky; bottom:0px;">
-      <img id="shopkeeper" src="" alt="shopkeeper" />
+  <div class="shop-stand">
+      <img id="shopkeeper-left" class="shopkeeper" src="" alt="shopkeeper" />
+      <img id="shopkeeper-right" class="shopkeeper" src="" alt="shopkeeper" />
       <div class="shop-ledge"></div>
       <div class="shop-counter">
         <div class="dialogue-box">

public/arcade/style.css

@@ -257,12 +257,33 @@ a:hover {
   background-color: #2e2a31;
 }
 
+.shop-stand {
+  bottom: 0;
+  margin-top: auto;
+  position: -webkit-sticky;
+  position: sticky;
+  user-select: none;
+  pointer-events: none;
+  /* top: 100; */
+}
+.shop-stand > * {
+  pointer-events: auto;
+  user-select: auto;
+}
 
-
+@keyframes talking {
+  from {
+    transform: scale(1.1, 0.9);
+  } to {
+    transform: scale(0.9, 1.1);
+  }
+}
+.talking {
+  animation: talking 0.2s infinite alternate;
+}
 .shopkeeper {
-  position: absolute;
-  display: inline-block;
-  padding: 10px 20px;
+  animation-transition: 0.2s;
+  user-select: none;
 }
 
 .shop-ledge {

public/yap.js

@@ -1,10 +1,10 @@
 async function yap(text, {
   letterCallback = () => {},
+  endCallback = () => {},
   baseRate = 1.9,
   rateVariance = 0.50,
   volume = 0.50
 }) {
-
   const yap_sounds = {
     // these sounds and most of the yapping code are adapted from https://github.com/equalo-official/animalese-generator
     a: new Howl({ src: '/bin/yapping/a.wav', volume }),
@@ -63,19 +63,22 @@ async function yap(text, {
       // who cares. pick up a foot ball
     }
     if (!char.match(/[a-zA-Z.]/)) {
-      yap_queue.push(yap_sounds['_']);
+      yap_queue.push(yap_sounds['_'])
       continue; // skip characters that are not letters or periods
     }
-    yap_queue.push(yap_sounds[char]);
+    yap_queue.push(yap_sounds[char])
   }
 
   function next_yap() {
     letterCallback(yap_queue.length)
-    if (yap_queue.length === 0) return;
-    let noise = yap_queue.shift();
-    noise.rate(Math.random() * rateVariance + baseRate);
+    if (yap_queue.length === 0) {
+      endCallback()
+      return
+    }
+    let noise = yap_queue.shift()
+    noise.rate(Math.random() * rateVariance + baseRate)
     noise.once('end', next_yap)
-    noise.play();
+    noise.play()
   }
 
   next_yap();