Skip to content

Commit

Permalink
header tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@sspenst
sspenst committed Dec 9, 2023
1 parent 979d9b2 commit 4a2f2b9
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 109 deletions.
99 changes: 70 additions & 29 deletions components/header/dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,44 +275,85 @@ export default function Dropdown() {
)}
</Menu.Item>
</div>
{isLoggedIn && <>
<Menu.Item>
{({ active }) => (
<Link href='/settings' passHref>
{isLoggedIn ?
<>
<Menu.Item>
{({ active }) => (
<Link href='/settings' passHref>
<div
className='flex w-full items-center rounded-md cursor-pointer px-3 py-2 gap-3'
style={{
backgroundColor: active ? 'var(--bg-color-3)' : undefined,
}}
>
<svg xmlns='http://www.w3.org/2000/svg' className='w-5 h-5' fill='currentColor' viewBox='0 0 16 16'>
<path d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z' />
<path d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z' />
</svg>
Settings
</div>
</Link>
)}
</Menu.Item>
<Divider />
<Menu.Item>
{({ active }) => (
<div
className='flex w-full items-center rounded-md cursor-pointer px-3 py-2 gap-3'
onClick={isGuest(user) ? logOutToast : logOut}
style={{
backgroundColor: active ? 'var(--bg-color-3)' : undefined,
}}
>
<svg xmlns='http://www.w3.org/2000/svg' className='w-5 h-5' fill='currentColor' viewBox='0 0 16 16'>
<path d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z' />
<path d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z' />
<path fillRule='evenodd' d='M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0v2z' />
<path fillRule='evenodd' d='M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z' />
</svg>
Settings
Log Out
</div>
</Link>
)}
</Menu.Item>
<Divider />
<Menu.Item>
{({ active }) => (
<div
className='flex w-full items-center rounded-md cursor-pointer px-3 py-2 gap-3'
onClick={isGuest(user) ? logOutToast : logOut}
style={{
backgroundColor: active ? 'var(--bg-color-3)' : undefined,
}}
>
<svg xmlns='http://www.w3.org/2000/svg' className='w-5 h-5' fill='currentColor' viewBox='0 0 16 16'>
<path fillRule='evenodd' d='M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0v2z' />
<path fillRule='evenodd' d='M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z' />
</svg>
Log Out
</div>
)}
</Menu.Item>
</>}
)}
</Menu.Item>
</>
:
<div className='block sm:hidden'>
<Divider />
<Menu.Item>
{({ active }) => (
<Link href='/login' onClick={() => sessionStorage.clear()}>
<div
className='flex w-full items-center rounded-md cursor-pointer px-3 py-2 gap-3'
style={{
backgroundColor: active ? 'var(--bg-color-3)' : undefined,
}}
>
<svg xmlns='http://www.w3.org/2000/svg' className='w-5 h-5' fill='currentColor' viewBox='0 0 16 16'>
<path fillRule='evenodd' d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0z' />
<path fillRule='evenodd' d='M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z' />
</svg>
Log In
</div>
</Link>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<Link href='/signup'>
<div
className='flex w-full items-center rounded-md cursor-pointer px-3 py-2 gap-3'
style={{
backgroundColor: active ? 'var(--bg-color-3)' : undefined,
}}
>
<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='w-5 h-5'>
<path strokeLinecap='round' strokeLinejoin='round' d='M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z' />
</svg>
Sign Up
</div>
</Link>
)}
</Menu.Item>
</div>
}
</div>
</Menu.Items>
</Transition>
Expand Down
101 changes: 46 additions & 55 deletions components/header/headerControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,87 +6,78 @@ import StyledTooltip from '../page/styledTooltip';
import MusicIcon from './musicIcon';
import Notifications from './notifications';

/**
* If logged in:
* - levels solved
* - connected users + multiplayer matches
* - notifications
*
* If not logged in:
* - log in
* - sign up
*/
function UserHeaderControls() {
const { multiplayerSocket, user, userLoading } = useContext(AppContext);
function HeaderMultiplayer() {
const { multiplayerSocket, user } = useContext(AppContext);
const { connectedPlayersCount, matches, socket } = multiplayerSocket;

if (userLoading) {
return <span>Loading...</span>;
if (!user) {
return null;
}

if (!user) {
return (<>
<Link
className='hover:underline'
href='/login'
onClick={() => {
sessionStorage.clear();
}}
>
Log In
</Link>
<Link href='/signup' className='hover:underline'>
Sign Up
</Link>
</>);
const isConnected = socket?.connected && connectedPlayersCount > 0;

function getTooltipContent() {
if (!isConnected) {
return 'Connecting...';
}

return `${connectedPlayersCount} player${connectedPlayersCount !== 1 ? 's' : ''} online${matches.length > 0 ? `, ${matches.length} current multiplayer match${matches.length === 1 ? '' : 'es'}` : ''}`;
}

return (<>
{socket?.connected && connectedPlayersCount > 0 &&
<Link className='hover:opacity-70' id='multiplayerBtn' aria-label={`multiplayer - ${connectedPlayersCount} online`} href='/multiplayer' passHref>
<div className='flex items-start -mr-1' data-tooltip-id='connected-players-count' data-tooltip-content={`${connectedPlayersCount} player${connectedPlayersCount !== 1 ? 's' : ''} online${matches.length > 0 ? `, ${matches.length} current multiplayer match${matches.length === 1 ? '' : 'es'}` : ''}`}>
<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='w-5 h-6'>
<path strokeLinecap='round' strokeLinejoin='round' d='M8.288 15.038a5.25 5.25 0 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z' />
</svg>
<div
className='flex flex-col -ml-1 px-0.5 text-xs rounded-full'
style={{
backgroundColor: 'var(--bg-color-2)',
fontSize: '0.75rem',
lineHeight: '0.75rem',
borderColor: 'var(--bg-color-2)',
}}
>
<div className='text-green-500'>
{connectedPlayersCount}
<Link className='hover:opacity-70' id='multiplayerBtn' aria-label={`multiplayer - ${connectedPlayersCount} online`} href='/multiplayer' passHref>
<div className='flex items-start -mr-1' data-tooltip-id='connected-players-count' data-tooltip-content={getTooltipContent()}>
<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='w-5 h-6'>
<path strokeLinecap='round' strokeLinejoin='round' d='M8.288 15.038a5.25 5.25 0 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z' />
</svg>
<div
className='flex flex-col -ml-1 px-0.5 text-xs rounded-full'
style={{
backgroundColor: 'var(--bg-color-2)',
fontSize: '0.75rem',
lineHeight: '0.75rem',
borderColor: 'var(--bg-color-2)',
}}
>
{!isConnected ?
<div className='h-3 w-2 pt-0.5'>
<span className='animate-ping absolute inline-flex rounded-full bg-yellow-500 opacity-75 h-2 w-2' />
<span className='bg-yellow-500 absolute h-2 w-2 rounded-full' />
</div>
{matches.length > 0 &&
<div className='text-green-300'>
{matches.length}
:
<>
<div className='text-green-500'>
{connectedPlayersCount}
</div>
}
</div>
{matches.length > 0 &&
<div className='text-green-300'>
{matches.length}
</div>
}
</>
}
</div>
</Link>
}
</div>
</Link>
<StyledTooltip id='connected-players-count' />
<Notifications />
</>);
}

export default function HeaderControls() {
const [isMusicModalOpen, setIsMusicModalOpen] = useState(false);
const { user } = useContext(AppContext);

return (<>
<UserHeaderControls />
<Link id='searchBtn' aria-label='search' className='hover:opacity-70' href={'/search'} passHref prefetch={false}>
<svg xmlns='http://www.w3.org/2000/svg' className='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2}>
<path strokeLinecap='round' strokeLinejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' />
</svg>
</Link>
<HeaderMultiplayer />
<button className='hidden sm:block hover:opacity-70' onClick={() => setIsMusicModalOpen(true)}>
<MusicIcon />
</button>
{user && <Notifications />}
<MusicModal
closeModal={() => setIsMusicModalOpen(false)}
isOpen={isMusicModalOpen}
Expand Down
59 changes: 38 additions & 21 deletions components/header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,27 +52,44 @@ export default function Header({
<HeaderControls />
{user && <div className='hidden sm:block h-6 w-px bg-neutral-500' />}
<div className='flex gap-3 items-center'>
{user && <>
<Link
className='hidden sm:block'
data-tooltip-content='Ranked Solves'
data-tooltip-id='ranked-solves-header'
href='/ranked'
>
<span className='font-bold leading-none'>{user.calcRankedSolves} 🏅</span>
<StyledTooltip id='ranked-solves-header' />
</Link>
<div className='hidden sm:block h-6 w-px bg-neutral-500' />
<Link
className='hidden sm:block ml-1'
data-tooltip-content='Levels Solved'
data-tooltip-id='levels-solved-header'
href='/users'
>
<span className='font-bold'>{user.score}</span>
<StyledTooltip id='levels-solved-header' />
</Link>
</>}
{user ?
<>
<Link
className='hidden sm:block'
data-tooltip-content='Ranked Solves'
data-tooltip-id='ranked-solves-header'
href='/ranked'
>
<span className='font-bold leading-none'>{user.calcRankedSolves} 🏅</span>
<StyledTooltip id='ranked-solves-header' />
</Link>
<div className='hidden sm:block h-6 w-px bg-neutral-500' />
<Link
className='hidden sm:block ml-1'
data-tooltip-content='Levels Solved'
data-tooltip-id='levels-solved-header'
href='/users'
>
<span className='font-bold'>{user.score}</span>
<StyledTooltip id='levels-solved-header' />
</Link>
</>
:
<div className='hidden sm:flex gap-3'>
<Link
className='hover:underline'
href='/login'
onClick={() => {
sessionStorage.clear();
}}
>
Log In
</Link>
<Link href='/signup' className='hover:underline'>
Sign Up
</Link>
</div>
}
<Dropdown />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/homepage/homeLoggedIn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default function HomeLoggedIn({
</svg>
<div className='flex flex-col'>
<span className='text-lg font-bold'>Multiplayer</span>
{!socket?.connected ?
{!socket?.connected || connectedPlayersCount === 0 ?
<span className='text-xs text-yellow-500'>Connecting...</span>
:
<>
Expand Down
7 changes: 4 additions & 3 deletions components/multiplayer/onlineUsers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,16 @@ import { AppContext } from '../../contexts/appContext';
export default function OnlineUsers() {
const { multiplayerSocket } = useContext(AppContext);
const { connectedPlayersCount, socket } = multiplayerSocket;
const isConnected = socket?.connected && connectedPlayersCount > 0;

return (
<Link href='/multiplayer' passHref>
<div className='py-0.5 px-2.5 border rounded flex items-center gap-2' style={{
borderColor: 'var(--bg-color-3)',
}}>
{!socket?.connected && <span className='animate-ping absolute inline-flex rounded-full bg-yellow-500 opacity-75 h-2.5 w-2.5' />}
<span className={classNames(socket?.connected ? 'bg-green-500' : 'bg-yellow-500', 'h-2.5 w-2.5 rounded-full')} />
<span>{socket?.connected ? `${connectedPlayersCount} player${connectedPlayersCount !== 1 ? 's' : ''} online` : 'Connecting...'}</span>
{!isConnected && <span className='animate-ping absolute inline-flex rounded-full bg-yellow-500 opacity-75 h-2.5 w-2.5' />}
<span className={classNames(isConnected ? 'bg-green-500' : 'bg-yellow-500', 'h-2.5 w-2.5 rounded-full')} />
<span>{isConnected ? `${connectedPlayersCount} player${connectedPlayersCount !== 1 ? 's' : ''} online` : 'Connecting...'}</span>
</div>
</Link>
);
Expand Down

0 comments on commit 4a2f2b9

Please sign in to comment.