buildpath/frontend/components/ChampionSelector.vue

<script setup lang="ts">
import { debounce, isEmpty } from '~/utils/helpers';

// Constants
const CDRAGON_CHAMPIONS_URL = CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/champion-summary.json";
const CHAMPIONS_API_URL = "/api/champions";

// State
const { data: championsData, pending: loadingChampions, error: championsError } = useFetch(CDRAGON_CHAMPIONS_URL, {
  key: 'champions-data',
  lazy: false,
  server: false // Disable server-side fetching to avoid hydration issues
});
const { data: championsLanes, pending: loadingLanes, error: lanesError } = useFetch(CHAMPIONS_API_URL, {
  key: 'champions-lanes',
  lazy: false,
  server: false // Disable server-side fetching to avoid hydration issues
});

// Data processing
const champions = computed(() => {
  if (!championsData.value || !Array.isArray(championsData.value)) return [];

  return championsData.value.slice(1)
    .filter((champion: any) => !champion.name.includes("Doom Bot"))
    .sort((a: any, b: any) => a.name.localeCompare(b.name));
});

const lanesMap = computed(() => {
  const map = new Map<string, LaneData[]>();
  if (championsLanes.value) {
    for (const champion of championsLanes.value as ChampionData[]) {
      map.set(champion.alias.toLowerCase(), champion.lanes);
    }
  }
  return map;
});

// Filter state
const filteredChampions = ref<ChampionSummary[]>([]);
const searchText = ref("");
const searchBar = useTemplateRef("searchBar");

// Lane filtering
function filterToLane(filter: number): string {
  const laneMap = ["TOP", "JUNGLE", "MIDDLE", "BOTTOM", "UTILITY"];
  return laneMap[filter] || "";
}

function filterChampionsByLane(laneFilter: number): void {
  if (laneFilter === -1) {
    filteredChampions.value = [...champions.value];
    return;
  }

  const laneName = filterToLane(laneFilter);
  filteredChampions.value = champions.value.filter((champion: any) => {
    const championLanes = lanesMap.value.get(champion.alias.toLowerCase());
    if (!championLanes) return false;

    return championLanes.some(lane => lane.data === laneName);
  });
}

// Search functionality
const debouncedSearch = debounce((searchTerm: string) => {
  if (isEmpty(searchTerm)) {
    filteredChampions.value = [...champions.value];
  } else {
    filteredChampions.value = champions.value.filter((champion: any) =>
      champion.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }
}, 300);

// Watchers
watch(searchBar, (newS, oldS) => {
  searchBar.value?.focus();
});

watch(searchText, (newTerm) => {
  debouncedSearch(newTerm);
});

// Watch for changes in champions data and update filtered champions
watch(champions, (newChampions) => {
  filteredChampions.value = [...newChampions];
}, { immediate: true });

// Navigation
async function navigateToChampion(championAlias: string): Promise<void> {
  try {
    await navigateTo(`/champion/${championAlias.toLowerCase()}`);
  } catch (error) {
    console.error('Navigation error:', error);
  }
}

// Initialize filtered champions
onMounted(() => {
  filteredChampions.value = [...champions.value];
});

// Error handling
const hasErrors = computed(() => championsError.value || lanesError.value);
const isLoading = computed(() => loadingChampions.value || loadingLanes.value);
</script>

<template>
    <div>
        <!-- Loading state -->
        <div v-if="isLoading" class="loading-state">
            <div class="loading-spinner"></div>
            <p>Loading champions...</p>
        </div>

        <!-- Error state -->
        <div v-else-if="hasErrors" class="error-state">
            <p>Failed to load champion data. Please refresh the page.</p>
        </div>

        <!-- Main content -->
        <div v-else>
            <div class="search-lanefilter-container">
                <LaneFilter
                    id="cs-lanefilter"
                    @filter-change="filterChampionsByLane"
                />
                <input
                    @keyup.enter="() => filteredChampions.length > 0 && navigateToChampion(filteredChampions[0].alias)"
                    v-model="searchText"
                    ref="searchBar"
                    class="search-bar"
                    type="text"
                    placeholder="Search a champion"
                />
            </div>

            <!-- Empty state -->
            <div v-if="filteredChampions.length === 0" class="empty-state">
                <p>No champions found. Try a different search or filter.</p>
            </div>

            <div v-else class="champion-container">
                <NuxtLink
                    v-for="champion in filteredChampions"
                    :key="champion.id"
                    :to="'/champion/' + champion.alias.toLowerCase()"
                    style="width: fit-content; height: fit-content;"
                >
                    <div class="cs-champion-img-container">
                        <NuxtImg
                            format="webp"
                            class="cs-champion-img"
                            :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)"
                            :alt="champion.name"
                        />
                    </div>
                </NuxtLink>
            </div>
        </div>
    </div>
</template>

<style>
/* Loading and error states */
.loading-state, .error-state, .empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-on-surface);
    font-size: 1.2rem;
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-surface);
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-state p {
    margin: 0;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

.error-state {
    color: var(--color-error);
}

.empty-state {
    opacity: 0.7;
}

.search-bar {
    width: 400px;
    height: 60px;

    background-color: var(--color-surface-darker);
    
    font-size: 1.75rem;

    border-radius: 12px;
    border: none;
    padding-left: 10px;
}
.search-bar:focus {
    border: 2px solid var(--color-on-surface);
    outline: none;
}

#cs-lanefilter {
    margin: auto;
    margin-right: 20px;
}

.search-lanefilter-container {
    width: fit-content; 
    margin: auto; 
    display: flex; 
    align-items: center;
}

.champion-container {
    width: 90%;
    height: auto;

    display: grid;
    grid-template-columns: repeat(auto-fit, 128px);
    grid-gap: 10px;
    justify-content: center;

    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
.cs-champion-img-container {
    overflow: hidden; width: 120px; height: 120px;
    border: 1px solid var(--color-surface);
}
.cs-champion-img-container:hover {
    border: 1px solid var(--color-on-surface);
}
.cs-champion-img {
    width: 116px;
    height: 116px;
    transform: translate(4px, 4px) scale(1.2, 1.2);

    user-select: none;
}

@media only screen and (max-width: 920px) {
    .search-lanefilter-container {
        flex-direction: column;
    }
    #cs-lanefilter {
        margin-right: auto;
    }
    .champion-container {
        width: 100%;
    }
}
@media only screen and (max-width: 450px) {
    .search-bar {
        width: 92%;
        height: 40px;
    }
    .cs-champion-img-container {
        width: 80px; 
        height: 80px;
    }
    .cs-champion-img {
        width: 76px;
        height: 76px;
    }
    .champion-container {
        grid-template-columns: repeat(auto-fit, 80px);
    }
    .search-lanefilter-container {
        margin-top: 10px;
    }
}
</style>