System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 19:45:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style

Browse source
This commit is contained in:
belle 2024-06-16 18:18:57 -04:00
parent 07010143b8
commit 376e48a47b
3 changed files with 176 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
components/arcade/prizes.js Normal file
View file

@ -0,0 +1,74 @@
import React, { useState, useRef, useEffect } from 'react'
import { Box, Button, Text, Flex, Grid, Card, Link } from 'theme-ui'
import Balancer from 'react-wrap-balancer'
/** @jsxImportSource theme-ui */
const Prizes = ({
img,
text,
subtext,
cost,
polaroidRotation,
ticketRotation,
link,
...props
}) => {
return (
<Link href={link ? link : ""} target="_blank" sx={{ textDecoration: 'none' }}>
<Flex
sx={{
background: '#09AFB4',
borderRadius: '10px',
flexDirection: 'column',
padding: '20px',
position: 'relative',
transform: `rotate(${polaroidRotation}deg)`,
transitionDuration: '0.5s',
'&:hover': {
transform: 'scale(1.1)'
}
}}
{...props}
>
<Flex
sx={{
background: '#FFEEC6',
height: '250px',
justifyContent: 'center',
alignItems: 'center'
}}
>
<img src={img} sx={{ width: '100%', height: 'auto', maxWidth: '300px' }} />
</Flex>
<Text className="slackey" variant="headline" sx={{ color: '#FFEEC6' }}>
{text}
</Text>
<Text className="" variant="subtitle" sx={{ color: '#FFEEC6' }}>
{text}
</Text>
<Balancer>
<Text variant="caption" sx={{ color: '#FFEEC6' }}>
{subtext}
</Text>
</Balancer>
<Text
sx={{
background: '#FF8C37',
px: '20px',
color: '#FFEEC6',
position: 'absolute',
top: '-10px',
right: '-12px',
transform: `rotate(${ticketRotation}deg)`
}}
variant="headline"
className="gaegu"
>
{cost} {cost == 1 ? 'ticket' : 'tickets'}
</Text>
</Flex>
</Link>
)
}
export default Prizes

85
components/arcade/shop-component.js
View file

@ -1,3 +1,27 @@
import { Image, Link, Text } from 'theme-ui'
// import { inventoryParts } from '../../api/arcade/inventory'
import { useRouter } from 'next/router'
import { Box, Grid } from 'theme-ui'
import Prizes from './prizes'
/** @jsxImportSource theme-ui */
const styled = `
@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap');
.slackey {
font-family: "Slackey", sans-serif;
}
.gaegu {
font-family: "Gaegu", sans-serif;
}
body {
background-color: #FAEFD6;
}
`
export default function ShopComponent({ availableItems, userAirtableID = null, hoursBalance = null }) {
function buyLink(itemID, quantity = 1) {
return `https://forms.hackclub.com/arcade-order?user_id=${userAirtableID}&item_id=${itemID}&quantity=${quantity}`
@ -7,23 +31,56 @@ export default function ShopComponent({ availableItems, userAirtableID = null, h
return (
<>
<h1>Shop</h1>
<span>for {userAirtableID}</span>
<h1
sx={{
textAlign: 'center',
fontSize: 5,
color: '#FF8C37',
mt: 0,
pt: 5
}}
className="slackey"
>
Shop
</h1>
<Text sx={{ display: 'block', textAlign: 'center', color: '#35290F' }} className='gaegu' variant='subtitle'>for {userAirtableID}</Text>
{hoursBalance !== null && (
<span>You currently have {hoursBalance} 🎟️ tickets!</span>
<span>You currently have {hoursBalance} 🎟️ tickets! Click on item to buy!</span>
)}
<ul>
{availableItems.sort((a,b) => a['Cost Hours'] - b['Cost Hours']).map(item => (
<li key={item.id}>
{includeBuyLink && (
<a href={buyLink(item.id)} target="_blank">Buy</a>
)}
<h2>{item['Name']}</h2>
<p>{item['Description']}</p>
<p>{item['Cost Hours']} 🎟️</p>
</li>
<Grid
sx={{
pt: '50px',
gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
gap: '50px',
maxWidth: '1000px',
width: '80vw',
margin: 'auto'
}}
>
{availableItems.sort((a,b) => a['Cost Hours'] - b['Cost Hours']).map((item, i) => (
<Prizes
img={part.fields['Image URL']}
text={item['Name']}
subtext={item['Description']}
cost={part.fields['Cost Hours']}
polaroidRotation={(2 + Math.random() * 4) * (i % 2 === 0 ? 1 : -1)}
ticketRotation={
(12 + Math.random() * 14) * (Math.random() > 0.5 ? 1 : -1)
}
link={buyLink(item.id)}
key={part.id}
/>
// <li key={item.id}>
// {includeBuyLink && (
// <a href={buyLink(item.id)} target="_blank">Buy</a>
// )}
// <h2>{item['Name']}</h2>
// <p>{item['Description']}</p>
// <p>{item['Cost Hours']} 🎟️</p>
// </li>
))}
</ul>
</Grid>
</>
)
}

33
pages/arcade/[userAirtableID]/shop.js
View file

@ -1,14 +1,43 @@
import ShopComponent from "../../../components/arcade/shop-component"
import { getArcadeUser } from "../../api/arcade/[userAirtableID]"
import { shopParts } from "../../api/arcade/shop"
import { Image, Link, Text } from 'theme-ui'
/** @jsxImportSource theme-ui */
const styled = `
@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap');
.slackey {
font-family: "Slackey", sans-serif;
}
.gaegu {
font-family: "Gaegu", sans-serif;
}
body {
background-color: #FAEFD6;
}
`
export default function Shop({ availableItems, userAirtableID = null, hoursBalance = 0 }) {
return (
<>
<h1>Welcome to the shop!</h1>
<em>Your current balance is {Math.floor(hoursBalance)} 🎟️</em>
<h1
sx={{
textAlign: 'center',
fontSize: 5,
color: '#FF8C37',
mt: 0,
pt: 5
}}
className="slackey"
>
Welcome to the shop
</h1>
<Text sx={{ display: 'block', textAlign: 'center', color: '#35290F' }} className='gaegu' variant='subtitle' >Your current balance is {Math.floor(hoursBalance)} 🎟️</Text>
<ShopComponent availableItems={availableItems} userAirtableID={userAirtableID} />
</>
)