From 499a35bf50a32a8733040b012c3f4baaefdefea5 Mon Sep 17 00:00:00 2001 From: Guus Date: Mon, 7 Jul 2025 22:17:51 +0200 Subject: [PATCH] update lobby page design --- frontend/public/crown.png | Bin 0 -> 676 bytes frontend/src/app/lobby/page.tsx | 103 +++++++++++++++++++++++++------- frontend/src/app/login/page.tsx | 42 +++++++++++++ frontend/src/data/users.json | 50 ++++++++++++++++ frontend/tsconfig.json | 11 +++- 5 files changed, 181 insertions(+), 25 deletions(-) create mode 100644 frontend/public/crown.png create mode 100644 frontend/src/app/login/page.tsx create mode 100644 frontend/src/data/users.json diff --git a/frontend/public/crown.png b/frontend/public/crown.png new file mode 100644 index 0000000000000000000000000000000000000000..70bef8f5714b1325c1df05ef989c832e305ca1a3 GIT binary patch literal 676 zcmV;V0$crwP)9WF^!L(c_zq zNK6yGI5r|#B>K4h9TESR_>)q;@OeX4V*X9l?ZlFkxUv$d38IObjcA`F>N^Y&J}1hp zTqG~OA=Z>%-^LM9+l99sYs#Oa5*`gb;x*;VbH_NI3tR4x*Zc$qf#HY$FBO*2e(w7V zPUGn-$x9yu+8?2onv*r2=^T@l<#m3g`f}7#%k!x-p3000v9`jmof=prsy7$iDcQ^$ zvLl=+C0?W-khJ}(5b0B-Yp=>4DffIhf7h^1)%KjLt0B(u*7tiBC()9Bx9WZj#F8WX z<~@5-2 z`GzxLGMD?NbW4ME+((3{97X}si-KJ{9Dhi}=Of;^|3k#9wZ<18OOpesnX`ES0000< KMNUMnLSTXcaWS?4 literal 0 HcmV?d00001 diff --git a/frontend/src/app/lobby/page.tsx b/frontend/src/app/lobby/page.tsx index 97abf62..0b02640 100644 --- a/frontend/src/app/lobby/page.tsx +++ b/frontend/src/app/lobby/page.tsx @@ -1,47 +1,104 @@ "use client"; - -import { Vollkorn, Nunito } from "next/font/google"; -import { useState } from "react"; - -const vollkorn = Vollkorn({ - weight: "600", - subsets: ["latin"], -}); +import { useState, useEffect } from "react"; +import { Markazi_Text, Nunito } from "next/font/google"; +import users from "muzak/data/users.json"; +import Image from "next/image"; const nunito = Nunito({ weight: "900", subsets: ["latin"], }); +const MAX_PARTY_SIZE = 8; + export default function Lobby() { - const [userName, setUserName] = useState("Stroop"); + const [partySize, setPartySize] = useState(0); + const [userList, setUserList] = useState([]); + + 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 addUserToParty() { + setPartySize((prev) => Math.min(prev + 1, MAX_PARTY_SIZE)); + } + + function deleteUserFromParty() { + setPartySize((prev) => Math.max(prev - 1, 0)); + } + return (

- LOGIN + LOBBY

-
-

Welkom, {userName}!

-
- +
+
+
+ Players: {partySize} +
- +
+ {/*
*/} +
+ {userList.map((user) => ( +
+ {user.name} + {user.name} + {user.host && ( + Crown image + )} +
+ ))} +
+
+ +
+ +
-
); } diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx new file mode 100644 index 0000000..b42f16b --- /dev/null +++ b/frontend/src/app/login/page.tsx @@ -0,0 +1,42 @@ +"use client"; + +import { Nunito } from "next/font/google"; +import { useState } from "react"; + +const nunito = Nunito({ + weight: "900", + subsets: ["latin"], +}); + +export default function Login() { + const [userName, setUserName] = useState("Stroop"); + return ( +
+
+

+ LOGIN +

+
+ +
+

Welkom, {userName}!

+
+ + +
+
+
+
+ ); +} diff --git a/frontend/src/data/users.json b/frontend/src/data/users.json new file mode 100644 index 0000000..5e913c3 --- /dev/null +++ b/frontend/src/data/users.json @@ -0,0 +1,50 @@ +[ + { + "id": 1, + "name": "Mark", + "avatar": "https://i.pravatar.cc/300?img=66", + "host": true + }, + { + "id": 2, + "name": "Guus", + "avatar": "https://i.pravatar.cc/300?img=67", + "host": false + }, + { + "id": 3, + "name": "Freek", + "avatar": "https://i.pravatar.cc/300?img=68", + "host": false + }, + { + "id": 4, + "name": "JP", + "avatar": "https://i.pravatar.cc/300?img=69", + "host": false + }, + { + "id": 5, + "name": "Lourens", + "avatar": "https://i.pravatar.cc/300?img=70", + "host": false + }, + { + "id": 6, + "name": "Martijn", + "avatar": "https://i.pravatar.cc/300?img=6", + "host": false + }, + { + "id": 7, + "name": "Hugo", + "avatar": "https://i.pravatar.cc/300?img=7", + "host": false + }, + { + "id": 8, + "name": "Erik", + "avatar": "https://i.pravatar.cc/300?img=8", + "host": false + } +] diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 290cd52..e3e4f1c 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -7,7 +7,8 @@ "baseUrl": "./", "paths": { "muzak/config/*": ["./src/config/*"], - "muzak/data/*": ["./src/data/*"] + "muzak/data/*": ["./src/data/*"], + "muzak/app/*": ["./src/app/*"] }, "allowJs": false, @@ -27,6 +28,12 @@ } ] }, - "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"], + "include": [ + "next-env.d.ts", + ".next/types/**/*.ts", + "**/*.ts", + "**/*.tsx", + "src/data/users.json" + ], "exclude": ["node_modules"] }