From deb1a8ecdb94c5cff7a9ab4d35191c8c6beffd6b Mon Sep 17 00:00:00 2001 From: Toby Brown Date: Wed, 17 Jan 2024 20:29:16 +0000 Subject: [PATCH] hello world --- package.json | 1 + pages/slack.js | 241 ++++++++++++++++++++++++++++--------------------- yarn.lock | 26 ++++++ 3 files changed, 167 insertions(+), 101 deletions(-) diff --git a/package.json b/package.json index 7bdf1dd4..e7d3b9b3 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "react-before-after-slider-component": "^1.1.8", "react-datepicker": "^4.24.0", "react-dom": "^17.0.2", + "react-horizontal-scrolling-menu": "^4.1.2", "react-konami-code": "^2.3.0", "react-marquee-slider": "^1.1.5", "react-masonry-css": "^1.0.16", diff --git a/pages/slack.js b/pages/slack.js index 5077b5e9..3836e4c0 100644 --- a/pages/slack.js +++ b/pages/slack.js @@ -21,65 +21,82 @@ import Nav from '../components/nav' import Header from '../components/slack/header' import fetcher from '../lib/fetcher' import { thousands } from '../lib/members' -import { useRef, useState } from 'react' -import { gsap } from 'gsap' -import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' +import { useRef, useState, useContext } from 'react' import Slider from 'react-slick' +import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu' +import 'react-horizontal-scrolling-menu/dist/styles.css' + const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +const projects = [ + { + title: 'Brainwave device for thought-based computer interaction.', + description: + "BCI's team organizes in #nest Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.", + img: 'bci', + color: ['#ec3750', '#F58695'], + itemId: 1 + }, + { + title: 'A free domain service.', + description: + 'Obl.ong’s team organizes in #oblong Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.', + img: 'oblong', + color: ['#ff8c37', '#F2A510'] + }, + { + title: 'An open source VPN.', + description: + "Burrow's team organizes in #burrow Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.", + img: 'burrow', + color: ['#f1c40f', '#FAE078'] + }, + { + title: 'Free compute infrastructure.', + description: + "Nest's team organizes in #nest Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.", + img: 'nest', + color: ['#33d6a6', '#51F5C5'] + }, + { + title: 'A chat app and cell phone carrier.', + description: + "Nest's team organizes in #nest Velit voluptate deserunt consequat. Velit voluptate deserunt consequat.Velit voluptate deserunt consequat.", + img: 'purplebubble', + color: ['#5bc0de', '#88e5f8'] + } +] + const SlackPage = () => { const { data: millionCount } = useSWR( 'https://jia.haas.hackclub.com/api/currentNumber', fetcher, { refreshInterval: 10_000 } ) - const [color, setColors] = useState(['red', '#F58695']) - const [totalMessagesOblong, setTotalMessagesOblong] = useState(0) - const triggerRef = useRef(null) const nameInputRef = useRef(null) - gsap.registerPlugin(ScrollTrigger) + const [items, setItems] = useState(projects) + const [selected, setSelected] = useState([]) + const [position, setPosition] = useState(0) - /*useEffect(() => { - const sections = gsap.utils.toArray('.project') + const { isLastItemVisible, scrollNext } = useContext(VisibilityContext) + const { isFirstItemVisible, scrollPrev } = useContext(VisibilityContext) - const projects = gsap.to(sections, { - xPercent: -100 * (sections.length - 1), - ease: 'none', - duration: 1, - scrollTrigger: { - trigger: triggerRef.current, - start: 'top top', - end: () => '+=' + document.querySelector('.container').offsetWidth, - scrub: 1.25, - pin: true, - anticipatePin: 1, - invalidateOnRefresh: true, - snap: 0.5 * (1 / (sections.length - 1)) - }, - onUpdate: function () { - const progress = this.progress() - if (progress < 1 / 6) { - setColors(['red', '#F58695']) - } else if (progress < 2 / 6) { - setColors(['orange', '#F2A510']) - } else if (progress < 3 / 6) { - setColors(['yellow', '#FAE078']) - } else if (progress < 4 / 6) { - setColors(['green', '#51F5C5']) - } else if (progress < 5 / 6) { - setColors(['cyan', '#88e5f8']) - } else { - setColors(['purple', '#d786ff']) - } - } - }) - return () => { - projects.kill() + const isItemSelected = id => !!selected.find(el => el === id) + + const handleClick = + id => + ({ getItemById, scrollToItem }) => { + const itemSelected = isItemSelected(id) + + setSelected(currentSelected => + itemSelected + ? currentSelected.filter(el => el !== id) + : currentSelected.concat(id) + ) } - }, [])*/ return ( <> @@ -298,53 +315,33 @@ const SlackPage = () => { sx={{ backgroundColor: '#f9fafc', justifyItems: 'center', - alignItems: 'center' + alignItems: 'center', + width: 'fit-content', + position: 'relative', + display: 'grid', + paddingLeft: '25vw' }} className="container" > - - - - - - - + + {projects.map((project, index) => ( + + ))} + + scrollPrev()}>Left + scrollNext()}> + Right + { ) } -function Project({ title, description, sx, color, img }) { +function Project({ + title, + description, + sx, + color, + img, + itemId, + handleClick, + isItemSelected, + id +}) { return ( {children} -} - export default SlackPage + +/* +Here lies the horizontal scroll menu. It's not currently in use, but it's here if anyone every wants it! - Toby + const triggerRef = useRef(null) + gsap.registerPlugin(ScrollTrigger) + useEffect(() => { + const sections = gsap.utils.toArray('.project') + + const projects = gsap.to(sections, { + xPercent: -100 * (sections.length - 1), + ease: 'none', + duration: 1, + scrollTrigger: { + trigger: triggerRef.current, + start: 'top top', + end: () => '+=' + document.querySelector('.container').offsetWidth, + scrub: 1.25, + pin: true, + anticipatePin: 1, + invalidateOnRefresh: true, + snap: 0.5 * (1 / (sections.length - 1)) + }, + onUpdate: function () { + const progress = this.progress() + if (progress < 1 / 6) { + setColors(['red', '#F58695']) + } else if (progress < 2 / 6) { + setColors(['orange', '#F2A510']) + } else if (progress < 3 / 6) { + setColors(['yellow', '#FAE078']) + } else if (progress < 4 / 6) { + setColors(['green', '#51F5C5']) + } else if (progress < 5 / 6) { + setColors(['cyan', '#88e5f8']) + } else { + setColors(['purple', '#d786ff']) + } + } + }) + return () => { + projects.kill() + } + }, [])*/ diff --git a/yarn.lock b/yarn.lock index 9dc97d6f..379ff98d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3164,6 +3164,11 @@ commondir@^1.0.1: resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg== +compute-scroll-into-view@^1.0.20: + version "1.0.20" + resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz#1768b5522d1172754f5d0c9b02de3af6be506a43" + integrity sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg== + concat-map@0.0.1: version "0.0.1" resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz" @@ -6563,6 +6568,13 @@ react-fast-compare@^3.2.0: resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== +react-horizontal-scrolling-menu@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/react-horizontal-scrolling-menu/-/react-horizontal-scrolling-menu-4.1.2.tgz#18a278256d4ceac357f53263822760807fd09e8f" + integrity sha512-qcIgZ9Ck5HHfLpZy2iGqpYxGx3zPtRkWBN/i8M3hX3x4SjxmAupgRV4js5TsoMsHOWOvP190IrVULE9sxmWsGQ== + dependencies: + smooth-scroll-into-view-if-needed "~1.1" + 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" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" @@ -7148,6 +7160,13 @@ scheduler@^0.20.2: loose-envify "^1.1.0" object-assign "^4.1.1" +scroll-into-view-if-needed@^2.2.28: + version "2.2.31" + resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz#d3c482959dc483e37962d1521254e3295d0d1587" + integrity sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA== + dependencies: + compute-scroll-into-view "^1.0.20" + semver@^5.4.1: version "5.7.2" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" @@ -7248,6 +7267,13 @@ slash@^4.0.0: resolved "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz" integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew== +smooth-scroll-into-view-if-needed@~1.1: + version "1.1.33" + resolved "https://registry.yarnpkg.com/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-1.1.33.tgz#2c7b88c82784c69030cb0489b9df584e94e01533" + integrity sha512-crS8NfAaoPrtVYOCMSAnO2vHRgUp22NiiDgEQ7YiaAy5xe2jmR19Jm+QdL8+97gO8ENd7PUyQIAQojJyIiyRHw== + dependencies: + scroll-into-view-if-needed "^2.2.28" + source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"