feat: champ info start

2025-12-06 18:20:48 +01:00 · 2023-11-08 10:39:52 +01:00
parent cabb5414ae
commit 38247c71d9
6 changed files with 139 additions and 1 deletions
--- a/app/Http/Controllers/ChampionController.php
+++ b/app/Http/Controllers/ChampionController.php
@@ -47,7 +47,11 @@ class ChampionController extends Controller
     */
    public function show(Champion $champion)
    {
-        //
+        $champion = Cache::remember('championShowCache' . $champion->slug, 60 * 60 * 8, function () use ($champion) {
+            return $champion->load('skins', 'lanes');
+        });
+
+        return view('champions.show', compact('champion'));
    }

    /**
--- a/app/Models/Champion.php
+++ b/app/Models/Champion.php
@@ -42,6 +42,11 @@ class Champion extends Model
        ];
    }

+    public function getRouteKeyName(): string
+    {
+        return 'slug';
+    }
+
    public function skins(): HasMany
    {
        return $this->hasMany(ChampionSkin::class);
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,3 +1,35 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+.glow-shadow::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 1rem;
+    background: linear-gradient(90deg, rgba(239, 148, 61, 0.7), rgba(245, 101, 35, 0.7));
+    opacity: 0;
+    filter: blur(5px);
+    animation: glow 4s infinite;
+}
+
+@keyframes glow {
+    0% {
+        opacity: 0.5;
+        filter: blur(8px);
+    }
+    50% {
+        opacity: 0.2;
+        filter: blur(13px);
+    }
+    100% {
+        opacity: 0.5;
+        filter: blur(8px);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .glow-shadow::before {
+        display: none;
+    }
+}
--- a/resources/views/champions/show.blade.php
+++ b/resources/views/champions/show.blade.php
@@ -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="/icons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
+    <link rel="manifest" href="/icons/site.webmanifest">
+    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#e6855e">
+    <link rel="shortcut icon" href="/icons/favicon.ico">
+    <meta name="msapplication-TileColor" content="#ff7c47">
+    <meta name="msapplication-config" content="/icons/browserconfig.xml">
+    <meta name="theme-color" content="#ff7c47">
+
+    <title>{{$champion->name}} • Heimerdinger.LoL</title>
+    <meta name="description"
+          content="Heimerdinger.LoL: {{$champion->name}} details showing all the information you need to know about {{$champion->name}}, {{$champion->title}}. {{substr($champion->lore, 0, 50)}}...">
+
+    <!-- OpenGraph -->
+    <meta property="og:site_name" content="Heimerdinger.LoL">
+    <meta property="og:title" content="{{$champion->name}} • Heimerdinger.LoL">
+    <meta property="og:description" content="Heimerdinger.LoL: {{$champion->name}} details showing all the information you need to know about {{$champion->name}}, {{$champion->title}}. {{substr($champion->lore, 0, 50)}}...">
+    <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="{{$champion->name}} • Heimerdinger.LoL">
+    <meta property="twitter:description" content="Heimerdinger.LoL: {{$champion->name}} details showing all the information you need to know about {{$champion->name}}, {{$champion->title}}. {{substr($champion->lore, 0, 50)}}...">
+    <meta property="twitter:image" content="{{asset('img/og_image.png')}}">
+
+    <link rel="preconnect" href="https://rsms.me/">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+
+    @vite('resources/css/app.css')
+    @vite('resources/js/app.js')
+</head>
+
+<body class="antialiased bg-stone-900 dark">
+<x-navbar/>
+<x-champions.grid_info :champion="$champion"/>
+
+
+
+</body>
+
+</html>
--- a/resources/views/components/champions/grid_info.blade.php
+++ b/resources/views/components/champions/grid_info.blade.php
@@ -0,0 +1,43 @@
+<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">
+        CHAMPION DETAILS</h3>
+    <h1
+        class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
+        bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
+        {{$champion->name}}</h1>
+    <h2
+        class="text-sm md:text-lg font-bold text-center text-transparent uppercase
+        bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
+        {{$champion->title}}</h2>
+
+    <div class="container mx-auto p-4 flex items-center justify-center mt-3">
+        <div class="w-screen grid grid-cols-1 md-grid-cols-2 lg:grid-cols-3 grid-rows-5 gap-5">
+            <div class="relative rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80 lg:col-span-2 lg:row-span-2">
+                <div class="glow-shadow absolute inset-0 rounded-2xl"></div>
+                <div class="overflow-hidden rounded-2xl relative">
+                    <img
+                        src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(false) }}&w=880&output=webp&q=85"
+                        alt="{{$champion->name}} Splash Art"
+                        class="w-full h-full object-cover transform scale-100 transition-transform duration-700 hover:scale-105 z-10"
+                    >
+                </div>
+            </div>
+
+
+            <div
+                class="rounded-2xl bg-stone-800/40 border border-stone-800 shadow-sm
+                shadow-stone-800/80 lg:row-span-2 lg:col-start-3 hover:shadow-orange-500/20">
+                5</div>
+            <div class="rounded-2xl bg-stone-800/40 border border-stone-800 shadow-sm
+            shadow-stone-800/80 lg:row-start-3 hover:shadow-orange-500/20">8
+            </div>
+            <div
+                class="rounded-2xl bg-stone-800/40 border border-stone-800 shadow-sm
+                shadow-stone-800/80 lg:col-span-2 lg:row-start-3 hover:shadow-orange-500/20">
+                9</div>
+        </div>
+    </div>
+</section>
--- a/routes/web.php
+++ b/routes/web.php
@@ -18,3 +18,4 @@ use App\Http\Controllers\HomeController;
 Route::get('/', [HomeController::class, 'index']);

 Route::get('/champions', [ChampionController::class, 'index']);
+Route::get('/champion/{champion}', [ChampionController::class, 'show']);