Skip to content

Commit

Permalink
dev : user badges
Browse files Browse the repository at this point in the history 
- 各所でユーザーバッジを表示
- バッジの管理方法を改善
  • Loading branch information
@Liry24
Liry24 committed Feb 28, 2025
1 parent a4aef89 commit f208d6e
Show file tree
Hide file tree
Showing 12 changed files with 208 additions and 76 deletions.
93 changes: 66 additions & 27 deletions components/badge/user.vue
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,81 @@
<script lang="ts" setup>
const props = withDefaults(
defineProps<{
developer?: boolean;
contributor?: boolean;
translator?: boolean;
alphaTester?: boolean;
shopOwner?: boolean;
}>(),
{
developer: false,
contributor: false,
translator: false,
alpha_tester: false,
shop_owner: false,
}
);
interface Props {
badges: Badge[];
size?: 'sm' | 'md' | 'lg';
}
const props = withDefaults(defineProps<Props>(), {
badges: () => [],
size: 'md',
});
const getBaseSize = () => {
if (props.size === 'sm') return 16;
if (props.size === 'lg') return 26;
return 22;
};
const getIconSize = (multiplier: number) =>
Math.round(getBaseSize() * multiplier);
</script>

<template>
<div class="flex gap-1.5 items-center mt-0.5">
<UiTooltip v-if="props.developer" text="デベロッパー">
<Icon name="lucide:code-xml" size="20" />
<div
v-if="props.badges?.length"
class="empty:hidden flex gap-1 items-center"
>
<UiTooltip
v-if="props.badges.find((b) => b.name === 'developer')"
text="デベロッパー"
>
<Icon name="fluent-color:code-block-24" :size="getIconSize(1.2)" />
</UiTooltip>

<UiTooltip
v-if="props.badges.find((b) => b.name === 'contributor')"
text="コントリビューター"
>
<Icon
name="fluent-color:animal-paw-print-24"
:size="getIconSize(1)"
/>
</UiTooltip>

<UiTooltip
v-if="props.badges.find((b) => b.name === 'translator')"
text="翻訳者"
>
<Icon name="fluent-color:chat-multiple-24" :size="getIconSize(1)" />
</UiTooltip>

<UiTooltip v-if="props.contributor" text="コントリビューター">
<Icon name="lucide:handshake" size="17" />
<UiTooltip
v-if="props.badges.find((b) => b.name === 'alpha_tester')"
text="アルファテスター"
>
<Icon name="fluent-color:ribbon-star-24" :size="getIconSize(1)" />
</UiTooltip>

<UiTooltip v-if="props.translator" text="翻訳者">
<Icon name="lucide:languages" size="19" />
<UiTooltip
v-if="props.badges.find((b) => b.name === 'shop_owner')"
text="ショップオーナー"
>
<Icon
name="fluent-color:building-store-24"
:size="getIconSize(1)"
/>
</UiTooltip>

<UiTooltip v-if="props.alphaTester" text="アルファテスター">
<Icon name="lucide:flask-conical" size="19" />
<UiTooltip
v-if="props.badges.find((b) => b.name === 'patrol')"
text="パトロール"
>
<Icon name="fluent-color:shield-24" :size="getIconSize(1)" />
</UiTooltip>

<UiTooltip v-if="props.shopOwner" text="ショップオーナー">
<Icon name="lucide:store" size="19" />
<UiTooltip
v-if="props.badges.find((b) => b.name === 'idea_man')"
text="アイデアマン"
>
<Icon name="fluent-color:lightbulb-24" :size="getIconSize(1)" />
</UiTooltip>
</div>
</template>
13 changes: 8 additions & 5 deletions components/hovercard/user.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,14 @@ const props = defineProps<Props>();
:icon-size="18"
class="size-10"
/>
<span
class="text-sm font-semibold leading-none text-zinc-700 dark:text-zinc-300"
>
{{ props.user.name }}
</span>
<div class="flex flex-col gap-0.5">
<span
class="text-sm font-semibold leading-none text-zinc-700 dark:text-zinc-300"
>
{{ props.user.name }}
</span>
<BadgeUser :badges="props.user.badges" size="sm" />
</div>
</NuxtLink>
</template>
</Hovercard>
Expand Down
10 changes: 10 additions & 0 deletions components/ui/headerMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,16 @@ onMounted(async () => {
class="hidden sm:block p-2.5 hover:bg-zinc-300 hover:dark:bg-zinc-600"
/>

<Button
v-if="user"
to="/bookmarks"
icon="lucide:bookmark"
:icon-size="19"
tooltip="ブックマーク"
aria-label="ブックマーク"
variant="flat"
/>

<ButtonTheme class="hidden sm:block" />
</div>

Expand Down
16 changes: 2 additions & 14 deletions pages/@[id].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const { data: userData } = await client
bio,
links,
created_at,
badges(developer, contributor, translator, alpha_tester, shop_owner)
badges:user_badges(created_at, name)
`
)
.eq('id', id)
Expand Down Expand Up @@ -65,11 +65,7 @@ if (userData)
</p>
<BadgeUser
v-if="userData.badges"
:developer="userData.badges.developer"
:contributor="userData.badges.contributor"
:translator="userData.badges.translator"
:alpha-tester="userData.badges.alpha_tester"
:shop-owner="userData.badges.shop_owner"
:badges="userData.badges"
/>
</div>
<p class="text-sm text-zinc-500">
Expand Down Expand Up @@ -99,14 +95,6 @@ if (userData)
aria-label="プロフィールを編集"
variant="flat"
/>
<Button
to="/bookmarks"
icon="lucide:bookmark"
:icon-size="19"
tooltip="ブックマーク"
aria-label="ブックマーク"
variant="flat"
/>
<Button
icon="lucide:log-out"
:icon-size="19"
Expand Down
24 changes: 18 additions & 6 deletions pages/setup/[id].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ onMounted(async () => {
>
<NuxtLink
:to="`/@${data.author.id}`"
class="flex flex-row gap-3 items-center"
class="flex flex-row gap-1 items-center"
>
<UiAvatar
:url="
Expand All @@ -88,10 +88,14 @@ onMounted(async () => {
:alt="data.author.name"
/>
<p
class="text-black dark:text-white pb-0.5 text-left font-normal"
class="pl-2 text-black dark:text-white pb-0.5 text-left font-normal"
>
{{ data.author.name }}
</p>
<BadgeUser
:badges="data.author.badges"
size="sm"
/>
</NuxtLink>

<div class="flex items-center gap-2">
Expand Down Expand Up @@ -221,7 +225,7 @@ onMounted(async () => {
>
<NuxtLink
:to="`/@${coAuthor.id}`"
class="flex flex-row gap-3 items-center"
class="flex flex-row gap-2 items-center"
>
<UiAvatar
:url="
Expand All @@ -234,10 +238,14 @@ onMounted(async () => {
:alt="coAuthor.name"
/>
<p
class="text-black dark:text-white pb-0.5 text-left font-normal"
class="pl-1 text-black dark:text-white pb-0.5 text-left font-normal"
>
{{ coAuthor.name }}
</p>
<BadgeUser
:badges="coAuthor.badges"
size="sm"
/>
</NuxtLink>
<p
v-if="coAuthor.note.length"
Expand Down Expand Up @@ -344,7 +352,7 @@ onMounted(async () => {
>
<NuxtLink
:to="`/@${coAuthor.id}`"
class="flex flex-row gap-3 items-center"
class="flex flex-row gap-2 items-center"
>
<UiAvatar
:url="
Expand All @@ -357,10 +365,14 @@ onMounted(async () => {
:alt="coAuthor.name"
/>
<p
class="text-black dark:text-white pb-0.5 text-left font-normal"
class="pl-1 text-black dark:text-white pb-0.5 text-left font-normal"
>
{{ coAuthor.name }}
</p>
<BadgeUser
:badges="coAuthor.badges"
size="sm"
/>
</NuxtLink>
<p
v-if="coAuthor.note.length"
Expand Down
26 changes: 18 additions & 8 deletions server/api/setup.get.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { serverSupabaseClient } from '#supabase/server';
import type { ApiResponse, SetupClient } from '~/types';
import type { ApiResponse, SetupClient, SetupDB } from '~/types';

export interface RequestQuery {
id: number;
Expand All @@ -23,7 +23,11 @@ export default defineEventHandler(
author(
id,
name,
avatar
avatar,
badges:user_badges(
created_at,
name
)
),
images:setup_images(
name,
Expand Down Expand Up @@ -55,17 +59,21 @@ export default defineEventHandler(
),
tags:setup_tags(tag),
co_authors:setup_coauthors(
user_id(
user:user_id(
id,
name,
avatar
avatar,
badges:user_badges(
created_at,
name
)
),
note
)
`
)
.eq('id', Number(query.id))
.maybeSingle();
.maybeSingle<SetupDB>();

if (!data)
return {
Expand Down Expand Up @@ -95,15 +103,17 @@ export default defineEventHandler(
id: data.author!.id,
name: data.author!.name || 'Unknown',
avatar: data.author!.avatar,
badges: data.author!.badges,
},
name: data.name,
description: data.description,
unity: data.unity,
tags: data.tags.map((t) => t.tag),
co_authors: data.co_authors.map((c) => ({
id: c.user_id.id,
name: c.user_id.name || 'Unknown',
avatar: c.user_id.avatar,
id: c.user.id,
name: c.user.name || 'Unknown',
avatar: c.user.avatar,
badges: c.user.badges,
note: c.note,
})),
images: data.images,
Expand Down
12 changes: 10 additions & 2 deletions server/api/setups/bookmarks.get.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,11 @@ export default defineEventHandler(
author(
id,
name,
avatar
avatar,
badges:user_badges(
created_at,
name
)
),
images:setup_images(
name,
Expand Down Expand Up @@ -72,7 +76,11 @@ export default defineEventHandler(
user:users(
id,
name,
avatar
avatar,
badges:user_badges(
created_at,
name
)
),
note
)
Expand Down
12 changes: 10 additions & 2 deletions server/api/setups/latest.get.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,11 @@ export default defineEventHandler(
author(
id,
name,
avatar
avatar,
badges:user_badges(
created_at,
name
)
),
images:setup_images(
name,
Expand Down Expand Up @@ -61,7 +65,11 @@ export default defineEventHandler(
user:users(
id,
name,
avatar
avatar,
badges:user_badges(
created_at,
name
)
),
note
)
Expand Down
Loading

0 comments on commit f208d6e

Please sign in to comment.