Archive/HeimerdingerLoL
1
0
Fork 0
mirror of https://github.com/rico-vz/HeimerdingerLoL.git synced 2025-12-06 18:20:48 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(home): update upcoming and latest skins display

Browse Source 
- Updated the query in HomeController@index to filter upcoming skins based on release date.
- Updated the query in HomeController@index to filter latest skins based on release date.
- Added links to champion details page for each champion in list_all.blade.php.
- Added links to skin details page for each skin in recent_skins.blade.php and upcoming_skins.blade.php.
This commit is contained in:
Rico van Zelst
2024-02-16 01:41:06 +01:00
parent 17ccf554f1
commit a48ea6e42f
5 changed files with 78 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/Http/Controllers/HomeController.php
View File

@@ -10,10 +10,11 @@ class HomeController extends Controller
public function index() public function index()
{ {
$upcomingSkins = Cache::remember('upcomingSkins_home', 60 * 4, static fn () => ChampionSkin::where('availability', 'Upcoming') $upcomingSkins = Cache::remember('upcomingSkins_home', 60 * 4, static fn () => ChampionSkin::where('availability', 'Upcoming')
->where('release_date', '0000-00-00')
->orderBy('release_date', 'desc')->get()); ->orderBy('release_date', 'desc')->get());
$latestSkins = Cache::remember('latestSkins_home', 60 * 4, static fn () => ChampionSkin::where('availability', 'Available') $latestSkins = Cache::remember('latestSkins_home', 60 * 4, static fn () => ChampionSkin::where('release_date', '!=', '0000-00-00')
->orderBy('release_date', 'desc')->take(9)->get()); ->orderBy('release_date', 'desc')->get());
return view('home', [ return view('home', [
'latestSkins' => $latestSkins, 'latestSkins' => $latestSkins,

21
resources/views/components/champions/list_all.blade.php
View File

@@ -5,39 +5,42 @@
?> ?>
<section class="max-w-screen-xl mx-auto mt-12"> <section class="max-w-screen-xl mx-auto mt-12">
<h1 <h1
class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl 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">
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
Champions</h1> Champions</h1>
<div class="flex justify-center items-center mx-auto max-w-screen-xl mt-2.5"> <div class="flex justify-center items-center mx-auto max-w-screen-xl mt-2.5">
<x-champions.lane-selector class="text-center"/> <x-champions.lane-selector class="text-center"/>
</div> </div>
<div class="container mx-auto p-4 flex items-center justify-center mt-3"> <div class="container flex items-center justify-center p-4 mx-auto mt-3">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 "> <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4 ">
@foreach($champions as $key => $champion) @foreach($champions as $key => $champion)
<div <div
class="champ-card flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border 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 @foreach($roles[$key]->roles as $lane) POS-{{$lane}}@endforeach">
<div <div
class="mx-4 mt-4 overflow-hidden h-52 rounded-2xl bg-clip-border border-2 border-orange-400/40"> class="mx-4 mt-4 overflow-hidden border-2 h-52 rounded-2xl bg-clip-border border-orange-400/40">
<a href="/champion/{{$champion->slug}}">
<img @if($key < 8) loading="eager" @else loading="lazy" @endif <img @if($key < 8) loading="eager" @else loading="lazy" @endif
src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute() }}&w=380&output=webp&q=65&il" src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute() }}&w=380&output=webp&q=65&il"
class="object-cover w-full h-full" class="object-cover w-full h-full"
alt="{{ $champion->name }} Splash Art" alt="{{ $champion->name }} Splash Art"
/> />
</a>
</div> </div>
<div class="px-4 py-2"> <div class="px-4 py-2">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<p class="block text-base antialiased font-medium text-gray-100"> <p class="block text-base antialiased font-medium text-gray-100">
<a href="/champion/{{$champion->slug}}">
{{ $champion->name }} {{ $champion->name }}
</a>
</p> </p>
<span class="text-xs text-stone-300">{{ $champion->title }}</span> <span class="text-xs text-stone-300">{{ $champion->title }}</span>
</div> </div>
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
<p class="text-gray-300 text-sm flex"> <p class="flex text-sm text-gray-300">
@foreach($roles[$key]->roles as $lane) @foreach($roles[$key]->roles as $lane)
<span class="sr-only">{{$lane}}</span> <span class="sr-only">{{$lane}}</span>
@@ -46,12 +49,12 @@
@if($key < 8) loading="auto" @else loading="lazy" @if($key < 8) loading="auto" @else loading="lazy"
@endif src="{{getRoleIcon($lane)}}" @endif src="{{getRoleIcon($lane)}}"
alt="{{$lane}} Icon" alt="{{$lane}} Icon"
class="w-7 h-7 mr-1"> class="mr-1 w-7 h-7">
</p> </p>
@endforeach @endforeach
<div class="w-full flex justify-end items-end justify-items-end "> <div class="flex items-end justify-end w-full justify-items-end ">
<p class="text-right text-2xl md:text-lg text-orange-300 hover:text-orange-400"> <p class="text-2xl text-right text-orange-300 md:text-lg hover:text-orange-400">
<a href="/champion/{{$champion->slug}}" <a href="/champion/{{$champion->slug}}"
aria-label="[Detailed {{$champion->name}} info...]"> aria-label="[Detailed {{$champion->name}} info...]">
<x-iconsax-bul-arrow-right class="w-8 transition-colors"/> <x-iconsax-bul-arrow-right class="w-8 transition-colors"/>

21
resources/views/components/home/recent_skins.blade.php
View File

@@ -1,6 +1,7 @@
@php use Carbon\Carbon; @endphp @php use Carbon\Carbon; @endphp
<?php <?php
/** @var App\Models\ChampionSkin $skin */ ?> /** @var App\Models\ChampionSkin $skin */
?>
<section class="text-white bg-stone-900"> <section class="text-white bg-stone-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-12 sm:px-6 lg:py-16 lg:px-8"> <div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-12 sm:px-6 lg:py-16 lg:px-8">
@@ -18,14 +19,18 @@
@foreach ($latestSkins as $skin) @foreach ($latestSkins as $skin)
@if ($loop->index < 6) @if ($loop->index < 6)
<div <div
class="p-8 transition bg-stone-800/40 border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"> class="p-8 transition border shadow-xl bg-stone-800/40 border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<a href="{{ route('skins.show', $skin->slug) }}">
<img loading="lazy" class="border-2 border-orange-400/40 rounded-xl" <img loading="lazy" class="border-2 border-orange-400/40 rounded-xl"
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=720&output=jpg&q=90&il" src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=720&output=jpg&q=90&il"
alt="{{ $skin->skin_name }} Splash Art"> alt="{{ $skin->skin_name }} Splash Art">
</a>
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<h2 class="mt-4 text-xl font-bold text-white"><a href="{{ route('skins.show', $skin->slug) }}">{{ $skin->skin_name }}</a></h2> <h2 class="mt-4 text-xl font-bold text-white"><a
href="{{ route('skins.show', $skin->slug) }}">{{ $skin->skin_name }}</a>
</h2>
<h3 class=" text-stone-200">Released <h3 class=" text-stone-200">Released
{{ Carbon::parse($skin->release_date)->diffForHumans([ {{ Carbon::parse($skin->release_date)->diffForHumans([
'parts' => 2, 'parts' => 2,
@@ -33,28 +38,28 @@
]) }} ]) }}
</h3> </h3>
@foreach($skin->associated_skinline as $skinline) @foreach ($skin->associated_skinline as $skinline)
<span class="sr-only">Associated Skinline:</span> <span class="sr-only">Associated Skinline:</span>
<span <span
class="my-2 bg-orange-100 text-orange-800 text-xs font-medium class="my-2 bg-orange-100 text-orange-800 text-xs font-medium
mr-2 px-2.5 py-0.5 rounded mr-2 px-2.5 py-0.5 rounded
border border-orange-300 border border-orange-300
"> ">
{{$skinline}}</span> {{ $skinline }}</span>
@endforeach @endforeach
<p class="flex text-sm text-stone-300"> <p class="flex text-sm text-stone-300">
@if ($skin->rp_price == '99999') @if ($skin->rp_price == '99999')
Not Available for RP Not Available for RP
@else @else
<x-icon-RiotPoints class="text-yellow-400 w-4 mr-1"/> <x-icon-RiotPoints class="w-4 mr-1 text-yellow-400" />
{{ $skin->rp_price }} RP {{ $skin->rp_price }} RP
@endif @endif
</p> </p>
@if ($skin->loot_eligible) @if ($skin->loot_eligible)
<p class="flex mt-1 text-sm italic text-stone-300 items-center"> <p class="flex items-center mt-1 text-sm italic text-stone-300">
<x-icon-loot class="text-yellow-200 w-4 mr-1"/> <x-icon-loot class="w-4 mr-1 text-yellow-200" />
Can be obtained from loot Can be obtained from loot
</p> </p>
@endif @endif

27
resources/views/components/home/upcoming_skins.blade.php
View File

@@ -1,6 +1,7 @@
@php use Carbon\Carbon; @endphp @php use Carbon\Carbon; @endphp
<?php <?php
/** @var App\Models\ChampionSkin $skin */ ?> /** @var App\Models\ChampionSkin $skin */
?>
<section class="text-white bg-stone-900"> <section class="text-white bg-stone-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-12 sm:px-6 lg:py-16 lg:px-8"> <div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-12 sm:px-6 lg:py-16 lg:px-8">
@@ -11,31 +12,37 @@
<p class="mt-4 text-stone-300"> <p class="mt-4 text-stone-300">
Check out upcoming skins in League of Legends. <br> Check out upcoming skins in League of Legends. <br>
<span class="text-sm text-stone-400">Data is sourced from the <a class="underline decoration-1 decoration-orange-400/50 hover:decoration-orange-400 transition-all duration-700" href="https://leagueoflegends.fandom.com/wiki/League_of_Legends_Wiki" target="_blank">LoL Wiki</a>, ran by volunteers.</span><br> <span class="text-sm text-stone-400">Data is sourced from the <a
class="underline transition-all duration-700 decoration-1 decoration-orange-400/50 hover:decoration-orange-400"
href="https://leagueoflegends.fandom.com/wiki/League_of_Legends_Wiki" target="_blank">LoL
Wiki</a>, ran by volunteers.</span><br>
<span class="text-sm text-stone-400">We cannot guarantee its real-time accuracy.</span> <span class="text-sm text-stone-400">We cannot guarantee its real-time accuracy.</span>
</p> </p>
</div> </div>
<div class="grid grid-cols-1 gap-4 mt-8 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3"> <div class="grid grid-cols-1 gap-4 mt-8 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3">
@foreach ($upcomingSkins as $skin) @foreach ($upcomingSkins as $skin)
<div <div
class="p-8 bg-stone-800/40 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"> class="p-8 transition border shadow-xl bg-stone-800/40 border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<a href="{{ route('skins.show', $skin->slug) }}">
<img loading="lazy" class="border-2 border-orange-400/40 rounded-xl" <img loading="lazy" class="border-2 border-orange-400/40 rounded-xl"
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=720&output=jpg&q=90&il" src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=720&output=jpg&q=90&il"
alt="{{ $skin->skin_name }} Splash Art"> alt="{{ $skin->skin_name }} Splash Art">
</a>
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<h2 class="mt-4 text-xl font-bold text-white"><a href="{{ route('skins.show', $skin->slug) }}">{{ $skin->skin_name }}</a></h2> <h2 class="mt-4 text-xl font-bold text-white"><a
href="{{ route('skins.show', $skin->slug) }}">{{ $skin->skin_name }}</a></h2>
<div class="my-1 "> <div class="my-1 ">
<span class="sr-only">Associated Skinline:</span> <span class="sr-only">Associated Skinline:</span>
@foreach($skin->associated_skinline as $skinline) @foreach ($skin->associated_skinline as $skinline)
<span <span
class="bg-orange-100 text-orange-800 text-xs font-medium class="bg-orange-100 text-orange-800 text-xs font-medium
@if(!$loop->last) mr-2 @endif px-2.5 rounded @if (!$loop->last) mr-2 @endif px-2.5 rounded
border border-orange-300 border border-orange-300
"> ">
{{$skinline}}</span> {{ $skinline }}</span>
@endforeach @endforeach
</div> </div>
@@ -43,14 +50,14 @@
@if ($skin->rp_price == '99999') @if ($skin->rp_price == '99999')
Not Available for RP Not Available for RP
@else @else
<x-icon-RiotPoints class="text-yellow-400 w-4 mr-1"/> <x-icon-RiotPoints class="w-4 mr-1 text-yellow-400" />
{{ $skin->rp_price }} RP {{ $skin->rp_price }} RP
@endif @endif
</p> </p>
@if ($skin->loot_eligible) @if ($skin->loot_eligible)
<p class="flex mt-1 text-sm italic text-stone-300 items-center"> <p class="flex items-center mt-1 text-sm italic text-stone-300">
<x-icon-loot class="text-yellow-200 w-4 mr-1"/> <x-icon-loot class="w-4 mr-1 text-yellow-200" />
Can be obtained from loot Can be obtained from loot
</p> </p>
@endif @endif

50
resources/views/components/skins/paginatedlist.blade.php
View File

@@ -1,61 +1,61 @@
<?php <?php
/** @var App\Models\ChampionSkin $skin */ ?> /** @var App\Models\ChampionSkin $skin */
?>
<section class="max-w-screen-xl mx-auto mt-12"> <section class="max-w-screen-xl mx-auto mt-12">
<h1 <h1
class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl 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">
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
Champion Skins</h1> Champion Skins</h1>
<x-skins.searchbar/> <x-skins.searchbar />
<div class="flex justify-center items-center mx-auto max-w-screen-xl mt-2.5"> <div class="flex justify-center items-center mx-auto max-w-screen-xl mt-2.5">
</div> </div>
<div class="container mx-auto p-4 flex items-center justify-center mt-3"> <div class="container flex items-center justify-center p-4 mx-auto mt-3">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 "> <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4 ">
@foreach($skins as $key => $skin) @foreach ($skins as $key => $skin)
<div <div
class="champ-card flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border class="flex flex-col text-gray-700 border shadow-md champ-card bg-stone-800/40 rounded-2xl bg-clip-border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10">
border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10">
@if($skin->associated_skinline != null) @if ($skin->associated_skinline != null)
<div class="px-2 flex justify-center"> <div class="flex justify-center px-2">
@foreach($skin->associated_skinline as $skinline) @foreach ($skin->associated_skinline as $skinline)
<span class="sr-only">Associated Skinline:</span> <span class="sr-only">Associated Skinline:</span>
<span <span
class="m-2 bg-orange-100 text-orange-800 text-xs font-medium class="m-2 bg-orange-100 text-orange-800 text-xs font-medium
mr-2 px-2.5 py-0.5 rounded mr-2 px-2.5 py-0.5 rounded
border border-orange-300 border border-orange-300
"> ">
{{$skinline}}</span> {{ $skinline }}</span>
@endforeach @endforeach
</div> </div>
@endif @endif
<div <div class="mx-4 overflow-hidden border-2 h-52 rounded-2xl bg-clip-border border-orange-400/40">
class="mx-4 overflow-hidden h-52 rounded-2xl bg-clip-border border-2 border-orange-400/40"> <a href="/skin/{{ $skin->slug }}">
<img @if($key < 8) loading="eager" @else loading="lazy" @endif <img @if ($key < 8) loading="eager" @else loading="lazy" @endif
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=540&output=webp&q=70&il" src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=540&output=webp&q=70&il"
class="object-cover w-full h-full" class="object-cover w-full h-full" alt="{{ $skin->skin_name }} Splash Art" />
alt="{{ $skin->skin_name }} Splash Art" </a>
/>
</div> </div>
<div class="px-4 py-2"> <div class="px-4 py-2">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<p class="block text-base antialiased font-medium text-gray-100"> <p class="block text-base antialiased font-medium text-gray-100">
<a href="/skin/{{ $skin->slug }}">
{{ $skin->skin_name }} {{ $skin->skin_name }}
</a>
</p> </p>
<span class="text-xs font-bold {{ $rarityColor[$skin->rarity] }}">{{$skin->rarity}}</span> <span
class="text-xs font-bold {{ $rarityColor[$skin->rarity] }}">{{ $skin->rarity }}</span>
</div> </div>
</div> </div>
<div <div class="flex items-end justify-center px-4 mt-auto mb-2 text-2xl text-white md:text-lg">
class="mb-2 px-4 flex justify-center items-end text-white text-2xl md:text-lg mt-auto"> <p class="text-sm font-medium hover:text-orange-400 "><a href="/skin/{{ $skin->slug }}">More
<p class="font-medium text-sm hover:text-orange-400 "><a details
href="/skin/{{$skin->slug}}">More details <x-iconsax-bul-arrow-circle-right class="inline-block w-6" />
<x-iconsax-bul-arrow-circle-right class="inline-block w-6"/>
</a> </a>
</p> </p>
</div> </div>