mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 10:10:48 +01:00
feat: summoner icon show
This commit is contained in:
Rico van Zelst
@@ -39,7 +39,9 @@ class SummonerIconController extends Controller
|
||||
|
||||
public function show(SummonerIcon $summonerIcon)
|
||||
{
|
||||
return $summonerIcon;
|
||||
$icon = $summonerIcon;
|
||||
|
||||
return view('icons.show', compact('icon'));
|
||||
}
|
||||
|
||||
public function update(Request $request, SummonerIcon $summonerIcon)
|
||||
|
||||
@@ -40,4 +40,9 @@ class SummonerIcon extends Model
|
||||
$sqids = new Sqids(minLength: 5);
|
||||
return $sqids->encode([$this->icon_id]);
|
||||
}
|
||||
|
||||
public function getRouteKeyName(): string
|
||||
{
|
||||
return 'slug';
|
||||
}
|
||||
}
|
||||
|
||||
19
app/View/Components/Icons/View_grid.php
Normal file
19
app/View/Components/Icons/View_grid.php
Normal file
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
|
||||
namespace App\View\Components\Icons;
|
||||
|
||||
use App\Models\SummonerIcon;
|
||||
use Illuminate\Contracts\View\View;
|
||||
use Illuminate\View\Component;
|
||||
|
||||
class View_grid extends Component
|
||||
{
|
||||
public function __construct(public SummonerIcon $icon)
|
||||
{
|
||||
}
|
||||
|
||||
public function render(): View
|
||||
{
|
||||
return view('components.icons.view_grid');
|
||||
}
|
||||
}
|
||||
88
resources/views/components/icons/view_grid.blade.php
Normal file
88
resources/views/components/icons/view_grid.blade.php
Normal file
@@ -0,0 +1,88 @@
|
||||
<section class="max-w-screen-xl mx-auto mt-12">
|
||||
<p class="sr-only">Heimerdinger Presents:</p>
|
||||
<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">
|
||||
ICON DETAILS</h3>
|
||||
<h1
|
||||
class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
|
||||
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
{{$icon->title}}</h1>
|
||||
<h2
|
||||
class="text-sm md:text-lg font-bold text-center text-transparent uppercase
|
||||
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
Released in: {{$icon->release_year}}</h2>
|
||||
|
||||
<div class="container mx-auto p-4 flex items-center justify-center mt-3">
|
||||
<div class="w-screen grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
|
||||
<div
|
||||
class="items-center align-middle flex flex-col rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80">
|
||||
<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=400&output=webp&q=100&il"
|
||||
alt="{{$icon->title}} Icon"
|
||||
class="transition-transform duration-700 rounded-2xl bg-clip-border border-2 border-orange-400/40
|
||||
shadow-md shadow-orange-400/20"/>
|
||||
<a href="{{$icon->image}}" target="_blank"
|
||||
class="text-center text-neutral-100 text-sm font-medium px-4 py-2">
|
||||
View in HD
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80">
|
||||
<h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2">
|
||||
{{$icon->title}} Details
|
||||
</h4>
|
||||
<div class="flex flex-col justify-between h-max">
|
||||
<ul class="mx-5 flex-1 h-max">
|
||||
<li class="text-neutral-100 hyphens-auto text-base leading-loose items-center" lang="en">
|
||||
<span class="font-bold">Icon ID:</span>
|
||||
<span class="font-mono font-semibold">{{$icon->icon_id}}</span>
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
||||
<span class="font-bold">Icon Name:</span> {{$icon->title}}
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
||||
<span class="font-bold">Release Year:</span> {{$icon->release_year}}
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
||||
<span class="font-bold">Legacy<span class="font-extralight">*</span>:</span> {{$icon->legacy ? 'Yes' : 'No'}}
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" 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)
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
||||
<span class="font-bold">Esports Team:</span> {{$icon->esports_team}}
|
||||
</li>
|
||||
@endif
|
||||
@if($icon->esports_region)
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
||||
<span class="font-bold">Esports Region:</span> {{$icon->esports_region}}
|
||||
</li>
|
||||
@endif
|
||||
@if($icon->esports_event)
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
||||
<span class="font-bold">Esports Event:</span> {{$icon->esports_event}}
|
||||
</li>
|
||||
@endif
|
||||
@endif
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
||||
<span class="font-bold">Description:</span> {{$icon->description}}
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto font-light text-sm leading-loose items-center mt-8" lang="en">
|
||||
<span class="font-bold">* Legacy Icons:</span> Legacy Icons don't act the same as legacy skins.
|
||||
It seems like some icons that are marked as legacy are still obtainable or the other way around
|
||||
where some icons that are not marked as legacy are not obtainable anymore.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
1
|
||||
53
resources/views/icons/show.blade.php
Normal file
53
resources/views/icons/show.blade.php
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/img/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#e6855e">
|
||||
<link rel="shortcut icon" href="/img/icons/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#ff7c47">
|
||||
<meta name="msapplication-config" content="/img/icons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ff7c47">
|
||||
|
||||
<title>{{$icon->title}} • Heimerdinger.LoL</title>
|
||||
<meta name="description"
|
||||
content="Heimerdinger.LoL: {{$icon->title}} details showing all the information about the icon released in {{$icon->release_year}}. {{substr($icon->description, 0, 64)}}...">
|
||||
|
||||
<!-- OpenGraph -->
|
||||
<meta property="og:site_name" content="Heimerdinger.LoL">
|
||||
<meta property="og:title" content="{{$icon->title}} • Heimerdinger.LoL">
|
||||
<meta property="og:description"
|
||||
content="Heimerdinger.LoL: {{$icon->title}} details showing all the information about the icon released in {{$icon->release_year}}. {{substr($icon->description, 0, 64)}}...">
|
||||
<meta property="og:locale" content="en">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="{{asset('img/og_image.png')}}">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:domain" content="heimerdinger.lol">
|
||||
<meta property="twitter:title" content="{{$icon->title}} • Heimerdinger.LoL">
|
||||
<meta property="twitter:description"
|
||||
content="Heimerdinger.LoL: {{$icon->title}} details showing all the information about the icon released in {{$icon->release_year}}. {{substr($icon->description, 0, 64)}}...">
|
||||
<meta property="twitter:image" content="{{asset('img/og_image.png')}}">
|
||||
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="preload" href="https://rsms.me/inter/inter.css" as="style">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" media="print" onload="this.media='all'">
|
||||
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
</head>
|
||||
|
||||
<body class="antialiased bg-stone-900 dark scroll-smooth">
|
||||
<x-navbar/>
|
||||
<x-icons.view_grid :icon="$icon"/>
|
||||
<x-footer/>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -36,6 +36,10 @@ Route::get('/icons', [
|
||||
SummonerIconController::class,
|
||||
'index'
|
||||
])->name('assets.icons.index');
|
||||
Route::get('/icon/{summonerIcon}', [
|
||||
SummonerIconController::class,
|
||||
'show'
|
||||
])->name('assets.icons.show');
|
||||
|
||||
// Emotes
|
||||
Route::get('/emotes', [
|
||||
|
||||
Reference in New Issue
Block a user