WIP friend requests dialog

3 files changed, 146 insertions, 4 deletions

diff --git a/components/gameBar.tsx b/components/gameBar.tsx
index cacb5e8..f26201c 100644
--- a/components/gameBar.tsx
+++ b/components/gameBar.tsx
@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { Vierkant } from './ui';
+import { Vierkant, Bubble } from './ui';
 
 import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
 import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded';
@@ -71,6 +71,8 @@ export function GameBar(props: {
 			<div style={{ ...GameBarAlignStyle, float: "right" }}>
 				<GameBarModule>
 					<SettingsRoundedIcon/>
+					<Bubble>
+					</Bubble>
 				</GameBarModule>
 				<GameBarSpacer/>
 				<GameBarModule>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 7da6716..2c7ce32 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,6 +1,9 @@
 import { CSSProperties, useEffect, useState } from "react";
 
 import { LogoDark } from "../components/logo";
+import { AccountAvatar } from "./account";
+import { userInfo } from "../api/api";
+import { Bubble, Vierkant, Button } from './ui';
 
 import Home from '@material-ui/icons/Home';
 import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
@@ -8,7 +11,86 @@ import ExtensionIcon from '@material-ui/icons/Extension';
 import SearchIcon from '@material-ui/icons/Search';
 import SettingsIcon from '@material-ui/icons/Settings';
 import PersonIcon from '@material-ui/icons/Person';
-import { AccountAvatar } from "./account";
+import GroupAddIcon from '@material-ui/icons/GroupAdd';
+import DoneIcon from '@material-ui/icons/Done';
+import CloseIcon from '@material-ui/icons/Close';
+
+function FriendRequestsBubble(props: {
+	visible?: boolean;
+}) {
+	return props.visible && <Bubble style={{
+		left: 48 + 12,
+		top: 92,
+		transform: "translateY(-100%)",
+		textAlign: "left",
+		width: 400,
+		height: 450
+	}} tuitjeStyle={{
+		left: 12,
+		bottom: 86,
+		transform: "translate(-100%, 100%) rotate(90deg)"
+	}}>
+		<h2 style={{ marginBottom: 24 }}>Vriendschapsverzoeken</h2>
+		<div style={{
+			overflowY: "scroll",
+			whiteSpace: "normal",
+			height: 450 - 24 * 4,
+			borderRadius: 6
+		}}>
+			<FriendRequest user={ {"id": "1398093580938", "username": "test", "status": "Lorum ipsum"} }/>
+			<FriendRequest user={ {"id": "1398093580938", "username": "test", "status": "Lorum ipsum"} }/>
+			<FriendRequest user={ {"id": "1398093580938", "username": "test", "status": "Lorum ipsum"} }/>
+			<FriendRequest user={ {"id": "1398093580938", "username": "test", "status": "Lorum ipsum"} }/>
+			<FriendRequest user={ {"id": "1398093580938", "username": "test", "status": "Lorum ipsum"} }/>
+			<FriendRequest user={ {"id": "1398093580938", "username": "test", "status": "Lorum ipsum"} }/>
+		</div>
+	</Bubble>
+}
+
+var FriendRequestButtonStyle: CSSProperties = {
+	display: "inline-block",
+	padding: 12,
+	borderRadius: 6,
+	marginLeft: 6
+};
+
+function FriendRequest(props: {
+	user: userInfo;
+}) {
+	return <Vierkant style={{
+		borderRadius: 8,
+		background: "var(--background-alt)",
+		margin: 0,
+		padding: 12,
+		width: "100%",
+		marginBottom: 12
+	}}>
+		<div style={{
+			position: "relative"
+		}}>
+			<a href={"/user?id=" + props.user.id}>
+				<AccountAvatar size={48} dummy/>
+				<div style={{
+					display: "inline-block",
+					verticalAlign: "top",
+					marginLeft: 6
+				}}>
+					<b>{props.user.username}</b>
+					<p>{props.user.status}</p>
+				</div>
+			</a>
+			<div style={{
+				display: "inline-block",
+				verticalAlign: "top",
+				float: "right"
+			}}>
+				<Button style={FriendRequestButtonStyle}><DoneIcon/></Button>
+				<Button style={FriendRequestButtonStyle}><CloseIcon/></Button>
+			</div>
+		</div>
+	</Vierkant>
+}
+
 
 var NavBarItemStyle: CSSProperties = {
 	margin: 12,
@@ -20,6 +102,8 @@ export function NavBar() {
 	var [ loggedIn, setLoggedIn ] = useState(false);
 	useEffect(() => setLoggedIn(document.cookie.includes("token")), []);
 
+	var [ friendRequestDialogVisible, setFriendRequestDialogVisible ] = useState(false);
+
 	return <div className="navbar" style={{
 		width: 48,
 		height: "100%",
@@ -33,8 +117,9 @@ export function NavBar() {
 		top: 0,
 		left: 0,
 
-		overflow: "hidden",
-		whiteSpace: "nowrap"
+		overflow: "visible",
+		whiteSpace: "nowrap",
+		zIndex: 1
 	}}>
 		<div style={NavBarItemStyle}><LogoDark/></div>
 		<a href="/" style={NavBarItemStyle}><Home/></a>
@@ -48,6 +133,23 @@ export function NavBar() {
 			left: 0,
 			backgroundColor: "var(--background)"
 		}}>
+			{ loggedIn && <a style={{
+				overflow: "visible",
+				position: "relative",
+				...NavBarItemStyle
+			}}>
+				<div style={{ cursor: "pointer" }} onClick={() => setFriendRequestDialogVisible(!friendRequestDialogVisible)}>
+					<GroupAddIcon/>
+				</div>
+				<div style={{
+					backgroundColor: "var(--disk-a)",
+					width: 8, height: 8,
+					borderRadius: 4,
+					position: "absolute",
+					top: -2, right: -2
+				}}/>
+				<FriendRequestsBubble visible={friendRequestDialogVisible}/>
+			</a> }
 			<a href={loggedIn ? "/user" : "/login"} style={NavBarItemStyle}>
 				{
 					loggedIn ?
diff --git a/components/ui.tsx b/components/ui.tsx
index 7f10424..9d532f8 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -242,3 +242,41 @@ export class ColorPicker extends Component<{
 	}
 }
 
+export function Tuitje(props: {
+	style?: CSSProperties;
+	rotation?: number;
+}) {
+	return <svg width="36" height="12" viewBox="0 0 36 12" fill="none" xmlns="http://www.w3.org/2000/svg" style={{
+		...props.style
+	}}>
+		<path d="M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z"
+			  fill={ props.style?.background as string || "var(--background)" }/>
+	</svg>
+}
+
+export function Bubble(props: {
+	children?: ReactNode;
+	style?: CSSProperties;
+	tuitjeStyle?: CSSProperties;
+}) {
+	return <Vierkant style={{
+		position: "absolute",
+		textAlign: "center",
+		margin: 0,
+		overflow: "visible",
+		left: "50%",
+		top: -24,
+		transform: "translateY(-100%) translateX(-50%)",
+		boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+		...props.style
+	}}>
+		{props.children}
+		<Tuitje style={{
+			position: "absolute",
+			bottom: -12,
+			transform: "translate(-50%, 0%) rotate(0deg)",
+			...props.tuitjeStyle
+		}}/>
+	</Vierkant>
+}
+