voting page mock-up

frontend/src/app/style.css

@@ -37,3 +37,7 @@
 .text-outline {
   -webkit-text-stroke: 2px black;
 }
+
+.text-outline-small {
+  -webkit-text-stroke: 1px black;
+}

frontend/src/app/voting/page.tsx

@@ -11,41 +11,126 @@ const nunito = Nunito({
 });
 
 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({
+    artist: "The Meowls",
+    title: "The Owls Are Not What They Seem",
+  });
+
+  useEffect(() => {
+    populateUserList();
+  }, [partySize]);
+
+  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 p-24">
-      <div>
-        <h1
-          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
-        >
-          VOTING
-        </h1>
+    <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">
+              30
+            </div>
+          </div>
         </div>
 
-      <div className="flex min-h-[500px] min-w-[500px] flex-col items-center justify-between gap-4 rounded-md bg-blue-950/80 p-8">
-        <div className="flex w-full flex-row items-center justify-between px-3">
+        <div className="flex flex-1 flex-row items-center justify-end gap-4">
           <Link
             href="/pause"
-            className="rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
+            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="rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
+            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>
+
           <div className="rounded-md bg-black p-2">
-          <Image src="/meowl.png" alt="meowl" width={400} height={400} />
+            <Image src="/meowl.png" alt="meowl" width={500} height={500} />
           </div>
-
-        <div className="text-3xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
-          Artist - Title
+          <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>
+        <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.title}
+          </h2>
         </div>
       </div>
 
-      <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>
   );
 }

node_modules/.package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "muzak",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "muzak",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}