From 00018878e093497c7f393559042e0f2fb46d7632 Mon Sep 17 00:00:00 2001 From: Rico van Zelst Date: Wed, 8 Nov 2023 21:40:51 +0100 Subject: [PATCH] feat: position filter --- app/Http/Controllers/ChampionController.php | 10 ++++-- resources/js/lane-filter.js | 35 +++++++++++++++++++ resources/views/champions/index.blade.php | 1 + .../champions/lane-selector.blade.php | 19 ++++++++++ .../components/champions/list_all.blade.php | 11 +++--- 5 files changed, 68 insertions(+), 8 deletions(-) create mode 100644 resources/js/lane-filter.js create mode 100644 resources/views/components/champions/lane-selector.blade.php diff --git a/app/Http/Controllers/ChampionController.php b/app/Http/Controllers/ChampionController.php index 9ba40df..f681948 100644 --- a/app/Http/Controllers/ChampionController.php +++ b/app/Http/Controllers/ChampionController.php @@ -51,9 +51,13 @@ 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()); - }); + $splashColor = Cache::remember( + 'championSplashColorCache' . $champion->slug, + 60 * 60 * 24, + function () use ($champion) { + return getAverageColorFromImageUrl($champion->getChampionImageAttribute()); + } + ); $champion->splash_color = $splashColor; diff --git a/resources/js/lane-filter.js b/resources/js/lane-filter.js new file mode 100644 index 0000000..4b2f72b --- /dev/null +++ b/resources/js/lane-filter.js @@ -0,0 +1,35 @@ +document.addEventListener('DOMContentLoaded', function () { + const laneFilters = document.querySelectorAll('.lane-filter'); + const championDivs = document.querySelectorAll('.champ-card'); + + laneFilters.forEach((filter) => { + filter.addEventListener('click', function () { + const selectedLane = filter.getAttribute('data-lane'); + + if (filter.classList.contains('opacity-100')) { + // If the filter is already active, unselect it and show all + championDivs.forEach((championDiv) => { + championDiv.style.display = 'block'; + }); + filter.classList.remove('opacity-100'); + filter.classList.add('opacity-40'); + } else { + // If the filter is not active, activate it and filter champions + laneFilters.forEach((otherFilter) => { + otherFilter.classList.remove('opacity-100'); + otherFilter.classList.add('opacity-40'); + }); + filter.classList.remove('opacity-40'); + filter.classList.add('opacity-100'); + + championDivs.forEach((championDiv) => { + if (selectedLane === 'All' || championDiv.classList.contains('POS-' + selectedLane)) { + championDiv.style.display = 'block'; + } else { + championDiv.style.display = 'none'; + } + }); + } + }); + }); +}); diff --git a/resources/views/champions/index.blade.php b/resources/views/champions/index.blade.php index 93a57b6..d574cdf 100644 --- a/resources/views/champions/index.blade.php +++ b/resources/views/champions/index.blade.php @@ -42,6 +42,7 @@ @vite('resources/css/app.css') @vite('resources/js/app.js') + @vite('resources/js/lane-filter.js') diff --git a/resources/views/components/champions/lane-selector.blade.php b/resources/views/components/champions/lane-selector.blade.php new file mode 100644 index 0000000..e1d1e6f --- /dev/null +++ b/resources/views/components/champions/lane-selector.blade.php @@ -0,0 +1,19 @@ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
diff --git a/resources/views/components/champions/list_all.blade.php b/resources/views/components/champions/list_all.blade.php index 923e338..df9887f 100644 --- a/resources/views/components/champions/list_all.blade.php +++ b/resources/views/components/champions/list_all.blade.php @@ -3,21 +3,22 @@ /** @var App\Models\ChampionRole $roles */ ?> - -

Champions

+
+ +
@foreach($champions as $key => $champion)
+ class="champ-card 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 @foreach($roles[$key]->roles as $lane)POS-{{$lane}}@endforeach">