feat: improve champion role display logic

Added checks for lane and role data to prevent errors when displaying champion roles.
(Mel being the first ever champ to launch without this data)
This commit is contained in:
Rico van Zelst
2025-01-25 00:41:44 +01:00
parent 3ac5540508
commit 01c3b669c9
2 changed files with 26 additions and 17 deletions

View File

@@ -35,13 +35,17 @@
</li>
<li class="text-base font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
<span class="font-bold">Popular Positions:</span>
@foreach ($champion->lanes->roles as $lane)
<span class="inline-block lowercase capitalize-first">{{ $lane }} @svg(getRoleIconSvg($lane), 'w-5 h-5 inline-block')
@if (!$loop->last)
-
@endif
</span>
@endforeach
@if(isset($champion->lanes) && isset($champion->lanes->roles))
@foreach ($champion->lanes->roles as $lane)
<span class="inline-block lowercase capitalize-first">{{ $lane }} @svg(getRoleIconSvg($lane), 'w-5 h-5 inline-block')
@if (!$loop->last)
-
@endif
</span>
@endforeach
@else
<span class="inline-block lowercase capitalize-first">Not Enough Data</span>
@endif
</li>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en">

View File

@@ -11,8 +11,8 @@
Champions
</h1>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4505764048662657"
data-ad-slot="7031271888" data-ad-format="auto" data-full-width-responsive="true"></ins>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4505764048662657" data-ad-slot="7031271888"
data-ad-format="auto" data-full-width-responsive="true"></ins>
<div class="flex justify-center items-center mx-auto max-w-5xl mt-2.5">
<x-champions.lane-selector class="text-center" />
@@ -23,7 +23,10 @@
@foreach ($champions as $key => $champion)
<div
class="champ-card flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border
border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 @foreach ($roles[$key]->roles as $lane) POS-{{ $lane }} @endforeach">
border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10
@if (isset($roles[$key]) && $roles[$key] !== null && isset($roles[$key]->roles)) @foreach ($roles[$key]->roles as $lane)
POS-{{ $lane }}
@endforeach @endif">
<div class="mx-4 mt-4 overflow-hidden border-2 rounded-2xl bg-clip-border border-orange-400/40">
<div class="aspect-w-4 aspect-h-3">
<a href="/champion/{{ $champion->slug }}">
@@ -46,13 +49,15 @@
<div class="flex items-center mt-2">
<p class="flex text-sm text-gray-300">
@foreach ($roles[$key]->roles as $lane)
<span class="sr-only">{{ $lane }}</span>
<img {{ Popper::arrow('translucent')->theme('dark')->position('bottom')->pop($lane) }}
@if ($key < 8) loading="auto" @else loading="lazy" @endif
src="{{ getRoleIcon($lane) }}" alt="{{ $lane }} Icon"
class="mr-1 w-7 h-7">
@endforeach
@if (isset($roles[$key]) && $roles[$key] !== null && isset($roles[$key]->roles))
@foreach ($roles[$key]->roles as $lane)
<span class="sr-only">{{ $lane }}</span>
<img {{ Popper::arrow('translucent')->theme('dark')->position('bottom')->pop($lane) }}
@if ($key < 8) loading="auto" @else loading="lazy" @endif
src="{{ getRoleIcon($lane) }}" alt="{{ $lane }} Icon"
class="mr-1 w-7 h-7">
@endforeach
@endif
</p>
<div class="flex items-end justify-end w-full justify-items-end">