84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import { useContext, useEffect, useState } from "react";
|
|
import { Avatar, Chip, SxProps, useTheme, Theme } from "@mui/material";
|
|
import { UserContext } from "../Modules/context";
|
|
interface Props {
|
|
userid: number;
|
|
}
|
|
// Simply just shows the name of the user given there userid
|
|
export default function Username({ userid }: Props) {
|
|
const [getUser, getUserNow] = useContext(UserContext);
|
|
const [username, setUsername] = useState<string>(getUserNow(userid));
|
|
useEffect(() => {
|
|
getUser(userid).then((e) => setUsername(e));
|
|
}, [userid, getUser]);
|
|
return <>{username}</>;
|
|
}
|
|
interface UserChipProps extends Props {
|
|
sx?: SxProps<Theme>;
|
|
}
|
|
// Creates a simple chip for the user
|
|
export function UserChip({ userid, sx }: UserChipProps) {
|
|
const [getUser, getUserNow] = useContext(UserContext);
|
|
const [username, setUsername] = useState(getUserNow(userid));
|
|
useEffect(() => {
|
|
if (userid > 0) {
|
|
getUser(userid).then((e) => setUsername(e));
|
|
}
|
|
}, [userid, getUser]);
|
|
const theme = useTheme();
|
|
if (userid == 0) return <p>AI</p>;
|
|
if (userid == -1) return <p>No one</p>;
|
|
// Cenerates a color based on the name
|
|
const background = stringToColor(userid);
|
|
const text = theme.palette.getContrastText(background);
|
|
const split_username = username.split(" ");
|
|
return (
|
|
<Chip
|
|
sx={sx}
|
|
avatar={
|
|
<Avatar sx={{ bgcolor: background }}>
|
|
<div style={{ color: text }}>{`${
|
|
split_username[0].length > 0 ? split_username[0][0] : ""
|
|
}${split_username.length > 1 ? split_username[1][0] : ""}`}</div>
|
|
</Avatar>
|
|
}
|
|
label={username}
|
|
/>
|
|
);
|
|
}
|
|
// Shows an avatar for the user with a color based on the name
|
|
export function UserAvatar({ userid }: Props) {
|
|
const [getUser, getUserNow] = useContext(UserContext);
|
|
const [username, setUsername] = useState(getUserNow(userid));
|
|
useEffect(() => {
|
|
getUser(userid).then((e) => setUsername(e));
|
|
}, [userid, getUser]);
|
|
// Cenerates a color based on the name
|
|
const background = stringToColor(userid);
|
|
|
|
const theme = useTheme();
|
|
const text = theme.palette.getContrastText(background);
|
|
const split_username = username.split(" ");
|
|
return (
|
|
<Avatar sx={{ bgcolor: background }}>
|
|
<div style={{ color: text }}>{`${
|
|
split_username[0].length > 0 ? split_username[0][0] : ""
|
|
}${split_username.length > 1 ? split_username[1][0] : ""}`}</div>
|
|
</Avatar>
|
|
);
|
|
}
|
|
// This turns a number into a random color.
|
|
export function stringToColor(string: number) {
|
|
let hash =
|
|
(string * (1 + Math.sqrt(5))) / 2 -
|
|
Math.floor((string * (1 + Math.sqrt(5))) / 2);
|
|
hash = Math.floor(hash * 256 * 256 * 256);
|
|
let i;
|
|
let color = "#";
|
|
for (i = 0; i < 3; i += 1) {
|
|
const value = hash % 256;
|
|
hash = parseInt((hash / 256).toString());
|
|
color += `00${value.toString(16)}`.slice(-2);
|
|
}
|
|
return color;
|
|
}
|