102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
import Sheet from "@/components/sheet/sheet";
|
|
import { useAuth } from "@/contexts/auth-context";
|
|
import { Flex, Title, ActionIcon, Stack, Button, Box } from "@mantine/core";
|
|
import { PencilIcon, FootballHelmetIcon } from "@phosphor-icons/react";
|
|
import { useMemo } from "react";
|
|
import NameUpdateForm from "./name-form";
|
|
import PlayerAvatar from "@/components/player-avatar";
|
|
import { useSheet } from "@/hooks/use-sheet";
|
|
import { Player } from "../../types";
|
|
import PlayerHeadToHeadSheet from "../player-head-to-head-sheet";
|
|
|
|
interface HeaderProps {
|
|
player: Player;
|
|
}
|
|
|
|
const Header = ({ player }: HeaderProps) => {
|
|
const nameSheet = useSheet();
|
|
const h2hSheet = useSheet();
|
|
const { user: authUser } = useAuth();
|
|
|
|
const owner = useMemo(() => authUser?.id === player.id, [authUser?.id, player.id]);
|
|
const name = useMemo(() => `${player.first_name} ${player.last_name}`, [player.first_name, player.last_name]);
|
|
const authUserName = useMemo(() => {
|
|
if (!authUser) return "";
|
|
return `${authUser.first_name} ${authUser.last_name}`;
|
|
}, [authUser]);
|
|
|
|
const fontSize = useMemo(() => {
|
|
const baseSize = 28;
|
|
const maxLength = 24;
|
|
|
|
if (name.length <= maxLength) {
|
|
return `${baseSize}px`;
|
|
}
|
|
|
|
const scaleFactor = Math.max(0.6, maxLength / name.length);
|
|
return `${Math.floor(baseSize * scaleFactor)}px`;
|
|
}, [name]);
|
|
|
|
return (
|
|
<>
|
|
<Stack gap="sm" align="center" pt="md">
|
|
<Flex h="15dvh" px='xl' w='100%' align='self-end' gap='md'>
|
|
<PlayerAvatar name={name} size={100} />
|
|
<Flex align='center' justify='center' gap={4} pb={20} w='100%'>
|
|
<Title ta='center' style={{ fontSize, lineHeight: 1.2 }}>{name}</Title>
|
|
<ActionIcon display={owner ? 'block' : 'none'} radius='xl' variant='subtle' onClick={nameSheet.open}>
|
|
<PencilIcon size={20} />
|
|
</ActionIcon>
|
|
<ActionIcon
|
|
variant="subtle"
|
|
size="sm"
|
|
radius="xl"
|
|
onClick={h2hSheet.open}
|
|
w={40}
|
|
display={!owner ? 'block' : 'none'}
|
|
>
|
|
<Box style={{ position: 'relative', width: 27.5, height: 16 }}>
|
|
<FootballHelmetIcon
|
|
size={14}
|
|
style={{
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: 0,
|
|
transform: 'rotate(25deg)'
|
|
}}
|
|
/>
|
|
<FootballHelmetIcon
|
|
size={14}
|
|
style={{
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0,
|
|
transform: 'scaleX(-1) rotate(25deg)'
|
|
}}
|
|
/>
|
|
</Box>
|
|
</ActionIcon>
|
|
</Flex>
|
|
</Flex>
|
|
</Stack>
|
|
|
|
<Sheet title='Update Name' {...nameSheet.props}>
|
|
<NameUpdateForm player={player} toggle={nameSheet.toggle} />
|
|
</Sheet>
|
|
|
|
{!owner && authUser && (
|
|
<Sheet title="Head to Head" {...h2hSheet.props}>
|
|
<PlayerHeadToHeadSheet
|
|
player1Id={authUser.id}
|
|
player1Name={authUserName}
|
|
player2Id={player.id}
|
|
player2Name={name}
|
|
isOpen={h2hSheet.props.opened}
|
|
/>
|
|
</Sheet>
|
|
)}
|
|
</>
|
|
)
|
|
};
|
|
|
|
export default Header; |