Skip to content

Commit

Permalink
Merge pull request #130 from Nerimity/ears-badge
Browse files Browse the repository at this point in the history 
Ears badge
  • Loading branch information
@SupertigerDev
SupertigerDev authored Nov 22, 2024
2 parents 1519acf + c0ed70d commit f2491be
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 12 deletions.
Binary file added public/borders/cat-ears-blue.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/borders/cat-ears-white.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 38 additions & 10 deletions src/chat-api/Bitwise.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,42 +7,70 @@ export interface Bitwise {
showSettings?: boolean; // determine should this permission reveal the "settings" option context menu
}

const USER_BADGE_BITS = {
FOUNDER: 1,
ADMIN: 2,
CONTRIBUTOR: 4,
SUPPORTER: 8,
PALESTINE: 16,
BOT: 32,
MOD: 64,
EMO_SUPPORTER: 128,
CAT_EARS_WHITE: 256,
CAT_EARS_BLUE: 512,
};

export const USER_BADGES = {
// overlays
CAT_EARS_BLUE: {
name: "Kitty",
bit: USER_BADGE_BITS.CAT_EARS_BLUE,
color: "linear-gradient(90deg, #78a5ff 0%, #ffffff 100%);",
overlay: true,
description: "Blue Ears Kitty",
},
CAT_EARS_WHITE: {
name: "Kitty",
bit: USER_BADGE_BITS.CAT_EARS_WHITE,
color: "linear-gradient(90deg, #ffa761 0%, #ffffff 100%)",
overlay: true,
description: "White Ears Kitty",
},

FOUNDER: {
name: "Founder",
bit: 1,
bit: USER_BADGE_BITS.FOUNDER,
description: "Creator of Nerimity",
color: "linear-gradient(90deg, #4fffbd 0%, #4a5efc 100%);",
credit: "Avatar Border by upklyak on Freepik",
},
ADMIN: {
name: "Admin",
bit: 2,
bit: USER_BADGE_BITS.ADMIN,
description: "Admin of Nerimity",
color:
"linear-gradient(90deg, rgba(224,26,185,1) 0%, rgba(64,122,255,1) 100%);",
credit: "Avatar Border by upklyak on Freepik",
},
MOD: {
name: "Moderator",
bit: 64,
bit: USER_BADGE_BITS.MOD,
description: "Moderator of Nerimity",
color: "linear-gradient(90deg, #57acfa 0%, #1485ed 100%)",
credit: "Avatar Border by upklyak on Freepik",
},
EMO_SUPPORTER: {
name: "Emo Supporter",
description: "Supported this project by donating money",
bit: 128,
bit: USER_BADGE_BITS.EMO_SUPPORTER,
textColor: "rgba(255,255,255,0.8)",
color:
"linear-gradient(90deg, #424242 0%, #303030 100%)",
color: "linear-gradient(90deg, #424242 0%, #303030 100%)",
credit: "Avatar Border by upklyak on Freepik",
},
SUPPORTER: {
name: "Supporter",
description: "Supported this project by donating money",
bit: 8,
bit: USER_BADGE_BITS.SUPPORTER,
color:
"linear-gradient(90deg, rgba(235,78,209,1) 0%, rgba(243,189,247,1) 100%)",
credit: "Avatar Border by upklyak on Freepik",
Expand All @@ -51,20 +79,20 @@ export const USER_BADGES = {
CONTRIBUTOR: {
name: "Contributor",
description: "Helped with this project in some way",
bit: 4,
bit: USER_BADGE_BITS.CONTRIBUTOR,
color: "#ffffff",
},
PALESTINE: {
name: "Palestine",
description: "[Click To Help](https://arab.org/click-to-help/palestine/)",
bit: 16,
bit: USER_BADGE_BITS.PALESTINE,
credit: "Avatar Border by upklyak on Freepik, edited by Supertiger",
color: "linear-gradient(90deg, red, white, green);",
},
BOT: {
name: "Bot User",
description: "Bot User",
bit: 32,
bit: USER_BADGE_BITS.BOT,
color: "var(--primary-color)",
},
};
Expand Down
22 changes: 22 additions & 0 deletions src/components/avatar-borders/CatEarBorder.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { JSXElement, Match, Show, Switch } from "solid-js";

export function CatEarsBorder(props: {
children?: JSXElement;
hovered?: boolean;
size: number;
offset?: number;
color: "white" | "blue";
}) {
return (
<img
class="cat-ears"
style={{
position: "absolute",
width: "100%",
"margin-top": (props.offset || 0) * props.size + "px",
"z-index": "1111",
}}
src={`/borders/cat-ears-${props.color}.png`}
/>
);
}
2 changes: 2 additions & 0 deletions src/components/avatar-borders/FounderAdminSupporterBorder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export function FounderAdminSupporterBorder(props: {
color?: string;
url?: string;
hovered?: boolean;
overlay?: JSXElement;
type:
| "founder"
| "supporter"
Expand All @@ -30,6 +31,7 @@ export function FounderAdminSupporterBorder(props: {
</Show>
<img src={`/borders/${props.type}.png`} class={styles.border} />
<RawAvatar {...props} />
{props.overlay}
<Show when={props.type !== "palestine"}>
<img
src={`/borders/${props.type}-right-wing.png`}
Expand Down
61 changes: 59 additions & 2 deletions src/components/ui/Avatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Text from "./Text";
import { hasBit, USER_BADGES } from "@/chat-api/Bitwise";
import styles from "./AvatarStyles.module.scss";
import { FounderAdminSupporterBorder } from "../avatar-borders/FounderAdminSupporterBorder";
import { CatEarsBorder } from "../avatar-borders/CatEarBorder";

interface Props {
url?: string | null;
Expand Down Expand Up @@ -55,7 +56,7 @@ export default function Avatar(props: Props) {
const badge = createMemo(() => {
const badges = serverOrUser()?.badges;
if (!badges) return;
return badgesArr.find((b) => hasBit(badges, b.bit));
return badgesArr.find((b) => !b.overlay && hasBit(badges, b.bit));
});

return (
Expand All @@ -75,6 +76,7 @@ export default function Avatar(props: Props) {
color={serverOrUser()?.hexColor}
serverOrUser={serverOrUser()}
url={url() || undefined}
badges={props.user?.badges}
/>
}
>
Expand All @@ -86,10 +88,11 @@ export default function Avatar(props: Props) {
hovered={props.animate}
hideBorder={!props.animate}
serverOrUser={serverOrUser()}
badges={props.user?.badges}
/>
</Match>

<Match when={props.server?.verified || props.user?.badges}>
<Match when={props.server?.verified || badge()}>
<AvatarBorder
size={props.size}
hovered={props.animate || props.showBorder}
Expand All @@ -98,6 +101,7 @@ export default function Avatar(props: Props) {
color={serverOrUser()?.hexColor}
children={props.children}
badge={badge()}
badges={props.user?.badges}
/>
</Match>
</Switch>
Expand All @@ -115,6 +119,7 @@ function AvatarBorder(props: {
color?: string;
children?: JSXElement;
badge?: (typeof USER_BADGES)[keyof typeof USER_BADGES];
badges?: number;
voiceIndicator?: boolean;
}) {
return (
Expand All @@ -126,6 +131,7 @@ function AvatarBorder(props: {
avatarUrl={props.url}
hovered={props.hovered}
color={props.color}
badges={props.badges}
children={props.children}
/>
</Match>
Expand All @@ -136,6 +142,7 @@ function AvatarBorder(props: {
avatarUrl={props.url}
hovered={props.hovered}
color={props.color}
badges={props.badges}
children={props.children}
/>
</Match>
Expand All @@ -145,6 +152,7 @@ function AvatarBorder(props: {
avatarUrl={props.url}
hovered={props.hovered}
color={props.color}
badges={props.badges}
children={props.children}
/>
</Match>
Expand All @@ -154,6 +162,7 @@ function AvatarBorder(props: {
avatarUrl={props.url}
hovered={props.hovered}
color={props.color}
badges={props.badges}
children={props.children}
/>
</Match>
Expand All @@ -163,6 +172,7 @@ function AvatarBorder(props: {
avatarUrl={props.url}
hovered={props.hovered}
color={props.color}
badges={props.badges}
children={props.children}
/>
</Match>
Expand All @@ -171,6 +181,7 @@ function AvatarBorder(props: {
size={props.size}
avatarUrl={props.url}
hovered={props.hovered}
badges={props.badges}
color={props.color}
children={props.children}
/>
Expand Down Expand Up @@ -203,9 +214,11 @@ const NoBorder = (props: {
serverOrUser?: ServerOrUser;
color?: string;
children?: JSXElement;
badges?: number;
}) => {
return (
<div class={styles.imageContainer}>
<Overlays size={props.size} offset={-0.12} badges={props.badges} />
<Switch>
<Match when={props.children}>{props.children}</Match>

Expand Down Expand Up @@ -279,6 +292,7 @@ function BasicBorder(props: {
serverOrUser?: ServerOrUser;
children?: JSXElement;
hideBorder?: boolean;
badges?: number;
}) {
return (
<>
Expand Down Expand Up @@ -314,11 +328,15 @@ function ModBorder(props: {
hovered?: boolean;
color?: string;
children?: JSXElement;
badges?: number;
}) {
return (
<FounderAdminSupporterBorder
type="mod"
children={props.children}
overlay={
<Overlays size={props.size} offset={-0.68} badges={props.badges} />
}
color={props.color}
url={props.avatarUrl}
hovered={props.hovered}
Expand All @@ -331,12 +349,16 @@ function EmoSupporterBorder(props: {
hovered?: boolean;
color?: string;
children?: JSXElement;
badges?: number;
}) {
return (
<FounderAdminSupporterBorder
type="emo-supporter"
children={props.children}
color={props.color}
overlay={
<Overlays size={props.size} offset={-0.68} badges={props.badges} />
}
url={props.avatarUrl}
hovered={props.hovered}
/>
Expand All @@ -348,11 +370,15 @@ function SupporterBorder(props: {
hovered?: boolean;
color?: string;
children?: JSXElement;
badges?: number;
}) {
return (
<FounderAdminSupporterBorder
type="supporter"
children={props.children}
overlay={
<Overlays size={props.size} offset={-0.68} badges={props.badges} />
}
color={props.color}
url={props.avatarUrl}
hovered={props.hovered}
Expand All @@ -365,13 +391,17 @@ function AdminBorder(props: {
avatarUrl?: string;
hovered?: boolean;
color?: string;
badges?: number;
children?: JSXElement;
}) {
return (
<FounderAdminSupporterBorder
type="admin"
children={props.children}
color={props.color}
overlay={
<Overlays size={props.size} offset={-0.68} badges={props.badges} />
}
url={props.avatarUrl}
hovered={props.hovered}
/>
Expand All @@ -383,13 +413,17 @@ function FounderBorder(props: {
avatarUrl?: string;
hovered?: boolean;
color?: string;
badges?: number;
children?: JSXElement;
}) {
return (
<FounderAdminSupporterBorder
type="founder"
children={props.children}
color={props.color}
overlay={
<Overlays size={props.size} offset={-0.68} badges={props.badges} />
}
url={props.avatarUrl}
hovered={props.hovered}
/>
Expand All @@ -401,14 +435,37 @@ function PalestineBorder(props: {
hovered?: boolean;
color?: string;
children?: JSXElement;
badges?: number;
}) {
return (
<FounderAdminSupporterBorder
type="palestine"
children={props.children}
overlay={
<Overlays size={props.size} offset={-0.68} badges={props.badges} />
}
color={props.color}
url={props.avatarUrl}
hovered={props.hovered}
/>
);
}

function Overlays(props: { badges?: number; offset?: number; size: number }) {
return (
<Show when={props.badges}>
<Switch>
<Match when={hasBit(props.badges!, USER_BADGES.CAT_EARS_BLUE.bit)}>
<CatEarsBorder size={props.size} offset={props.offset} color="blue" />
</Match>
<Match when={hasBit(props.badges!, USER_BADGES.CAT_EARS_WHITE.bit)}>
<CatEarsBorder
size={props.size}
offset={props.offset}
color="white"
/>
</Match>
</Switch>
</Show>
);
}

0 comments on commit f2491be

Please sign in to comment.