{title}
+{description}
By {user}
-
- { image != '' && (
+ {image != '' && (
- 
+
)}
- { video != '' && (
+
- {playLink && (
-
- )}
-
-
-
)
}
diff --git a/components/arcade/showcase/readme-renderer.js b/components/arcade/showcase/readme-renderer.js
index d314373e..03a1ccfe 100644
--- a/components/arcade/showcase/readme-renderer.js
+++ b/components/arcade/showcase/readme-renderer.js
@@ -1,14 +1,19 @@
-import ReactMarkdown from "react-markdown"
-import remarkGfm from "remark-gfm"
-import style from "./readme-renderer.module.css"
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
+import style from './readme-renderer.module.css'
const ReadmeRenderer = ({ markdown }) => {
return (
+
+ )
+}
+
+export default SmallView
diff --git a/components/arcade/showcase/youtube-renderer.js b/components/arcade/showcase/youtube-renderer.js
new file mode 100644
index 00000000..6b070e2b
--- /dev/null
+++ b/components/arcade/showcase/youtube-renderer.js
@@ -0,0 +1,18 @@
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+
+const YoutubeRenderer = ({ youtubeLink }) => {
+ if (!youtubeLink) return null
+ const youtubeID = youtubeLink.split('v=')[1]
+ if (!youtubeID) return {title}
+ +{desc}
+Invalid YouTube link: "{youtubeLink}"
+ + return ( +- -
-
-
-
- index
- )
-}
-
-export default index
\ No newline at end of file
diff --git a/pages/arcade/showcase/my.js b/pages/arcade/showcase/my.js
index e038cc12..40b6c1b4 100644
--- a/pages/arcade/showcase/my.js
+++ b/pages/arcade/showcase/my.js
@@ -1,17 +1,10 @@
import { useEffect, useState, useRef } from 'react'
import CohortCard from '../../../components/arcade/showcase/cohort-card'
-import ProjectView from '../../../components/arcade/showcase/project-view'
-import Nav from '../../../components/Nav'
-import Footer from '../../../components/arcade/Footer'
-import BGImg from '../../../components/background-image'
-import background from '../../../public/arcade/homeBG.svg'
import { Button, Heading, Text, Box, Close } from 'theme-ui'
import SlideDown from '../../../components/slide-down'
import styles from '../../../components/arcade/showcase/my.module.css'
import Countdown from 'react-countdown'
-import { StyleSheetContext } from 'styled-components'
import Icon from '@hackclub/icons'
-import Flag from '../../../components/flag'
import ProjectAddView from '../../../components/arcade/showcase/project-add'
/** @jsxImportSource theme-ui */
@@ -149,7 +142,7 @@ const My = () => {
const [status, setStatus] = useState('loading')
const [errorMsg, setError] = useState(null)
- const launchDate = new Date(2024, 7, 19, 0, 0, 0, 0)
+ const launchDate = new Date(2025, 7, 25, 8, 0, 0, 0)
const renderer = ({ hours, minutes, seconds, completed }) => {
if (completed) {
@@ -180,8 +173,9 @@ const My = () => {
// Render a countdown
return (
- First voting round in {hours > 0 ? `${hours} hours` : ''}{' '}
- {minutes > 0 ? `${minutes} minutes` : ''} {seconds} seconds
+ First voting round in a week
+ {/* {hours > 0 ? `${hours} hours` : ''}{' '}
+ {minutes > 0 ? `${minutes} minutes` : ''} {seconds} seconds */}
)
}
diff --git a/pages/arcade/showcase/project/[projectID]/index.js b/pages/arcade/showcase/project/[projectID]/index.js
index 5a076aec..fa242153 100644
--- a/pages/arcade/showcase/project/[projectID]/index.js
+++ b/pages/arcade/showcase/project/[projectID]/index.js
@@ -1,11 +1,6 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState } from 'react'
import ProjectView from '../../../../../components/arcade/showcase/project-view'
-import Nav from '../../../../../components/Nav'
-import Footer from '../../../../../components/arcade/Footer'
-import BGImg from '../../../../../components/background-image'
import styles from '../../../../../components/arcade/showcase/project-view.module.css'
-import { Box, Text } from 'theme-ui'
-import Icon from '@hackclub/icons'
/** @jsxImportSource theme-ui */
const styled = `
@@ -26,7 +21,6 @@ body, html {
body {
background-color: #FAEFD6;
- min-height: 100vh;
}
a {
diff --git a/pages/arcade/showcase/test.js b/pages/arcade/showcase/test.js
new file mode 100644
index 00000000..26e1097d
--- /dev/null
+++ b/pages/arcade/showcase/test.js
@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+
+const Test = () => {
+
+
+ const submitVote = async (rank1, rank2, rank3) => {
+ const authToken = window.localStorage.getItem('arcade.authToken');
+
+ try {
+ const response = await fetch('/api/arcade/showcase/vote', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': authToken,
+ },
+ body: JSON.stringify({
+ rank1,
+ rank2,
+ rank3,
+ }),
+ })
+
+
+ const data = await response.json();
+ return data;
+ } catch (error) {
+ console.error('Error submitting vote:', error);
+ throw error;
+ }
+ };
+
+ useEffect(() => {
+
+ const rank1 = ["recnSpjM91mCKJjlo", "recnSpjM91mCKJjlo", "recnSpjM91mCKJjlo", "recnSpjM91mCKJjlo", "recnSpjM91mCKJjlo"];
+ const rank2 = ["recnSpjM91mCKJjlo", "recnSpjM91mCKJjlo", "recnSpjM91mCKJjlo", "recnSpjM91mCKJjlo", "recnSpjM91mCKJjlo"];
+ const rank3 = ["recnSpjM91mCKJjlo", "recnSpjM91mCKJjlo", "recnSpjM91mCKJjlo", "recnSpjM91mCKJjlo", "recnSpjM91mCKJjlo"];
+
+ submitVote(rank1, rank2, rank3);
+ }, []);
+
+ return (
+ test
+ );
+};
+
+export default Test;
diff --git a/pages/arcade/showcase/vote.js b/pages/arcade/showcase/vote.js
new file mode 100644
index 00000000..df6e0415
--- /dev/null
+++ b/pages/arcade/showcase/vote.js
@@ -0,0 +1,770 @@
+import { useEffect, useState, useRef } from 'react'
+import CohortCard from '../../../components/arcade/showcase/cohort-card'
+import { Button, Heading, Text, Box, Close, Flex } from 'theme-ui'
+import SlideDown from '../../../components/slide-down'
+import styles from '../../../components/arcade/showcase/my.module.css'
+import Countdown from 'react-countdown'
+import Icon from '@hackclub/icons'
+import ProjectView from '../../../components/arcade/showcase/project-view'
+import SmallView from '../../../components/arcade/showcase/small-view-card'
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
+import { over } from 'lodash'
+
+/** @jsxImportSource theme-ui */
+
+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;
+ }
+ .emblema {
+ font-family: "Emblema One", system-ui;
+ }
+
+ .gaegu {
+ font-family: "Gaegu", sans-serif;
+ }
+
+ body {
+ background-color: #FAEFD6;
+ }
+
+@keyframes float {
+
+ from,
+ to {
+ transform: translate(0%, -37%) rotate(-2deg);
+ }
+
+ 25% {
+ transform: translate(-2%, -40%) rotate(2deg);
+ }
+
+ 50% {
+ transform: translate(0%, -43%) rotate(-1deg);
+ }
+
+ 75% {
+ transform: translate(-1%, -40%) rotate(-1deg);
+ }
+}
+
+a {
+ color: inherit;
+}
+`
+
+const Loading = () => (
+
+ Loading...
+
+)
+
+const ErrorMessage = () => (
+
+ There was an error loading your project.
+
+)
+
+const My = () => {
+ // let originalProjects = {
+ // cohort: {
+ // id: 'rectAjJ2Lv4dDhUGR'
+ // },
+ // showcases: [
+ // {
+ // id: 'rec4cl4TSvfwwnU6H',
+ // createdTime: '2024-08-14T13:47:49.000Z',
+ // fields: {
+ // Name: 'Blast-off',
+ // 'Code Link': 'https://github.com/Ranger-NF/BlastOff',
+ // 'Play Link': 'https://ranger-nf.itch.io/blastoff',
+ // Description: 'This is a description',
+ // color: '#14f0cb',
+ // textColor: '#ffffff',
+ // ScreenshotLink:
+ // 'https://cloud-c6ul4axwx-hack-club-bot.vercel.app/0instagram_profile_downloader.jpg',
+ // ReadMeLink:
+ // 'https://raw.githubusercontent.com/remarkjs/react-markdown/main/readme.md',
+ // 'View link':
+ // 'https://hackclub.com/arcade/showcase/project/rec4cl4TSvfwwnU6H'
+ // }
+ // },
+ // {
+ // id: 'recLyu8vD4mmUqYrA',
+ // createdTime: '2024-08-19T17:12:16.000Z',
+ // fields: {
+ // Name: 'Turtle T1 (A rabbit R1 spinoff)',
+ // 'Code Link': 'https://github.com/briyandyju09/Turtle-T1',
+ // Description: 'A web based spin off to the not so liked rabbit R1',
+ // color: '#FAEFD6',
+ // ScreenshotLink:
+ // 'https://cloud-k7p388c60-hack-club-bot.vercel.app/0image-19.png',
+ // ReadMeLink:
+ // 'https://raw.githubusercontent.com/briyandyju09/Turtle-T1/main/README.md',
+ // 'View link':
+ // 'https://hackclub.com/arcade/showcase/project/recLyu8vD4mmUqYrA'
+ // }
+ // },
+ // {
+ // id: 'recYZd9J9MS4fDuJC',
+ // createdTime: '2024-08-16T22:28:10.000Z',
+ // fields: {
+ // Name: 'peace-and-tranquility',
+ // 'Code Link': 'https://github.com/maxwofford/peace-and-tranquility',
+ // 'Play Link': 'https://dinosaurbbq.org/',
+ // Description: 'No one is around to help',
+ // color: '#293438',
+ // textColor: '#ffffff',
+ // ScreenshotLink:
+ // 'https://cloud-c6ul4axwx-hack-club-bot.vercel.app/0instagram_profile_downloader.jpg',
+ // ReadMeLink:
+ // 'https://raw.githubusercontent.com/remarkjs/react-markdown/main/readme.md',
+ // 'View link':
+ // 'https://hackclub.com/arcade/showcase/project/recYZd9J9MS4fDuJC'
+ // }
+ // },
+ // {
+ // id: 'reclIN8evh60EH90v',
+ // createdTime: '2024-08-17T05:57:05.000Z',
+ // fields: {
+ // Name: 'site2eeeEEE534',
+ // 'Code Link': 'https://github.com/hackclub/site',
+ // 'Play Link': 'https://hackclub.com',
+ // Description:
+ // '๐ The new, new Hack Club website (uses Next.js & Theme UI).',
+ // color: '#68d0f8',
+ // textColor: '#fafafa',
+ // ScreenshotLink:
+ // 'https://cloud-c6ul4axwx-hack-club-bot.vercel.app/0instagram_profile_downloader.jpg',
+ // ReadMeLink:
+ // 'https://raw.githubusercontent.com/remarkjs/react-markdown/main/readme.md',
+ // 'View link':
+ // 'https://hackclub.com/arcade/showcase/project/reclIN8evh60EH90v'
+ // }
+ // },
+ // {
+ // id: 'reclIN8evh60EH2220v',
+ // createdTime: '2024-08-17T05:57:05.000Z',
+ // fields: {
+ // Name: 'site2eeeEEE53344',
+ // 'Code Link': 'https://github.com/hackclub/site',
+ // 'Play Link': 'https://hackclub.com',
+ // Description:
+ // '๐ The new, new Hack Club website (uses Next.js & Theme UI).',
+ // color: '#68d0f8',
+ // textColor: '#fafafa',
+ // ScreenshotLink:
+ // 'https://cloud-c6ul4axwx-hack-club-bot.vercel.app/0instagram_profile_downloader.jpg',
+ // ReadMeLink:
+ // 'https://raw.githubusercontent.com/remarkjs/react-markdown/main/readme.md',
+ // 'View link':
+ // 'https://hackclub.com/arcade/showcase/project/reclIN8evh60EH90v'
+ // }
+ // }
+ // ]
+ // }
+
+ // originalProjects = originalProjects.showcases
+ const [projects, setProjects] = useState([])
+ const [originalProjects, setOriginalProjects] = useState([])
+ const [name, setName] = useState('')
+ const [loadStatus, setLoadStatus] = useState('loading')
+ const [status, setStatus] = useState('loading')
+ const [errorMsg, setError] = useState(null)
+ const [votes, setVotes] = useState({})
+ const [openProjectId, setOpenProjectId] = useState('')
+ const [openProject, setOpenProject] = useState([])
+ const [showUIElements, setShowUIElements] = useState(false)
+ const [activeDroppableId, setActiveDroppableId] = useState(null)
+ const [activeDroppable, setActiveDroppable] = useState(true)
+
+ const [submitStatus, setSubmitStatus] = useState('loading')
+ const [creative, setCreative] = useState([])
+ const [technical, setTechnical] = useState([])
+ const [overall, setOverall] = useState([])
+
+ const [showCreative, setShowCreative] = useState(true)
+ const [showTechnical, setShowTechnical] = useState(false)
+ const [showOverall, setShowOverall] = useState(false)
+ const [endPage, setEndPage] = useState(false)
+ const [isButtonActive, setIsButtonActive] = useState(false)
+
+ const loadProjects = async () => {
+ const token = window.localStorage.getItem('arcade.authToken')
+ const response = await fetch('/api/arcade/showcase/cohort/active', {
+ method: 'GET',
+ headers: {
+ Authorization: `Bearer ${token}`
+ }
+ }).catch(e => {
+ console.error(e)
+ setLoadStatus('error')
+ setError(e)
+ })
+ const data = await response.json()
+ if (data.error) {
+ setLoadStatus('error')
+ return
+ } else {
+ setProjects(data.showcases)
+ setOriginalProjects(data.showcases)
+ setLoadStatus('success')
+ }
+ }
+
+ useEffect(async () => {
+ loadProjects()
+ }, [])
+
+ const getProjectDetails = async () => {
+ const token = window.localStorage.getItem('arcade.authToken')
+ setStatus('loading')
+
+ try {
+ const response = await fetch(
+ `/api/arcade/showcase/projects/${openProjectId}`,
+ {
+ method: 'GET',
+ headers: {
+ Authorization: `Bearer ${token}`
+ }
+ }
+ )
+
+ const data = await response.json()
+
+ if (data.error) {
+ setStatus('error')
+ setError(data.error)
+ } else {
+ setOpenProject(data.project)
+ setStatus('success')
+ }
+ } catch (e) {
+ console.error(e)
+ setStatus('error')
+ setError(e.message)
+ }
+ }
+
+ useEffect(() => {
+ getProjectDetails()
+ }, [openProjectId])
+
+ useEffect(() => {
+ setShowUIElements(true)
+ }, [])
+
+ useEffect(() => {
+ console.log(Object.keys(votes).length)
+ if (Object.keys(votes).length == 5) {
+ setIsButtonActive(true)
+ } else {
+ setIsButtonActive(false)
+ }
+ }, [votes])
+
+ const extractVotes = votes => {
+ const sortedKeys = Object.keys(votes).sort((a, b) => {
+ const numA = parseInt(a.split('-')[1], 10)
+ const numB = parseInt(b.split('-')[1], 10)
+ return numA - numB
+ })
+
+ return sortedKeys.map(key => votes[key])
+ }
+
+ const onDragUpdate = update => {
+ setActiveDroppable(true)
+ const { destination } = update
+ if (destination) {
+ setActiveDroppableId(destination.droppableId)
+ }
+ }
+
+ const onDragEnd = result => {
+ const { source, destination } = result
+
+ if (!destination) return
+
+ if (
+ source.droppableId === 'projects' &&
+ destination.droppableId.startsWith('votes-')
+ ) {
+ const linkId = result.draggableId
+ const voteId = destination.droppableId
+
+ setVotes(prevVotes => {
+ const updatedVotes = {
+ ...prevVotes,
+ [voteId]: linkId
+ }
+
+ const votedProjectIds = Object.values(updatedVotes)
+
+ const updatedProjects = originalProjects.filter(
+ project => !votedProjectIds.includes(project.id)
+ )
+
+ setProjects(updatedProjects)
+
+ return updatedVotes
+ })
+ }
+ setActiveDroppable(false)
+ }
+
+ const deleteVote = voteId => {
+ setVotes(prevVotes => {
+ const updatedVotes = { ...prevVotes }
+
+ delete updatedVotes[voteId]
+
+ const votedProjectIds = Object.values(updatedVotes)
+
+ const updatedProjects = originalProjects.filter(
+ project => !votedProjectIds.includes(project.id)
+ )
+
+ setProjects(updatedProjects)
+
+ return updatedVotes
+ })
+ }
+
+ const renderVoteBox = voteId => {
+ const linkId = votes[voteId]
+ const project = originalProjects.find(link => link.id === linkId)
+
+ if (project) {
+ return (
+
+ {
+ deleteVote(voteId)
+ }}
+ />
+
+
+ {voteId.replace('votes-', '')}
+
+
+
+
+ {project.fields.Name}
+
+
+ {project.fields.Description}
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ {voteId.replace('votes-', '')}
+
+
+
+ Drop here
+
+
+ )
+ }
+
+ const voteCreative = () => {
+ let ids = extractVotes(votes)
+ setCreative(ids)
+ setShowCreative(false)
+ setVotes({})
+ setProjects(originalProjects)
+ setShowTechnical(true)
+ }
+
+ const voteTechnical = () => {
+ let ids = extractVotes(votes)
+ setTechnical(ids)
+ setShowTechnical(false)
+ setVotes({})
+ setProjects(originalProjects)
+ setShowOverall(true)
+ }
+
+ const voteOverall = () => {
+ let ids = extractVotes(votes)
+ setOverall(ids)
+ setShowTechnical(false)
+ setVotes({})
+ setProjects(originalProjects)
+ setEndPage(true)
+ }
+
+ const submitVote = async (creative, technical, overall) => {
+ const authToken = window.localStorage.getItem('arcade.authToken')
+
+ try {
+ const response = await fetch('/api/arcade/showcase/vote', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: authToken
+ },
+ body: JSON.stringify({
+ creative,
+ technical,
+ overall
+ })
+ })
+
+ const data = await response.json()
+ setSubmitStatus('success')
+ return data
+ } catch (error) {
+ console.error('Error submitting vote:', error)
+ setSubmitStatus('error')
+ throw error
+ }
+ }
+
+ useEffect(() => {
+ console.log('the votes')
+ console.log(creative)
+ console.log(technical)
+ console.log(overall)
+
+ submitVote(creative, technical, overall)
+ }, [endPage])
+
+ return endPage == true ? (
+
+ {submitStatus == 'loading'
+ ? 'Loading'
+ : submitStatus == 'success'
+ ? 'Thanks for voting!'
+ : 'Ran into an error sending your votes'}
+
+ ) : (
+ showUIElements && (
+
+
+ )
+ )
+}
+
+export default My
diff --git a/pages/arcade/showcase/vote/project/[ID]/index.js b/pages/arcade/showcase/vote/project/[ID]/index.js
deleted file mode 100644
index b8aac7d4..00000000
--- a/pages/arcade/showcase/vote/project/[ID]/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Page = () => {
- return (
-
+
+
+
+
+
+
+
+
+
+
+
+ Ships
+
+
+ Here are the 18 projects for this round of voting :) Please
+ carefully look at each of them.
+
+
+ {provided => (
+
+
+
+ {projects.map((project, index) => (
+
+ {provided => (
+
+ ))}
+ {provided.placeholder}
+
+ )}
+ {
+ document
+ .getElementById('show-project')
+ .showModal()
+
+ setOpenProjectId(project.id)
+ }}
+ sx={{
+ cursor: 'drag'
+ }}
+ >
+
+ )}
+
+
+
+
+ Choose top 5 for{' '}
+
+
+ {showCreative
+ ? 'Most creative ships'
+ : showTechnical
+ ? 'Most technical ships'
+ : 'Best overall ships'}
+
+ {['votes-1', 'votes-2', 'votes-3', 'votes-4', 'votes-5'].map(
+ voteId => (
+
+ {provided => (
+
+ )
+ )}
+ {isButtonActive ? (
+
+ ) : (
+
+ )}
+
+
+ {renderVoteBox(voteId)}
+ {provided.placeholder}
+
+ )}
+ Project
- )
-}
-
-export default Page
\ No newline at end of file
diff --git a/pages/bin/gallery.js b/pages/bin/gallery.js
deleted file mode 100644
index f6995a1c..00000000
--- a/pages/bin/gallery.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import React from 'react'
-import BinPost from '../../components/bin/GalleryPosts'
-import styles from '../../public/bin/style/gallery.module.css'
-import Script from 'next/script'
-import Nav from '../../components/bin/nav'
-import Footer from '../../components/footer'
-import PartTag from '../../components/bin/PartTag';
-import { useEffect, useRef, useState } from 'react';
-import { resolve } from 'styled-jsx/css';
-import { set } from 'lodash';
-
-export async function getStaticProps() {
- const host = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://hackclub.com';
- const res = await fetch(`${host}/api/bin/gallery/posts/`);
- const posts = await res.json();
-
- const filteredPosts = posts.filter(post => post.status === 'Accepted' && post.parts && !post.hide);
-
- //Tags
-
- const resTag = await fetch(`${host}/api/bin/gallery/tags/`);
- const tags = await resTag.json();
-
- const filteredTags = tags.filter(tag => !tag.hide);
- return {
- props: { posts: filteredPosts,
- tags: filteredTags
- },
- };
-}
-
-
-
-function Gallery({ posts = [], tags = [] }) {
-
- const [allPosts, setAllPosts] = useState([]);
- const [filterPosts, setFilterPosts] = useState([]);
- const [filterParts, setFilterParts] = useState([]);
-
- useEffect(() => {
- setAllPosts(posts);
- setFilterParts([]);
-
- }, []);
-
- useEffect(() => {
- setFilterPosts(
- allPosts.filter(post =>
- post.parts && filterParts.every(part => post.parts.includes(part))
- )
- );
- }, [filterParts]);
-
-
- const addFilter = (partID) => {
- setFilterParts((prevParts) => {
- if (!prevParts.includes(partID)) {
- console.log("add", partID)
- return [...prevParts, partID];
- }
- return prevParts;
- });
-
- };
-
- const removeFilter = (partID) => {
- setFilterParts((prevParts) => {
- return prevParts.filter(id => id !== partID);
- });
- };
-
- return (
-
-
-
- Bin Gallery
-A display of all of bin's projects
- Want to add to the gallery? window.location.href = '/bin'}>Create a bin project in wokwi and your project will be added to the gallery!
-
- Search By Tag:
- -
-
- {tags.map(tag => {
- return (
-
-
-
-
-
-
- {filterPosts.map(post => {
- return (
-
-
-