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

[feature] info pages redesign (#306)

Browse Source 
* feat(skin-info): initial page redesign

* feat(skin-info): improve page header & colors

* feat(skin-info): optimize splash loading

* feat(skin-info): add product schema

* feat(skin-info): add faq section

* feat(champ-info): full page redesign

* fix: remove unused splash_color

* feat(icon-info): full page redesign

* feat(skin-info): convert RP to EUR in skin schema

* fix: prevent error on missing element
This commit is contained in:
Rico
2025-05-16 15:13:53 +02:00
committed by GitHub
parent 9745765875
commit 84da1cc6d2
10 changed files with 1534 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/Http/Controllers/ChampionController.php
View File

@@ -15,9 +15,9 @@ class ChampionController extends Controller
{ {
$eightHoursInSeconds = 60 * 60 * 8; $eightHoursInSeconds = 60 * 60 * 8;
$champions = Cache::remember('championsListAllCache', $eightHoursInSeconds, static fn () => Champion::orderBy('name')->get()); $champions = Cache::remember('championsListAllCache', $eightHoursInSeconds, static fn() => Champion::orderBy('name')->get());
$roles = Cache::remember('championsRolesCache', $eightHoursInSeconds, static fn () => ChampionRoles::orderBy('champion_name')->get()); $roles = Cache::remember('championsRolesCache', $eightHoursInSeconds, static fn() => ChampionRoles::orderBy('champion_name')->get());
return view('champions.index', ['champions' => $champions, 'roles' => $roles]); return view('champions.index', ['champions' => $champions, 'roles' => $roles]);
} }
@@ -28,20 +28,11 @@ class ChampionController extends Controller
public function show(Champion $champion) public function show(Champion $champion)
{ {
$threeDaysInSeconds = 60 * 60 * 24 * 3; $threeDaysInSeconds = 60 * 60 * 24 * 3;
$sixMonthsInSeconds = 60 * 60 * 24 * 30 * 6;
$champion = Cache::remember('championShowCache'.$champion->slug, $threeDaysInSeconds, static fn () => $champion->load('streamers', 'skins', 'lanes')); $champion = Cache::remember('championShowCache' . $champion->slug, $threeDaysInSeconds, static fn() => $champion->load('streamers', 'skins', 'lanes'));
$streamers = $champion->load('streamers')->streamers; $streamers = $champion->load('streamers')->streamers;
$splashColor = Cache::remember(
'championSplashColorCache'.$champion->slug,
$sixMonthsInSeconds,
static fn () => getAverageColorFromImageUrl('https://wsrv.nl/?url='.$champion->getChampionImageAttribute(true))
);
$champion->splash_color = $splashColor;
return view('champions.show', ['champion' => $champion, 'streamers' => $streamers]); return view('champions.show', ['champion' => $champion, 'streamers' => $streamers]);
} }
} }

8
app/Http/Controllers/ChampionSkinController.php
View File

@@ -63,14 +63,6 @@ class ChampionSkinController extends Controller
static fn () => $championSkin->load('champion', 'chromas') static fn () => $championSkin->load('champion', 'chromas')
); );
$splashColor = Cache::remember(
'championSkinSplashColorCache'.$championSkin->slug,
60 * 60 * 120,
static fn () => getAverageColorFromImageUrl('https://wsrv.nl/?url='.$championSkin->getSkinImageAttribute(true))
);
$skin->splash_color = $splashColor;
return view('skins.show', ['skin' => $skin]); return view('skins.show', ['skin' => $skin]);
} }

2
app/Http/Controllers/SummonerIconController.php
View File

@@ -11,7 +11,7 @@ class SummonerIconController extends Controller
public function index() public function index()
{ {
$icons = QueryBuilder::for(SummonerIcon::class) $icons = QueryBuilder::for(SummonerIcon::class)
->allowedFilters('title') ->allowedFilters(['title', 'esports_team', 'release_year'])
->defaultSort('-icon_id') ->defaultSort('-icon_id')
->paginate(72) ->paginate(72)
->appends(request()->query()); ->appends(request()->query());

5
resources/css/app.css
View File

@@ -164,3 +164,8 @@ ins.adsbygoogle[data-ad-status="unfilled"] {
background-color: rgba(0, 0, 0, 0.02); background-color: rgba(0, 0, 0, 0.02);
border-radius: 4px; border-radius: 4px;
} }
#skinsElement {
overflow-y: auto;
overflow-x: auto;
}

9
resources/js/vert-scroll.js
View File

@@ -1,5 +1,10 @@
let skinsElement = document.getElementById('skinsElement'); let skinsElement = document.getElementById('skinsElement');
skinsElement.addEventListener('wheel', (ev) => {
if (skinsElement) {
skinsElement.addEventListener('wheel', (ev) => {
if (skinsElement.scrollWidth > skinsElement.clientWidth) {
ev.preventDefault(); ev.preventDefault();
skinsElement.scrollLeft += (ev.deltaY + ev.deltaX); skinsElement.scrollLeft += (ev.deltaY + ev.deltaX);
}); }
});
}

71
resources/views/champions/show.blade.php
View File

@@ -1,14 +1,77 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', $champion->name . ' • Heimerdinger.LoL') @section('title', $champion->name . ' • Heimerdinger.LoL')
@section('description', 'Heimerdinger.LoL: ' . $champion->name . ' details showing all the information you need to know @section('description',
about ' . $champion->name . ', ' . $champion->title . '. ' . substr($champion->lore, 0, 50) . '...') 'Heimerdinger.LoL: ' .
$champion->name .
' details showing all the information you need to know
about ' .
$champion->name .
', ' .
$champion->title .
'. ' .
substr($champion->lore, 0, 50) .
'...')
@section('content') @section('content')
<x-champions.grid_info :champion="$champion" :streamers="$streamers"/> <x-champions.grid_info :champion="$champion" :streamers="$streamers" />
@endsection @endsection
@push('bottom_scripts') @push('bottom_scripts')
@vite('resources/js/vert-scroll.js') @vite('resources/js/vert-scroll.js')
@endpush <script type="application/ld+json">
@php
$description = $champion->name . " is a " . strtolower(implode('/', $champion->roles)) . " champion in League of Legends";
$jsonObject = [
"@context" => "https://schema.org/",
"@type" => "SoftwareApplication",
"applicationCategory" => "Game",
"name" => "League of Legends",
"operatingSystem" => "Windows, macOS",
"publisher" => [
"@type" => "Organization",
"name" => "Riot Games"
],
"offers" => [
"@type" => "Offer",
"price" => "0",
"priceCurrency" => "USD"
],
"character" => [
"@type" => "Character",
"name" => $champion->name,
"description" => $description,
"image" => $champion->getChampionImageAttribute(true)
],
"url" => url()->current()
];
$jsonObject["character"]["characterAttribute"] = $champion->roles;
$jsonObject["character"]["additionalProperty"] = [
[
"@type" => "PropertyValue",
"name" => "Attack Type",
"value" => $champion->attack_type
],
[
"@type" => "PropertyValue",
"name" => "Damage Type",
"value" => $champion->adaptive_type
],
[
"@type" => "PropertyValue",
"name" => "Resource",
"value" => $champion->resource_type
],
[
"@type" => "PropertyValue",
"name" => "Release Date",
"value" => $champion->release_date
]
];
echo json_encode($jsonObject, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
@endphp
</script>
@endpush

502
resources/views/components/champions/grid_info.blade.php
View File

@@ -1,137 +1,257 @@
<section class="max-w-screen-xl mx-auto mt-12"> <section class="max-w-screen-xl mx-auto mt-12">
<h3 <h3
class="text-sm font-bold text-center text-transparent uppercase sm:text-md bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text"> class="text-sm font-bold text-center text-transparent uppercase sm:text-md bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
CHAMPION DETAILS</h3> Champion Spotlight
</h3>
<h1 <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"> 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 <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"> 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> {{ $champion->title }}
</h2>
<x-ads.common /> <x-ads.common />
<div class="container flex items-center justify-center p-4 mx-auto mt-3"> <!-- Hero Section with Splash Art -->
<div class="grid w-screen grid-cols-1 gap-5 md-grid-cols-2 lg:grid-cols-3"> <div class="container mx-auto mt-8">
<div <div class="relative overflow-hidden border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80"
class="relative border shadow-sm aspect-video rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80 lg:col-span-2"> style="height: 350px;">
<div class="absolute inset-0 aspect-video glow-shadow rounded-2xl" <div class="absolute inset-0 glow-shadow rounded-2xl"></div>
style="--splash-color: {{ $champion->splash_color }}"></div>
<div class="relative overflow-hidden aspect-video rounded-2xl"> <div class="relative w-full h-full">
<img src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(true) }}&w=880&output=webp&q=85&il" <img src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(true) }}&w=30&h=20&fit=cover&blur=5&output=webp"
alt="{{ $champion->name }} Splash Art" class="absolute inset-0 object-cover w-full h-full blur-sm" alt="{{ $champion->name }} Loading" />
class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100 hover:scale-105"> <img src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(true) }}&w=800&h=350&fit=cover&output=webp&q=85"
</div> srcset="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(true) }}&w=480&h=350&fit=cover&output=webp&q=85 480w,
//wsrv.nl/?url={{ $champion->getChampionImageAttribute(true) }}&w=800&h=350&fit=cover&output=webp&q=85 800w,
//wsrv.nl/?url={{ $champion->getChampionImageAttribute(true) }}&w=1200&h=350&fit=cover&output=webp&q=90 1200w"
sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1200px"
class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100"
alt="{{ $champion->name }} Splash Art" loading="eager" />
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/90 via-stone-900/40 to-transparent"></div>
<div class="absolute inset-x-0 bottom-0 z-20 flex items-end justify-between w-full p-4">
<div>
<h3 class="mb-1 text-2xl font-bold text-white drop-shadow-lg">{{ $champion->name }}</h3>
<p class="mb-2 text-sm font-medium text-orange-300">{{ $champion->title }}</p>
<a href="{{ $champion->getChampionImageAttribute(true) }}" rel="noopener" target="_blank"
class="inline-flex items-center px-3 py-1 text-sm font-bold text-white transition bg-orange-500 rounded-lg bg-opacity-80 hover:bg-opacity-100">
<span>View Full Splash Art</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</a>
</div> </div>
<div class="transition-all duration-700 border shadow-md rounded-2xl border-3 border-white/10 lg:col-start-3" <div class="px-3 py-2 border rounded-lg bg-stone-900/80 border-orange-500/40">
style="--tw-shadow-color:{{ $champion->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $champion->splash_color }};"> <div class="flex items-center space-x-2">
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm">
{{ $champion->name }} Information</h4>
<ul class="ml-7">
<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-base font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
<span class="font-bold">Popular Positions:</span>
@if (isset($champion->lanes) && isset($champion->lanes->roles)) @if (isset($champion->lanes) && isset($champion->lanes->roles))
@foreach ($champion->lanes->roles as $lane) @foreach ($champion->lanes->roles as $lane)
<span class="inline-block lowercase capitalize-first">{{ $lane }} <span class="flex items-center text-white">
@svg(getRoleIconSvg($lane), 'w-5 h-5 inline-block') @svg(getRoleIconSvg($lane), 'w-5 h-5 inline-block mr-1')
@if (!$loop->last) <span class="text-sm capitalize-first">{{ $lane }}</span>
-
@endif
</span> </span>
@endforeach @endforeach
@else @else
<span class="inline-block lowercase capitalize-first">Not Enough Data</span> <span class="text-sm text-white">Not Enough Data</span>
@endif @endif
</li>
<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
</li>
<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
</li>
<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>
@endforeach
</li>
<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>
</li>
<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="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-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>
</li>
<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="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>
<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" </div>
style="--tw-shadow-color:{{ $champion->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $champion->splash_color }};"> </div>
<div class="p-4"> </div>
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm"> </div>
{{ $champion->name }} Streamers</h4>
<p class="text-neutral-100/75 hyphens-auto mt-2.5 leading-loose text-center text-sm" lang="en"> <article class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
A list of streamers who play {{ $champion->name }} and are atleast Diamond 2 or higher. <h2
class="mb-6 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
All About {{ $champion->name }}
</h2>
<div class="space-y-5 text-lg leading-relaxed text-neutral-100">
<div class="grid grid-cols-1 gap-6 mb-6 md:grid-cols-4">
<div class="md:col-span-3">
<h3 class="mb-2 text-xl font-bold text-orange-400">Champion Overview</h3>
<p>
<strong>{{ $champion->name }}</strong>, {{ $champion->title }}, is a powerful
{{ strtolower(implode('/', $champion->roles)) }} champion in League of Legends who is
mostly played
in
@if (isset($champion->lanes) && isset($champion->lanes->roles))
{{ strtolower(implode(' and ', $champion->lanes->roles)) }}
@else
some lanes
@endif
of Summoner's Rift. First released on {{ $champion->release_date }} during Patch
{{ $champion->release_patch }}, {{ $champion->name }} has become known for their
{{ strtolower($champion->attack_type) }} playstyle and
{{ strtolower($champion->adaptive_type) }} damage output.
</p>
<p class="mt-3">
With {{ count($champion->skins) }} unique skins available, {{ $champion->name }} offers
plenty of customization options for players who enjoy this champion.
@if (count($champion->skins) <= 3)
While {{ $champion->name }} doesn't have many skins yet, each one offers a unique take
on this champion's theme.
@elseif (count($champion->skins) <= 6)
{{ $champion->name }} has a decent collection of skins to choose from, giving players
plenty of options to switch up their look.
@elseif (count($champion->skins) <= 10)
{{ $champion->name }} has a good amount of skins, including some really nice
reimaginings of the character.
@else
{{ $champion->name }} has a ton of skins to choose from, so players can really
customize their experience with this champion.
@endif
</p>
<p class="mt-3">
As a champion who uses {{ $champion->resource_type }} as their resource,
{{ $champion->name }} brings a unique set of abilities to League of Legends that makes them
a
great champ for any team comp.
</p> </p>
<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 drop-shadow-lg text-shadow-{{ strtolower($streamer->platform) }}">
{{ $streamer->displayname }}
</a>
</div>
</div> </div>
<div class="p-4 transition-all duration-700 border shadow-md rounded-xl border-white/10"
style="--tw-shadow-color:#704e3d; --tw-shadow: var(--tw-shadow-colored); background-color: #704e3d;">
<h4 class="mb-2 text-lg font-semibold text-center uppercase text-neutral-100">Champion Stats
</h4>
<div class="text-base text-neutral-100">
<p class="mb-2"><span class="font-bold">BE Cost:</span>
<x-icon-lcu-be-svg class="inline-block w-4" /> {{ $champion->price_be }} BE
</p>
<p class="mb-2"><span class="font-bold">RP Cost:</span>
<x-icon-RiotPoints class="inline-block w-4" /> {{ $champion->price_rp }} RP
</p>
<p class="mb-2"><span class="font-bold">Role:</span>
@foreach ($champion->roles as $role)
{{ ucfirst(strtolower($role)) }}{{ !$loop->last ? ', ' : '' }}
@endforeach @endforeach
</p>
<p class="mb-2"><span class="font-bold">Damage:</span> {{ $champion->adaptive_type }}</p>
<p class="mb-2"><span class="font-bold">Attack:</span>
{{ ucfirst(strtolower($champion->attack_type)) }}</p>
<p class="mb-2"><span class="font-bold">Resource:</span> {{ $champion->resource_type }}
</p>
<p><span class="font-bold">Champion ID:</span>
{{ $champion->champion_id }}</p>
</div> </div>
</div> </div>
</div> </div>
<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 mb-4 border rounded-lg bg-stone-700/20 border-orange-500/20">
<div class="p-4"> <div class="flex flex-col items-start sm:flex-row sm:items-center">
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm"> <div class="mb-2 sm:mr-4 sm:mb-0">
{{ $champion->name }} Skins ({{ count($champion->skins) }}) </h4> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-orange-400" fill="none"
<div id="skinsElement" class="overflow-x-scroll mt-2.5"> viewBox="0 0 24 24" stroke="currentColor">
<div class="grid grid-flow-col grid-rows-2 w-max gap-4 mb-2.5"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="flex-1">
<p class="text-sm text-neutral-200 sm:text-base">
Looking for a {{ $champion->name }} icon for your profile? Check out our <a
href="/icons?filter%5Btitle%5D={{ urlencode($champion->name) }}"
class="text-orange-400 hover:text-orange-300">{{ $champion->name }} Icons List</a>.
</p>
<p class="mt-1 text-sm text-neutral-200 sm:text-base">
Want to save on {{ $champion->name }} skins? Check our <a href="/sale-rotation"
class="text-orange-400 hover:text-orange-300">Sale Rotation Tracker</a> to see if
any {{ $champion->name }} skins are currently discounted!
</p>
</div>
</div>
</div>
<h3 class="mt-8 mb-2 text-xl font-bold text-orange-400">Gameplay Style</h3>
<p>
{{ $champion->name }} is primarily played as a {{ strtolower(implode('/', $champion->roles)) }},
leveraging their {{ strtolower($champion->attack_type) }} combat style to dominate
@if (isset($champion->lanes) && isset($champion->lanes->roles))
in the {{ strtolower(implode(' or ', $champion->lanes->roles)) }}.
@else
on the Rift.
@endif
Since their release in Patch {{ $champion->release_patch }}, players have come up with a bunch of
different
strategies and builds to maximize {{ $champion->name }}'s potential.
</p>
<p>
As a {{ strtolower($champion->adaptive_type) }}-focused champion who uses
{{ $champion->resource_type }} to cast their abilities, {{ $champion->name }} requires players to
carefully manage their resources while positioning effectively to deal maximum damage. The
champion's design makes them particularly effective against
@if (strpos(strtolower(implode('', $champion->roles)), 'assassin') !== false)
squishy targets like ADCs and mages, allowing for quick kills in fights.
@elseif (strpos(strtolower(implode('', $champion->roles)), 'tank') !== false)
opponents by absorbing damage and disrupting enemy formations with CC.
@elseif (strpos(strtolower(implode('', $champion->roles)), 'mage') !== false)
grouped enemies with AoE abilities and burst damage.
@elseif (strpos(strtolower(implode('', $champion->roles)), 'marksman') !== false)
targets at range, dealing consistent damage throughout extended fights. High DPS.
@elseif (strpos(strtolower(implode('', $champion->roles)), 'support') !== false)
enemy strategies by providing utility, protection, and setup for teammates.
@elseif (strpos(strtolower(implode('', $champion->roles)), 'fighter') !== false)
both squishier targets and frontline opponents with a balance of damage and durability.
@else
a variety of opponents, adapting to different situations as needed.
@endif
</p>
<div class="mt-10">
<h3 class="mb-4 text-xl font-bold text-orange-400">{{ $champion->name }}'s Story</h3>
<div class="px-5 py-4 border-l-4 rounded-r-lg border-orange-500/40 bg-stone-800/30">
<p class="italic text-neutral-200">
{{ $champion->lore }}
</p>
</div>
</div>
</div>
</article>
<!-- Skins Section with Optimized Image Loading -->
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
<h2
class="mb-6 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
{{ $champion->name }} Skins Collection ({{ count($champion->skins) }})
</h2>
<p class="mb-6 text-neutral-100">
Customize your {{ $champion->name }} experience with these amazing skins. From the base look to
legendary alternatives, each skin offers a unique visual style and sometimes new animations or voice
lines. Click on any skin to learn more about its features, release date, and pricing.
</p>
<div id="skinsElement" class="mt-4 overflow-x-scroll">
<div class="grid grid-flow-col grid-rows-2 gap-4 mb-4 w-max">
@foreach ($champion->skins as $key => $skin) @foreach ($champion->skins as $key => $skin)
<div class="flex flex-col group"> <div class="flex flex-col group">
<a href="/skin/{{ $skin->slug }}"> <a href="/skin/{{ $skin->slug }}"
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=450&output=webp&q=70&il" class="relative inline-block overflow-hidden border shadow-md h-36 rounded-2xl border-3 border-white/10 group-hover:shadow-orange-500/20">
alt="{{ $champion->name }} {{ $skin->name }} Splash Art" <!-- LQIP -->
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=20&h=12&output=webp&q=30&blur=5"
class="absolute inset-0 object-cover w-full h-full transform scale-110 filter "
alt="{{ $champion->name }} {{ $skin->name }} Loading" />
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=240&h=142&output=webp&q=80&fit=cover"
srcset="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=240&h=142&output=webp&q=80&fit=cover 1x,
//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=480&h=284&output=webp&q=80&fit=cover 2x"
@if ($key < 6) loading="eager" @else loading="lazy" @endif @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"> class="relative z-10 object-cover w-full h-full transition-transform duration-700 group-hover:scale-105"
alt="{{ $champion->name }} {{ $skin->name }} Splash Art" />
</a> </a>
<div> <div>
<p <p class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
<a href="/skin/{{ $skin->slug }}" <a href="/skin/{{ $skin->slug }}"
class="hover:text-orange-400 group-hover:text-orange-400"> class="hover:text-orange-400 group-hover:text-orange-400">
{{ $skin->skin_name }} {{ $skin->skin_name }}
@@ -144,19 +264,175 @@
</div> </div>
</div> </div>
</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" <!-- Streamers Section -->
style="--tw-shadow-color:{{ $champion->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $champion->splash_color }};"> <div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
<div class="p-4"> <h2
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm"> class="mb-4 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
{{ $champion->name }} Lore</h4> Top {{ $champion->name }} Players & Streamers
<p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose w-9/12 mx-auto" </h2>
lang="en">
{{ $champion->lore }} <p class="mb-6 text-neutral-100">
Want to improve your {{ $champion->name }} gameplay? Learn from these high elo players who main or
play a lot of {{ $champion->name }}. All streamers listed are at least Diamond 2 or higher, providing
high-quality gameplay to learn from, or just enjoy watching. Click on their names to check out their
content.
</p>
@if (count($streamers) > 0)
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
@foreach ($streamers as $streamer)
<div
class="p-3 transition-all border rounded-lg bg-stone-700/20 border-white/5 hover:bg-stone-700/30">
<a href="{{ $streamer->streamer_url }}" target="_blank" rel="noopener noreferrer"
class="flex flex-col items-center text-neutral-100 hover:text-orange-400">
<span
class="mb-1 text-sm font-bold drop-shadow-lg text-shadow-{{ strtolower($streamer->platform) }}">
{{ $streamer->displayname }}
</span>
<span class="text-xs text-gray-300">{{ strtoupper($streamer->platform) }}</span>
</a>
</div>
@endforeach
</div>
@else
<div class="p-4 text-center border rounded-lg bg-stone-700/20 border-white/5">
<div class="flex flex-col items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 mb-3 text-orange-400/70"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
<p class="text-neutral-100">
Heimerdinger.lol is currently not aware of any High ELO {{ $champion->name }} streamers. We
are working on a streamer submission form. Check back soon.
</p> </p>
</div> </div>
</div> </div>
@endif
</div>
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
<h2
class="mb-6 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
Learning {{ $champion->name }}
</h2>
<div class="space-y-6 text-neutral-100">
<p>
Whether you're just picking up {{ $champion->name }} or looking to improve your skills with this
{{ strtolower(implode('/', $champion->roles)) }} champion, understanding their strengths and
weaknesses is crucial. This champion thrives in
@if (isset($champion->lanes) && isset($champion->lanes->roles))
{{ strtolower(implode(' and ', $champion->lanes->roles)) }}
@else
various roles
@endif
with their unique kit.
</p>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="p-4 border rounded-lg bg-stone-700/30 border-white/5">
<h4 class="mb-2 font-bold text-orange-400">Champion Strengths</h4>
<ul class="space-y-1 list-disc list-inside">
@if (strpos(strtolower(implode('', $champion->roles)), 'assassin') !== false)
<li>High burst damage potential</li>
<li>High solo kill potential</li>
<li>Strong roaming capabilities</li>
<li>Good mobility for escapes</li>
@elseif (strpos(strtolower(implode('', $champion->roles)), 'tank') !== false)
<li>Impressive durability</li>
<li>Strong crowd control abilities</li>
<li>Good at starting fights</li>
<li>Great at frontlining</li>
@elseif (strpos(strtolower(implode('', $champion->roles)), 'mage') !== false)
<li>Powerful AoE damage</li>
<li>Strong waveclear</li>
<li>Good scaling into late game</li>
<li>Useful utility for team fights</li>
@elseif (strpos(strtolower(implode('', $champion->roles)), 'marksman') !== false)
<li>Consistent damage output</li>
<li>Strong late-game scaling</li>
<li>Nice at spacing</li>
<li>Good range for safety</li>
@elseif (strpos(strtolower(implode('', $champion->roles)), 'support') !== false)
<li>Strong utility for the team</li>
<li>Good protection capabilities</li>
<li>Effective vision control</li>
<li>Useful in team engagements</li>
@elseif (strpos(strtolower(implode('', $champion->roles)), 'fighter') !== false)
<li>Good balance of damage and durability</li>
<li>Strong dueling potential</li>
<li>Amazing in extended fights</li>
@else
<li>Versatile kit for various situations</li>
<li>Adaptable playstyle</li>
<li>Unique abilities in the champion roster</li>
<li>Effective in the right team compositions</li>
@endif
</ul>
</div>
<div class="p-4 border rounded-lg bg-stone-700/30 border-white/5">
<h4 class="mb-2 font-bold text-orange-400">Champion Weaknesses</h4>
<ul class="space-y-1 list-disc list-inside">
@if (strpos(strtolower(implode('', $champion->roles)), 'assassin') !== false)
<li>Vulnerable to crowd control</li>
<li>Relatively squishy in team fights</li>
<li>Can fall off in very late game</li>
<li>Requires good timing to be effective</li>
@elseif (strpos(strtolower(implode('', $champion->roles)), 'tank') !== false)
<li>Limited damage output</li>
<li>Can be kited by other champions</li>
<li>Vulnerable to percent health damage</li>
<li>Reliant on team follow-up</li>
@elseif (strpos(strtolower(implode('', $champion->roles)), 'mage') !== false)
<li>Usually lacks mobility</li>
<li>Vulnerable to assassins</li>
<li>Skill-shot dependent abilities</li>
<li>Can struggle against magic resistance</li>
@elseif (strpos(strtolower(implode('', $champion->roles)), 'marksman') !== false)
<li>Weaker early game</li>
<li>Vulnerable to assassins</li>
<li>Reliant on positioning</li>
<li>Limited escape options</li>
@elseif (strpos(strtolower(implode('', $champion->roles)), 'support') !== false)
<li>Limited income for items</li>
<li>Lower damage output</li>
<li>Vulnerable when caught alone</li>
<li>Dependent on team play</li>
@elseif (strpos(strtolower(implode('', $champion->roles)), 'fighter') !== false)
<li>Can be kited by ranged champions</li>
<li>May struggle against true tanks</li>
<li>Often lacks strong engage tools</li>
<li>Can be outscaled in late game</li>
@else
<li>May struggle against specialized champions</li>
<li>Has counterplay options available</li>
<li>Requires good game knowledge to maximize potential</li>
<li>May not excel in any specific area</li>
@endif
</ul>
</div>
</div>
<p class="mt-4">
{{ $champion->name }} currently costs <x-icon-lcu-be-svg class="inline-block w-4" />
{{ $champion->price_be }} BE or <x-icon-RiotPoints class="inline-block w-4" />
{{ $champion->price_rp }} RP to unlock, making them
@if ($champion->price_be <= 1350)
one of the more cheaper champions for new players.
@elseif ($champion->price_be <= 3150)
reasonably priced for players building their champion pool.
@elseif ($champion->price_be <= 4800)
on the more expensive side for new players.
@else
one of the more expensive champions.
@endif
Players looking to master {{ $champion->name }} should spend time learning their unique mechanics
and optimal build paths for different matchups.
</p>
</div>
</div> </div>
</div> </div>
</section> </section>

405
resources/views/components/icons/view_grid.blade.php
View File

@@ -1,111 +1,356 @@
<section class="min-h-[80vh] flex items-center justify-center"> <section class="max-w-screen-xl mx-auto mt-12">
<div class="items-center justify-center mx-auto my-auto align-middle">
<h3 <h3
class="text-sm font-bold text-center text-transparent uppercase sm:text-md bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text"> class="text-sm font-bold text-center text-transparent uppercase sm:text-md bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
ICON DETAILS</h3> Icon Spotlight
</h3>
<h1 <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"> 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">
{{ $icon->title }}</h1> {{ $icon->title }}
</h1>
<h2 <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"> 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">
Released in: {{ $icon->release_year }}</h2> Released in {{ $icon->release_year }}
</h2>
<div class="flex justify-center my-4"> <x-ads.common />
<x-ads.horizontal-banner />
<div class="container mx-auto mt-8">
<div class="relative p-6 overflow-hidden border shadow-md rounded-2xl bg-stone-800/40 border-neutral-300/5">
<div class="flex flex-col items-center gap-8 md:flex-row md:items-start">
<div class="flex flex-col items-center flex-shrink-0">
<div class="mb-3 transition-all duration-500 group">
<div class="relative w-64 h-64" style="aspect-ratio: 1/1;">
<div
class="absolute inset-0 transition-opacity duration-300 opacity-0 bg-gradient-to-br from-orange-400/20 to-orange-500/30 rounded-2xl group-hover:opacity-100">
</div> </div>
<div class="container flex items-center justify-center p-4 mx-auto my-auto mt-3"> <img src="//wsrv.nl/?url={{ $icon->image }}&w=20&h=20&output=webp&q=30&blur=5"
<div class="grid w-screen grid-cols-1 gap-8 md:grid-cols-2"> alt="{{ $icon->title }} Loading"
<div class="absolute inset-0 object-cover w-full h-full rounded-2xl" width="256"
class="flex flex-col items-center align-middle border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80"> height="256" />
<h4 class="text-center text-2xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mb-3">
The {{ $icon->title }}</h4> <img src="//wsrv.nl/?url={{ $icon->image }}&w=256&output=webp&q=80"
<img src="//wsrv.nl/?url={{ $icon->image }}&w=400&output=webp&q=100&il" srcset="//wsrv.nl/?url={{ $icon->image }}&w=128&output=webp&q=80 128w,
alt="{{ $icon->title }} Icon" //wsrv.nl/?url={{ $icon->image }}&w=256&output=webp&q=80 256w,
class="transition-transform duration-700 border-2 shadow-md rounded-2xl bg-clip-border border-orange-400/40 shadow-orange-400/20" /> //wsrv.nl/?url={{ $icon->image }}&w=512&output=webp&q=85 512w"
sizes="(max-width: 768px) 128px, 256px" alt="{{ $icon->title }} Icon" loading="eager"
width="256" height="256"
class="relative z-10 object-contain w-full h-full transition-transform duration-500 border-2 shadow-lg rounded-2xl bg-clip-border border-orange-400/40 shadow-orange-400/20 group-hover:scale-105" />
</div>
</div>
<a href="{{ $icon->image }}" rel="noopener" target="_blank" <a href="{{ $icon->image }}" rel="noopener" target="_blank"
class="px-4 py-2 text-sm font-medium text-center text-neutral-100"> class="inline-flex items-center px-3 py-1 text-sm font-bold text-white transition bg-orange-500 rounded-lg bg-opacity-80 hover:bg-opacity-100">
View in HD <span>View Full Size</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</a> </a>
</div> </div>
<div class="border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80"> <div class="flex-grow">
<h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2"> <h3
{{ $icon->title }} Details class="mb-4 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
</h4> About This Icon
<div class="flex flex-col justify-between h-max"> </h3>
<ul class="flex-1 mx-5 h-max"> <div class="space-y-4 text-lg leading-relaxed text-neutral-100">
<li class="items-center text-base leading-loose text-neutral-100 hyphens-auto" <p>
lang="en"> The <strong>{{ $icon->title }}</strong> is a {{ $icon->legacy ? 'legacy' : 'standard' }}
<span class="font-bold">Icon ID:</span> summoner icon first introduced to League of Legends in {{ $icon->release_year }}.
<span class="font-mono font-semibold">{{ $icon->icon_id }}</span>
</li>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en">
<span class="font-bold">Icon Name:</span> {{ $icon->title }}
</li>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en">
<span class="font-bold">Release Year:</span> {{ $icon->release_year }}
</li>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en">
<span class="font-bold">Legacy<span class="font-extralight">*</span>:</span>
{{ $icon->legacy ? 'Yes' : 'No' }}
</li>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en">
<span class="font-bold">Esports Icon:</span>
{{ $icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Yes' : 'No' }}
</li>
@if ($icon->esports_team || $icon->esports_region || $icon->esports_event) @if ($icon->esports_team || $icon->esports_region || $icon->esports_event)
This is an esports-themed icon
@if ($icon->esports_team) @if ($icon->esports_team)
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto" representing the team <strong>{{ $icon->esports_team }}</strong>
lang="en">
<span class="font-bold">Esports Team:</span> {{ $icon->esports_team }}
</li>
@endif @endif
@if ($icon->esports_region) @if ($icon->esports_region)
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto" from the <strong>{{ $icon->esports_region }}</strong> region
lang="en">
<span class="font-bold">Esports Region:</span> {{ $icon->esports_region }}
</li>
@endif @endif
@if ($icon->esports_event) @if ($icon->esports_event)
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto" featured during the <strong>{{ $icon->esports_event }}</strong> event
lang="en"> @endif.
<span class="font-bold">Esports Event:</span> {{ $icon->esports_event }}
</li>
@endif @endif
</p>
<p>{{ $icon->description }}</p>
<p>
Summoner icons like the {{ $icon->title }} let you personalize your League of
Legends account, displaying next to your name in friend lists, lobbies, and post-game
screens.
It's also generally shown on 3rd-party sites like op.gg and u.gg.
They're a popular way for players to express their personality, support for
teams or to create a nice looking profile for themselves.
</p>
<p>
@if ($icon->release_year < 2016)
This icon comes from the {{ $icon->release_year < 2013 ? 'early' : 'classic' }} era of
League of Legends, when icon releases were less frequent and often tied to significant
game events or milestones. Icons from this period are particularly valued by long-time
players.
@elseif ($icon->release_year >= 2016 && $icon->release_year <= 2020)
Released during {{ $icon->release_year }}, this icon arrived during a period when Riot
began expanding the variety and availability of summoner icons, offering more ways for
players to customize their profiles and express themselves in the game client.
@else
As a more recent addition to League's icon collection, the {{ $icon->title }} features
the modern design aesthetic that matches Riot's current approach to player
customization.
@endif
</p>
@if ($icon->legacy)
<div class="p-4 mt-4 border rounded-lg bg-stone-700/30 border-orange-500/20">
<p class="text-base text-neutral-200">
<span class="font-bold text-orange-400">Legacy Status:</span> This is considered a
legacy icon, which means it may have limited availability. Unlike legacy skins,
legacy icons don't follow consistent rules. Some can still be obtainable through
special events or promotions, while others might be permanently unavailable.
</p>
</div>
@endif @endif
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en">
<span class="font-bold">Description:</span> {{ $icon->description }}
</li>
@if ($icon->icon_id === 6584) @if ($icon->icon_id === 6584)
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto" <div class="p-4 mt-4 border rounded-lg bg-stone-700/30 border-orange-500/20">
lang="en"> <p class="text-base font-medium text-neutral-100">
<span class="font-bold">Guide:</span> <a <span class="font-bold text-orange-400">Special Guide:</span> Wondering how to get
href="https://heimerdinger.lol/post/how-to-get-hatty-crabby-icon-in-league-of-legends" this icon? Check out our
class="underline hover:text-orange-400 decoration-orange-400">How to get the href="/post/how-to-get-hatty-crabby-icon-in-league-of-legends"
Hatty Crabby Icon in class="text-orange-400 underline hover:text-orange-300">complete guide on
League of Legends</a> obtaining the Hatty Crabby Icon</a>.
</li> </p>
</div>
@endif @endif
<li class="items-center mt-8 text-sm font-light leading-loose text-neutral-100 hyphens-auto" @if ($icon->icon_id === 6846)
lang="en"> <div class="p-4 mt-4 border rounded-lg bg-stone-700/30 border-orange-500/20">
<span class="font-bold">* Legacy Icons:</span> Legacy Icons don't act the same as legacy <p class="text-base font-medium text-neutral-100">
skins. <span class="font-bold text-orange-400">Special Guide:</span> Wondering how to get
It seems like some icons that are marked as legacy are still obtainable or the other way this icon? Check out our <a href="/post/how-to-get-ez-be-real-icon"
around class="text-orange-400 underline hover:text-orange-300">complete guide on
where some icons that are not marked as legacy are not obtainable anymore. obtaining the Ez-be-real Icon</a>.
</li> </p>
</ul>
</div> </div>
@endif
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-6 mt-8 md:grid-cols-2">
<div class="p-6 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
<h3 class="mb-4 text-xl font-bold text-orange-400">
How to Obtain
</h3>
<div class="text-neutral-100">
<p>
@if ($icon->legacy)
As a legacy icon from {{ $icon->release_year }}, the {{ $icon->title }} icon might not be
directly available for purchase. Legacy icons typically appear during special events,
promotions, or through hextech crafting.
@if ($icon->esports_team || $icon->esports_region || $icon->esports_event)
Since this is an esports icon, it may reappear during relevant tournaments or team
promotions.
@endif
@else
The {{ $icon->title }} icon, released in {{ $icon->release_year }}, may be available
through the League of Legends store, event passes, missions, or hextech crafting.
@if ($icon->esports_team || $icon->esports_region || $icon->esports_event)
As an esports-themed icon, it's often available during relevant tournaments or through
team support bundles.
@endif
@endif
</p>
<p class="mt-3">
When available in the store, summoner icons usually cost 250 RP, though
special or limited editions may be priced differently. Some icons are also obtainable with Blue
Essence during special promotions or through the Essence Emporium when it's active.
</p>
<p class="mt-3">
Riot occasionally brings back legacy content during special events like anniversaries, seasonal
celebrations, or game milestones. If you're specifically looking to add the {{ $icon->title }}
to your collection, watch for event announcements in the client or on the official <a
href="https://www.leagueoflegends.com/en-us/news/"
class="text-orange-400 underline hover:text-orange-300">League of
Legends</a> website.
</p>
<p class="mt-3">
Keep an eye on the in-game client for special promotions or events where this icon might become
available again.
</p>
</div>
</div>
<div class="h-full p-6 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
<h3 class="mb-4 text-xl font-bold text-orange-400">
Technical Details
</h3>
<div class="grid grid-rows-[auto_1fr] text-neutral-100">
<p>
Each summoner icon in League of Legends has some technical specifications. The
{{ $icon->title }} is identified in Riot's systems by the icon ID <span
class="font-mono font-semibold">{{ $icon->icon_id }}</span>.
</p>
<div class="pt-4 mt-auto ">
<div class="grid grid-cols-2 gap-4">
<div class="p-3 rounded-lg bg-stone-700/30">
<span class="block text-sm text-neutral-400">Icon ID</span>
<span class="font-mono font-medium">{{ $icon->icon_id }}</span>
</div>
<div class="p-3 rounded-lg bg-stone-700/30">
<span class="block text-sm text-neutral-400">Release Year</span>
<span>{{ $icon->release_year }}</span>
</div>
<div class="p-3 rounded-lg bg-stone-700/30">
<span class="block text-sm text-neutral-400">Legacy Status</span>
<span>{{ $icon->legacy ? 'Legacy' : 'Standard' }}</span>
</div>
<div class="p-3 rounded-lg bg-stone-700/30">
<span class="block text-sm text-neutral-400">Type</span>
<span>{{ $icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Esports' : 'Standard' }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
<h3 class="mb-4 text-xl font-bold text-orange-400">
Design & Significance
</h3>
<div class="text-neutral-100">
<p>
The {{ $icon->title }} features a classic design that captures its thematic elements in League
of Legends' iconic art style. A lot of players like to use icons to make their profile look nice,
and match with profile backgrounds, borders, etc.
</p>
<p class="mt-3">
@if ($icon->esports_team)
As an esports team icon, it prominently displays {{ $icon->esports_team }}'s branding elements
and color scheme, allowing fans to show their support in the game client. Team icons often
become collectors' items, especially for teams with historical significance or memorable
tournament performances.
@elseif (strpos(strtolower($icon->title), 'poro') !== false)
This icon features League's beloved Poro character, the fluffy creature native to the Howling
Abyss. Poro-themed items are consistently popular among players due to their cute and whimsical
design aesthetic.
@elseif (strpos(strtolower($icon->title), 'champie') !== false ||
strpos(strtolower($icon->description), 'champie') !== false ||
strpos(strtolower($icon->title), 'illustration') !== false)
This champion-themed icon captures elements of a League character's identity, allowing fans of
that champion to showcase their preference or mastery.
@else
The art style and thematic elements of this icon reflect Riot's approach to visual design in
{{ $icon->release_year }}, with the characteristic attention to detail and distinctive style
that League of Legends is known for.
@endif
</p>
<p class="mt-3">
Players often select icons that represent their main role, favorite champion, esports team they
like, or
just looks cool. The {{ $icon->title }} offers a way for summoners to personalize
their League experience and express themselves within the community.
</p>
</div>
</div>
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
<h3 class="mb-4 text-xl font-bold text-orange-400">
Related Content
</h3>
<div class="text-neutral-100">
<p>
Interested in more summoner icons or related League of Legends content? Here are some resources that
might help:
</p>
<p class="mt-3">
League of Legends has over 1500 summoner icons spanning more than a decade of the game's
history. They range from esports team icons to event commemorations, champion icons, and
ranked achievements.
</p>
<div class="grid grid-cols-1 gap-4 mt-4 sm:grid-cols-2 lg:grid-cols-3">
<a href="/icons?filter%5Brelease_year%5D={{ $icon->release_year }}"
class="block p-4 transition-all duration-300 border rounded-lg bg-stone-700/20 border-white/10 hover:border-orange-500/30 hover:bg-stone-700/30">
<h4 class="mb-2 font-semibold text-orange-400">Icons from {{ $icon->release_year }}</h4>
<p class="text-sm text-neutral-300">Explore other summoner icons released in the same year.</p>
</a>
@if ($icon->esports_team)
<a href="/icons?filter%5Besports_team%5D={{ urlencode($icon->esports_team) }}"
class="block p-4 transition-all duration-300 border rounded-lg bg-stone-700/20 border-white/10 hover:border-orange-500/30 hover:bg-stone-700/30">
<h4 class="mb-2 font-semibold text-orange-400">{{ $icon->esports_team }} Icons</h4>
<p class="text-sm text-neutral-300">View all icons related to this esports team.</p>
</a>
@endif
<a href="/icons"
class="block p-4 transition-all duration-300 border rounded-lg bg-stone-700/20 border-white/10 hover:border-orange-500/30 hover:bg-stone-700/30">
<h4 class="mb-2 font-semibold text-orange-400">All Summoner Icons</h4>
<p class="text-sm text-neutral-300">Browse our complete collection of League of Legends icons.
</p>
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
@push('bottom_scripts')
<script type="application/ld+json">
@php
$description = "The " . $icon->title . " is a " . ($icon->legacy ? 'legacy' : 'standard') . " summoner icon for League of Legends released in " . $icon->release_year . ".";
if ($icon->description) {
$description .= " " . $icon->description;
}
// Create the JSON object
$jsonObject = [
"@context" => "https://schema.org/",
"@type" => "WebPage",
"name" => $icon->title . " - League of Legends Summoner Icon",
"description" => $description,
"mainEntity" => [
"@type" => "VisualArtwork",
"name" => $icon->title,
"description" => $description,
"image" => $icon->image,
"dateCreated" => $icon->release_year,
"artform" => "Digital Icon",
"artworkSurface" => "Digital",
"creator" => [
"@type" => "Organization",
"name" => "Riot Games"
],
"contentLocation" => [
"@type" => "Place",
"name" => "League of Legends"
]
],
"publisher" => [
"@type" => "Organization",
"name" => "Heimerdinger.lol"
],
"url" => url()->current()
];
echo json_encode($jsonObject, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
@endphp
</script>
@endpush

728
resources/views/components/skins/grid_info.blade.php
View File

@@ -1,166 +1,359 @@
<section class="max-w-screen-xl mx-auto mt-12"> <section class="max-w-screen-xl mx-auto mt-12">
<h3 <h3
class="text-sm font-bold text-center text-transparent uppercase sm:text-md bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text"> class="text-sm font-bold text-center text-transparent uppercase sm:text-md bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
SKIN DETAILS</h3> Skin Spotlight
</h3>
<h1 <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"> 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">
{{ $skin->skin_name }}</h1> {{ $skin->skin_name }}
</h1>
<p <p
class="text-sm font-medium text-center text-orange-400 uppercase transition-all duration-700 hover:underline decoration-1 decoration-transparent hover:decoration-orange-400"> class="text-sm font-medium text-center text-orange-400 uppercase transition-all duration-700 hover:underline decoration-1 decoration-transparent hover:decoration-orange-400">
<a href="/champion/{{ $skin->champion->slug }}"> <a href="/champion/{{ $skin->champion->slug }}">
<span class="flex items-center justify-center"> <span class="flex items-center justify-center">
View View champion info
champion
info
<x-iconsax-bul-arrow-square-right class="w-5" /> <x-iconsax-bul-arrow-square-right class="w-5" />
</span> </span>
</a> </a>
</p>
<x-ads.common /> <x-ads.common />
<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 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-video glow-shadow rounded-2xl"
style="--splash-color: {{ $skin->splash_color }}"></div>
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=840&output=webp&q=90"
alt="{{ $skin->skin_name }} Splash Art"
class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100 rounded-2xl">
<div class="absolute bottom-0 left-0 p-4"> <!-- Hero Section with Splash Art -->
<div class="container mx-auto mt-8">
<!-- Compact Splash Art Section -->
<div class="relative overflow-hidden border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80"
style="height: 350px;">
<div class="absolute inset-0 glow-shadow rounded-2xl">
</div>
<!-- Splash Art -->
<div class="relative w-full h-full">
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=30&h=20&fit=cover&blur=5&output=webp"
class="absolute inset-0 object-cover w-full h-full blur-sm" alt="{{ $skin->skin_name }} Loading" />
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=800&h=350&fit=cover&output=webp&q=85"
srcset="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=480&h=350&fit=cover&output=webp&q=85 480w,
//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=800&h=350&fit=cover&output=webp&q=85 800w,
//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=1200&h=350&fit=cover&output=webp&q=90 1200w"
sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1200px"
class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100"
alt="{{ $skin->skin_name }} Splash Art" loading="eager" />
<!-- Gradient Overlay for Text Readability -->
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/90 via-stone-900/40 to-transparent"></div>
<!-- Info Overlay -->
<div class="absolute inset-x-0 bottom-0 z-20 flex items-end justify-between w-full p-4">
<div>
<h3 class="mb-1 text-2xl font-bold text-white drop-shadow-lg">{{ $skin->skin_name }}</h3>
<p class="mb-2 text-sm font-medium text-orange-300">{{ $skin->rarity }} Skin for
{{ $skin->champion->name }}</p>
<a href="{{ $skin->getSkinImageAttribute(true) }}" rel="noopener" target="_blank" <a href="{{ $skin->getSkinImageAttribute(true) }}" rel="noopener" target="_blank"
class="p-2 text-base font-bold text-white bg-black bg-opacity-50 rounded-xl">View in class="inline-flex items-center px-3 py-1 text-sm font-bold text-white transition bg-orange-500 rounded-lg bg-opacity-80 hover:bg-opacity-100">
HD</a> <span>View Full Art</span>
</div> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</a>
</div> </div>
<!-- Quick Price Info -->
<div class="transition-all duration-700 border shadow-md rounded-2xl border-3 border-white/10 lg:col-start-3" <div class="px-3 py-2 border rounded-lg bg-stone-900/80 border-orange-500/40">
style="--tw-shadow-color:{{ $skin->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $skin->splash_color }};">
<h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2">
{{ $skin->skin_name }} Details</h4>
<ul class="mx-5">
<li class="items-center mt-4 text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en">
<span class="font-bold">Price:</span>
@if ($skin->rp_price == '99999') @if ($skin->rp_price == '99999')
Not Available for RP <span class="font-bold text-orange-400">Special Offer</span>
@else @else
<x-icon-RiotPoints class="inline-block w-4" /> <span class="flex items-center font-bold text-white">
<x-icon-RiotPoints class="inline-block w-5 mr-1" />
{{ $skin->rp_price }} RP {{ $skin->rp_price }} RP
</span>
@endif @endif
</li> <div class="mt-1 text-xs text-gray-300">
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto" @if ($skin->release_date == '0000-00-00')
lang="en"> Coming Soon
<span class="font-bold">Release Date:</span> {{ $skin->release_date }}
</li>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en">
<span class="font-bold">Rarity:</span> {{ $skin->rarity }}
</li>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en">
<span class="font-bold">Availability:</span> {{ $skin->availability }}
</li>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en">
<span class="font-bold">Chromas:</span>
@if ($skin->chromas->count() > 0)
{{ $skin->chromas->count() }}
@else @else
None Released: {{ $skin->release_date }}
@endif @endif
</li> </div>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto" </div>
lang="en"> </div>
<span class="font-bold">Lootable:</span> {{ $skin->loot_eligible ? 'Yes' : 'No' }} </div>
</li> </div>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en"> <!-- Main Article Content -->
<span class="font-bold">New Effects:</span> {{ $skin->new_effects ? 'Yes' : 'No' }} <article class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
</li> <h2
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto" class="mb-6 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
lang="en"> Everything You Need to Know About {{ $skin->skin_name }}
<span class="font-bold">New Animations:</span> {{ $skin->new_animations ? 'Yes' : 'No' }} </h2>
</li>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto" <div class="space-y-5 text-lg leading-relaxed text-neutral-100">
lang="en"> <div class="grid grid-cols-1 gap-6 mb-6 md:grid-cols-4">
<span class="font-bold">New Recall:</span> {{ $skin->new_recall ? 'Yes' : 'No' }} <div class="md:col-span-3">
</li> <h3 class="mb-2 text-xl font-bold text-orange-400">The Basics</h3>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto" <p>
lang="en"> Looking to spice up your games with a killer new look for {{ $skin->champion->name }}?
<span class="font-bold">New Voice:</span> {{ $skin->new_voice ? 'Yes' : 'No' }} Let's
</li> dive into everything you need to know about <strong>{{ $skin->skin_name }}</strong>, a
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto" unique skin for
lang="en"> {{ $skin->champion->name }}. This skin is all about giving your favorite champion a fresh
<span class="font-bold">New Quotes:</span> {{ $skin->new_quotes ? 'Yes' : 'No' }} new look!
</li> </p>
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto" </div>
lang="en">
<span class="font-bold">Voice Actor:</span> <!-- Quick Facts Card -->
@if (count($skin->voice_actor) < 1) <div class="p-4 transition-all duration-700 border shadow-md rounded-xl border-white/10"
Unknown style="--tw-shadow-color:#704e3d; --tw-shadow: var(--tw-shadow-colored); background-color: #704e3d;">
<h4 class="mb-2 text-lg font-semibold text-center uppercase text-neutral-100">Quick Facts</h4>
<div class="text-base text-neutral-100">
<p class="mb-2"><span class="font-bold">Price:</span>
@if ($skin->rp_price == '99999')
Special Availability
@else @else
@foreach ($skin->voice_actor as $voice_actor) <x-icon-RiotPoints class="inline-block w-4" /> {{ $skin->rp_price }} RP
@endif
</p>
<p class="mb-2"><span class="font-bold">Released:</span>
@if ($skin->release_date == '0000-00-00')
Coming Soon
@else
{{ $skin->release_date }}
@endif
</p>
<p class="mb-2"><span class="font-bold">Rarity:</span> {{ $skin->rarity }}</p>
<p class="mb-2"><span class="font-bold">Available:</span> {{ $skin->availability }}</p>
</div>
</div>
</div>
<p>
@if ($skin->release_date == '0000-00-00')
Riot hasn't dropped this skin on live servers just yet, but it's definitely on the way!
{{ $skin->skin_name }}
might already be available on PBE, or maybe already has a SkinSpotlights video. While we don't
have an exact
release date yet, this {{ $skin->rarity }} tier skin will be joining
{{ $skin->champion->name }}'s collection soon.
@else
Since its release on <strong>{{ $skin->release_date }}</strong>, this {{ $skin->rarity }} tier
skin has become
@if ($skin->availability == 'Available')
a popular pick among players who want to make their {{ $skin->champion->name }} stand out
from the crowd.
@elseif ($skin->availability == 'Legacy')
a legacy skin. This means it's no longer available for purchase in the store, but you might
be able to
get it from chests, rerolling skins, or during specific periods in the year when Riot brings
it back.
@elseif ($skin->availability == 'Limited')
an extremely rare sight on the Rift. If you spot someone rocking this skin, you know they're
either a long-time player or incredibly lucky.
@elseif ($skin->availability == 'Upcoming')
an upcoming skin addition to the game that some players can't wait to get their hands on.
@else
a unique addition to {{ $skin->champion->name }}'s wardrobe that offers a fresh take on
this champion's look and feel.
@endif
@endif
</p>
<h3 class="mt-8 mb-2 text-xl font-bold text-orange-400">What Makes This Skin Special</h3>
<p>
Let's talk about what makes {{ $skin->skin_name }} worth your RP.
@if ($skin->rp_price == '99999')
This isn't your standard RP purchase - it's part of a special promotion or event, making it a
bit more exclusive than your typical skin. It might be available exclusively through a
battlepass, gacha systems (The Sanctum), or something else.
@else
At <strong>{{ $skin->rp_price }} RP</strong>, you're getting
@if ($skin->rp_price < 975)
a budget-friendly option that still gives {{ $skin->champion->name }} a fresh look, so you
can stand out.
@elseif ($skin->rp_price >= 975 && $skin->rp_price < 1350)
a relatively cheap skin with decent quality visuals, sometimes even some new animations or
effects.
@elseif ($skin->rp_price >= 1350 && $skin->rp_price < 1820)
a feature-rich skin with plenty of new visuals that really change how
{{ $skin->champion->name }} looks in-game.
@elseif ($skin->rp_price >= 1820)
a premium experience, likely with completely overhauled visuals, animations, and potentially
voice
work.
@endif
@endif
</p>
<div class="pl-5 my-4 border-l-4 border-orange-500/50">
<p class="text-neutral-200">
@if ($skin->new_effects && $skin->new_animations && $skin->new_recall && $skin->new_voice && $skin->new_quotes)
This skin is loaded with upgrades! It's got completely new visual effects, fresh animations,
a custom recall, a new voice over, and unique voice lines. When you buy
{{ $skin->skin_name }}, you're basically getting a completely reimagined version of
{{ $skin->champion->name }}.
@else
Here's what you get with {{ $skin->skin_name }}:
@if ($skin->new_effects)
<span class="block mt-1">✓ Brand new visual effects that add serious flair to your
abilities</span>
@endif
@if ($skin->new_animations)
<span class="block mt-1">✓ Fresh animations that make {{ $skin->champion->name }} move
in new, thematic ways</span>
@endif
@if ($skin->new_recall)
<span class="block mt-1">✓ A custom recall animation that's worth showing off before you
head back to base</span>
@endif
@if ($skin->new_voice)
<span class="block mt-1">✓ A completely new voice that transforms the champion's
personality</span>
@endif
@if ($skin->new_quotes)
<span class="block mt-1">✓ New voice lines that add depth and storytelling to the skin's
theme</span>
@endif
@if (!$skin->new_effects && !$skin->new_animations && !$skin->new_recall && !$skin->new_voice && !$skin->new_quotes)
While this skin doesn't add new effects or animations, it offers a visual
redesign that gives {{ $skin->champion->name }} a fresh look on the Rift.
@endif
@endif
</p>
</div>
<p>
@if (count($skin->chromas) > 0)
If one look isn't enough for you, {{ $skin->skin_name }} comes with
<strong>{{ $skin->chromas->count() }} different chroma options</strong>. That means once you
own the base skin, you can pick up these color variants to match your mood or your team comp.
Some players collect them all, while others just grab their favorite color.
@else
Unlike some skins that come with a rainbow of chromas, {{ $skin->skin_name }} keeps it focused
with just the base design. So sadly, no chroma options here.
@endif
</p>
<p>
One thing to keep in mind: this skin is {{ $skin->loot_eligible ? 'available' : 'not available' }}
through the loot system.
@if ($skin->loot_eligible)
So if you're the type to save your RP, you might get lucky with a hextech chest or event orb.
But don't count on it - if you really want this skin, buying it directly is your best bet.
@else
That means you won't find it in hextech chests or event orbs, so direct purchase is your only
option if you want to add it to your collection.
@endif
</p>
<div class="mt-10">
<h3 class="mb-3 text-xl font-bold text-orange-400">Who made {{ $skin->skin_name }}?</h3>
<p>
Ever wonder who's responsible for making these skins? We'll break it down for you:
</p>
<p class="mt-3">
@if (count($skin->voice_actor) > 0)
When you hear {{ $skin->skin_name }} in game, you're listening to
@if (count($skin->voice_actor) == 1)
the work of voice actor {{ $skin->voice_actor[0] }}, who brings real personality to the
lines.
@else
a team of voice talents including
@foreach ($skin->voice_actor as $key => $voice_actor)
{{ $voice_actor }} {{ $voice_actor }}
@endforeach @if ($key < count($skin->voice_actor) - 2)
,
@elseif ($key == count($skin->voice_actor) - 2)
and
@endif
@endforeach, who collaborated to create the skin's unique sound.
@endif @endif
</li>
<li class="items-center mb-4 text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en">
<span class="font-bold">Splash Artist:</span>
@if (count($skin->splash_artist) < 1)
Unknown
@else @else
Riot hasn't shared who voiced {{ $skin->skin_name }}, but we hope you enjoy the new lines
and
personality they bring to the game anyway!
@endif
</p>
<p class="mt-3">
@if (count($skin->splash_artist) > 0)
That splash art that caught your eye? It came from the tablet of
@if (count($skin->splash_artist) == 1)
{{ $skin->splash_artist[0] }}, one of Riot's talented artists who really captured the
essence of {{ $skin->skin_name }}.
@else
several artists working together:
@foreach ($skin->splash_artist as $key => $splash_artist) @foreach ($skin->splash_artist as $key => $splash_artist)
{{ $splash_artist }} {{ $splash_artist }}
@if ($key < count($skin->splash_artist) - 2) @if ($key < count($skin->splash_artist) - 2)
, ,
@elseif ($key == count($skin->splash_artist) - 2) @elseif ($key == count($skin->splash_artist) - 2)
&amp; and
@endif @endif
@endforeach @endforeach. This collaboration resulted in the amazing artwork you
see on the champion select screen.
@endif @endif
</li> @else
Riot hasn't revealed who created the splash art for {{ $skin->skin_name }}, but we can
appreciate the effort that went into it regardless. This could mean the splash art of
</ul> {{ $skin->skin_name }}
was created by Riot's internal team, or perhaps still a freelance artist that hasn't been
revealed yet.
@endif
</p>
</div>
</div> </div>
<!-- Lore Section -->
<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" <div class="p-6 mt-10 border rounded-2xl border-white/10" style="background-color: #704e3d;">
style="--tw-shadow-color:{{ $skin->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $skin->splash_color }};"> <h3 class="mb-4 text-xl font-bold text-neutral-100">The Story Behind {{ $skin->skin_name }}</h3>
<div class="p-4"> <div class="leading-relaxed text-neutral-100">
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
{{ $skin->name }} Lore</h4>
<p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose" lang="en">
@if ($skin->lore) @if ($skin->lore)
{!! $skin->lore !!} {!! $skin->lore !!}
@else @else
Heimerdinger has looked far and wide but could not find any lore for <p>
{{ $skin->skin_name }}. We've dug through all of Riot's lore posts and cosmic archives, but sadly there's no
But we're sure it's a great skin! The things we do know is that it was released on official backstory for
{{ $skin->release_date }} and costs {{ $skin->rp_price }} RP. {{ $skin->skin_name }}... yet!
@endif
</p>
</div>
</div> @if ($skin->release_date == '0000-00-00')
<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" Since this skin is still on its way to the live servers, we might get some juicy lore
style="--tw-shadow-color:{{ $skin->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $skin->splash_color }};"> when it officially drops. Keep an eye on Riot's social media and the client for universe
<div class="p-4"> updates.
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm"> @else
{{ $skin->name }} Chromas ({{ count($skin->chromas) }}) </h4> Don't let that stop you from enjoying this skin though! It first arrived on
<div id="skinsElement" class="overflow-x-scroll mt-2.5"> {{ $skin->release_date }} and costs
<div class="grid grid-flow-col grid-rows-2 w-max gap-4 mb-2.5"> {{ $skin->rp_price == '99999' ? 'a special rate' : $skin->rp_price . ' RP' }}.
@if (count($skin->chromas) < 1) @endif
<p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose" lang="en">
Sadly there are no chromas for {{ $skin->skin_name }} yet. You can always make up your own headcanon about how {{ $skin->champion->name }} came to
have this look. That's half the fun of League's multiverse of skin lines!
</p> </p>
@endif @endif
</div>
</div>
</article>
<!-- Chromas Gallery Section -->
@if (count($skin->chromas) > 0)
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
<h2
class="mb-6 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
Color Options: {{ $skin->skin_name }} Chromas
</h2>
<p class="mb-6 text-neutral-100">
Can't decide on just one look? We don't blame you! {{ $skin->skin_name }} comes with
{{ count($skin->chromas) }} different chroma options that let you customize your favorite skin.
Whether you want to match your team's color scheme or just feel like switching things up, these
variants have got you covered without changing any of the awesome features of the base skin.
</p>
<div id="skinsElement" class="mt-4 overflow-x-scroll">
<div class="grid grid-flow-col grid-rows-2 gap-4 mb-4 w-max">
@foreach ($skin->chromas as $key => $chroma) @foreach ($skin->chromas as $key => $chroma)
<div class="flex flex-col group"> <div class="flex flex-col group">
<a href="/skin/{{ $skin->slug }}"> <a href="/skin/{{ $skin->slug }}">
@@ -169,19 +362,304 @@
@if ($key < 6) loading="eager" @else loading="lazy" @endif @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"> 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> </a>
<div> <p class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
<p
class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
<span class="hover:text-orange-400 group-hover:text-orange-400"> <span class="hover:text-orange-400 group-hover:text-orange-400">
{{ $chroma->chroma_name }} {{ $chroma->chroma_name }}
</span> </span>
</p> </p>
</div> </div>
</div>
@endforeach @endforeach
</div> </div>
</div> </div>
<p class="mt-6 text-neutral-100">
Each chroma costs 290 RP, or you can often grab them all in a bundle at a discount. Keep an eye out
for essence emporiums too, where you might be able to snag these with Blue Essence instead of RP.
Which one's your favorite?
</p>
</div>
@endif
<!-- Conclusion Section -->
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
<h2
class="mb-4 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
Is {{ $skin->skin_name }} Worth It?
</h2>
<div class="text-lg leading-relaxed text-neutral-100">
<p>
So, should you pick up {{ $skin->skin_name }} for your collection? Let's break it down:
</p>
<div class="grid grid-cols-1 gap-4 my-6 md:grid-cols-2">
<div class="p-4 border rounded-lg bg-stone-700/30 border-white/5">
<h4 class="mb-2 font-bold text-orange-400">Reasons to Buy:</h4>
<ul class="space-y-1 list-disc list-inside">
@if ($skin->new_effects)
<li>Fresh visual effects that make abilities pop</li>
@endif
@if ($skin->new_animations)
<li>Smooth new animations that feel great to play</li>
@endif
@if ($skin->new_recall)
<li>A recall animation worth showing off</li>
@endif
@if ($skin->new_voice)
<li>New voice lines and personality</li>
@endif
@if (count($skin->chromas) > 0)
<li>{{ count($skin->chromas) }} chroma options for variety</li>
@endif
<li>{{ $skin->rarity }} tier quality visuals</li>
@if ($skin->availability == 'Limited' || $skin->availability == 'Legacy')
<li>Rare skin that not everyone has</li>
@endif
</ul>
</div>
<div class="p-4 border rounded-lg bg-stone-700/30 border-white/5">
<h4 class="mb-2 font-bold text-orange-400">Consider This:</h4>
<ul class="space-y-1 list-disc list-inside">
@if ($skin->rp_price > 1350)
<li>Higher price point than basic skins</li>
@endif
@if (!$skin->new_effects)
<li>Doesn't have new visual effects</li>
@endif
@if (!$skin->new_animations)
<li>Uses the base animation set</li>
@endif
@if (!$skin->loot_eligible)
<li>Can't be obtained through loot</li>
@endif
@if ($skin->availability == 'Upcoming' || $skin->release_date == '0000-00-00')
<li>Not available just yet</li>
@endif
@if (count($skin->chromas) == 0)
<li>No chroma options for variety</li>
@endif
</ul>
</div>
</div>
<p>
@if ($skin->rp_price <= 975)
At just {{ $skin->rp_price }} RP, {{ $skin->skin_name }} offers good value for a visual
refresh on {{ $skin->champion->name }}. It's a budget-friendly option if you main this champion
or just want to change things up without breaking the bank.
@elseif ($skin->rp_price > 975 && $skin->rp_price <= 1350)
For {{ $skin->rp_price }} RP, {{ $skin->skin_name }} sits in the mid-range of skin pricing. It
offers a solid upgrade from the base skin with enough new features to feel fresh and exciting
while playing. {{ $skin->rp_price }} RP is a common price point for skins, so if you want to
invest a little more in your {{ $skin->champion->name }} experience, this skin could be a great
choice. If {{ $skin->rp_price }} RP is a bit steep, consider checking out our <a
href="/sale-rotation" class="text-orange-400 transition-colors hover:text-orange-300">sale
rotation page</a> from time to time
to see when it goes on sale.
@elseif ($skin->rp_price > 1350 && $skin->rp_price != 99999)
At {{ $skin->rp_price }} RP, {{ $skin->skin_name }} is definitely higher priced than most
skins. But for
dedicated {{ $skin->champion->name }} players, the comprehensive changes and high production
value make it worth considering if you spend a lot of time on this champion. If you're a casual
{{ $skin->champion->name }} player, you might want to wait for a sale or consider other skins
that
offer a better bang for your buck. To find out when this skin goes on sale, check out our <a
href="/sale-rotation" class="text-orange-400 transition-colors hover:text-orange-300">sale
rotation page</a>
@else
With its special availability, {{ $skin->skin_name }} is for the collectors and dedicated
{{ $skin->champion->name }} enthusiasts. If you're passionate about this champion or the skin's
theme, you'll want to keep an eye out for how to add this to your collection.
If you're still looking for a {{ $skin->champion->name }} skin, check out the <a
href="/champion/{{ $skin->champion->slug }}#skins"
class="text-orange-400 transition-colors hover:text-orange-300">champion
page</a> for more options.
@endif
</p>
<p class="mt-4">
Ultimately, skins are about personal preference and how much you enjoy playing
{{ $skin->champion->name }}. If you're looking for a fresh experience with this champion and the
theme of {{ $skin->skin_name }} appeals to you, it could be the perfect addition to your
collection! If you want to consider other options, check out our dedicated <a
href="/champion/{{ $skin->champion->slug }}#skins"
class="text-orange-400 transition-colors hover:text-orange-300">{{ $skin->champion->name }}</a>
page for more {{ $skin->champion->name }} skins and their details.
</p>
</div>
</div>
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl" itemscope
itemtype="https://schema.org/FAQPage">
<h2
class="mb-4 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
Frequently Asked Questions
</h2>
<div class="divide-y divide-stone-700/50">
<div class="py-4" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name" class="mb-2 text-lg font-bold text-orange-400">How can I get
{{ $skin->skin_name }} if it's not in the store?</h3>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text" class="text-neutral-100">
@if ($skin->rp_price == '99999')
{{ $skin->skin_name }} is a special skin that can't be purchased directly with RP.
Instead, you need to
@if ($skin->availability == 'Limited')
obtain it through special events or promotions. This might include The Sanctum
(gacha system), Battle Pass progression, watching esports, or limited-time
promotions. Since it's a limited-access skin, check the League client news for the
specific method currently available.
@elseif ($skin->availability == 'Upcoming')
wait for its release, which will likely be part of a special event. When available,
it will be obtainable through alternative means like The Sanctum (gacha system),
Battle Pass progression, watching esports, or special promotions rather than direct
RP purchase.
@else
access it through special means such as The Sanctum (gacha system), Battle Pass
progression, watching esports, or limited-time promotions. Check the current event
details in the League client for the exact method.
@endif
@elseif ($skin->availability == 'Legacy')
While {{ $skin->skin_name }} is a legacy skin and not regularly available in the store,
you can still obtain it through hextech crafting, event orbs, or during special sales
when legacy vaults are temporarily opened. Keep an eye on the League client for events
like Lunar Revel, Snowdown, or special champion spotlights when legacy skins often
return.
@elseif ($skin->availability == 'Limited')
{{ $skin->skin_name }} is a limited skin, which means it's rare. Limited skins
typically don't return to the store, but in some cases, you might find it in special
bundles, through "Your Shop" personalized discounts, or during major game anniversaries
when Riot occasionally brings back limited content.
@elseif ($skin->availability == 'Upcoming')
{{ $skin->skin_name }} hasn't been released yet! Once it launches, you'll be able to
purchase it directly from the store for {{ $skin->rp_price }} RP.
@else
If {{ $skin->skin_name }} is not currently in your store, try restarting your client.
You can purchase it directly for {{ $skin->rp_price }} RP, get it through hextech
crafting (if you're lucky), or ask a friend to gift it to you.
@endif
</div>
</div>
</div>
<div class="py-4" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name" class="mb-2 text-lg font-bold text-orange-400">Can I gift
{{ $skin->skin_name }} to a friend?</h3>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text" class="text-neutral-100">
@if ($skin->rp_price == '99999')
No, {{ $skin->skin_name }} cannot be gifted directly to friends. Since it's a special
skin obtained through
@if ($skin->availability == 'Upcoming')
upcoming special means (like Battle Pass, The Sanctum, or other events), there is no
direct gifting option. Your friend will need to participate in the event or
promotion to obtain it themselves once it becomes available.
@else
alternative means (like Battle Pass, The Sanctum, or other events) rather than
direct RP purchase, there is no gifting option available. Your friend will need to
participate in the event or promotion to obtain it themselves.
@endif
@elseif ($skin->availability == 'Available')
Yes! You can gift {{ $skin->skin_name }} to friends who have been on your friends list
for at least 24 hours. Just go to the store, select the gifting icon, find your friend,
and select the skin. Keep in mind that gifting costs the same amount
({{ $skin->rp_price }} RP) as buying it for yourself.
@elseif ($skin->availability == 'Legacy' || $skin->availability == 'Limited')
When {{ $skin->skin_name }} becomes temporarily available during special events, you
can gift it to friends who have been on your friends list for at least 24 hours. Since
this is a {{ strtolower($skin->availability) }} skin, gifting it is a special surprise
that not everyone will have access to.
@elseif ($skin->availability == 'Upcoming')
Once {{ $skin->skin_name }} is released, you'll be able to gift it to any friend who
has been on your friends list for at least 24 hours. New skins are almost always
giftable upon release.
@else
Yes, as long as the person has been on your friends list for at least 24 hours, you can
gift this skin. Gifting costs the same ({{ $skin->rp_price }} RP) as buying it for
yourself.
@endif
</div>
</div>
</div>
<div class="py-4" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name" class="mb-2 text-lg font-bold text-orange-400">How does
{{ $skin->skin_name }} compare to other {{ $skin->champion->name }} skins?</h3>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text" class="text-neutral-100">
@if ($skin->rp_price == '99999')
{{ $skin->skin_name }} is a special skin that can't be directly purchased
with RP, making it more exclusive than standard {{ $skin->champion->name }} skins.
These special skins often have production quality comparable to higher-tier skins (1350
RP+) with unique thematic elements.
@else
{{ $skin->skin_name }} offers a {{ strtolower($skin->rarity) }} tier experience at
{{ $skin->rp_price }} RP, making it
{{ $skin->rp_price < 1350 ? 'more affordable than other skins' : 'one of the higher-end options' }}
for {{ $skin->champion->name }}.
@endif
@if ($skin->new_effects && $skin->new_animations)
What sets it apart from lower-tier {{ $skin->champion->name }} skins is the
combination of custom visual effects and animations, which give a completely fresh feel
to the champion.
@elseif ($skin->new_effects)
Unlike some basic {{ $skin->champion->name }} skins, this one includes custom visual
effects that really change how your abilities look in game.
@elseif ($skin->new_animations)
The unique animations separate it from simpler {{ $skin->champion->name }} skins,
giving the champion new personality through movement.
@endif
For a detailed comparison with all other {{ $skin->champion->name }} skins, check out our
<a href="/champion/{{ $skin->champion->slug }}"
class="text-orange-400 hover:text-orange-300">{{ $skin->champion->name }}
page</a> that lists all skins.
</div>
</div>
</div>
<div class="py-4" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name" class="mb-2 text-lg font-bold text-orange-400">
@if ($skin->rp_price == '99999')
What's the best way to get {{ $skin->skin_name }}?
@else
When does {{ $skin->skin_name }} go on sale?
@endif
</h3>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text" class="text-neutral-100">
@if ($skin->rp_price == '99999')
The most efficient way to obtain {{ $skin->skin_name }} depends on its specific
acquisition method. For Battle Pass skins, purchase the pass early and complete missions
consistently. For Sanctum skins, use the free orbs first, then strategically purchase
additional orbs if needed. For event-specific skins, check the event details in the
League client for the most efficient path. Sometimes these special skins reappear in
future events, but there's no guarantee, so it's best to grab them when initially
available.
@elseif ($skin->availability == 'Upcoming' || $skin->release_date == '0000-00-00')
New skins like {{ $skin->skin_name }} typically don't go on sale immediately after
release. You'll usually need to wait 4-6 months before seeing it in a regular sale
rotation. However, it might appear in "Your Shop" with a personalized discount if you
play {{ $skin->champion->name }} frequently.
@elseif ($skin->availability == 'Legacy' || $skin->availability == 'Limited')
Since {{ $skin->skin_name }} is a {{ strtolower($skin->availability) }} skin, it
doesn't follow the regular sale schedule. Instead, watch for special events when legacy
vaults open, usually at holidays or during champion updates. When available again, it
might be at full price or occasionally discounted as part of a bundle.
@else
Riot typically puts skins on sale approximately every 6-8 months.
{{ $skin->skin_name }} could appear in the weekly sale rotation for 30-50% off its
original price ({{ $skin->rp_price }} RP). The most reliable way to get a discount is
through "Your Shop," which offers personalized discounts on skins for champions you play
often. Check our <a href="/sale-rotation"
class="text-orange-400 hover:text-orange-300">sale rotation tracker</a> to see if
this skin is on sale currently.
@endif
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

70
resources/views/skins/show.blade.php
View File

@@ -1,13 +1,77 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', $skin->skin_name . ' • Heimerdinger.LoL') @section('title', $skin->skin_name . ' • Heimerdinger.LoL')
@section('description', 'Heimerdinger.LoL: ' . $skin->skin_name . ' details showing all the information about @section('description',
the ' . $skin->rarity . ' ' . $skin->champion->name . ' skin. ' . substr($skin->lore, 0, 50) . '...') 'Heimerdinger.LoL: ' .
$skin->skin_name .
' details showing all the information about
the ' .
$skin->rarity .
' ' .
$skin->champion->name .
' skin. ' .
substr($skin->lore, 0, 50) .
'...')
@section('content') @section('content')
<x-skins.grid_info :skin="$skin"/> <x-skins.grid_info :skin="$skin" />
@endsection @endsection
@push('bottom_scripts') @push('bottom_scripts')
@vite('resources/js/vert-scroll.js') @vite('resources/js/vert-scroll.js')
<script type="application/ld+json">
@php
$description = $skin->skin_name . " is a " . $skin->rarity . " tier skin for " . $skin->champion->name . " in League of Legends";
$realCurrencyPrice = match (true) {
$skin->rp_price == '99999' => 0,
$skin->rp_price >= 3250 => 25,
$skin->rp_price >= 1820 => 15,
$skin->rp_price >= 1350 => 10,
$skin->rp_price >= 975 => 7.5,
$skin->rp_price >= 520 => 5,
default => 0,
};
if($skin->new_effects) $description .= " with custom visual effects";
if($skin->new_animations) $description .= ", new animations";
if($skin->new_recall) $description .= ", custom recall animation";
if($skin->new_voice) $description .= ", new voice over";
if($skin->new_quotes) $description .= ", unique voice lines";
$description .= ".";
// creating json object cause blade parsing
$jsonObject = [
"@context" => "https://schema.org/",
"@type" => "Product",
"name" => $skin->skin_name . " - League of Legends Skin",
"image" => $skin->getSkinImageAttribute(true),
"description" => $description,
"brand" => [
"@type" => "Brand",
"name" => "Riot Games"
],
"sku" => "lol-skin-" . $skin->id,
"offers" => [
"@type" => "Offer",
"url" => url()->current(),
"priceCurrency" => "EUR",
"price" => $skin->rp_price == '99999' ? '' : $realCurrencyPrice,
"priceValidUntil" => date('Y-m-d', strtotime('+1 year')),
"availability" => $skin->availability == 'Available'
? 'https://schema.org/InStock'
: ($skin->availability == 'Upcoming' || $skin->release_date == '0000-00-00'
? 'https://schema.org/PreOrder'
: 'https://schema.org/LimitedAvailability'),
"seller" => [
"@type" => "Organization",
"name" => "Riot Games"
]
],
"category" => "Video Game Cosmetic Item",
"releaseDate" => $skin->release_date == '0000-00-00' ? '' : $skin->release_date
];
echo json_encode($jsonObject, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
@endphp
</script>
@endpush @endpush