diff --git a/components/arcade/showcase/project-view.js b/components/arcade/showcase/project-view.js
index 6156a4f8..19dffd3c 100644
--- a/components/arcade/showcase/project-view.js
+++ b/components/arcade/showcase/project-view.js
@@ -51,6 +51,7 @@ const ProjectView = ({
screenshot = '',
video = '',
readMeLink = '',
+ preview,
...props
}) => {
const [darkColor, setDarkColor] = useState('#000000')
@@ -101,7 +102,13 @@ const ProjectView = ({
-
- View all my ships
-
+ {preview ? (
+ <>
+ ) : (
+
+ View all my ships
+
+ )}
- { image != '' && (
+ {image != '' && (
-
+
)}
@@ -237,7 +244,6 @@ const ProjectView = ({
-
)
}
diff --git a/components/arcade/showcase/small-view-card.js b/components/arcade/showcase/small-view-card.js
new file mode 100644
index 00000000..24876e32
--- /dev/null
+++ b/components/arcade/showcase/small-view-card.js
@@ -0,0 +1,33 @@
+import { useRef } from 'react'
+import { Text, Close } from 'theme-ui'
+import styles from './cohort-card.module.css'
+import { useState } from 'react'
+import { Button } from 'theme-ui'
+import Icon from '@hackclub/icons'
+import randomNotFoundImg from './random-not-found-img'
+/** @jsxImportSource theme-ui */
+
+const SmallView = ({
+ id,
+ title = 'Title Not Found',
+ desc = 'Description Not Found'
+}) => {
+ return (
+
+ )
+}
+
+export default SmallView
diff --git a/package.json b/package.json
index 3630e059..cf6f0425 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
"pcb-stackup": "^4.2.8",
"rc-dialog": "^9.5.2",
"react": "^17.0.2",
+ "react-beautiful-dnd": "^13.1.1",
"react-before-after-slider-component": "^1.1.8",
"react-countdown": "^2.3.6",
"react-datepicker": "^4.24.0",
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 && (
+
+
+
+
+
+
+ Ships
+
+
+ Here are the 18 projects for this round of voting :) Please
+ carefully look at each of them.
+
+
+ {provided => (
+
+ {projects.map((project, index) => (
+
+ {provided => (
+ {
+ document
+ .getElementById('show-project')
+ .showModal()
+
+ setOpenProjectId(project.id)
+ }}
+ sx={{
+ cursor: 'drag'
+ }}
+ >
+
+
+ )}
+
+ ))}
+ {provided.placeholder}
+
+
+
+
+
+ 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 => (
+
+ {renderVoteBox(voteId)}
+ {provided.placeholder}
+
+ )}
+
+ )
+ )}
+ {isButtonActive ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+