This commit is contained in:
Belle 2024-10-01 10:56:38 -04:00
parent 75f5d6c84e
commit ffe795201d
17 changed files with 198 additions and 141 deletions

View file

@ -1,8 +1,9 @@
import { Text } from 'theme-ui'
import { Balancer } from 'react-wrap-balancer'
import Fade from 'react-reveal/Fade'
import Zoom from 'react-reveal/Zoom'
import { useInView } from 'react-intersection-observer'
import { useEffect } from 'react'
import { useEffect, useState } from 'react'
/** @jsxImportSource theme-ui */
@ -12,15 +13,24 @@ export default function Preview({
imgAlt,
isSmallScreen,
rotation,
sticker1,
sticker2,
// position,
// ref,
// opacity,
// inView,
elementRef
}) {
const { ref, inView } = useInView({ threshold: 0.95 })
const { ref, inView } = useInView({ threshold: 0.9 })
const [position, setPosition] = useState([])
useEffect(() => {
console.log(inView)
setPosition([
Math.floor(Math.random() * 12) + 5,
Math.floor(Math.random() * 15) + 8,
Math.random() * 20 + 3,
Math.random() > 0.4
])
}, [])
return (
<section
@ -36,7 +46,7 @@ export default function Preview({
alignItems: 'center',
position: 'relative',
px: '10vw',
height: ['70vh', '70vh', '100vh'],
height: ['70vh', '70vh', '100vh'],
pt: ['18vh', '20vh', '0vh']
}}
ref={ref}
@ -57,10 +67,49 @@ export default function Preview({
// )
)}
</Balancer>
{inView && (
<div
sx={{
position: 'absolute',
top: `${position[3] ? position[0] : position[0] + 60}vh`,
left: `${position[1]}vh`,
width: '62px',
transform: `rotate(${position[2]}deg)`,
zIndex: 5,
transitionDuration: '0.52s'
}}
>
<Zoom>
<img src={sticker1} sx={{ width: '100%', filter: 'drop-shadow(2px 2px #24ffffff)' }} />
</Zoom>
</div>
)}
{inView && (
<div
sx={{ position: 'relative', display: ['block', 'block', 'none'], transition: 'opacity 0.3s ease-in-out' }}
sx={{
position: 'absolute',
bottom: `${position[3] ? position[0] : position[0] + 60}vh`,
right: `${position[1]}vh`,
width: '81px',
transform: `rotate(-${position[2]}deg)`,
zIndex: 5,
transitionDuration: '0.52s'
}}
>
<Zoom>
<img src={sticker2} sx={{ width: '100%', filter: 'drop-shadow(2px 2px #24ffffff)'}} />
</Zoom>
</div>
)}
{inView && (
<div
sx={{
position: 'relative',
display: ['block', 'block', 'none'],
transition: 'opacity 0.3s ease-in-out'
}}
>
<img
src={img}

View file

@ -4,7 +4,7 @@ import { Box, Flex, Text } from 'theme-ui'
const Project = ({img, name, projectName, country}) => {
return(
<Box sx={{backgroundColor: '#FFF7E5', borderRadius: '5px', display: 'flex', px: 2, py: 2, my: 2, mr: 3, color: '#35290F', width: '280px'}}>
<Box sx={{backgroundColor: '#FFF7E5', borderRadius: '5px', display: 'flex', px: 2, py: 2, my: 2, mr: 3, color: '#35290F', width: '280px', height: 'auto'}}>
<Box sx={{backgroundImage: `url('${img}')`, width: '50px', height: '50px', backgroundSize: 'cover', mr: 2}}></Box>
<Box>
<Text sx={{fontWeight: 'bold'}} as="p">{projectName}</Text>

View file

@ -73,7 +73,7 @@
"react-draggable": "^4.4.6",
"react-fast-marquee": "^1.6.5",
"react-horizontal-scrolling-menu": "^6.0.2",
"react-intersection-observer": "^9.13.0",
"react-intersection-observer": "^9.13.1",
"react-konami-code": "^2.3.0",
"react-leaflet": "^4.2.1",
"react-lite-youtube-embed": "^2.4.0",

View file

@ -2,6 +2,7 @@ import { useEffect, useState, useRef } from 'react'
import { Button, Heading, Text, Box, Close } from 'theme-ui'
import Icon from '@hackclub/icons'
import { Balancer } from 'react-wrap-balancer'
import { useCallback } from 'react'
import Fade from 'react-reveal/Fade'
import Project from '../../components/arcade/review/project'
import {
@ -121,13 +122,6 @@ const testData = [
user: ['Victorio'],
country: ''
},
{
id: 'rec0MCupFjvVCeCWd',
title: 'main',
imageLink: '',
user: ['Hamza Nasher-Alneam'],
country: ['United States']
},
{
id: 'rec0XmkWtdFl3GpCv',
title: 'Python Game Engine',
@ -156,14 +150,6 @@ const testData = [
user: ['Andrew Cromar'],
country: ['United States']
},
{
id: 'rec2qHD56MSG0Dx9P',
title: 'FamahWebsite',
imageLink:
'https://cloud-wrxm8g9kg-hack-club-bot.vercel.app/0ceca3e92-dab6-4b5b-b083-2c933bef86cc-image.png',
user: ['Fatuma Tahalil'],
country: ['Canada']
},
{
id: 'rec2ssaXcwgAaIeFi',
title: 'Notebook-3D-Model',
@ -187,20 +173,6 @@ const testData = [
user: ['Lorenzo'],
country: ['Italy']
},
{
id: 'rec2ypPaBeCt48OLp',
title: 'oneWay',
imageLink: 'https://cloud-9ck0cw9hs-hack-club-bot.vercel.app/0image.png',
user: ['SpeedyGo55'],
country: ''
},
{
id: 'rec31QeCiyCDqrBVX',
title: 'Roblox Game Judger',
imageLink: 'https://cloud-ry59nhxaw-hack-club-bot.vercel.app/0image.png',
user: ['Murtaza Haque'],
country: ['United States']
},
{
id: 'rec33cU3QKJB1p9AG',
title: 'Turrtv1.5-build',
@ -208,14 +180,6 @@ const testData = [
user: ['Dylan Cortegana'],
country: ['USA']
},
{
id: 'rec35mEnXJtfvGnY8',
title: 'Integrate',
imageLink:
'https://cloud-efzcmqt8h-hack-club-bot.vercel.app/0screenshot_2024-08-26_at_11.16.13___am.png',
user: ['Om Raheja'],
country: ['USA']
},
{
id: 'rec36FPt3lcSFiX87',
title: '2048_game',
@ -245,27 +209,37 @@ const details = [
{
text: 'they coded/designed as much as 61 full-time engineers for a whole year. ', //at 126581/2,080 hours
img: 'https://cloud-50k44rv2t-hack-club-bot.vercel.app/1group_111.png',
imgAlt: 'Research PCB'
imgAlt: 'Research PCB',
sticker1: '/arcade/review/stickers/computer.png',
sticker2: '/arcade/review/stickers/code.png'
},
{
text: "if you ate one banana for every hour of work, you'd eat an average person's weight in bananas 200 times", //
img: 'https://cloud-el2vr8v7u-hack-club-bot.vercel.app/0group_108__2_.png',
imgAlt: 'Mercury Searchlight Project'
imgAlt: 'Mercury Searchlight Project',
sticker1: '/arcade/review/stickers/eatBanana.png',
sticker2: '/arcade/review/stickers/banana.png'
},
{
text: "they could've walked nonstop from New York to San Francisco and back 65 times", //2,903 miles, 3 miles an hour = 968 hours
img: 'https://cloud-fkduovepp-hack-club-bot.vercel.app/0group_110.png',
imgAlt: 'PCB Lightsaber'
imgAlt: 'PCB Lightsaber',
sticker1: '/arcade/review/stickers/sf.png',
sticker2: '/arcade/review/stickers/ded.png'
},
{
text: 'they spent enough electricity to power the average home for 12.6 days', //at 100w/hour for a computer = 15M watts of energy spent
img: 'https://cloud-50k44rv2t-hack-club-bot.vercel.app/0group_109.png',
imgAlt: 'Calculator Ray Tracer'
imgAlt: 'Calculator Ray Tracer',
sticker1: '/arcade/review/stickers/power.png',
sticker2: '/arcade/review/stickers/grab.png'
},
{
text: 'if each hour spent was a mile travelled, they could get more than halfway to the moon', //2,903 miles, 3 miles an hour = 968 hours
img: 'https://cloud-o8yx5e0ru-hack-club-bot.vercel.app/0group_112__2_.png',
imgAlt: 'Terminal Website'
imgAlt: 'Terminal Website',
sticker1: '/arcade/review/stickers/cool.png',
sticker2: '/arcade/review/stickers/rocket.png'
}
]
@ -275,28 +249,24 @@ const projectVariants = {
y: '90vh',
opacity: 0
},
animate: ({ index }) => {
return {
x: 0,
y: '90vh',
opacity: 1,
transition: {
duration: 0.73,
delay: index * 3.5,
ease: 'backOut'
},
repeat: 0
animate: ({ index }) => ({
x: 0,
y: '90vh',
opacity: 1,
transition: {
duration: 0.73,
delay: index * 3.5,
ease: 'backOut'
}
},
}),
moveUp: {
x: 0,
y: '-90vh',
opacity: [1, 0, 0],
opacity: [1, 0],
transition: {
ease: 'linear',
duration: 60
},
repeat: 0
}
}
}
@ -320,21 +290,19 @@ const Review = () => {
ref: recapRef,
inView: recapInView,
entry
} = useInView({ threshold: 0 })
} = useInView({ threshold: 0.1 })
const containerRef = useRef(null)
const [animationStates, setAnimationStates] = useState(
projects.map(() => 'animate')
new Array(projects.length).fill('animate')
)
const handleAnimationComplete = index => {
const handleAnimationComplete = useCallback(index => {
setAnimationStates(prevStates =>
prevStates.map((state, i) =>
i === index && state === 'animate' ? 'moveUp' : state
)
prevStates.map((state, i) => (i === index ? 'moveUp' : state))
)
}
}, [])
useEffect(() => {
let rot = []
@ -347,30 +315,33 @@ const Review = () => {
setRotation(rot)
}, [])
const [arcaderData, setArcaderData] = useState(null)
useEffect(() => {
async function fetchArcaderData() {
const [arcaderData, setArcaderData] = useState(null)
useEffect(() => {
async function fetchArcaderData() {
try {
const response = await fetch('https://api.pixelverse.tech/chat/arcadeweb', {
method: 'GET'
})
const response = await fetch(
'https://api.pixelverse.tech/chat/arcadeweb',
{
method: 'GET'
}
)
const data = await response.json()
const randomIndex = Math.floor(Math.random() * data.length)
const randomEntry = data[randomIndex]
// Preserve line breaks in the message
const preservedMessage = randomEntry.message.replace(/\n/g, '<br>')
randomEntry.message = preservedMessage
setArcaderData(randomEntry)
} catch (error) {
console.error('Error fetching Arcader data!!!:', error)
}
}
fetchArcaderData()
}, [])
}
fetchArcaderData()
}, [])
// Spotlight effect
const spotlightRef = useRef()
@ -489,7 +460,7 @@ const Review = () => {
width: ['90vw', '90vw', '100%']
}}
>
One Summer. 10,000 students. The ultimate hackathon.
One Summer. 9,159 students. The ultimate hackathon.
</Text>
</Balancer>
</Fade>
@ -539,9 +510,15 @@ const Review = () => {
<div id="projects">
<Marquee
pauseOnHover={true}
autoFill={true}
className="h-52"
sx={{ display: ['block', 'block', 'none'] }}
// autoFill={false}
direction="up"
loop="1"
sx={{
height: '100%',
display: ['none', 'none', 'flex'],
flexDirection: 'row',
alignItems: 'flex-start',
}}
>
{projects.map((p, index) => (
<Project
@ -553,10 +530,30 @@ const Review = () => {
/>
))}
</Marquee>
<motion.div
<Marquee
pauseOnHover={true}
autoFill={true}
direction="right"
sx={{
height: '100%',
display: ['flex', 'flex', 'none'],
flexDirection: 'row',
alignItems: 'center',
}}
>
{projects.map((p, index) => (
<Project
key={index}
name={p.user[0]}
projectName={p.title}
country={p.country[0]}
img={p.imageLink}
/>
))}
</Marquee>
{/* <motion.div
initial="initial"
animate="animate"
exit="exit"
sx={{
height: '100vh',
width: '280px',
@ -567,7 +564,7 @@ const Review = () => {
{projects.map((p, index) => (
<motion.div
key={p.id}
custom={{ index, projects }}
custom={{ index }}
variants={projectVariants}
initial="initial"
animate={animationStates[index]}
@ -582,7 +579,7 @@ const Review = () => {
/>
</motion.div>
))}
</motion.div>
</motion.div> */}
</div>
</div>
<div
@ -660,7 +657,7 @@ const Review = () => {
className="slackey"
as="h1"
>
10,000
9,159
</Text>
<Text sx={{ fontSize: [3, 3, 4], mt: 0 }} as="h3">
high schoolers
@ -672,7 +669,7 @@ const Review = () => {
className="slackey"
as="h1"
>
150,000
126,241
</Text>
<Text sx={{ fontSize: [3, 3, 4], mt: 0 }} as="h3">
hours building
@ -696,7 +693,7 @@ const Review = () => {
className="slackey"
as="h1"
>
$200,000
$400,000
</Text>
<Text sx={{ fontSize: [3, 3, 4], mt: 0 }} as="h3">
in prizes
@ -716,7 +713,7 @@ const Review = () => {
>
<div sx={{ height: ['100px', '100px', '150px'] }}>
<TypeAnimation
sequence={['10,000']}
sequence={['9,159']}
speed={50}
sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
className="slackey"
@ -732,7 +729,7 @@ const Review = () => {
</div>
<div sx={{ height: ['100px', '100px', '150px'] }}>
<TypeAnimation
sequence={['', 1000, '150,000']}
sequence={['', 1000, '126,241']}
speed={50}
sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
className="slackey"
@ -748,7 +745,7 @@ const Review = () => {
</div>
<div sx={{ height: ['100px', '100px', '150px'] }}>
<TypeAnimation
sequence={['', 2000, '4,000']}
sequence={['', 2000, '23,046']}
speed={50}
sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
className="slackey"
@ -765,7 +762,7 @@ const Review = () => {
<div sx={{ height: ['100px', '100px', '150px'] }}>
<TypeAnimation
sequence={['', 3000, '$200,000']}
sequence={['', 3000, '$400,000']}
speed={50}
sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
className="slackey"
@ -838,6 +835,9 @@ const Review = () => {
img={image.img}
imgAlt={image.imgAlt}
rotation={rotation[index]}
sticker1={image.sticker1}
sticker2={image.sticker2}
// position={[Math.floor(Math.random() * 15) + 5, Math.floor(Math.random() * 20) + 10, Math.random() * 7]}
/>
))}
{/* </div> */}
@ -928,41 +928,41 @@ const Review = () => {
height: '70vh'
}}
>
<Draggable>
<Dragged
img="https://cloud-flbk0h0jg-hack-club-bot.vercel.app/0screenshot_2024-08-16_211342__1_.png"
title="AMA w/ Ryan North"
sx={{ position: 'absolute', top: '1vw', left: '20vw' }}
/>
</Draggable>
<Draggable>
<Dragged
img="https://cloud-bejfiwprw-hack-club-bot.vercel.app/0screenshot_2024-08-27_at_2.41.20_pm.png"
title="PCB Workshop by Adam"
sx={{ position: 'absolute', top: '2vw', right: '15vw' }}
/>
</Draggable>
<Draggable>
<Dragged
img="https://cloud-7oxalj768-hack-club-bot.vercel.app/0img_0560.png"
title="Anime Sticker Workshop"
sx={{ position: 'absolute', top: '17vw', left: '10vw' }}
/>
</Draggable>
<Draggable>
<Dragged
img="https://cloud-flbk0h0jg-hack-club-bot.vercel.app/0screenshot_2024-08-16_211342__1_.png"
title="Ship Showcase"
sx={{ position: 'absolute', top: '20vw', right: '10vw' }}
/>
</Draggable>
<Draggable>
<Dragged
img="https://cloud-flbk0h0jg-hack-club-bot.vercel.app/0screenshot_2024-08-16_211342__1_.png"
title="AMA w/ FRAMEWORK CEO"
sx={{ position: 'absolute', top: '10vw', right: '35vw' }}
/>
</Draggable>
{/* <Draggable> */}
<Dragged
img="https://cloud-flbk0h0jg-hack-club-bot.vercel.app/0screenshot_2024-08-16_211342__1_.png"
title="AMA w/ Ryan North"
sx={{ position: 'absolute', top: '1vw', left: '20vw' }}
/>
{/* </Draggable> */}
{/* <Draggable> */}
<Dragged
img="https://cloud-bejfiwprw-hack-club-bot.vercel.app/0screenshot_2024-08-27_at_2.41.20_pm.png"
title="PCB Workshop by Adam"
sx={{ position: 'absolute', top: '2vw', right: '15vw' }}
/>
{/* </Draggable> */}
{/* <Draggable> */}
<Dragged
img="https://cloud-7oxalj768-hack-club-bot.vercel.app/0img_0560.png"
title="Anime Sticker Workshop"
sx={{ position: 'absolute', top: '17vw', left: '10vw' }}
/>
{/* </Draggable> */}
{/* <Draggable> */}
<Dragged
img="/arcade/review/showcase.png"
title="Ship Showcase"
sx={{ position: 'absolute', top: '20vw', right: '10vw' }}
/>
{/* </Draggable> */}
{/* <Draggable> */}
<Dragged
img="/arcade/review/frameworkAMA.png"
title="AMA w/ FRAMEWORK CEO"
sx={{ position: 'absolute', top: '10vw', right: '35vw' }}
/>
{/* </Draggable> */}
</div>
<div
sx={{
@ -1062,10 +1062,18 @@ const Review = () => {
/>
)}
<div>
<Text variant="subtitle" className="gaegu" style={{ fontStyle: 'italic', fontSize: '14px'}}>
(Messages collected by Hayden Kong, 13, Australia. <a href="https://pixelverseit.github.io/hackclub-arcade-tracker-htmlcssjs/letter.html"> View all messages</a>)
<Text
variant="subtitle"
className="gaegu"
style={{ fontStyle: 'italic', fontSize: '14px' }}
>
(Messages collected by Hayden Kong, 13, Australia.{' '}
<a href="https://pixelverseit.github.io/hackclub-arcade-tracker-htmlcssjs/letter.html">
{' '}
View all messages
</a>
)
</Text>
</div>
</div>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

View file

@ -7542,10 +7542,10 @@ react-horizontal-scrolling-menu@^6.0.2:
dependencies:
smooth-scroll-into-view-if-needed "^2.0.2"
react-intersection-observer@^9.13.0:
version "9.13.0"
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.13.0.tgz#ee10827954cf6ccc204d027f8400a6ddb8df163a"
integrity sha512-y0UvBfjDiXqC8h0EWccyaj4dVBWMxgEx0t5RGNzQsvkfvZwugnKwxpu70StY4ivzYuMajavwUDjH4LJyIki9Lw==
react-intersection-observer@^9.13.1:
version "9.13.1"
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz#6c61a75801162491c6348bad09967f2caf445584"
integrity sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==
react-is@16.13.1, react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
version "16.13.1"