diff --git a/assets/css/homepage/_profile.scss b/assets/css/homepage/_profile.scss index 9adbea1..fdfa4b5 100644 --- a/assets/css/homepage/_profile.scss +++ b/assets/css/homepage/_profile.scss @@ -427,10 +427,88 @@ } } +.profile-games__filter-wrap { + position: relative; + display: flex; + align-items: center; + margin-bottom: 4px; +} + +.profile-games__filter-icon { + position: absolute; + left: 14px; + font-size: 12px; + color: rgba(149, 207, 245, 0.4); + pointer-events: none; +} + +.profile-games__filter { + width: 100%; + background: rgba(255, 255, 255, 0.025); + border: 1px solid rgba(255, 255, 255, 0.07); + border-radius: 6px; + padding: 9px 14px 9px 36px; + font: 500 13px 'Rajdhani', sans-serif; + color: #fff; + letter-spacing: 0.5px; + transition: border-color 200ms ease, background 200ms ease; + + &::placeholder { + color: rgba(255, 255, 255, 0.3); + } + + &:focus { + outline: none; + background: rgba(255, 255, 255, 0.045); + border-color: rgba(35, 111, 135, 0.55); + } +} + .profile-games { display: flex; flex-direction: column; gap: 6px; + + &.is-filtering + .profile-games__load-more { + display: none; + } + + &.is-filtering .profile-game--hidden:not(.profile-game--filtered-out) { + display: grid; + } + + .profile-game--filtered-out { + display: none; + } + + &__load-more { + align-self: center; + margin-top: 14px; + background: rgba(35, 111, 135, 0.12); + color: rgba(149, 207, 245, 0.75); + border: 1px solid rgba(35, 111, 135, 0.3); + border-radius: 6px; + padding: 9px 20px; + font: 600 12px 'Rajdhani', sans-serif; + text-transform: uppercase; + letter-spacing: 1.5px; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 8px; + transition: background 200ms ease, border-color 200ms ease, color 200ms ease; + + i { + font-size: 11px; + opacity: 0.8; + } + + &:hover { + background: rgba(35, 111, 135, 0.22); + border-color: rgba(35, 111, 135, 0.55); + color: rgba(149, 207, 245, 1); + } + } } .profile-game { @@ -469,6 +547,10 @@ border-left-color: rgba(255, 193, 7, 0.4); opacity: 0.85; } + + &--hidden { + display: none; + } } .profile-game__badge { diff --git a/assets/js/profile.jsx b/assets/js/profile.jsx index ed5e2a8..aff4425 100644 --- a/assets/js/profile.jsx +++ b/assets/js/profile.jsx @@ -29,3 +29,28 @@ if (battleRoot) { , ); } + +const list = document.querySelector('.profile-games'); +const loadMoreBtn = document.querySelector('[data-load-more]'); +if (list && loadMoreBtn) { + const batchSize = parseInt(list.dataset.batchSize, 10) || 5; + loadMoreBtn.addEventListener('click', () => { + const hidden = list.querySelectorAll('.profile-game--hidden'); + Array.from(hidden).slice(0, batchSize).forEach((el) => el.classList.remove('profile-game--hidden')); + if (list.querySelectorAll('.profile-game--hidden').length === 0) { + loadMoreBtn.remove(); + } + }); +} + +const filterInput = document.querySelector('[data-filter]'); +if (list && filterInput) { + filterInput.addEventListener('input', () => { + const term = filterInput.value.trim().toLowerCase(); + list.classList.toggle('is-filtering', term.length > 0); + list.querySelectorAll('.profile-game').forEach((card) => { + const opp = card.querySelector('.profile-game__opponent')?.textContent.trim().toLowerCase() ?? ''; + card.classList.toggle('profile-game--filtered-out', term.length > 0 && !opp.includes(term)); + }); + }); +} diff --git a/src/Controller/ProfileController.php b/src/Controller/ProfileController.php index 16d6d14..af49ee0 100644 --- a/src/Controller/ProfileController.php +++ b/src/Controller/ProfileController.php @@ -129,7 +129,7 @@ class ProfileController extends AbstractController 'blindHits' => $bonus['totalBlindHits'], 'edgeMines' => $bonus['totalEdgeMines'], ], - 'recent' => ($recent = $this->repo->findRecentFinishedForUser($user)), + 'recent' => ($recent = $this->repo->findRecentFinishedForUser($user, 30)), 'gamesData' => array_map(function (PlayedGame $game) use ($userId, $cacheManager): array { $isRed = $game->getRed()?->getId() === $userId; $resign = $game->getResign(); diff --git a/templates/Security/profile.html.twig b/templates/Security/profile.html.twig index 5542d20..8455889 100644 --- a/templates/Security/profile.html.twig +++ b/templates/Security/profile.html.twig @@ -120,7 +120,12 @@

Recent battles

-
+
+ + +
+
{% for game in recent %} {% set is_red = game.red and game.red.id == app.user.id %} {% set my_points = is_red ? game.redPoints : game.bluePoints %} @@ -149,7 +154,7 @@ {% endif %} {% endif %} -
+
{% if is_finished %} {{ result == 'win' ? 'Win' : (result == 'loss' ? 'Loss' : 'Draw') }} @@ -181,6 +186,11 @@
{% endfor %}
+ {% if recent|length > 5 %} + + {% endif %}
{% else %}