FlightsAPI/resources/js/Components/FlightsGoneBy/AchievementCard.vue

<!-- AchievementCard.vue -->
<script setup lang="ts">
import {Achievement, BadgeVariant, User, UserAchievement} from "@/Types/types";
import {computed} from "vue";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
import {Link} from '@inertiajs/vue3'
import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";
import Distance from "@/Components/Distance.vue";
import FormattedNumber from "@/Components/FormattedNumber.vue";

const distanceAchievements = [
    'general_flying.circumference_of_the_earth',
    'general_flying.to_the_moon',
    'general_flying.gigametre'
];

const props = defineProps<{
    achievement: Achievement
    userAchievement?: UserAchievement
    user?: User
    distanceUnit? : "mi" | "km" | "nm"
}>()

const progress = computed(() => {
    if (!props.achievement.progressive || !props.achievement.threshold) return null
    const current = props.userAchievement?.progress ?? 0
    return {
        current,
        threshold: props.achievement.threshold,
        percentage: Math.min(Math.round((current / props.achievement.threshold) * 100), 100)
    }
})

const inProgress = computed(() =>
    !unlocked.value && (props.userAchievement?.progress ?? 0) > 0
)

const unlocked = computed(() => {
    if (!props.userAchievement) return false
    if (props.achievement.progressive) return (progress.value?.percentage ?? 0) >= 100
    return true
})

</script>

<template>
    <v-card
        class="achievement-card"
        :class="{ locked: !unlocked && !inProgress }"
        rounded="lg"
        elevation="2"
        :id = "achievement.internal_name"
    >
        <v-card-text class="cardLayout">
            <div class="achievement-inner">
                <div class="achievement-icon-wrap" :class="{ unlocked }">
                    <v-icon
                        icon="mdi-trophy"
                        :color="unlocked ? 'amber' : 'grey'"
                        size="28"
                    />
                </div>

                <div class="achievement-content">
                    <div class="achievement-header">
                        <span class="achievement-name">{{ achievement.name }}</span>
                        <GlassTooltip>
                            <template #activator="{ props: tooltipProps }">
                                <span v-bind="tooltipProps" style="display:inline-flex">
                                    <InlineBadge type="difficulty" :variant="props.achievement.difficulty.internal_name">
                                        {{ achievement.difficulty?.name }}&nbsp;
                                        <v-icon icon="mdi-help-circle-outline" size="12" />
                                    </InlineBadge>
                                </span>
                            </template>

                            <div class="difficulty-tooltip">
                                <InlineBadge type="difficulty" :variant="props.achievement.difficulty.internal_name">
                                    {{ achievement.difficulty?.name }}
                                </InlineBadge>
                                <p class="difficulty-description">{{ achievement.difficulty?.description }}</p>
                                <p v-if="achievement.difficulty_description" class="difficulty-description specific">
                                    {{ achievement.difficulty_description }}
                                </p>
                            </div>
                        </GlassTooltip>
                    </div>

                    <p class="achievement-description">{{ achievement.short_description }}</p>


                    <template v-if="achievement.progressive && progress">
                        <div class="progress-label">
                            <span v-if="distanceAchievements.includes(achievement.internal_name)">
                                <Distance :unit="distanceUnit" :showUnits="false" :value="Math.min(progress.current, progress.threshold)" /> /
                                <Distance :unit="distanceUnit" :value="progress.threshold" />
                            </span>
                            <span v-else>
                                <FormattedNumber :value="Math.min(progress.current, progress.threshold)" /> /
                                <FormattedNumber :value="progress.threshold" />
                            </span>
                            <span>{{ progress.percentage }}%</span>
                        </div>
                        <v-progress-linear
                            :model-value="progress.percentage"
                            :color="unlocked ? 'amber' : 'grey'"
                            rounded
                            height="6"
                            bg-color="rgba(255,255,255,0.1)"
                        />
                    </template>
                </div>

            </div>
            <div class="button-spacer" />
            <ButtonLink
                variant="outlined"
                label="View Details"
                icon="mdi-magnify"
                v-if="achievement.has_page && user" :href="route('profile.achievement', { user: user.name, achievement: achievement.internal_name })" />
        </v-card-text>

    </v-card>
</template>

<style scoped>
.cardLayout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 0.75rem;
}

.achievement-card {
    transition: opacity 0.2s ease, transform 0.2s ease;
    border-radius: 0;
}

.button-spacer {
    flex: 1;
}

.achievement-card.locked .achievement-inner {
    opacity: 0.45;
}

.achievement-card:hover .achievement-inner,
.achievement-inner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    opacity: 1;
}

.achievement-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.achievement-icon-wrap.unlocked {
    background: rgba(255, 193, 7, 0.15);
}

.achievement-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.achievement-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.achievement-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.achievement-description {
    font-size: 0.82rem;
    opacity: 0.75;
    margin: 0;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    opacity: 0.6;
}

.difficulty-tooltip {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 240px;
}

.difficulty-description {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    opacity: 0.8;
}

.difficulty-description.specific {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    opacity: 0.65;
    font-style: italic;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
</style>