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

feat: champ information, style improvement

Browse Source
This commit is contained in:
Rico van Zelst
2023-11-08 14:12:51 +01:00
parent b0a88ba3b9
commit 149174ebc3
11 changed files with 299 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/Helpers/HelperFunctions.php
View File

@@ -1,5 +1,7 @@
<?php
use Intervention\Image\ImageManagerStatic as Image;
function getRoleIcon($roleName)
{
$roleIcons = [
@@ -12,3 +14,46 @@ function getRoleIcon($roleName)
return asset('img/' . $roleIcons[$roleName]);
}
function getAverageColorFromImageUrl($imageUrl): string
{
$img = Image::make($imageUrl);
$img->resize(24, 24);
$totalR = 0;
$totalG = 0;
$totalB = 0;
$width = $img->width();
$height = $img->height();
for ($x = 0; $x < $width; $x++) {
for ($y = 0; $y < $height; $y++) {
$color = $img->pickColor($x, $y);
$totalR += $color[0];
$totalG += $color[1];
$totalB += $color[2];
}
}
$pixelCount = $width * $height;
$avgR = $totalR / $pixelCount;
$avgG = $totalG / $pixelCount;
$avgB = $totalB / $pixelCount;
return sprintf("#%02x%02x%02x", $avgR, $avgG, $avgB);
}
function getRoleIconSvg($roleName): string
{
$roleIcons = [
'Toplane' => 'icon-position-top',
'Jungle' => 'icon-position-jungle',
'Midlane' => 'icon-position-middle',
'Botlane' => 'icon-position-bottom',
'Support' => 'icon-position-utility',
];
return $roleIcons[$roleName];
}

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

@@ -51,6 +51,12 @@ class ChampionController extends Controller
return $champion->load('skins', 'lanes');
});
$splashColor = Cache::remember('championSplashColorCache' . $champion->slug, 60 * 60 * 24, function () use ($champion) {
return getAverageColorFromImageUrl($champion->getChampionImageAttribute());
});
$champion->splash_color = $splashColor;
return view('champions.show', compact('champion'));
}

34
app/Models/Champion.php
View File

@@ -33,6 +33,40 @@ class Champion extends Model
'roles' => 'array',
];
public function getResourceTypeAttribute($value): string
{
$resourceTypes = [
'BLOOD_WELL' => "Blood",
"MANA" => "Mana",
"ENERGY" => "Energy",
"NONE" => "None",
"HEALTH" => "Health",
"RAGE" => "Rage",
"COURAGE" => "Courage",
"SHIELD" => "Shield",
"FURY" => "Fury",
"FEROCITY" => "Ferocity",
"HEAT" => "Heat",
"GRIT" => "Grit",
"BLOODTHIRST" => "Bloodthirst",
"FLOW" => "Flow",
"SOUL_UNBOUND" => "Soul Unbound",
];
return $resourceTypes[$value];
}
public function getAdaptiveTypeAttribute($value): string
{
$adaptiveTypes = [
'ADAPTIVE_DAMAGE' => 'Adaptive',
'MAGIC_DAMAGE' => 'Magical',
'PHYSICAL_DAMAGE' => 'Physical',
];
return $adaptiveTypes[$value];
}
public function sluggable(): array
{
return [

2
app/Models/ChampionRoles.php
View File

@@ -47,4 +47,6 @@ class ChampionRoles extends Model
return $transformedRoles;
}
}

1
composer.json
View File

@@ -14,6 +14,7 @@
"cviebrock/eloquent-sluggable": "^10.0",
"dolejska-daniel/riot-api": "^5",
"guzzlehttp/guzzle": "^7.2",
"intervention/image": "^2.7",
"laravel/framework": "^10.10",
"laravel/sanctum": "^3.2",
"laravel/tinker": "^2.8",

88
composer.lock generated
View File

@@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "3cf6f4de24fb85d3c45a641a3d4e7b73",
"content-hash": "dec98fa5ff307071427749b99398cf7e",
"packages": [
{
"name": "anhskohbo/no-captcha",
@@ -1512,6 +1512,90 @@
],
"time": "2023-08-27T10:19:19+00:00"
},
{
"name": "intervention/image",
"version": "2.7.2",
"source": {
"type": "git",
"url": "https://github.com/Intervention/image.git",
"reference": "04be355f8d6734c826045d02a1079ad658322dad"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/Intervention/image/zipball/04be355f8d6734c826045d02a1079ad658322dad",
"reference": "04be355f8d6734c826045d02a1079ad658322dad",
"shasum": ""
},
"require": {
"ext-fileinfo": "*",
"guzzlehttp/psr7": "~1.1 || ^2.0",
"php": ">=5.4.0"
},
"require-dev": {
"mockery/mockery": "~0.9.2",
"phpunit/phpunit": "^4.8 || ^5.7 || ^7.5.15"
},
"suggest": {
"ext-gd": "to use GD library based image processing.",
"ext-imagick": "to use Imagick based image processing.",
"intervention/imagecache": "Caching extension for the Intervention Image library"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "2.4-dev"
},
"laravel": {
"providers": [
"Intervention\\Image\\ImageServiceProvider"
],
"aliases": {
"Image": "Intervention\\Image\\Facades\\Image"
}
}
},
"autoload": {
"psr-4": {
"Intervention\\Image\\": "src/Intervention/Image"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Oliver Vogel",
"email": "oliver@intervention.io",
"homepage": "https://intervention.io/"
}
],
"description": "Image handling and manipulation library with support for Laravel integration",
"homepage": "http://image.intervention.io/",
"keywords": [
"gd",
"image",
"imagick",
"laravel",
"thumbnail",
"watermark"
],
"support": {
"issues": "https://github.com/Intervention/image/issues",
"source": "https://github.com/Intervention/image/tree/2.7.2"
},
"funding": [
{
"url": "https://paypal.me/interventionio",
"type": "custom"
},
{
"url": "https://github.com/Intervention",
"type": "github"
}
],
"time": "2022-05-21T17:30:32+00:00"
},
{
"name": "laravel/framework",
"version": "v10.30.1",
@@ -10272,5 +10356,5 @@
"php": "^8.1"
},
"platform-dev": [],
"plugin-api-version": "2.3.0"
"plugin-api-version": "2.6.0"
}

18
package-lock.json generated
View File

@@ -6,9 +6,11 @@
"": {
"dependencies": {
"flowbite": "^2.0.0",
"npm-run-all": "^4.1.5"
"npm-run-all": "^4.1.5",
"tailwind-capitalize-first-letter": "^1.0.4"
},
"devDependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
"autoprefixer": "^10.4.16",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.8.0",
@@ -473,6 +475,15 @@
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@tailwindcss/aspect-ratio": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
"integrity": "sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==",
"dev": true,
"peerDependencies": {
"tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
}
},
"node_modules/ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -2547,6 +2558,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/tailwind-capitalize-first-letter": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/tailwind-capitalize-first-letter/-/tailwind-capitalize-first-letter-1.0.4.tgz",
"integrity": "sha512-ZB8hBi68JI4aQ1cDUxuFWfMYTxgBvlzIdPPHSkFkMUlo7p2QlbMy0hVv/vAREAFmkUh9QfjuKQnOSbe4Gnqljg=="
},
"node_modules/tailwindcss": {
"version": "3.3.5",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",

4
package.json
View File

@@ -10,6 +10,7 @@
"laravel-pint": "./vendor/bin/pint"
},
"devDependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
"autoprefixer": "^10.4.16",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.8.0",
@@ -19,6 +20,7 @@
},
"dependencies": {
"flowbite": "^2.0.0",
"npm-run-all": "^4.1.5"
"npm-run-all": "^4.1.5",
"tailwind-capitalize-first-letter": "^1.0.4"
}
}

21
resources/css/app.css
View File

@@ -7,23 +7,32 @@
position: absolute;
inset: 0;
border-radius: 1rem;
background: linear-gradient(90deg, rgba(239, 148, 61, 0.7), rgba(245, 101, 35, 0.7));
background: var(--splash-color);
opacity: 0;
filter: blur(5px);
filter: blur(8px);
animation: glow 4s infinite;
--tw-scale-x: 1.02;
--tw-scale-y: 1.02;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.shadow-md-splash {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--splash-color), 0 2px 4px -2px var(--splash-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@keyframes glow {
0% {
opacity: 0.5;
opacity: 0.8;
filter: blur(8px);
}
50% {
opacity: 0.2;
filter: blur(13px);
opacity: 0.45;
filter: blur(11px);
}
100% {
opacity: 0.5;
opacity: 0.8;
filter: blur(8px);
}
}

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

@@ -14,10 +14,12 @@
{{$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">
<div class="w-screen grid grid-cols-1 md-grid-cols-2 lg:grid-cols-3 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 ">
<div class="aspect-w-16 aspect-h-9 glow-shadow absolute inset-0 rounded-2xl"
style="--splash-color: {{$champion->splash_color}}"></div>
<div class="aspect-w-16 aspect-h-9 overflow-hidden rounded-2xl relative">
<img
src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(false) }}&w=880&output=webp&q=85"
alt="{{$champion->name}} Splash Art"
@@ -26,18 +28,89 @@
</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
class="rounded-2xl border border-3 border-white/10
lg:col-start-3 shadow-md transition-all duration-700"
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
<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="text-neutral-100 hyphens-auto text-base font-medium leading-loose mt-8" lang="en">
<span class="font-bold">Full Title:</span> {{$champion->name}}, {{$champion->title}}.
</li>
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose" lang="en">
<span class="font-bold">Popular Positions:</span> @foreach($champion->lanes->roles as $lane)
<span
class="inline-block lowercase capitalize-first">{{$lane}} @svg(getRoleIconSvg($lane), 'w-5 h-5 inline-block')
@if(!$loop->last)
-
@endif</span>
@endforeach
</li>
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
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="text-neutral-100 hyphens-auto text-medium font-medium leading-loose items-center"
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="text-neutral-100 hyphens-auto leading-loose font-medium" 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="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<span class="font-bold">Attack Type:</span> <span
class="inline-block lowercase capitalize-first">{{$champion->attack_type}}</span>
</li>
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<span class="font-bold">Damage Type:</span> {{$champion->adaptive_type}}
</li>
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<span class="font-bold">Resource Type:</span> {{$champion->resource_type}}
</li>
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose" lang="en">
<span class="font-bold">Champion ID:</span> <span
class="font-mono font-medium">{{$champion->champion_id}}</span>
</li>
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<span class="font-bold">Release Date:</span> {{$champion->release_date}}
</li>
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<span class="font-bold">Release Patch:</span> Patch {{$champion->release_patch}}
</li>
</ul>
</div>
<div class="rounded-2xl border border-3 border-white/10 shadow-md
shadow-stone-800/80 hover:shadow-orange-500/20 transition-all duration-700"
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
<div class="p-4">
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
{{$champion->name}} Lore</h4>
<p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose" lang="en">
{{$champion->lore}}
</p>
</div>
</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>
class="rounded-2xl border border-3 border-white/10 shadow-md
shadow-stone-800/80 lg:col-span-2 hover:shadow-orange-500/20 transition-all duration-700"
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
3
</div>
</div>
</div>
</section>

5
tailwind.config.js
View File

@@ -23,5 +23,8 @@ module.exports = {
},
},
},
plugins: [require("flowbite/plugin")],
corePlugins: {
aspectRatio: false,
},
plugins: [require("flowbite/plugin"), require("@tailwindcss/aspect-ratio"), require('tailwind-capitalize-first-letter'),],
};