Merge pull request #787 from hackclub/add-cursed-blessed-status

Display the blessed/cursed status for users

src/app/harbor/battles/battles.tsx

@@ -9,12 +9,17 @@ import Image from 'next/image'
 import ReactMarkdown, { Components } from 'react-markdown'
 
 import { LoadingSpinner } from '../../../components/ui/loading_spinner.js'
-import { getVotesRemainingForNextPendingShip } from '@/app/utils/airtable'
+import {
+  getVotesRemainingForNextPendingShip,
+  safePerson,
+} from '@/app/utils/airtable'
 import useLocalStorageState from '../../../../lib/useLocalStorageState'
 import { useToast } from '@/hooks/use-toast'
 import { HsSession } from '@/app/utils/auth'
 
 import SpeechToText from '@/components/speech-to-text'
+import Blessed from './blessed'
+import Cursed from './cursed'
 
 interface Matchup {
   project1: Ships
@@ -217,6 +222,8 @@ export default function Matchups({ session }: { session: HsSession }) {
   const [readmeContent, setReadmeContent] = useState('')
   const [isReadmeView, setIsReadmeView] = useState(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const [cursed, setCursed] = useState(false)
+  const [blessed, setBlessed] = useState(false)
 
   // const turnstileRef = useRef(null);
   // const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
@@ -228,6 +235,13 @@ export default function Matchups({ session }: { session: HsSession }) {
 
   const { toast } = useToast()
 
+  useEffect(() => {
+    safePerson().then((sp) => {
+      setCursed(sp.cursed)
+      setBlessed(sp.blessed)
+    })
+  })
+
   useEffect(() => {
     setFewerThanTenWords(reason.trim().split(' ').length < 10)
   }, [reason])
@@ -434,6 +448,9 @@ export default function Matchups({ session }: { session: HsSession }) {
             to skip!)
           </p>
 
+          {blessed && <Blessed />}
+          {cursed && <Cursed />}
+
           {voteBalance > 0 && (
             <div className="flex justify-center items-center space-x-4">
               {voteBalance} more vote{voteBalance == 1 ? '' : 's'} until your

src/app/harbor/battles/blessed.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useState } from 'react'
+
+import Pill from '@/components/ui/pill'
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '@/components/ui/popover'
+import Icon from '@hackclub/icons'
+
+export default function Blessed() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        asChild
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+      >
+        <div className="text-center mb-5">
+          <Pill msg="🏴‍☠️ You have the pirate's blessing" color="yellow" />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="text-sm">
+        <div>
+          <p className="inline-flex text-base">What's a blessing?</p>
+          <ul className="flex flex-col gap-1 mt-2">
+            <li className="flex gap-1">
+              <Icon
+                glyph="thumbsup"
+                size={20}
+                className="inline flex-shrink-0"
+              />{' '}
+              Be thoughtful with your voting.
+            </li>
+            <li className="flex gap-1">
+              <Icon
+                glyph="message-new"
+                size={20}
+                className="inline flex-shrink-0"
+              />{' '}
+              Write good descriptions.
+            </li>
+            <li className="flex gap-1">
+              <Icon glyph="friend" size={20} className="inline flex-shrink-0" />{' '}
+              Keep voting regularly.
+            </li>
+            <li className="flex gap-1">
+              <img
+                sizes="20px"
+                src="doubloon.svg"
+                alt="doubloons"
+                className="w-4 sm:w-5 h-4 sm:h-5"
+              />{' '}
+              While you keep your voting streak, you'll earn 20% more doubloons!
+            </li>
+          </ul>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

src/app/harbor/battles/cursed.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useState } from 'react'
+
+import Pill from '@/components/ui/pill'
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '@/components/ui/popover'
+import Icon from '@hackclub/icons'
+
+export default function Cursed() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        asChild
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+      >
+        <div className="text-center mb-5">
+          <Pill msg="️☠️ You have the pirate's curse" color="red" />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="text-sm">
+        <div>
+          <p className="inline-flex text-base">Your votes have been flagged</p>
+          <ul className="flex flex-col gap-1 mt-2">
+            <li className="flex gap-1">
+              <Icon
+                glyph="thumbsdown"
+                size={20}
+                className="inline flex-shrink-0"
+              />{' '}
+              Be more thoughtful with your voting.
+            </li>
+            <li className="flex gap-1">
+              <Icon glyph="meh" size={20} className="inline flex-shrink-0" />{' '}
+              Write better descriptions for your choices.
+            </li>
+            <li className="flex gap-1">
+              <img
+                sizes="20px"
+                src="doubloon.svg"
+                alt="doubloons"
+                className="w-4 sm:w-5 h-4 sm:h-5"
+              />{' '}
+              Until you lift the curse, your payouts are halved.
+            </li>
+          </ul>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

src/app/utils/airtable.ts

@@ -123,6 +123,8 @@ export interface SafePerson {
   votesRemainingForNextPendingShip: number
   emailSubmittedOnMobile: boolean
   preexistingUser: boolean
+  cursed: boolean
+  blessed: boolean
 }
 
 // Good method
@@ -140,6 +142,8 @@ export async function safePerson(): Promise<SafePerson> {
   )
   const emailSubmittedOnMobile = !!record.fields.email_submitted_on_mobile
   const preexistingUser = !!record.fields.preexisting_user
+  const cursed = record.fields.curse_blessing_status === 'cursed'
+  const blessed = record.fields.curse_blessing_status === 'blessed'
 
   return {
     id,
@@ -149,5 +153,7 @@ export async function safePerson(): Promise<SafePerson> {
     votesRemainingForNextPendingShip,
     emailSubmittedOnMobile,
     preexistingUser,
+    cursed,
+    blessed,
   }
 }