cleanup
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,164 +0,0 @@
|
|||||||
"use client";
|
|
||||||
import { useState, useEffect } from "react";
|
|
||||||
import { Nunito } from "next/font/google";
|
|
||||||
import users from "muzak/data/users.json";
|
|
||||||
import Image from "next/image";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { api, Track } from "muzak/data/fetcher";
|
|
||||||
|
|
||||||
const nunito = Nunito({
|
|
||||||
weight: "900",
|
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function Lobby() {
|
|
||||||
const [partySize, setPartySize] = useState(8);
|
|
||||||
const [userList, setUserList] = useState([]);
|
|
||||||
const [yesVoteList, setYesVoteList] = useState([]);
|
|
||||||
const [noVoteList, setNoVoteList] = useState([]);
|
|
||||||
|
|
||||||
const [currentSong, setCurrentSong] = useState<Track>();
|
|
||||||
const [songLoading, setSongLoading] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
populateUserList();
|
|
||||||
}, [partySize]);
|
|
||||||
|
|
||||||
async function getTrack() {
|
|
||||||
setSongLoading(true);
|
|
||||||
const { data: track } = await api.tracks.vote({});
|
|
||||||
setCurrentSong(track);
|
|
||||||
console.log("I got a track!", track.name);
|
|
||||||
setSongLoading(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!currentSong && !songLoading) getTrack();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
function populateUserList() {
|
|
||||||
const mappedUsers = users.slice(0, partySize).map((user) => ({
|
|
||||||
id: user.id,
|
|
||||||
name: user.name,
|
|
||||||
avatar: user.avatar,
|
|
||||||
host: user.host,
|
|
||||||
}));
|
|
||||||
setUserList(mappedUsers);
|
|
||||||
}
|
|
||||||
|
|
||||||
// function handleYesVote(user) {
|
|
||||||
// setYesVoteList([...yesVoteList, user]);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function handleNoVote(user) {
|
|
||||||
// setNoVoteList([...noVoteList, user]);
|
|
||||||
// }
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main className="flex min-h-screen flex-col items-center justify-between gap-4 p-24">
|
|
||||||
<div className="flex w-full items-start justify-between text-center">
|
|
||||||
<div className="flex-1"></div>
|
|
||||||
<div className="flex flex-1 items-center justify-center">
|
|
||||||
<div className="flex h-[170px] w-[170px] items-center justify-center rounded-full border-2 bg-orange-400">
|
|
||||||
<div className="text-5xl text-white drop-shadow-sm drop-shadow-black">
|
|
||||||
<button onClick={getTrack}>30</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-1 flex-row items-center justify-end gap-4">
|
|
||||||
<Link
|
|
||||||
href="/pause"
|
|
||||||
className="w-30 rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
|
|
||||||
>
|
|
||||||
PAUSE
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href="/voting"
|
|
||||||
className="w-30 rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
|
|
||||||
>
|
|
||||||
NEXT
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col items-center justify-center">
|
|
||||||
<div className="flex flex-row items-center justify-center gap-x-32">
|
|
||||||
<div className="grid min-w-52 grid-flow-row grid-cols-3 items-start justify-start gap-4 rounded bg-blue-950/80 p-4">
|
|
||||||
{userList.map((user) => (
|
|
||||||
<div
|
|
||||||
key={user.id}
|
|
||||||
className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4"
|
|
||||||
>
|
|
||||||
<img src={user.avatar} alt={user.name} width={75} height={75} />
|
|
||||||
<div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
|
|
||||||
{user.name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}{" "}
|
|
||||||
</div>
|
|
||||||
{!songLoading && currentSong ? (
|
|
||||||
<div className="rounded-md bg-black p-2">
|
|
||||||
<Image
|
|
||||||
src={currentSong.album_cover}
|
|
||||||
alt={currentSong.name}
|
|
||||||
width={500}
|
|
||||||
height={500}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="rounded-md bg-black p-2">
|
|
||||||
<Image
|
|
||||||
src="/meowl.png"
|
|
||||||
alt="Loading.."
|
|
||||||
width={500}
|
|
||||||
height={500}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="grid min-w-52 grid-flow-row grid-cols-3 items-start justify-start gap-4 rounded bg-blue-950/80 p-4">
|
|
||||||
{userList.map((user) => (
|
|
||||||
<div
|
|
||||||
key={user.id}
|
|
||||||
className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4"
|
|
||||||
>
|
|
||||||
<img src={user.avatar} alt={user.name} width={75} height={75} />
|
|
||||||
<div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
|
|
||||||
{user.name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}{" "}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{!songLoading && currentSong && (
|
|
||||||
<div className="flex flex-col items-center justify-start">
|
|
||||||
<h2
|
|
||||||
className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
|
|
||||||
>
|
|
||||||
{currentSong.artist}
|
|
||||||
</h2>
|
|
||||||
<h2
|
|
||||||
className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
|
|
||||||
>
|
|
||||||
{currentSong.name}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-row items-start justify-start gap-10 rounded bg-blue-950/80 p-4">
|
|
||||||
{userList.map((user) => (
|
|
||||||
<div
|
|
||||||
key={user.id}
|
|
||||||
className="flex h-[100px] w-[100px] flex-col items-center justify-center p-4"
|
|
||||||
>
|
|
||||||
<img src={user.avatar} alt={user.name} width={75} height={75} />
|
|
||||||
<div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
|
|
||||||
{user.name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user