From 0f5b035e1701bd656b8c6aba53e4f5fc5e508e76 Mon Sep 17 00:00:00 2001 From: LynithDev <61880709+LynithDev@users.noreply.github.com> Date: Sun, 17 Mar 2024 13:34:29 +0100 Subject: [PATCH] feat: Tweaks + PlayerHead component --- src/assets/images/steve.png | Bin 0 -> 5432 bytes src/bridge/auth.ts | 8 ++++++- src/ui/components/Navbar.tsx | 26 +++++++++++++++++++-- src/ui/components/base/Button.module.scss | 14 ++++++++++- src/ui/components/game/PlayerHead.tsx | 20 ++++++++++++++++ src/ui/components/overlay/AccountPopup.tsx | 18 ++++++++------ src/ui/hooks/useAccount.ts | 11 +++++++++ 7 files changed, 86 insertions(+), 11 deletions(-) create mode 100644 src/assets/images/steve.png create mode 100644 src/ui/components/game/PlayerHead.tsx create mode 100644 src/ui/hooks/useAccount.ts diff --git a/src/assets/images/steve.png b/src/assets/images/steve.png new file mode 100644 index 0000000000000000000000000000000000000000..4ed18e6641a14e2effcae0a1044b7b7c000097df GIT binary patch literal 5432 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 never; -async function loginMicrosoft(cb?: MicrosoftLoginCallback): Promise { +export async function loginMicrosoft(cb?: MicrosoftLoginCallback): Promise { if (cb) { const unlisten = await listen<[string, number, boolean]>('msa:status', (event) => { cb(event.payload[0], event.payload[1]); @@ -15,6 +15,12 @@ async function loginMicrosoft(cb?: MicrosoftLoginCallback): Promise { + // TODO implement some kind of caching + fallback + return `https://crafatar.com/avatars/${uuid}?size=32`; +} + export default { loginMicrosoft, + getUuidHeadSrc, }; diff --git a/src/ui/components/Navbar.tsx b/src/ui/components/Navbar.tsx index 17e7f09d..8cdff898 100644 --- a/src/ui/components/Navbar.tsx +++ b/src/ui/components/Navbar.tsx @@ -1,7 +1,11 @@ import { A } from '@solidjs/router'; import { createSignal } from 'solid-js'; +import { Bell01Icon, Cloud01Icon, Settings01Icon, TerminalBrowserIcon, TerminalIcon } from '@untitled-theme/icons-solid'; +import useAccount from '../hooks/useAccount'; import PolyfrostFull from './logos/PolyfrostFull'; import AccountPopup from './overlay/AccountPopup'; +import PlayerHead from './game/PlayerHead'; +import Button from './base/Button'; interface NavbarLinkProps { path: string; @@ -24,6 +28,8 @@ function NavbarLink(props: NavbarLinkProps) { function Navbar() { const [profileMenuOpen, setProfileMenuOpen] = createSignal(false); + const account = useAccount(); + let profileButton!: HTMLButtonElement; return ( @@ -36,9 +42,25 @@ function Navbar() { -
+
+ + + + + + + +
diff --git a/src/ui/components/base/Button.module.scss b/src/ui/components/base/Button.module.scss index e5c0b7fb..60355886 100644 --- a/src/ui/components/base/Button.module.scss +++ b/src/ui/components/base/Button.module.scss @@ -24,7 +24,19 @@ @apply p-1.5 hover:bg-gray-0.05 active:bg-gray-0.10 aspect-square box-border; & > * { - @apply w-full h-full; + @apply w-full h-full stroke-fg-primary; + } + + &:hover > * { + @apply stroke-fg-primary-hover; + } + + &:active > * { + @apply stroke-fg-primary-pressed; + } + + &:disabled > * { + @apply stroke-fg-primary-disabled; } } } diff --git a/src/ui/components/game/PlayerHead.tsx b/src/ui/components/game/PlayerHead.tsx new file mode 100644 index 00000000..3a9e54c0 --- /dev/null +++ b/src/ui/components/game/PlayerHead.tsx @@ -0,0 +1,20 @@ +import { createResource } from 'solid-js'; +import type { JSX } from 'solid-js'; +import auth from '../../../bridge/auth'; +import steveSrc from '../../../assets/images/steve.png'; + +type PlayerHeadProps = JSX.IntrinsicElements['img'] & { uuid: string }; + +async function fetchHeadSrc(uuid: string) { + return await auth.getUuidHeadSrc(uuid); +} + +function PlayerHead(props: PlayerHeadProps) { + const [headSrc] = createResource(() => props.uuid, fetchHeadSrc, { + initialValue: steveSrc, + }); + + return ; +} + +export default PlayerHead; diff --git a/src/ui/components/overlay/AccountPopup.tsx b/src/ui/components/overlay/AccountPopup.tsx index e78ffc2e..959f8ea8 100644 --- a/src/ui/components/overlay/AccountPopup.tsx +++ b/src/ui/components/overlay/AccountPopup.tsx @@ -1,10 +1,12 @@ import { LogOut01Icon, PlusIcon, Settings01Icon } from '@untitled-theme/icons-solid'; import Button from '../base/Button'; +import PlayerHead from '../game/PlayerHead'; +import useAccount from '../../hooks/useAccount'; import Popup from './Popup'; interface AccountComponentProps { username: string; - headSrc: string; + uuid: string; loggedIn?: boolean; } @@ -12,7 +14,7 @@ function AccountComponent(props: AccountComponentProps) { return (
- +

{props.username}

@@ -30,17 +32,19 @@ function AccountComponent(props: AccountComponentProps) { } function AccountPopup(props: Popup.PopupProps) { + const loggedInAccount = useAccount(); + return ( -
+
- +
- - - + + +
diff --git a/src/ui/hooks/useAccount.ts b/src/ui/hooks/useAccount.ts new file mode 100644 index 00000000..d053b33a --- /dev/null +++ b/src/ui/hooks/useAccount.ts @@ -0,0 +1,11 @@ +function useAccount(): auth.Account { + // TODO return the currently logged in account + + return { + username: 'Lynith', + uuid: 'f247be7c-5b82-41c6-9148-793ded77e71f', + skins: [], + }; +} + +export default useAccount;