diff --git a/pages/arcade/landing.js b/pages/arcade/landing.js index 8a2096dc..5dcdf460 100644 --- a/pages/arcade/landing.js +++ b/pages/arcade/landing.js @@ -1,1935 +1,1868 @@ -import React, { useState } from 'react' -import { useRouter } from 'next/router' -import Head from 'next/head' -import Nav from '../../components/nav' -import Meta from '@hackclub/meta' -import { Box, Text, Flex, Grid, Card, Close, Divider, Heading } from 'theme-ui' -import Image from 'next/image' -import fs from 'fs' -import path from 'path' -import { startCase } from 'lodash' -import Projects from '../../components/arcade/projects' -import { Howl } from 'howler' -import Ticker from 'react-ticker' -import PageVisibility from 'react-page-visibility' -import ArcadeFooter from '../../components/arcade/footer' -import Balancer from 'react-wrap-balancer' -import { Fade } from 'react-reveal' -import Join from '../../components/arcade/join' -import Announcement from '../../components/announcement' -import Link from 'next/link' -import { shopParts } from '../api/arcade/shop' -/** @jsxImportSource theme-ui */ +export default function Landing() { + return( + <>landing + ) +} -const styled = ` -@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap'); -body, html { - overflow-x: hidden; - } -.slackey { - font-family: "Slackey", sans-serif; - } +// import React, { useState } from 'react' +// import { useRouter } from 'next/router' +// import Head from 'next/head' +// import Nav from '../../components/nav' +// import Meta from '@hackclub/meta' +// import { Box, Text, Flex, Grid, Card, Close, Divider, Heading } from 'theme-ui' +// import Image from 'next/image' +// import { startCase } from 'lodash' +// import Projects from '../../components/arcade/projects' +// import { Howl } from 'howler' +// import Ticker from 'react-ticker' +// import PageVisibility from 'react-page-visibility' +// import ArcadeFooter from '../../components/arcade/footer' +// import Balancer from 'react-wrap-balancer' +// import { Fade } from 'react-reveal' +// import Join from '../../components/arcade/join' +// import Announcement from '../../components/announcement' +// import Link from 'next/link' +// import { shopParts } from '../api/arcade/shop' +// /** @jsxImportSource theme-ui */ - .arcade { - text-shadow: -4px -4px#FAEFD6,-3px -3px #FAEFD6, -2px -2px #FAEFD6, - -2px -2px #FAEFD6, -1px -1px #FAEFD6, -1px -1px #FAEFD6, - -1px -1px #FAEFD6, 1px 1px #FAEFD6, 1px 1px #FAEFD6, - 1px 1px #FAEFD6, 2px 2px #FAEFD6, 4px 4px #FAEFD6, - 3px 3px #FAEFD6, -8px -8px #09AFB4, -6px -6px #09AFB4, - -5px -5px #09AFB4, -4px -4px #09AFB4, -3px -3px #09AFB4, - -2px -2px #09AFB4, 2px 2px #09AFB4, 3px 3px #09AFB4, - 5px 5px #09AFB4, 4px 4px #09AFB4, 7px 7px #09AFB4, - 6px 6px #09AFB4, 8px 8px #09AFB4, -8px -8px #09AFB4, 9px 9px #09AFB4, -9px -9px #09AFB4, 10px 10px #09AFB4, -10px -10px #09AFB4; - } +// const styled = ` +// @import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap'); +// body, html { +// overflow-x: hidden; +// } +// .slackey { +// font-family: "Slackey", sans-serif; +// } - .arcade2 { - text-shadow: -4px -4px#FAEFD6,-3px -3px #FAEFD6, -2px -2px #FAEFD6, - -2px -2px #FAEFD6, -1px -1px #FAEFD6, -1px -1px #FAEFD6, - -1px -1px #FAEFD6, 1px 1px #FAEFD6, 1px 1px #FAEFD6, - 1px 1px #FAEFD6, 2px 2px #FAEFD6, 4px 4px #FAEFD6, - 3px 3px #FAEFD6, -8px -8px #09AFB4, -6px -6px #09AFB4, - -5px -5px #09AFB4, -4px -4px #09AFB4, -3px -3px #09AFB4, - -2px -2px #09AFB4, 2px 2px #09AFB4, 3px 3px #09AFB4, - 5px 5px #09AFB4, 4px 4px #09AFB4, 7px 7px #09AFB4, - 6px 6px #09AFB4; - } +// .arcade { +// text-shadow: -4px -4px#FAEFD6,-3px -3px #FAEFD6, -2px -2px #FAEFD6, +// -2px -2px #FAEFD6, -1px -1px #FAEFD6, -1px -1px #FAEFD6, +// -1px -1px #FAEFD6, 1px 1px #FAEFD6, 1px 1px #FAEFD6, +// 1px 1px #FAEFD6, 2px 2px #FAEFD6, 4px 4px #FAEFD6, +// 3px 3px #FAEFD6, -8px -8px #09AFB4, -6px -6px #09AFB4, +// -5px -5px #09AFB4, -4px -4px #09AFB4, -3px -3px #09AFB4, +// -2px -2px #09AFB4, 2px 2px #09AFB4, 3px 3px #09AFB4, +// 5px 5px #09AFB4, 4px 4px #09AFB4, 7px 7px #09AFB4, +// 6px 6px #09AFB4, 8px 8px #09AFB4, -8px -8px #09AFB4, 9px 9px #09AFB4, -9px -9px #09AFB4, 10px 10px #09AFB4, -10px -10px #09AFB4; +// } - .arcade3 { - text-shadow: -4px -4px#FAEFD6,-3px -3px #FAEFD6, -2px -2px #FAEFD6, - -2px -2px #FAEFD6, -1px -1px #FAEFD6, -1px -1px #FAEFD6, - -1px -1px #FAEFD6, 1px 1px #FAEFD6, 1px 1px #FAEFD6, - 1px 1px #FAEFD6, 2px 2px #FAEFD6, 4px 4px #FAEFD6, - 3px 3px #FAEFD6, -8px -8px #09AFB4, -6px -6px #09AFB4, - -5px -5px #09AFB4, -4px -4px #09AFB4, -3px -3px #09AFB4, - -2px -2px #09AFB4, 2px 2px #09AFB4, 3px 3px #09AFB4, - 5px 5px #09AFB4, 4px 4px #09AFB4, 7px 7px #09AFB4, - 6px 6px #09AFB4; - } - .emblema { - font-family: "Emblema One", system-ui; - } +// .arcade2 { +// text-shadow: -4px -4px#FAEFD6,-3px -3px #FAEFD6, -2px -2px #FAEFD6, +// -2px -2px #FAEFD6, -1px -1px #FAEFD6, -1px -1px #FAEFD6, +// -1px -1px #FAEFD6, 1px 1px #FAEFD6, 1px 1px #FAEFD6, +// 1px 1px #FAEFD6, 2px 2px #FAEFD6, 4px 4px #FAEFD6, +// 3px 3px #FAEFD6, -8px -8px #09AFB4, -6px -6px #09AFB4, +// -5px -5px #09AFB4, -4px -4px #09AFB4, -3px -3px #09AFB4, +// -2px -2px #09AFB4, 2px 2px #09AFB4, 3px 3px #09AFB4, +// 5px 5px #09AFB4, 4px 4px #09AFB4, 7px 7px #09AFB4, +// 6px 6px #09AFB4; +// } - .gaegu { - font-family: "Gaegu", sans-serif; - } +// .arcade3 { +// text-shadow: -4px -4px#FAEFD6,-3px -3px #FAEFD6, -2px -2px #FAEFD6, +// -2px -2px #FAEFD6, -1px -1px #FAEFD6, -1px -1px #FAEFD6, +// -1px -1px #FAEFD6, 1px 1px #FAEFD6, 1px 1px #FAEFD6, +// 1px 1px #FAEFD6, 2px 2px #FAEFD6, 4px 4px #FAEFD6, +// 3px 3px #FAEFD6, -8px -8px #09AFB4, -6px -6px #09AFB4, +// -5px -5px #09AFB4, -4px -4px #09AFB4, -3px -3px #09AFB4, +// -2px -2px #09AFB4, 2px 2px #09AFB4, 3px 3px #09AFB4, +// 5px 5px #09AFB4, 4px 4px #09AFB4, 7px 7px #09AFB4, +// 6px 6px #09AFB4; +// } +// .emblema { +// font-family: "Emblema One", system-ui; +// } - body { - background-color: #FAEFD6; - } +// .gaegu { +// font-family: "Gaegu", sans-serif; +// } + +// body { +// background-color: #FAEFD6; +// } - /* CSS from https://codepen.io/quadbaup/details/rKOKQv */ -.thought { - display: flex; - background-color: #F8F3F3; - padding: 20px; - border-radius: 30px; - min-width: 40px; - max-width: 180px; - opacity: 0; - height: 100px; - margin: 20px; - margin-left: -10px; - position: relative; - align-items: center; - justify-content: center; - font-size: 12px; - /* text-align:center; */ -} +// /* CSS from https://codepen.io/quadbaup/details/rKOKQv */ +// .thought { +// display: flex; +// background-color: #F8F3F3; +// padding: 20px; +// border-radius: 30px; +// min-width: 40px; +// max-width: 180px; +// opacity: 0; +// height: 100px; +// margin: 20px; +// margin-left: -10px; +// position: relative; +// align-items: center; +// justify-content: center; +// font-size: 12px; +// /* text-align:center; */ +// } -.thought:before, -.thought:after { - content: ""; - background-color: #F8F3F3; - border-radius: 50%; - display: block; - position: absolute; - z-index: -1; -} +// .thought:before, +// .thought:after { +// content: ""; +// background-color: #F8F3F3; +// border-radius: 50%; +// display: block; +// position: absolute; +// z-index: -1; +// } -.thought:before { - width: 44px; - height: 44px; - top: -12px; - left: 28px; - box-shadow: -50px 30px 0 -12px #F8F3F3; -} +// .thought:before { +// width: 44px; +// height: 44px; +// top: -12px; +// left: 28px; +// box-shadow: -50px 30px 0 -12px #F8F3F3; +// } -.thought:after { - bottom: -10px; - right: 26px; - width: 30px; - height: 30px; - box-shadow: 40px -34px 0 0 #F8F3F3, - -28px -6px 0 -2px #F8F3F3, - -24px 17px 0 -6px #F8F3F3, - -5px 25px 0 -10px #F8F3F3; -} +// .thought:after { +// bottom: -10px; +// right: 26px; +// width: 30px; +// height: 30px; +// box-shadow: 40px -34px 0 0 #F8F3F3, +// -28px -6px 0 -2px #F8F3F3, +// -24px 17px 0 -6px #F8F3F3, +// -5px 25px 0 -10px #F8F3F3; +// } -#generate-project-idea { - margin-top: -100px; -} +// #generate-project-idea { +// margin-top: -100px; +// } -.talking { - animation: talking 1s infinite; -} -@keyframes talking { - 0% { - transform: translateY(0px); - } +// .talking { +// animation: talking 1s infinite; +// } +// @keyframes talking { +// 0% { +// transform: translateY(0px); +// } - 50% { - transform: translateY(-10px); - } +// 50% { +// transform: translateY(-10px); +// } - 100% { - transform: translateY(0px); - } -} +// 100% { +// transform: translateY(0px); +// } +// } -.floaty { - animation: float 6s ease-in-out infinite; -} +// .floaty { +// animation: float 6s ease-in-out infinite; +// } -@keyframes float { +// @keyframes float { - from, - to { - transform: translate(0%, -37%) rotate(-2deg); - } +// from, +// to { +// transform: translate(0%, -37%) rotate(-2deg); +// } - 25% { - transform: translate(-2%, -40%) rotate(2deg); - } +// 25% { +// transform: translate(-2%, -40%) rotate(2deg); +// } - 50% { - transform: translate(0%, -43%) rotate(-1deg); - } +// 50% { +// transform: translate(0%, -43%) rotate(-1deg); +// } - 75% { - transform: translate(-1%, -40%) rotate(-1deg); - } -} +// 75% { +// transform: translate(-1%, -40%) rotate(-1deg); +// } +// } -a { - color: inherit; -} -` +// a { +// color: inherit; +// } +// ` -const Powerups = ({ - img, - text, - subtext, - fullName, - cost, - description, - fulfillmentDescription, - polaroidRotation, - ticketRotation, - extraTags, - ...props -}) => { - const parsedFulfillmentDesc = fulfillmentDescription?.replace( - /\[(.*?)\]\((.*?)\)/g, - '$1' - ) - return ( - - - {text} - - - - {text} - - - {subtext} - - - - {cost} {cost == 1 ? 'ticket' : 'tickets'} - - {extraTags?.map((tag, i) => { - if (tag == 'Limited Supply') { - return ( - - Limited! - - ) - } - })} - { - document.getElementById(`${text}-info`).showModal() - }} - > - 📦 - - { +// const parsedFulfillmentDesc = fulfillmentDescription?.replace( +// /\[(.*?)\]\((.*?)\)/g, +// '$1' +// ) +// return ( +// +// +// {text} +// +// +// +// {text} +// +// +// {subtext} +// +// +// +// {cost} {cost == 1 ? 'ticket' : 'tickets'} +// +// {extraTags?.map((tag, i) => { +// if (tag == 'Limited Supply') { +// return ( +// +// Limited! +// +// ) +// } +// })} +// { +// document.getElementById(`${text}-info`).showModal() +// }} +// > +// 📦 +// +// - { - document.getElementById(`${text}-info`).close() - }} - /> - - {text} - - - {fullName} - - - - - - - {description} - - - - - - {cost} {cost == 1 ? 'ticket' : 'tickets'} - - - - ) -} +// border: 'none', +// scrollbarWidth: 'none', +// maxWidth: '400px', +// '@media (max-width: 400px)': { +// maxWidth: '300px' +// } +// }} +// > +// { +// document.getElementById(`${text}-info`).close() +// }} +// /> +// +// {text} +// +// +// {fullName} +// +// +// +// +// +// +// {description} +// +// +// +// +// +// {cost} {cost == 1 ? 'ticket' : 'tickets'} +// +// +// +// ) +// } -const Intro = ({ title, num, text, img, third, ...props }) => { - return ( - - - {title} - - - {text} - - - {num} - - Dino drawing - - ) -} +// const Intro = ({ title, num, text, img, third, ...props }) => { +// return ( +// +// +// {title} +// +// +// {text} +// +// +// {num} +// +// Dino drawing +// +// ) +// } -const Tickets = ({ title, num, text, link, bugEater, ...props }) => { - return ( - - - {title} - - - {text} - - {bugEater && ( - <> - - - Click me for ideas! - - - Click me for ideas! - - - - - Need an idea? - - - - - - )} - - ) -} +// const Tickets = ({ title, num, text, link, bugEater, ...props }) => { +// return ( +// +// +// {title} +// +// +// {text} +// +// {bugEater && ( +// <> +// +// +// Click me for ideas! +// +// +// Click me for ideas! +// +// +// +// +// Need an idea? +// +// +// +// +// +// )} +// +// ) +// } -const Sticker = ({ st }) => { - return ( - - - - {st.split('.')[0]} - - {startCase(st.replace(/\.(svg|png)/, ''))} - - - - - - ) -} +// const Sticker = ({ st }) => { +// return ( +// +// +// +// {st.split('.')[0]} +// +// {startCase(st.replace(/\.(svg|png)/, ''))} +// +// +// +// +// +// ) +// } -const Item = ({ name, img, cost }) => { - return ( - - - {cost}h - - {name} - - ) -} +// const Item = ({ name, img, cost }) => { +// return ( +// +// +// {cost}h +// +// {name} +// +// ) +// } -const FAQ = ({ question, answer }) => { - const parsedAnswer = answer?.replace( - /\[(.*?)\]\((.*?)\)/g, - '$1' - ) - return ( - - - {question} - - - - ) -} -function getRandomInt(max) { - return Math.floor(Math.random() * max) -} +// const FAQ = ({ question, answer }) => { +// const parsedAnswer = answer?.replace( +// /\[(.*?)\]\((.*?)\)/g, +// '$1' +// ) +// return ( +// +// +// {question} +// +// +// +// ) +// } +// function getRandomInt(max) { +// return Math.floor(Math.random() * max) +// } -let yap_sounds = { - // ty caleb! - thinking: [ - new Howl({ src: '/bin/yapping/thonk1.wav' }), - new Howl({ src: '/bin/yapping/thonk2.wav' }), - new Howl({ src: '/bin/yapping/thonk3.wav' }) - ], - talking: { - // these sounds and most of the yapping code are adapted from https://github.com/equalo-official/animalese-generator - a: new Howl({ src: '/bin/yapping/a.wav', volume: 0.16 }), - b: new Howl({ src: '/bin/yapping/b.wav', volume: 0.16 }), - c: new Howl({ src: '/bin/yapping/c.wav', volume: 0.16 }), - d: new Howl({ src: '/bin/yapping/d.wav', volume: 0.16 }), - e: new Howl({ src: '/bin/yapping/e.wav', volume: 0.16 }), - f: new Howl({ src: '/bin/yapping/f.wav', volume: 0.16 }), - g: new Howl({ src: '/bin/yapping/g.wav', volume: 0.16 }), - h: new Howl({ src: '/bin/yapping/h.wav', volume: 0.16 }), - i: new Howl({ src: '/bin/yapping/i.wav', volume: 0.16 }), - j: new Howl({ src: '/bin/yapping/j.wav', volume: 0.16 }), - k: new Howl({ src: '/bin/yapping/k.wav', volume: 0.16 }), - l: new Howl({ src: '/bin/yapping/l.wav', volume: 0.16 }), - m: new Howl({ src: '/bin/yapping/m.wav', volume: 0.16 }), - n: new Howl({ src: '/bin/yapping/n.wav', volume: 0.16 }), - o: new Howl({ src: '/bin/yapping/o.wav', volume: 0.16 }), - p: new Howl({ src: '/bin/yapping/p.wav', volume: 0.16 }), - q: new Howl({ src: '/bin/yapping/q.wav', volume: 0.16 }), - r: new Howl({ src: '/bin/yapping/r.wav', volume: 0.16 }), - s: new Howl({ src: '/bin/yapping/s.wav', volume: 0.16 }), - t: new Howl({ src: '/bin/yapping/t.wav', volume: 0.16 }), - u: new Howl({ src: '/bin/yapping/u.wav', volume: 0.16 }), - v: new Howl({ src: '/bin/yapping/v.wav', volume: 0.16 }), - w: new Howl({ src: '/bin/yapping/w.wav', volume: 0.16 }), - x: new Howl({ src: '/bin/yapping/x.wav', volume: 0.16 }), - y: new Howl({ src: '/bin/yapping/y.wav', volume: 0.16 }), - z: new Howl({ src: '/bin/yapping/z.wav', volume: 0.16 }), - th: new Howl({ src: '/bin/yapping/th.wav', volume: 0.16 }), - sh: new Howl({ src: '/bin/yapping/sh.wav', volume: 0.16 }), - _: new Howl({ src: '/bin/yapping/_.wav', volume: 0.16 }) - } -} +// let yap_sounds = { +// // ty caleb! +// thinking: [ +// new Howl({ src: '/bin/yapping/thonk1.wav' }), +// new Howl({ src: '/bin/yapping/thonk2.wav' }), +// new Howl({ src: '/bin/yapping/thonk3.wav' }) +// ], +// talking: { +// // these sounds and most of the yapping code are adapted from https://github.com/equalo-official/animalese-generator +// a: new Howl({ src: '/bin/yapping/a.wav', volume: 0.16 }), +// b: new Howl({ src: '/bin/yapping/b.wav', volume: 0.16 }), +// c: new Howl({ src: '/bin/yapping/c.wav', volume: 0.16 }), +// d: new Howl({ src: '/bin/yapping/d.wav', volume: 0.16 }), +// e: new Howl({ src: '/bin/yapping/e.wav', volume: 0.16 }), +// f: new Howl({ src: '/bin/yapping/f.wav', volume: 0.16 }), +// g: new Howl({ src: '/bin/yapping/g.wav', volume: 0.16 }), +// h: new Howl({ src: '/bin/yapping/h.wav', volume: 0.16 }), +// i: new Howl({ src: '/bin/yapping/i.wav', volume: 0.16 }), +// j: new Howl({ src: '/bin/yapping/j.wav', volume: 0.16 }), +// k: new Howl({ src: '/bin/yapping/k.wav', volume: 0.16 }), +// l: new Howl({ src: '/bin/yapping/l.wav', volume: 0.16 }), +// m: new Howl({ src: '/bin/yapping/m.wav', volume: 0.16 }), +// n: new Howl({ src: '/bin/yapping/n.wav', volume: 0.16 }), +// o: new Howl({ src: '/bin/yapping/o.wav', volume: 0.16 }), +// p: new Howl({ src: '/bin/yapping/p.wav', volume: 0.16 }), +// q: new Howl({ src: '/bin/yapping/q.wav', volume: 0.16 }), +// r: new Howl({ src: '/bin/yapping/r.wav', volume: 0.16 }), +// s: new Howl({ src: '/bin/yapping/s.wav', volume: 0.16 }), +// t: new Howl({ src: '/bin/yapping/t.wav', volume: 0.16 }), +// u: new Howl({ src: '/bin/yapping/u.wav', volume: 0.16 }), +// v: new Howl({ src: '/bin/yapping/v.wav', volume: 0.16 }), +// w: new Howl({ src: '/bin/yapping/w.wav', volume: 0.16 }), +// x: new Howl({ src: '/bin/yapping/x.wav', volume: 0.16 }), +// y: new Howl({ src: '/bin/yapping/y.wav', volume: 0.16 }), +// z: new Howl({ src: '/bin/yapping/z.wav', volume: 0.16 }), +// th: new Howl({ src: '/bin/yapping/th.wav', volume: 0.16 }), +// sh: new Howl({ src: '/bin/yapping/sh.wav', volume: 0.16 }), +// _: new Howl({ src: '/bin/yapping/_.wav', volume: 0.16 }) +// } +// } -async function yap(text, letterCallback) { - text = text.toLowerCase() - const yap_queue = [] - for (let i = 0; i < text.length; i++) { - const char = text[i] - try { - if (char === 's' && text[i + 1] === 'h') { - // test for 'sh' sound - yap_queue.push(yap_sounds.talking['sh']) - continue - } else if (char === 't' && text[i + 1] === 'h') { - // test for 'th' sound - yap_queue.push(yap_sounds.talking['th']) - continue - } else if (char === 'h' && (text[i - 1] === 's' || text[i - 1] === 't')) { - // test if previous letter was 's' or 't' and current letter is 'h' - yap_queue.push(yap_sounds.talking['_']) - continue - } else if (char === ',' || char === '?' || char === '.') { - yap_queue.push(yap_sounds.talking['_']) - continue - } else if (char === text[i - 1]) { - // skip repeat letters - yap_queue.push(yap_sounds.talking['_']) - continue - } - } catch (e) { - // who cares. pick up a foot ball - } - if (!char.match(/[a-zA-Z.]/)) { - yap_queue.push(yap_sounds.talking['_']) - continue // skip characters that are not letters or periods - } - yap_queue.push(yap_sounds.talking[char]) - } +// async function yap(text, letterCallback) { +// text = text.toLowerCase() +// const yap_queue = [] +// for (let i = 0; i < text.length; i++) { +// const char = text[i] +// try { +// if (char === 's' && text[i + 1] === 'h') { +// // test for 'sh' sound +// yap_queue.push(yap_sounds.talking['sh']) +// continue +// } else if (char === 't' && text[i + 1] === 'h') { +// // test for 'th' sound +// yap_queue.push(yap_sounds.talking['th']) +// continue +// } else if (char === 'h' && (text[i - 1] === 's' || text[i - 1] === 't')) { +// // test if previous letter was 's' or 't' and current letter is 'h' +// yap_queue.push(yap_sounds.talking['_']) +// continue +// } else if (char === ',' || char === '?' || char === '.') { +// yap_queue.push(yap_sounds.talking['_']) +// continue +// } else if (char === text[i - 1]) { +// // skip repeat letters +// yap_queue.push(yap_sounds.talking['_']) +// continue +// } +// } catch (e) { +// // who cares. pick up a foot ball +// } +// if (!char.match(/[a-zA-Z.]/)) { +// yap_queue.push(yap_sounds.talking['_']) +// continue // skip characters that are not letters or periods +// } +// yap_queue.push(yap_sounds.talking[char]) +// } - function next_yap() { - letterCallback(yap_queue.length) - if (yap_queue.length === 0) return - let noise = yap_queue.shift() - noise.rate(2 * (Math.random() * 0.5 + 3.5)) - noise.once('end', next_yap) - noise.play() - } +// function next_yap() { +// letterCallback(yap_queue.length) +// if (yap_queue.length === 0) return +// let noise = yap_queue.shift() +// noise.rate(2 * (Math.random() * 0.5 + 3.5)) +// noise.once('end', next_yap) +// noise.play() +// } - next_yap() -} +// next_yap() +// } -async function generateProjectIdea() { - if ( - document - .querySelector('#generate-project-idea') - .classList.contains('disabled') - ) { - return - } +// async function generateProjectIdea() { +// if ( +// document +// .querySelector('#generate-project-idea') +// .classList.contains('disabled') +// ) { +// return +// } - yap_sounds.thinking[getRandomInt(yap_sounds.thinking.length)].play() - document.querySelector('#generate-project-idea').style.marginTop = '0px' - document.querySelector('#console').style.marginTop = '-50px' - document.querySelector('#console2').style.opacity = '0' - document.querySelector('#project-idea').style.opacity = '1' - document.querySelector('#generate-project-idea').classList.add('disabled') - document.querySelector('#project-idea').innerHTML = - '' + thinkingWords() + '...' + '' - document.querySelector('#generate-project-idea').src = - 'https://cloud-g5g5sistf-hack-club-bot.vercel.app/1untitled_artwork_8_1.png' - let text = '' - const res = await fetch('/api/arcade/openai/', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify() - }) +// yap_sounds.thinking[getRandomInt(yap_sounds.thinking.length)].play() +// document.querySelector('#generate-project-idea').style.marginTop = '0px' +// document.querySelector('#console').style.marginTop = '-50px' +// document.querySelector('#console2').style.opacity = '0' +// document.querySelector('#project-idea').style.opacity = '1' +// document.querySelector('#generate-project-idea').classList.add('disabled') +// document.querySelector('#project-idea').innerHTML = +// '' + thinkingWords() + '...' + '' +// document.querySelector('#generate-project-idea').src = +// 'https://cloud-g5g5sistf-hack-club-bot.vercel.app/1untitled_artwork_8_1.png' +// let text = '' +// const res = await fetch('/api/arcade/openai/', { +// method: 'POST', +// headers: { +// 'Content-Type': 'application/json' +// }, +// body: JSON.stringify() +// }) - const json = await res.json() - text = json.recommendation - document.querySelector('#project-idea').innerHTML = '' - document.querySelector('#generate-project-idea').src = - 'https://cloud-81d1s66l7-hack-club-bot.vercel.app/0untitled_artwork_9_1.png' - document.querySelector('#generate-project-idea').classList.remove('disabled') - // document.querySelector('#generate-project-idea').classList.add('talking') - yap(text, i => { - document.querySelector('#project-idea').innerHTML = text.slice( - 0, - Math.max(text.length - i + 1, 0) - ) - }) -} +// const json = await res.json() +// text = json.recommendation +// document.querySelector('#project-idea').innerHTML = '' +// document.querySelector('#generate-project-idea').src = +// 'https://cloud-81d1s66l7-hack-club-bot.vercel.app/0untitled_artwork_9_1.png' +// document.querySelector('#generate-project-idea').classList.remove('disabled') +// // document.querySelector('#generate-project-idea').classList.add('talking') +// yap(text, i => { +// document.querySelector('#project-idea').innerHTML = text.slice( +// 0, +// Math.max(text.length - i + 1, 0) +// ) +// }) +// } -function thinkingWords() { - const arr = [ - 'thinking', - 'single neuron activated', - '2 braincells rubbing together', - 'ponderosourus', - 'contemplatosaurus', - 'dinosaur brain activated', - 'thinking about trash', - 'rummaging through my thoughts' - ] - return arr[Math.floor(Math.random() * arr.length)] -} +// function thinkingWords() { +// const arr = [ +// 'thinking', +// 'single neuron activated', +// '2 braincells rubbing together', +// 'ponderosourus', +// 'contemplatosaurus', +// 'dinosaur brain activated', +// 'thinking about trash', +// 'rummaging through my thoughts' +// ] +// return arr[Math.floor(Math.random() * arr.length)] +// } -const Arcade = ({ stickers = [], carousel = [], highlightedItems = [] }) => { - const [showComponent, setShowComponent] = useState(false) - const [showNum, setNum] = useState(false) - const [showForm, setForm] = useState(false) - const [formSent, setFormSent] = useState(false) - const [isRevealed, setIsRevealed] = useState(false) +// const Landing = ({ stickers = [], carousel = [], highlightedItems = [] }) => { +// const [showComponent, setShowComponent] = useState(false) +// const [showNum, setNum] = useState(false) +// const [showForm, setForm] = useState(false) +// const [formSent, setFormSent] = useState(false) +// const [isRevealed, setIsRevealed] = useState(false) - const handleButtonClick = () => { - setIsRevealed(!isRevealed) - } +// const handleButtonClick = () => { +// setIsRevealed(!isRevealed) +// } - const router = useRouter() - const { query } = router +// const router = useRouter() +// const { query } = router - const slack = query.param +// const slack = query.param - const generateRandomNumber = () => { - const newRandomNumber = Math.floor(Math.random() * stickers.length) // Generate a random number between 0 and 99 - setNum(newRandomNumber) - } +// const generateRandomNumber = () => { +// const newRandomNumber = Math.floor(Math.random() * stickers.length) // Generate a random number between 0 and 99 +// setNum(newRandomNumber) +// } - const handleMouseEnter = () => { - setShowComponent(true) - } +// const handleMouseEnter = () => { +// setShowComponent(true) +// } - const handleMouseLeave = () => { - setShowComponent(false) - } +// const handleMouseLeave = () => { +// setShowComponent(false) +// } - const mouseEnter = () => { - handleMouseEnter() - generateRandomNumber() - } +// const mouseEnter = () => { +// handleMouseEnter() +// generateRandomNumber() +// } - const [pageIsVisible, setPageIsVisible] = useState(true) - const handleVisibilityChange = isVisible => { - setPageIsVisible(isVisible) - } - return ( - <> - - - - - -