diff --git a/resources/css/app.css b/resources/css/app.css index ac9163e..3c76383 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -164,3 +164,8 @@ ins.adsbygoogle[data-ad-status="unfilled"] { background-color: rgba(0, 0, 0, 0.02); border-radius: 4px; } + +#skinsElement { + overflow-y: auto; + overflow-x: auto; +} diff --git a/resources/js/vert-scroll.js b/resources/js/vert-scroll.js index 8eb9171..67d9d08 100644 --- a/resources/js/vert-scroll.js +++ b/resources/js/vert-scroll.js @@ -1,5 +1,8 @@ let skinsElement = document.getElementById('skinsElement'); + skinsElement.addEventListener('wheel', (ev) => { - ev.preventDefault(); - skinsElement.scrollLeft += (ev.deltaY + ev.deltaX); + if (skinsElement.scrollWidth > skinsElement.clientWidth) { + ev.preventDefault(); + skinsElement.scrollLeft += (ev.deltaY + ev.deltaX); + } }); diff --git a/resources/views/champions/show.blade.php b/resources/views/champions/show.blade.php index b50ca14..47acc2f 100644 --- a/resources/views/champions/show.blade.php +++ b/resources/views/champions/show.blade.php @@ -1,14 +1,77 @@ @extends('layouts.app') @section('title', $champion->name . ' • Heimerdinger.LoL') -@section('description', 'Heimerdinger.LoL: ' . $champion->name . ' details showing all the information you need to know - about ' . $champion->name . ', ' . $champion->title . '. ' . substr($champion->lore, 0, 50) . '...') +@section('description', + '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') - + @endsection @push('bottom_scripts') @vite('resources/js/vert-scroll.js') -@endpush + +@endpush diff --git a/resources/views/components/champions/grid_info.blade.php b/resources/views/components/champions/grid_info.blade.php index fbbafe4..c73b816 100644 --- a/resources/views/components/champions/grid_info.blade.php +++ b/resources/views/components/champions/grid_info.blade.php @@ -1,161 +1,437 @@

- CHAMPION DETAILS

+ Champion Spotlight +

- {{ $champion->name }}

+ {{ $champion->name }} +

- {{ $champion->title }}

+ {{ $champion->title }} + + - + +
+
+
-
-
-
-
-
- {{ $champion->name }} Splash Art -
-
+
+ {{ $champion->name }} Loading + {{ $champion->name }} Splash Art -
+
-

- {{ $champion->name }} Information

- -
    -
  • - Full Title: {{ $champion->name }}, {{ $champion->title }}. -
  • -
  • - Popular Positions: - @if (isset($champion->lanes) && isset($champion->lanes->roles)) - @foreach ($champion->lanes->roles as $lane) - {{ $lane }} - @svg(getRoleIconSvg($lane), 'w-5 h-5 inline-block') - @if (!$loop->last) - - - @endif - - @endforeach - @else - Not Enough Data - @endif -
  • -
  • - Blue Essence Cost: - {{ $champion->price_be }} BE -
  • -
  • - Riot Points Cost: - {{ $champion->price_rp }} RP -
  • -
  • - Roles: - @foreach ($champion->roles as $role) - {{ $role }} - @if (!$loop->last) - - - @endif - - @endforeach -
  • -
  • - Attack Type: {{ $champion->attack_type }} -
  • -
  • - Damage Type: {{ $champion->adaptive_type }} -
  • -
  • - Resource Type: {{ $champion->resource_type }} -
  • -
  • - Champion ID: {{ $champion->champion_id }} -
  • -
  • - Release Date: {{ $champion->release_date }} -
  • -
  • - Release Patch: Patch {{ $champion->release_patch }} -
  • -
-
-
-
-

- {{ $champion->name }} Streamers

-

- A list of streamers who play {{ $champion->name }} and are atleast Diamond 2 or higher. -

-
- @foreach ($streamers as $streamer) - - @endforeach +
+
+

{{ $champion->name }}

+

{{ $champion->title }}

+ + View Full Splash Art + + + + +
-
-
-
-
-

- {{ $champion->name }} Skins ({{ count($champion->skins) }})

-
-
- @foreach ($champion->skins as $key => $skin) - - @endforeach + +
+
+ @if (isset($champion->lanes) && isset($champion->lanes->roles)) + @foreach ($champion->lanes->roles as $lane) + + @svg(getRoleIconSvg($lane), 'w-5 h-5 inline-block mr-1') + {{ $lane }} + + @endforeach + @else + Not Enough Data + @endif
+
-
-
-

- {{ $champion->name }} Lore

-

- {{ $champion->lore }} -

+
+

+ All About {{ $champion->name }} +

+ +
+
+
+

Champion Overview

+

+ {{ $champion->name }}, {{ $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. +

+ +

+ 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 +

+ +

+ 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. +

+
+ +
+

Champion Stats +

+
+

BE Cost: + {{ $champion->price_be }} BE +

+

RP Cost: + {{ $champion->price_rp }} RP +

+

Role: + @foreach ($champion->roles as $role) + {{ ucfirst(strtolower($role)) }}{{ !$loop->last ? ', ' : '' }} + @endforeach +

+

Damage: {{ $champion->adaptive_type }}

+

Attack: + {{ ucfirst(strtolower($champion->attack_type)) }}

+

Resource: {{ $champion->resource_type }} +

+

Champion ID: + {{ $champion->champion_id }}

+
+
+ +
+
+
+ + + +
+
+

+ Looking for a {{ $champion->name }} icon for your profile? Check out our {{ $champion->name }} Icons List. +

+

+ Want to save on {{ $champion->name }} skins? Check our Sale Rotation Tracker to see if + any {{ $champion->name }} skins are currently discounted! +

+
+
+
+ +

Gameplay Style

+ +

+ {{ $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. +

+ +

+ 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 +

+ +
+

{{ $champion->name }}'s Story

+
+

+ {{ $champion->lore }} +

+
+
+
+
+ + +
+

+ {{ $champion->name }} Skins Collection ({{ count($champion->skins) }}) +

+ +

+ 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. +

+ +
+
+ @foreach ($champion->skins as $key => $skin) + + @endforeach +
+
+
+ + +
+

+ Top {{ $champion->name }} Players & Streamers +

+ +

+ 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. +

+ + @if (count($streamers) > 0) +
+ @foreach ($streamers as $streamer) + + @endforeach +
+ @else +
+
+ + + +

+ Heimerdinger.lol is currently not aware of any High ELO {{ $champion->name }} streamers. We + are working on a streamer submission form. Check back soon. +

+
+
+ @endif +
+ +
+

+ Learning {{ $champion->name }} +

+ +
+

+ 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. +

+ +
+
+

Champion Strengths

+
    + @if (strpos(strtolower(implode('', $champion->roles)), 'assassin') !== false) +
  • High burst damage potential
  • +
  • High solo kill potential
  • +
  • Strong roaming capabilities
  • +
  • Good mobility for escapes
  • + @elseif (strpos(strtolower(implode('', $champion->roles)), 'tank') !== false) +
  • Impressive durability
  • +
  • Strong crowd control abilities
  • +
  • Good at starting fights
  • +
  • Great at frontlining
  • + @elseif (strpos(strtolower(implode('', $champion->roles)), 'mage') !== false) +
  • Powerful AoE damage
  • +
  • Strong waveclear
  • +
  • Good scaling into late game
  • +
  • Useful utility for team fights
  • + @elseif (strpos(strtolower(implode('', $champion->roles)), 'marksman') !== false) +
  • Consistent damage output
  • +
  • Strong late-game scaling
  • +
  • Nice at spacing
  • +
  • Good range for safety
  • + @elseif (strpos(strtolower(implode('', $champion->roles)), 'support') !== false) +
  • Strong utility for the team
  • +
  • Good protection capabilities
  • +
  • Effective vision control
  • +
  • Useful in team engagements
  • + @elseif (strpos(strtolower(implode('', $champion->roles)), 'fighter') !== false) +
  • Good balance of damage and durability
  • +
  • Strong dueling potential
  • +
  • Amazing in extended fights
  • + @else +
  • Versatile kit for various situations
  • +
  • Adaptable playstyle
  • +
  • Unique abilities in the champion roster
  • +
  • Effective in the right team compositions
  • + @endif +
+
+ +
+

Champion Weaknesses

+
    + @if (strpos(strtolower(implode('', $champion->roles)), 'assassin') !== false) +
  • Vulnerable to crowd control
  • +
  • Relatively squishy in team fights
  • +
  • Can fall off in very late game
  • +
  • Requires good timing to be effective
  • + @elseif (strpos(strtolower(implode('', $champion->roles)), 'tank') !== false) +
  • Limited damage output
  • +
  • Can be kited by other champions
  • +
  • Vulnerable to percent health damage
  • +
  • Reliant on team follow-up
  • + @elseif (strpos(strtolower(implode('', $champion->roles)), 'mage') !== false) +
  • Usually lacks mobility
  • +
  • Vulnerable to assassins
  • +
  • Skill-shot dependent abilities
  • +
  • Can struggle against magic resistance
  • + @elseif (strpos(strtolower(implode('', $champion->roles)), 'marksman') !== false) +
  • Weaker early game
  • +
  • Vulnerable to assassins
  • +
  • Reliant on positioning
  • +
  • Limited escape options
  • + @elseif (strpos(strtolower(implode('', $champion->roles)), 'support') !== false) +
  • Limited income for items
  • +
  • Lower damage output
  • +
  • Vulnerable when caught alone
  • +
  • Dependent on team play
  • + @elseif (strpos(strtolower(implode('', $champion->roles)), 'fighter') !== false) +
  • Can be kited by ranged champions
  • +
  • May struggle against true tanks
  • +
  • Often lacks strong engage tools
  • +
  • Can be outscaled in late game
  • + @else +
  • May struggle against specialized champions
  • +
  • Has counterplay options available
  • +
  • Requires good game knowledge to maximize potential
  • +
  • May not excel in any specific area
  • + @endif +
+
+
+ +

+ {{ $champion->name }} currently costs + {{ $champion->price_be }} BE or + {{ $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. +