shop

2026-04-19 19:45:07 +00:00 · 2024-07-08 23:05:12 -04:00 · 2024-07-08 23:05:12 -04:00 · 44c750c88c
commit 44c750c88c
parent cfabeaa5dc
3 changed files with 192 additions and 50 deletions
--- a/components/arcade/prizes.js
+++ b/components/arcade/prizes.js
@ -2,6 +2,8 @@ import React from 'react'
 import { Button, Text, Flex, Close, Divider } from 'theme-ui'
 import Balancer from 'react-wrap-balancer'
 import Quantity from './quantity'
+import { tr } from 'date-fns/locale'
+import { useState, useEffect } from 'react'
 /** @jsxImportSource theme-ui */
 const Prizes = ({
  img,
@ -12,8 +14,6 @@ const Prizes = ({
  name,
  smallName,
  cost,
-  polaroidRotation,
-  ticketRotation,
  link = null,
  quantity,
  onQuantityChange,
@ -33,16 +33,23 @@ const Prizes = ({

  const parsedFullName = fullName?.replace(' ', '-')

+  const [pRotate, setPRotate] = useState(0)
+  const [tRotate, setTRotate] = useState(0)
+
+  useEffect(() => {
+    setPRotate(-1 + Math.random() * 9) * (Math.random() > 0.5 ? 1 : -3)
+    setTRotate(5 + Math.random() * 14) * (Math.random() > 0.5 ? 1 : -1)
+  }, []); 
  return (
    <Flex
      sx={{
-        background: '#09AFB4',
+        background: cost >= 100 ? '#1A696B' : cost >= 50 ? '#2B8184' : cost >=10 ? '#09AFB4' : '#28CCD1',
        borderRadius: '10px',
        flexDirection: 'column',
        justifyContent: 'space-between',
        padding: '20px',
        position: 'relative',
-        transform: `rotate(${polaroidRotation}deg)`,
+        transform: `rotate(${pRotate}deg)`,
        transitionDuration: '0.5s',
        '&:hover': {
          transform: 'scale(1.1)'
@ -75,7 +82,7 @@ const Prizes = ({
              top: '-22px',
              left: '-40px',
              zIndex: 1,
-              transform: `rotate(${ticketRotation}deg)`
+              transform: `rotate(-${tRotate}deg) scale(0.8)`
            }}
            variant="headline"
            className="gaegu"
@ -156,12 +163,13 @@ const Prizes = ({
          position: 'absolute',
          top: '-10px',
          right: '-12px',
-          transform: `rotate(${ticketRotation}deg)`
+          transform: `rotate(${tRotate}deg)`,
+          zIndex: 3
        }}
        variant="headline"
        className="gaegu"
      >
-        {cost} {link ? '🎟️' : cost == 1 ? 'ticket' : 'tickets'}
+        {cost} {link ? '🎟️' : cost == 1 ? '🎟️' : '🎟️'}
      </Text>
      <Text
        variant="headline"
@ -261,7 +269,7 @@ const Prizes = ({
            position: 'absolute',
            top: '40px',
            right: '12px',
-            transform: `rotate(${ticketRotation}deg)`
+            transform: `rotate(${tRotate}deg)`
          }}
          variant="headline"
          className="gaegu"
--- a/components/arcade/shop-component.js
+++ b/components/arcade/shop-component.js
@ -31,8 +31,6 @@ export default function ShopComponent({
 }) {
  // State to manage quantity for each item
  const [quantities, setQuantities] = useState({});
-  const [pRotate, setPRotate] = useState(0)
-  const [tRotate, setTRotate] = useState(0)

  // Function to update quantity for an item
  const handleQuantityChange = (itemID, quantity) => {
@ -45,10 +43,6 @@ export default function ShopComponent({
  }

  const canPurchaseItems = userAirtableID !== null;
-  useEffect(() => {
-    setPRotate(2 + Math.random() * 4) * (Math.random() > 0.5 ? 1 : -1)
-    setTRotate(5 + Math.random() * 14) * (Math.random() > 0.5 ? 1 : -1)
-  }, []); 

  return (
    <>
@ -91,8 +85,6 @@ export default function ShopComponent({
              quantity={item['Max Order Quantity']}
              fulfillmentDescription={item['Fulfillment Description']}
              fullName={item['Full Name']}
-              polaroidRotation={pRotate}
-              ticketRotation={tRotate}
              link={canPurchaseItems ? buyLink(item.id) : null}
              key={item.id}
              id={item.id}
--- a/pages/arcade/shop.js
+++ b/pages/arcade/shop.js
@ -1,9 +1,10 @@
-import ShopComponent from "../../components/arcade/shop-component"
-import { shopParts } from "../api/arcade/shop"
-import { Link, Text } from 'theme-ui'
-import { Balancer } from "react-wrap-balancer"
+import ShopComponent from '../../components/arcade/shop-component'
+import { shopParts } from '../api/arcade/shop'
+import { Link, Text, Button, Flex, Box } from 'theme-ui'
+import { Balancer } from 'react-wrap-balancer'
 import Meta from '@hackclub/meta'
 import Head from 'next/head'
+import { useState, useEffect, useRef } from 'react'

 /** @jsxImportSource theme-ui */

@ -24,8 +25,42 @@ body {

 `

-export default function Shop({ availableItems, userAirtableID = null, hoursBalance = 0 }) {
+export default function Shop({
+  availableItems,
+  userAirtableID = null,
+  hoursBalance = 0
+}) {
+  // const [t, setT] = useState('')
+  const [items, setItems] = useState(availableItems)
+  const [lowerBound, setLowerBound] = useState(0)
+  const [upperBound, setUpperBound] = useState(1000)

+  useEffect(() => {
+    let i = availableItems.filter(
+      items =>
+        items['Cost Hours'] >= lowerBound && items['Cost Hours'] <= upperBound
+    )
+    console.log(i)
+    setItems(i)
+  }, [lowerBound, upperBound])
+
+  // Spotlight effect
+  const spotlightRef = useRef()
+  useEffect(() => {
+    const handler = event => {
+      var rect = document.getElementById('spotlight').getBoundingClientRect()
+      var x = event.clientX - rect.left //x position within the element.
+      var y = event.clientY - rect.top //y position within the element.
+
+      spotlightRef.current.style.background = `radial-gradient(
+          circle at ${x}px ${y}px,
+          rgba(132, 146, 166, 0) 10px,
+          rgba(250, 239, 214, 0.9) 80px
+        )`
+    }
+    window.addEventListener('mousemove', handler)
+    return () => window.removeEventListener('mousemove', handler)
+  }, [])
  return (
    <>
      <Meta
@ -41,48 +76,155 @@ export default function Shop({ availableItems, userAirtableID = null, hoursBalan
        }
        `}
      </style>
-      <Balancer className="_title-container">
-        <h1
+      <Box
+        id="spotlight"
+        as="section"
+        sx={{
+          backgroundImage: `
+              linear-gradient(rgba(250, 239, 214, 0.7), rgba(250, 239, 214, 0.7)),
+              url('https://icons.hackclub.com/api/icons/0xD8A52D/glyph:rep.svg')
+            `,
+          backgroundSize: '40px 40px',
+          backgroundRepeat: 'repeat',
+          position: 'relative'
+        }}
+      >
+        <Box
+          ref={spotlightRef}
          sx={{
-            textAlign: 'center',
-            fontSize: 5,
-            color: '#FF8C37',
-            my: 0,
-            pt: 5,
-            display: 'block',
-            width: '100%'
+            position: 'absolute',
+            zIndex: 2,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            bg: 'snow',
+            pointerEvents: 'none'
          }}
-          className="slackey"
+        />
+        <Box
+          sx={{
+            position: 'relative',
+            width: '90vw',
+            maxWidth: 'layout',
+            margin: 'auto',
+            zIndex: 5
+          }}
+          py={[4, 4, 5]}
        >
-          Welcome to the shop
-        </h1>
-      </Balancer>
+          <Balancer className="_title-container">
+            <h1
+              sx={{
+                textAlign: 'center',
+                fontSize: 5,
+                color: '#FF8C37',
+                my: 0,
+                pt: 5,
+                display: 'block',
+                width: '100%'
+              }}
+              className="slackey"
+            >
+              Welcome to the shop
+            </h1>
+            <Text
+              sx={{ display: 'block', textAlign: 'center', color: '#35290F' }}
+              className="gaegu"
+              variant="subtitle"
+            >
+              Like what you see? Check out{' '}
+              <Link href="/arcade">the Hack Club Arcade!</Link>
+            </Text>
+            <Text
+              sx={{
+                display: 'block',
+                textAlign: 'center',
+                color: '#35290F',
+                mb: 4
+              }}
+              className="gaegu"
+              variant="subtitle"
+            >
+              1 🎟️ = 1 hour spent building
+            </Text>
+          </Balancer>
+          <Flex sx={{ justifyContent: 'center', gap: '10px' }}>
+            <Button
+              sx={{ bg: '#28CCD1' }}
+              onClick={() => {
+                setLowerBound(1)
+                setUpperBound(9)
+              }}
+            >
+              1-9 🎟️
+            </Button>{' '}
+            <Button
+              sx={{ bg: '#09AFB4' }}
+              onClick={() => {
+                setLowerBound(10)
+                setUpperBound(49)
+              }}
+            >
+              10-49 🎟️
+            </Button>
+            <Button
+              sx={{ bg: '#2B8184' }}
+              onClick={() => {
+                setLowerBound(50)
+                setUpperBound(99)
+              }}
+            >
+              50-99 🎟️
+            </Button>
+            <Button
+              sx={{ bg: '#1A696B' }}
+              onClick={() => {
+                setLowerBound(100)
+                setUpperBound(1000)
+              }}
+            >
+              100+ 🎟️
+            </Button>
+            <Button
+              variant="outline"
+              sx={{ border: '#09AFB4 3px solid', color: '#09AFB4' }}
+              onClick={() => {
+                setLowerBound(0)
+                setUpperBound(1000)
+              }}
+            >
+              All
+            </Button>
+          </Flex>

-      <Text sx={{ display: 'block', textAlign: 'center', color: '#35290F' }} className='gaegu' variant='subtitle' >Like what you see? Check out <Link href="/arcade">the Hack Club Arcade!</Link></Text>
-      <ShopComponent availableItems={availableItems} />
+          <ShopComponent availableItems={items} />
+        </Box>
+      </Box>
    </>
  )
 }

 export async function getStaticProps() {
-  const props = {};
+  const props = {}

  await Promise.all([
    shopParts().then(items => {
-      const availableItems = items.filter((item) => item['Enabled']).map(item => ({
-        'Name': item['Name'] || null,
-        'Small Name': item['Small Name'] || null,
-        'Full Name': item['Full Name'] || null,
-        'Description': item['Description'] || null,
-        'Fulfillment Description': item['Fulfillment Description'] || null,
-        'Cost Hours': item['Cost Hours'] || 0,
-        id: item.id,
-        'Image URL': item['Image URL'] || null,
-        'Max Order Quantity': item['Max Order Quantity'] || 1,
-        Stock: item['Stock'] || null
-      }))
+      const availableItems = items
+        .filter(item => item['Enabled'])
+        .map(item => ({
+          Name: item['Name'] || null,
+          'Small Name': item['Small Name'] || null,
+          'Full Name': item['Full Name'] || null,
+          Description: item['Description'] || null,
+          'Fulfillment Description': item['Fulfillment Description'] || null,
+          'Cost Hours': item['Cost Hours'] || 0,
+          id: item.id,
+          'Image URL': item['Image URL'] || null,
+          'Max Order Quantity': item['Max Order Quantity'] || 1,
+          Stock: item['Stock'] || null
+        }))
      props.availableItems = availableItems
-    }),
+    })
  ])

  return { props, revalidate: 10 }