mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 10:10:48 +01:00
feat: Add streamers to champion show view
- Added loading of streamers data in the champion show view. - Updated ChampionController to load streamers for display.
This commit is contained in:
Rico van Zelst
@@ -5,125 +5,136 @@
|
||||
CHAMPION DETAILS</h3>
|
||||
<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">
|
||||
{{$champion->name}}</h1>
|
||||
{{ $champion->name }}</h1>
|
||||
<h2
|
||||
class="text-sm md:text-lg font-bold text-center text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
{{$champion->title}}</h2>
|
||||
class="text-sm font-bold text-center text-transparent uppercase md:text-lg bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
{{ $champion->title }}</h2>
|
||||
|
||||
<div class="container mx-auto p-4 flex items-center justify-center mt-3">
|
||||
<div class="w-screen grid grid-cols-1 md-grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<div class="container flex items-center justify-center p-4 mx-auto mt-3">
|
||||
<div class="grid w-screen grid-cols-1 gap-5 md-grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
class="relative rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80 lg:col-span-2">
|
||||
<div class="aspect-w-16 aspect-h-9 glow-shadow absolute inset-0 rounded-2xl"
|
||||
style="--splash-color: {{$champion->splash_color}}"></div>
|
||||
<div class="aspect-w-16 aspect-h-9 overflow-hidden rounded-2xl relative">
|
||||
<img
|
||||
src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(false) }}&w=880&output=webp&q=85&il"
|
||||
alt="{{$champion->name}} Splash Art"
|
||||
class="w-full h-full object-cover transform scale-100 transition-transform duration-700 hover:scale-105 z-10"
|
||||
>
|
||||
class="relative border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80 lg:col-span-2">
|
||||
<div class="absolute inset-0 aspect-w-16 aspect-h-9 glow-shadow rounded-2xl"
|
||||
style="--splash-color: {{ $champion->splash_color }}"></div>
|
||||
<div class="relative overflow-hidden aspect-w-16 aspect-h-9 rounded-2xl">
|
||||
<img src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(false) }}&w=880&output=webp&q=85&il"
|
||||
alt="{{ $champion->name }} Splash Art"
|
||||
class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100 hover:scale-105">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="rounded-2xl border border-3 border-white/10 lg:col-start-3 shadow-md transition-all duration-700"
|
||||
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
|
||||
<div class="transition-all duration-700 border shadow-md rounded-2xl border-3 border-white/10 lg:col-start-3"
|
||||
style="--tw-shadow-color:{{ $champion->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $champion->splash_color }};">
|
||||
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm">
|
||||
{{$champion->name}} Information</h4>
|
||||
{{ $champion->name }} Information</h4>
|
||||
|
||||
<ul class="ml-7">
|
||||
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose mt-8" lang="en">
|
||||
<span class="font-bold">Full Title:</span> {{$champion->name}}, {{$champion->title}}.
|
||||
<li class="mt-8 text-base font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Full Title:</span> {{ $champion->name }}, {{ $champion->title }}.
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose" 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)
|
||||
<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>
|
||||
@endif
|
||||
</span>
|
||||
@endforeach
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Blue Essence Cost:</span>
|
||||
<x-icon-lcu-be-svg class="inline-block w-4"/> {{$champion->price_be}} BE
|
||||
<x-icon-lcu-be-svg class="inline-block w-4" /> {{ $champion->price_be }} BE
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto text-medium font-medium leading-loose items-center"
|
||||
<li class="items-center font-medium leading-loose text-neutral-100 hyphens-auto text-medium"
|
||||
lang="en">
|
||||
<span class="font-bold">Riot Points Cost:</span>
|
||||
<x-icon-RiotPoints class="inline-block w-4"/> {{$champion->price_rp}} RP
|
||||
<x-icon-RiotPoints class="inline-block w-4" /> {{ $champion->price_rp }} RP
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<span class="font-bold">Roles:</span> @foreach($champion->roles as $role)
|
||||
<span
|
||||
class="inline-block lowercase capitalize-first">{{$role}}
|
||||
@if(!$loop->last)
|
||||
<li class="font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Roles:</span>
|
||||
@foreach ($champion->roles as $role)
|
||||
<span class="inline-block lowercase capitalize-first">{{ $role }}
|
||||
@if (!$loop->last)
|
||||
-
|
||||
@endif</span>
|
||||
@endif
|
||||
</span>
|
||||
@endforeach
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<li class="font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Attack Type:</span> <span
|
||||
class="inline-block lowercase capitalize-first">{{$champion->attack_type}}</span>
|
||||
class="inline-block lowercase capitalize-first">{{ $champion->attack_type }}</span>
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<span class="font-bold">Damage Type:</span> {{$champion->adaptive_type}}
|
||||
<li class="font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Damage Type:</span> {{ $champion->adaptive_type }}
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<span class="font-bold">Resource Type:</span> {{$champion->resource_type}}
|
||||
<li class="font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Resource Type:</span> {{ $champion->resource_type }}
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose" lang="en">
|
||||
<li class="text-base font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Champion ID:</span> <span
|
||||
class="font-mono font-medium">{{$champion->champion_id}}</span>
|
||||
class="font-mono font-medium">{{ $champion->champion_id }}</span>
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<span class="font-bold">Release Date:</span> {{$champion->release_date}}
|
||||
<li class="font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Release Date:</span> {{ $champion->release_date }}
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<span class="font-bold">Release Patch:</span> Patch {{$champion->release_patch}}
|
||||
<li class="font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Release Patch:</span> Patch {{ $champion->release_patch }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="rounded-2xl border border-3 border-white/10 shadow-md shadow-stone-800/80 hover:shadow-orange-500/20 transition-all duration-700"
|
||||
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
|
||||
<div class="transition-all duration-700 border shadow-md rounded-2xl border-3 border-white/10 shadow-stone-800/80 hover:shadow-orange-500/20"
|
||||
style="--tw-shadow-color:{{ $champion->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $champion->splash_color }};">
|
||||
<div class="p-4">
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
|
||||
{{$champion->name}} Lore</h4>
|
||||
<p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose" lang="en">
|
||||
{{$champion->lore}}
|
||||
{{ $champion->name }} Streamers</h4>
|
||||
<p class="text-neutral-100/75 hyphens-auto mt-2.5 leading-loose text-center text-sm" lang="en">
|
||||
A list of streamers who play {{ $champion->name }} and are atleast Diamond 2 or higher.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4 mt-2.5 lg:grid-cols-2">
|
||||
@foreach ($streamers as $streamer)
|
||||
<div class="flex justify-center items -center">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<a href="{{ $streamer->streamer_url }}" target="_blank" rel="noopener noreferrer"
|
||||
class="text-center text-neutral-100 text-sm mt-1.5 items-center">
|
||||
{{ $streamer->displayname }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-2xl border border-3 border-white/10 shadow-md shadow-stone-800/80 lg:col-span-2 hover:shadow-orange-500/20 transition-all duration-700"
|
||||
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
|
||||
<div class="transition-all duration-700 border shadow-md rounded-2xl border-3 border-white/10 shadow-stone-800/80 lg:col-span-2 hover:shadow-orange-500/20"
|
||||
style="--tw-shadow-color:{{ $champion->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $champion->splash_color }};">
|
||||
<div class="p-4">
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
|
||||
{{$champion->name}} Skins ({{count($champion->skins)}}) </h4>
|
||||
{{ $champion->name }} Skins ({{ count($champion->skins) }}) </h4>
|
||||
<div id="skinsElement" class="overflow-x-scroll mt-2.5">
|
||||
<div class="grid grid-flow-col grid-rows-2 w-max gap-4 mb-2.5">
|
||||
@foreach($champion->skins as $key => $skin)
|
||||
<div class="group flex flex-col">
|
||||
<a href="/skin/{{$skin->slug}}">
|
||||
<img
|
||||
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=450&output=webp&q=70&il"
|
||||
alt="{{$champion->name}} {{$skin->name}} Splash Art"
|
||||
@if($key < 6) loading="eager" @else loading="lazy" @endif
|
||||
@foreach ($champion->skins as $key => $skin)
|
||||
<div class="flex flex-col group">
|
||||
<a href="/skin/{{ $skin->slug }}">
|
||||
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=450&output=webp&q=70&il"
|
||||
alt="{{ $champion->name }} {{ $skin->name }} Splash Art"
|
||||
@if ($key < 6) loading="eager" @else loading="lazy" @endif
|
||||
class="inline-block h-36 object-cover rounded-2xl shadow-md border border-3 border-white/10 hover:shadow-orange-500/20 transition-all duration-700 mr-2.5">
|
||||
</a>
|
||||
<div>
|
||||
|
||||
<p class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
|
||||
<a href="/skin/{{$skin->slug}}"
|
||||
class="hover:text-orange-400 group-hover:text-orange-400">
|
||||
{{$skin->skin_name}}
|
||||
<x-iconsax-bul-arrow-right class="inline-block w-5"/>
|
||||
<p
|
||||
class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
|
||||
<a href="/skin/{{ $skin->slug }}"
|
||||
class="hover:text-orange-400 group-hover:text-orange-400">
|
||||
{{ $skin->skin_name }}
|
||||
<x-iconsax-bul-arrow-right class="inline-block w-5" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
@@ -133,6 +144,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transition-all duration-700 border shadow-md lg:col-span-3 rounded-2xl border-3 border-white/10 shadow-stone-800/80 hover:shadow-orange-500/20"
|
||||
style="--tw-shadow-color:{{ $champion->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $champion->splash_color }};">
|
||||
<div class="p-4">
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
|
||||
{{ $champion->name }} Lore</h4>
|
||||
<p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose w-9/12 mx-auto"
|
||||
lang="en">
|
||||
{{ $champion->lore }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user