remove breaking pages

This commit is contained in:
Belle 2024-10-21 16:11:37 -04:00
parent ee1e8d7e85
commit 153cd6fb40
2 changed files with 1886 additions and 1953 deletions

File diff suppressed because it is too large Load diff

View file

@ -1,11 +1,11 @@
import ShopComponent from '../../components/arcade/shop-component' // import ShopComponent from '../../components/arcade/shop-component'
import { shopParts } from '../api/arcade/shop' // import { shopParts } from '../api/arcade/shop'
import { Link, Text, Button, Flex, Box } from 'theme-ui' // import { Link, Text, Button, Flex, Box } from 'theme-ui'
import { Balancer } from 'react-wrap-balancer' // import { Balancer } from 'react-wrap-balancer'
import Meta from '@hackclub/meta' import Meta from '@hackclub/meta'
import Head from 'next/head' import Head from 'next/head'
import { useState, useEffect, useRef } from 'react' // import { useState, useEffect, useRef } from 'react'
import Flag from '../../components/flag' // import Flag from '../../components/flag'
/** @jsxImportSource theme-ui */ /** @jsxImportSource theme-ui */
@ -26,56 +26,56 @@ body {
` `
export default function Shop({ export default function Shop() {
availableItems, // // availableItems,
userAirtableID = null, // userAirtableID = null,
hoursBalance = 0 // hoursBalance = 0
}) { // }) {
// const [t, setT] = useState('') // // const [t, setT] = useState('')
const [items, setItems] = useState(availableItems) // const [items, setItems] = useState(availableItems)
// const [lowerBound, setLowerBound] = useState(0) // // const [lowerBound, setLowerBound] = useState(0)
// const [upperBound, setUpperBound] = useState(1000) // // const [upperBound, setUpperBound] = useState(1000)
const [cat, setCat] = useState('all') // const [cat, setCat] = useState('all')
const aItems = availableItems.filter( // const aItems = availableItems.filter(
items => items['Cost Hours'] > 0 && items['Cost Hours'] <= 10 // items => items['Cost Hours'] > 0 && items['Cost Hours'] <= 10
) // )
const bItems = availableItems.filter( // const bItems = availableItems.filter(
items => items['Cost Hours'] > 10 && items['Cost Hours'] <= 50 // items => items['Cost Hours'] > 10 && items['Cost Hours'] <= 50
) // )
const cItems = availableItems.filter( // const cItems = availableItems.filter(
items => items['Cost Hours'] > 50 && items['Cost Hours'] <= 100 // items => items['Cost Hours'] > 50 && items['Cost Hours'] <= 100
) // )
const dItems = availableItems.filter( // const dItems = availableItems.filter(
items => items['Cost Hours'] > 100 && items['Cost Hours'] <= 500 // items => items['Cost Hours'] > 100 && items['Cost Hours'] <= 500
) // )
useEffect(() => { // useEffect(() => {
if (cat == 'all') { // if (cat == 'all') {
setItems(availableItems) // setItems(availableItems)
} else { // } else {
let i = availableItems.filter(items => items['Category'].includes(cat)) // let i = availableItems.filter(items => items['Category'].includes(cat))
setItems(i) // setItems(i)
} // }
}, [cat]) // }, [cat])
// Spotlight effect // // Spotlight effect
const spotlightRef = useRef() // const spotlightRef = useRef()
useEffect(() => { // useEffect(() => {
const handler = event => { // const handler = event => {
var rect = document.getElementById('spotlight').getBoundingClientRect() // var rect = document.getElementById('spotlight').getBoundingClientRect()
var x = event.clientX - rect.left //x position within the element. // var x = event.clientX - rect.left //x position within the element.
var y = event.clientY - rect.top //y position within the element. // var y = event.clientY - rect.top //y position within the element.
spotlightRef.current.style.background = `radial-gradient( // spotlightRef.current.style.background = `radial-gradient(
circle at ${x}px ${y}px, // circle at ${x}px ${y}px,
rgba(132, 146, 166, 0) 20px, // rgba(132, 146, 166, 0) 20px,
rgba(250, 239, 214, 0.9) 120px // rgba(250, 239, 214, 0.9) 120px
)` // )`
} // }
window.addEventListener('mousemove', handler) // window.addEventListener('mousemove', handler)
return () => window.removeEventListener('mousemove', handler) // return () => window.removeEventListener('mousemove', handler)
}, []) // }, [])
return ( return (
<> <>
<Meta <Meta
@ -84,7 +84,7 @@ export default function Shop({
description="Check out the prizes at the Arcade Shop!" description="Check out the prizes at the Arcade Shop!"
image="https://cloud-luaw423i2-hack-club-bot.vercel.app/0frame_33__1_.png" image="https://cloud-luaw423i2-hack-club-bot.vercel.app/0frame_33__1_.png"
/> />
<style> {/* <style>
{` {`
._title-container { ._title-container {
width: 100%; width: 100%;
@ -324,33 +324,33 @@ export default function Shop({
<ShopComponent availableItems={items} pub="True"/> <ShopComponent availableItems={items} pub="True"/>
)} )}
</Box> </Box>
</Box> </Box> */}
</> </>
) )
} }
export async function getStaticProps() { // export async function getStaticProps() {
const props = {} // const props = {}
await Promise.all([ // await Promise.all([
shopParts().then(items => { // shopParts().then(items => {
const availableItems = items.filter((item) => item['Enabled']).map(item => ({ // const availableItems = items.filter((item) => item['Enabled']).map(item => ({
'Name': item['Name'] || null, // 'Name': item['Name'] || null,
'Small Name': item['Small Name'] || null, // 'Small Name': item['Small Name'] || null,
'Full Name': item['Full Name'] || null, // 'Full Name': item['Full Name'] || null,
'Description': item['Description'] || null, // 'Description': item['Description'] || null,
'Fulfillment Description': item['Fulfillment Description'] || null, // 'Fulfillment Description': item['Fulfillment Description'] || null,
'Cost Hours': item['Cost Hours'] || 0, // 'Cost Hours': item['Cost Hours'] || 0,
id: item.id, // id: item.id,
'Image URL': item['Image URL'] || null, // 'Image URL': item['Image URL'] || null,
'Max Order Quantity': item['Max Order Quantity'] || 1, // 'Max Order Quantity': item['Max Order Quantity'] || 1,
Stock: item['Stock'] >= 0 ? item['Stock'] : null, // Stock: item['Stock'] >= 0 ? item['Stock'] : null,
Category: item['Category'] || '' // Category: item['Category'] || ''
})) // }))
props.availableItems = availableItems // props.availableItems = availableItems
}) // })
]) // ])
return { props, revalidate: 10 } // return { props, revalidate: 10 }
} // }