Merge pull request #1082 from hackclub/create-shopkeeper-container

Further shopkeeper flavor text

lib/flavor.js

@@ -76,6 +76,9 @@ export const shopIcons = {
     'https://cloud-3wb98dblo-hack-club-bot.vercel.app/0untitled_artwork.gif',
   bapanada:
     'https://cloud-o4qa8261z-hack-club-bot.vercel.app/0270a4575-6fa8-4946-b5c8-3fb5b8d9b722-1660621656235.webp',
+  sticker: 'https://cloud-jckns370p-hack-club-bot.vercel.app/0find_out.png',
+  stickerSheet: 'https://cloud-opr8cwuhm-hack-club-bot.vercel.app/0the-bin.png',
+  sticker2: 'https://cloud-4wvt8n7o9-hack-club-bot.vercel.app/0heidiflag.png',
 }
 
 export const outOfStock = [

lib/transcript.yml

@@ -28,15 +28,18 @@ selfClick:
   - icon:holdingEars|hands off ${this.t('pirateyThings')}!
   - icon:threat|I'll have you know I'm not for sale!
   - icon:threat|You ain't gonna plunder this booty!
-  - icon:freaking|N-no! You can't buy me! |icon:sticker|I'm not gonna be some collectible sticker sheet!
   - icon:threat|hey!! i'm allergic to cursors!
   - icon:thumbs|guess who's got 2 thumbs and is not for sale!
   - click me one more time, i dare you... ya ${this.t('pirateyThings')}!
-  - icon:freaking|w-wait. |icon:blushing|you want to buy me? really?
+  - icon:freaking|w-wait. |icon:fluster|you want to buy me? really?
   - icon:fluster|stop clicking! t-that tickles!
   - icon:fluster|w-wait. you want to buy me? really?
   - d-did you just click me?!
   - icon:threat|*angry raccoon chittering noises*
+selfClickBuy:
+  - icon:freaking|N-no! |icon:sticker|don't turn me into a marketable sticker!|buy:item_find_out_stickers_104
+  - icon:freaking|N-no! You can't buy me! What am I...|icon:stickerSheet| just some collectible sticker sheet?|buy:item_bin_stickers_105
+  - icon:freaking|N-no! You can't buy me! |icon:sticker2|I'm not gonna be some commemorative event sticker!|buy:item_shopkeeper_stickers_106
 superstitionItems:
   - black cat
   - rabbit's foot
@@ -133,6 +136,9 @@ music:
   - icon:holdingEars|that music is a little loud
 doot: # someone clicks a trumpet while music is playing
   - icon:freaking|stop with the trumpet!
+  - icon:freaking|i swear to the seven seas, stop with the trumpet!
+  - icon:freaking|that's enough!
+  - icon:freaking|NO MORE TRUMPETS!
 fav:
   removed:
     - icon:question|ah, not interested in the [${this.name.toUpperCase()}]?
@@ -171,18 +177,18 @@ bigNumbers:
 item:
   base: icon:question|you want to buy a |speed:2.5|[${this.name.toUpperCase()}]|speed:default|?
   generic:
-    - \|icon:question|see something you like?
-    - \|icon:info|those have been pretty popular lately. . . |icon:peefest|speed:4.5| *internally crying as she thinks about the ${this.t('floatingThings')} and ${this.t('floatingThings')} that have been her only customers for the past 3 years*|speed:default
-    - \|icon:question|uuuuh, how many you want?
-    - \|icon:cute|yes yes, you buy now!
-    - '|icon:cute|youuuuu... pay this much? [${this.price} doubloons]'
-    - '|icon:info|why does this label say DO NOT EAT?'
+    - icon:question|see something you like?
+    - icon:info|those have been pretty popular lately. . . |icon:peefest|speed:4.5| *internally crying as she thinks about the ${this.t('floatingThings')} and ${this.t('floatingThings')} that have been her only customers for the past 3 years*|speed:default
+    - icon:question|uuuuh, how many you want?
+    - icon:cute|yes yes, you buy now!
+    - icon:cute|youuuuu... pay this much? [${this.price} doubloons]
+    - icon:info|why does this label say DO NOT EAT?
   zine:
-    - \|icon:reading|I can't read, but i like the pictures!
-    - \|icon:freaking|speed:4.1|OMGWTFBBQ, JULIA EVANS MADE THESE!|pause:300| .|pause:300| .|pause:300| .|icon:question|speed:3|EErrrr, I mean,|icon:scallywag|speed:default|arrrr, set sail on a good story!
-    - \|icon:scallywag|A fine piece of literature, this be!
-    - \|icon:scallywag|My first mate reads these to me!
-    - \|icon:reading|You can even read it with an eyepatch!
+    - icon:reading|I can't read, but i like the pictures!
+    - icon:freaking|speed:4.1|OMGWTFBBQ, JULIA EVANS MADE THESE!|pause:300| .|pause:300| .|pause:300| .|icon:question|speed:3|EErrrr, I mean,|icon:scallywag|speed:default|arrrr, set sail on a good story!
+    - icon:scallywag|A fine piece of literature, this be!
+    - icon:scallywag|My first mate reads these to me!
+    - icon:reading|You can even read it with an eyepatch!
   item_the_pocket_guide_to_debugging_44:
     - ${this.t('item.zine')}
   item_hell_yes_css__43:
@@ -191,22 +197,22 @@ item:
     - ${this.t('item.zine')}
   item_pinecil_20:
     - ${this.t('item.generic')}
-    - '|icon:info|*Warning: May contain lead'
-    - \|icon:info|I hafta be careful with these– me first mate has a lead allergy!
-    - \|icon:info|Be careful if you have a lead allergy!
-    - \|icon:freaking|hot! |speed:3.5|Hot! |speed:4|HOT!|speed:default
-    - \|icon:info|yes, let me fetch one from the back...|icon:freaking|speed:3.5|ow!|speed:4| Ow!|speed:4.5| OWOWOWOWOWOW!
-    - \|icon:cute|It’s like welding but tiny!
+    - 'icon:info|*Warning: May contain lead'
+    - icon:info|I hafta be careful with these– me first mate has a lead allergy!
+    - icon:info|Be careful if you have a lead allergy!
+    - icon:freaking|hot! |speed:3.5|Hot! |speed:4|HOT!|speed:default
+    - icon:info|yes, let me fetch one from the back...|icon:freaking|speed:3.5|ow!|speed:4| Ow!|speed:4.5| OWOWOWOWOWOW!
+    - icon:cute|It’s like welding but tiny!
   item_github_notebook_37:
     - ${this.t('item.generic')}
-    - "|icon:info| if only i could read... |icon:holdingEars| *sigh* |icon:info| i'd be able to tell you all about it"
-    - "|icon:info|I can't read, but I can tell you it's a notebook!"
-    - '|icon:cute|a place to draw your treasure maps!'
-    - '|icon:info|write down where you buried your treasure!'
-    - '|icon:info|write down where you buried your treasure!|icon:holdingEars| *sigh* . . . i wish i could read'
+    - icon:info| if only i could read... |icon:holdingEars| *sigh* |icon:info| i'd be able to tell you all about it
+    - icon:info|I can't read, but I can tell you it's a notebook!
+    - icon:cute|a place to draw your treasure maps!
+    - icon:info|write down where you buried your treasure!
+    - icon:info|write down where you buried your treasure!|icon:holdingEars| *sigh* . . . i wish i could read
   item_factorio:
-    - "|icon:fluster| you have NO IDEA how much time i've sunk into this game"
-    - "|icon:info| interesting fact: this is a GREAT way to kill the time when you're marooned on a deserted island"
+    - icon:fluster| you have NO IDEA how much time i've sunk into this game
+    - icon:info| interesting fact: this is a GREAT way to kill the time when you're marooned on a deserted island
   item_bambu_lab_a1_mini_49:
     - If a picture is worth 1000 words, a 3d print should be worth ${this.t('bigNumbers')}
     - Oh, do they print in chocolate?!
@@ -220,44 +226,48 @@ item:
     - the perfect way to vandalize your own property
     - ooooh, are you going to put that on your laptop?
     - Puts the "ad" in "adhesive"!
+  signed_photo:
+    - icon:info|Due to inflation the average photo is only worth 700 words
+    - icon:info|I'm not sure who this is, but they look important!
+    - icon:question|i dont know why i have these, they just washed up one day
   item_signed_photo_of_malted_19:
-    - ${this.t('item.generic')}
-    - '|icon:info|Due to inflation the average photo is only worth 700 words'
-    - "|icon:info|I'm not sure who this is, but they look important!"
-    - '|icon:question|i dont know why i have these, they just washed up one day'
+    - ${this.t('item.signed_photo')}
+  item_signed_photo_of_graham_darcey_16:
+    - ${this.t('item.signed_photo')}
+    - yes yes, this one is UBER rare!
   item_digital_calipers_50:
-    - '|icon:scallywag|measure twice, stab once!'
+    - icon:scallywag|measure twice, stab once!
     - used to make sure your plank is just the right walkin' length
     - as sharp as a cutlass!
     - as sharp as me first mate's hook!
-    - "|icon:scallywag|ever been pinched by a crab's claws?|pause|icon:question| No?|pause|icon:info| Well, nevermind then"
+    - icon:scallywag|ever been pinched by a crab's claws?|pause|icon:question| No?|pause|icon:info| Well, nevermind then
   item_flipper_32:
-    - \|icon:info|I've tried these, but watch out. . .|icon:wet| they aren't water proof
-    - \|icon:tinfoil|*dons her tinfoil captain's hat*|speed:0.3|. . .|speed:default| don't point that at me head
+    - icon:info|I've tried these, but watch out. . .|icon:wet| they aren't water proof
+    - icon:tinfoil|*dons her tinfoil captain's hat*|speed:0.3|. . .|speed:default| don't point that at me head
   item_hack_club_socks__34:
     - they aren't hacker socks, but any ${this.t('pirateyThings')} worth their salt can make do...
     - as a raccoon, i've already got natural socks, but these are good for me crew!
   item_blah_j_5:
     - ${this.t('item.generic')}
-    - \|icon:fluster|kinda makes you wanna walk the plank, doesn't it?
-    - \|icon:cute| Cuddle friend!
-    - \|icon:cute| mine keeps me safe when i'm asleep
-    - \|icon:cute| cuddle friend!|icon:holdingEars| *sigh* . . . i wish i had mine still...
+    - icon:fluster|kinda makes you wanna walk the plank, doesn't it?
+    - icon:cute| Cuddle friend!
+    - icon:cute| mine keeps me safe when i'm asleep
+    - icon:cute| cuddle friend!|icon:holdingEars| *sigh* . . . i wish i had mine still...
   item_lockpick_set_31:
     - ${this.t('item.generic')}
-    - "|icon:cute| tiny tools for unlockin' things!"
-    - '|icon:scallywag|fortunately, me twig-like paws are perfect for this sorta work, but these are good for me crew!'
-    - "|icon:cute| little helpers for gettin' into treasure chests!"
-    - "|icon:info| You can pick your friends, and you can pick your lock, but you can't pick your friend's lock. |icon:question| errrr... i guess you can, but please don't pick my locks!"
-    - '|icon:info| Take your pick!'
-    - '|icon:info| now YOU can master those masterlocks!'
-    - "|icon:info| it's a good skill to learn! it really opens doors for you!"
+    - icon:cute| tiny tools for unlockin' things!
+    - icon:scallywag|fortunately, me twig-like paws are perfect for this sorta work, but these are good for me crew!
+    - icon:cute| little helpers for gettin' into treasure chests!
+    - icon:info| You can pick your friends, and you can pick your lock, but you can't pick your friend's lock. |icon:question| errrr... i guess you can, but please don't pick my locks!
+    - icon:info| Take your pick!
+    - icon:info| now YOU can master those masterlocks!
+    - icon:info| it's a good skill to learn! it really opens doors for you!
   item_dremel_4300_kit_33:
-    - '|icon:info| thingamajig... |icon:question|with an on button... *CLICK* |icon:freaking|speed:3.5| OH DEAR!'
-    - "|icon:info| it's a spinny thing... |icon:question|but I forgot what you collet"
+    - icon:info| thingamajig... |icon:question|with an on button... *CLICK* |icon:freaking|speed:3.5| OH DEAR!
+    - icon:info| it's a spinny thing... |icon:question|but I forgot what you collet!
   item_raspberry_pi_5_45:
-    - '|icon:cute| tiny computer that can do BIG things!'
-    - '|icon:info| like myself, |icon:scallywag|small but strong!'
+    - icon:cute| tiny computer that can do BIG things!
+    - icon:info| like myself, |icon:scallywag|small but strong!
   item_framework_laptop_16__52:
     - icon:freaking|The dread ship Theseus!
     - icon:scallywag|Swap out the parts, just like me and my peg leg!

src/app/harbor/shop/shop-item-component.js

@@ -142,13 +142,13 @@ export const ShopItemComponent = ({
                   if (itemSpecificInteraction.startsWith('transcript.')) {
                     console.log('transcript not found', itemSpecificInteraction)
                     interaction +=
-                      ' ' +
+                      ' |' +
                       transcript('item.generic', {
                         name: item.name,
                         price: localPrice,
                       })
                   } else {
-                    interaction += ' ' + itemSpecificInteraction
+                    interaction += ' |' + itemSpecificInteraction
                   }
                   emitYap(interaction)
                 }}

src/app/harbor/shop/shopkeeper.js

@@ -6,6 +6,7 @@ import { shopIcons, bound } from '../../../../lib/flavor'
 
 import { transcript } from '../../../../lib/transcript'
 import { useEventEmitter } from '../../../../lib/useEventEmitter'
+import { Button } from '@/components/ui/button'
 
 const bellSoundUrls = [
   'https://cloud-dx9y4rk8f-hack-club-bot.vercel.app/0ding-2-90199_audio.mp4',
@@ -20,11 +21,13 @@ export const ShopkeeperComponent = ({ balance, cursed }) => {
   const [atCounter, setAtCounter] = useState(false)
   const [bellIndex, setBellIndex] = useState(0)
   const [bellClickCount, setBellClickCount] = useState(0)
+  const [selfClickCount, setSelfClickCount] = useState(0)
   const [continuousBellClicks, setContinuousBellClicks] = useState(0)
   const [shopkeeperMsg, setShopkeeperMsg] = useState('')
   const [shopkeeperImg, setShopkeeperImg] = useState(shopIcons.scallywag)
   const [interactionBusy, setInteractionBusy] = useState(false)
   const { on, off } = useEventEmitter()
+  const [buyButton, setBuyButton] = useState()
 
   useEffect(() => {
     const handleEvent = (event) => {
@@ -53,6 +56,7 @@ export const ShopkeeperComponent = ({ balance, cursed }) => {
     }
     setInteractionBusy(true)
     setShopkeeperMsg('')
+    setBuyButton()
     let speed
     console.log('handling interaction', interaction)
     for (const action of interaction.split('|')) {
@@ -72,6 +76,12 @@ export const ShopkeeperComponent = ({ balance, cursed }) => {
             speed = undefined
           }
           break
+        case 'buy':
+          if (arg[0]) {
+            await setBuyButton(arg[0])
+          } else {
+            await setBuyButton()
+          }
         case 'pause':
           if (arg[0]) {
             await new Promise((resolve) =>
@@ -101,8 +111,8 @@ export const ShopkeeperComponent = ({ balance, cursed }) => {
 
   const handleServiceBellClick = async () => {
     setBellIndex(Math.floor(Math.random() * bellSounds.length))
-    setBellClickCount(bellClickCount + 1)
-    setContinuousBellClicks(continuousBellClicks + 1)
+    setBellClickCount((prev) => prev + 1)
+    setContinuousBellClicks((prev) => prev + 1)
     bellSounds[bellIndex].play()
     setAtCounter(true)
     // await new Promise(r => setTimeout(r, 1000))
@@ -132,15 +142,24 @@ export const ShopkeeperComponent = ({ balance, cursed }) => {
     } else if (continuousBellClicks > 1) {
       await handleInteraction(transcript('help'))
     } else {
-      await handleInteraction(
-        transcript('greetings') +
-          " just click on anything you're interested in!",
-      )
+      if (bellClickCount == 0) {
+        await handleInteraction(
+          transcript('greetings') +
+            " just click on anything you're interested in!",
+        )
+      } else {
+        await handleInteraction(transcript('greetings'))
+      }
     }
   }
 
   const handleSelfClick = async () => {
-    await handleInteraction(transcript('selfClick'))
+    setSelfClickCount((prev) => prev + 1)
+    if (selfClickCount == 2) {
+      await handleInteraction(transcript('selfClickBuy'))
+    } else {
+      await handleInteraction(transcript('selfClick'))
+    }
   }
 
   const containerStyles = {
@@ -221,10 +240,26 @@ export const ShopkeeperComponent = ({ balance, cursed }) => {
                 }
               />
             </div>
-            <div id="shopkeeper-msg">{shopkeeperMsg}</div>
+            <div id="shopkeeper-msg">
+              {shopkeeperMsg}
+              {buyButton && <BuyButton itemId={buyButton} />}
+            </div>
           </div>
         </div>
       )}
     </>
   )
 }
+
+const BuyButton = ({ itemId }) => {
+  return (
+    <form
+      action={`/api/buy/${itemId}`}
+      className="w-full text-center animate-pulse"
+    >
+      <Button className="bg-black hover:bg-gray-800 text-white font-semibold py-2 px-4 m-2 rounded transition-colors duration-200 text-3xl enchanted">
+        Buy
+      </Button>
+    </form>
+  )
+}

src/components/sound-button.js

@@ -8,6 +8,8 @@ import { transcript } from '../../lib/transcript'
 const musicSamples = [
   'https://cloud-dx9y4rk8f-hack-club-bot.vercel.app/5drunk_raccoon_audio.mp4',
   'https://cloud-hrqk6nzbv-hack-club-bot.vercel.app/0old_runescape_soundtrack____sea_shanty2__bjhf0l7pfo8__audio.mp4',
+  'https://cloud-lz0nnkmfw-hack-club-bot.vercel.app/0final_final_high_seas_audio.mp4', // written by @Rrr on slack!
+  'https://cloud-7hoafdd1y-hack-club-bot.vercel.app/0two_hornpipes__tortuga___unwk1x_tgsc__audio.mp4',
 ]
 
 const trumpetUrl =