feat: champion list

app/Http/Controllers/ChampionController.php

@@ -13,7 +13,11 @@ class ChampionController extends Controller
      */
     public function index()
     {
-        //
+        $champions = Champion::orderBy('name')->get();
+
+        return view('champions.index', [
+            'champions' => $champions,
+        ]);
     }
 
     /**

app/Models/Champion.php

@@ -6,6 +6,7 @@ use Cviebrock\EloquentSluggable\Sluggable;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Relations\HasOne;
 
 class Champion extends Model
 {
@@ -46,11 +47,19 @@ class Champion extends Model
         return $this->hasMany(ChampionSkin::class);
     }
 
-    public function getChampionImageAttribute(): string
+    public function lanes(): HasOne
     {
-        return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/splash-art';
+        return $this->hasOne(ChampionRoles::class, 'champion_id', 'champion_id');
     }
 
+    public function getChampionImageAttribute($centered = true): string
+    {
+        $url = 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/splash-art';
+
+        return $centered ? $url . '/centered' : $url;
+    }
+
+
     public function getChampionImageLoadingAttribute(): string
     {
         return 'https://cdn.communitydragon.org/latest/champion/' . $this->champion_id . '/portrait';

app/Models/ChampionRoles.php

@@ -4,6 +4,7 @@ namespace App\Models;
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 
 class ChampionRoles extends Model
 {
@@ -19,9 +20,9 @@ class ChampionRoles extends Model
         'roles' => 'array',
     ];
 
-    public function champion()
+    public function champion(): BelongsTo
     {
-        return $this->belongsTo(Champion::class);
+        return $this->belongsTo(Champion::class, 'champion_id', 'champion_id');
     }
 
     public function getRolesAttribute($value): array
@@ -46,4 +47,17 @@ class ChampionRoles extends Model
 
         return $transformedRoles;
     }
+
+    public function getRoleIcon($roleName)
+    {
+        $roleIcons = [
+            'Toplane' => 'gm-top.png',
+            'Jungle' => 'gm-jungle.png',
+            'Midlane' => 'gm-mid.png',
+            'Botlane' => 'gm-bot.png',
+            'Support' => 'gm-support.png',
+        ];
+
+        return asset('img/' . $roleIcons[$roleName]);
+    }
 }

app/View/Components/Champions/List_all.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\View\Components\Champions;
+
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class List_all extends Component
+{
+    public function __construct(public array $champions)
+    {
+    }
+
+    public function render(): View
+    {
+        return view('components.champions.list_all');
+    }
+}

database/seeders/SkinChromaSeeder.php

@@ -39,8 +39,12 @@ class SkinChromaSeeder extends Seeder
                     ];
 
                     // Mundo is a special case, his skins often include his name in the skin name, so we need to remove it.
-                    if (strpos($chromaAttributes['skin_name'], 'Mundo Dr. Mundo') !== false) {
-                        $skinAttributes['skin_name'] = str_replace('Mundo Dr. Mundo', 'Mundo', $chromaAttributes['skin_name']);
+                    if (str_contains($chromaAttributes['skin_name'], 'Mundo Dr. Mundo')) {
+                        $chromaAttributes['skin_name'] = str_replace(
+                            'Mundo Dr. Mundo',
+                            'Mundo',
+                            $chromaAttributes['skin_name']
+                        );
                     }
 
                     if ($chromaExists && $this->hasAttributesChanged($chromaExists, $chromaAttributes)) {
@@ -55,7 +59,7 @@ class SkinChromaSeeder extends Seeder
         }
     }
 
-    private function hasAttributesChanged($chroma, $attributes)
+    private function hasAttributesChanged($chroma, $attributes): bool
     {
         foreach ($attributes as $key => $value) {
             if ($chroma->{$key} != $value) {

resources/views/champions/index.blade.php

@@ -0,0 +1,58 @@
+<!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>Heimerdinger.LoL • Champions</title>
+    <meta name="description"
+          content="Explore League of Legends champions, skins, and game assets on Heimerdinger.LoL.
+          Your ultimate source for in-depth information on LoL gaming. Dive in now!">
+
+    <!-- OpenGraph -->
+    <meta property="og:site_name" content="Heimerdinger.LoL">
+    <meta property="og:title" content="Heimerdinger.LoL • Champions">
+    <meta property="og:description" content="Explore League of Legends champions, skins, and game assets on Heimerdinger.LoL.
+          Your ultimate source for in-depth information on LoL gaming. Dive in now!">
+    <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="Heimerdinger.LoL • Champions">
+    <meta property="twitter:description" content="Explore League of Legends champions, skins, and game assets on Heimerdinger.LoL.
+          Your ultimate source for in-depth information on LoL gaming. Dive in now!">
+    <meta property="twitter:image" content="{{asset('img/og_image.png')}}">
+
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/fontawesome.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/light.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/brands.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/solid.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/regular.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/duotone.min.css" rel="stylesheet">
+    @vite('resources/css/app.css')
+    @vite('resources/js/app.js')
+</head>
+
+<body class="antialiased bg-stone-900 dark">
+<x-navbar/>
+<x-champions.list_all :champions="$champions"/>
+
+</body>
+
+</html>

resources/views/components/champions/list_all.blade.php

@@ -0,0 +1,65 @@
+<?php
+/** @var App\Models\Champion $champion */
+
+/** @var App\Models\ChampionRoles $lanes */ ?>
+
+
+<section class="max-w-screen-xl mx-auto mt-12">
+    <h2
+        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">
+        Champions</h2>
+
+    <div class="container mx-auto p-4 flex items-center justify-center mt-3">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
+            @foreach($champions as $champion)
+                <div
+                    class="flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border
+                    border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10">
+                    <div
+                        class="mx-4 mt-4 overflow-hidden h-52 rounded-2xl bg-clip-border border-2 border-orange-400/40">
+                        <img loading="lazy"
+                             src="{{ $champion->getChampionImageAttribute() }}"
+                             class="object-cover w-full h-full"
+                             alt="{{ $champion->name }} Splash Art"
+                        />
+                    </div>
+                    <div class="px-4 py-2">
+                        <div class="flex items-center justify-between">
+                            <p class="block text-base antialiased font-medium  text-gray-100">
+                                {{ $champion->name }}
+                            </p>
+                            <span class="text-xsm text-stone-300">{{ $champion->title }}</span>
+                        </div>
+
+                        <div class="flex items-center justify-between mt-2">
+                            <p class="text-gray-300 text-sm flex">
+                                @foreach($champion->lanes->roles as $lane)
+                                    <span class="sr-only">{{$lane}}</span>
+
+                                    <img data-tooltip-target="tooltip-bottom-{{$lane}}" data-tooltip-placement="bottom"
+                                         loading="lazy" src="{{$champion->lanes->getRoleIcon($lane)}}"
+                                         alt="{{$lane}} Icon"
+                                         class="w-7 h-7 mr-1">
+                            </p>
+                            @endforeach
+
+                            <div id="tooltip-bottom-{{$lane}}" role="tooltip"
+                                 class="z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white
+                                 rounded-lg shadow-sm transition-opacity opacity-0 tooltip bg-stone-700">
+                                {{$lane}}
+                                <div class="tooltip-arrow" data-popper-arrow></div>
+                            </div>
+
+                            <p class="text-right text-2xl md:text-lg text-orange-300 hover:text-orange-400">
+                                <a href="/champion/{{$champion->slug}}">
+                                    <i class="fa-duotone fa-arrow-up-right-from-square"></i>
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            @endforeach
+        </div>
+    </div>
+</section>

routes/web.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\ChampionController;
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\HomeController;
 
@@ -15,3 +16,5 @@ use App\Http\Controllers\HomeController;
 */
 
 Route::get('/', [HomeController::class, 'index']);
+
+Route::get('/champions', [ChampionController::class, 'index']);

tailwind.config.js

@@ -10,6 +10,9 @@ module.exports = {
     ],
     theme: {
         extend: {
+            fontSize: {
+                xsm: ".685rem",
+            },
             fontFamily: {
                 sans: [
                     "Inter var",