mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 18:20:48 +01:00
01c3b669c9
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)
79 lines
4.4 KiB
PHP
79 lines
4.4 KiB
PHP
<?php
|
|
/** @var App\Models\Champion $champion */
|
|
/** @var App\Models\ChampionRoles $roles */
|
|
?>
|
|
|
|
<div class="relative">
|
|
<!-- Main Content -->
|
|
<section class="max-w-5xl mx-auto mt-12">
|
|
<h1
|
|
class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
|
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>
|
|
|
|
<div class="flex justify-center items-center mx-auto max-w-5xl mt-2.5">
|
|
<x-champions.lane-selector class="text-center" />
|
|
</div>
|
|
|
|
<div class="container flex items-center justify-center p-4 mx-auto mt-3">
|
|
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
@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
|
|
@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 }}">
|
|
<img @if ($key < 8) loading="eager" @else loading="lazy" @endif
|
|
src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute() }}&w=380&h=285&output=webp&q=65&il"
|
|
class="object-cover w-full h-full" alt="{{ $champion->name }} Splash Art" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 py-2">
|
|
<div class="flex items-center justify-between">
|
|
<p class="block text-base antialiased font-medium text-gray-100">
|
|
<a href="/champion/{{ $champion->slug }}">
|
|
{{ $champion->name }}
|
|
</a>
|
|
</p>
|
|
<span class="text-xs text-stone-300">{{ $champion->title }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center mt-2">
|
|
<p class="flex text-sm text-gray-300">
|
|
@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">
|
|
<p class="text-2xl text-right text-orange-300 md:text-lg hover:text-orange-400">
|
|
<a href="/champion/{{ $champion->slug }}"
|
|
aria-label="[Detailed {{ $champion->name }} info...]">
|
|
<x-iconsax-bul-arrow-right class="w-8 transition-colors" />
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|