Modified LeaderboardService to return the user's level_id much easier! ( implementation code provided ) #72

Supernova3339 · 2024-04-07T02:43:20Z

Supernova3339
Apr 7, 2024

<?php

namespace App\Services;

use Illuminate\Contracts\Pagination\LengthAwarePaginator;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\Collection;
use LevelUp\Experience\Models\Experience;

class LeaderboardService
{
    private mixed $userModel;

    public function __construct()
    {
        $this->userModel = config(key: 'level-up.user.model');
    }

    public function generate(bool $paginate = false, ?int $limit = null): array|Collection|LengthAwarePaginator
    {
        return $this->userModel::query()
            ->with(relations: ['experience', 'level'])
            ->select('users.*')
            ->leftJoin('experiences', 'users.id', '=', 'experiences.user_id')
            ->orderByDesc('experiences.level_id')
            ->orderByDesc('experiences.experience_points')
            ->take($limit)
            ->when($paginate, fn (Builder $query) => $query->paginate(), fn (Builder $query) => $query->get())
            ->each(function ($user) {
                $user->level_id = optional($user->experience)->level_id ?? 1;
            });
    }
}

adding this into my personal project, so here's the code if you want an already done implementation ( Livewire 3 )

Livewire\Leaderboard.php

<?php

namespace App\Livewire;

use App\Models\User;
use Filament\Notifications\Notification;
use Illuminate\Support\Facades\Auth;
use LevelUp\Experience\Models\Achievement;
use Livewire\Component;
use App\Services\LeaderboardService as LLeaderboard;

class Leaderboard extends Component
{
    private $leaderboard;
    public $topThree;
    public $otherUsers;
    public $totalUsers;
    public $results;
    public $numResults = 10; // Number of users to load at once
    public $finished = false; // Flag to determine if all users have been loaded

    protected $listeners = ['leaderboardUpdated' => '$refresh'];

    public function mount()
    {
        $leaderboardService = new LLeaderboard();
        $this->leaderboard = $leaderboardService->generate();
        $this->totalUsers = $this->leaderboard->count();
        $this->topThree = $this->leaderboard->take(3);
        $this->otherUsers = $this->leaderboard->skip(3)->take($this->numResults);
    }

    public function render()
    {
        return view('livewire.leaderboard');
    }

    public function loadMore()
    {
        $this->results += $this->numResults;

        $leaderboardService = new LLeaderboard();
        $leaderboard = $leaderboardService->generate();
        $totalUsers = $leaderboard->count();

        $newUsers = $leaderboard->skip($this->results + 3)
            ->take($this->numResults);

        // Appending new users to otherUsers property
        $this->otherUsers = $this->otherUsers->concat($newUsers);

        if (($this->results + 3) >= $totalUsers) {
            $this->finished = true;
        }
    }

    public function updatedOtherUsers()
    {
        $this->dispatch('leaderboardUpdated');
    }
}

resources/views/livewire/leaderboard.blade.php ( alpineJS code is for infinite scrolling, remove that and loadMore function to remove it )

<div class="flex items-center justify-center" style="height: 100vh; width: 100vw;">
    <div class="h-full w-full max-w-6xl rounded-lg bg-transparent p-6">
        <h2 class="mb-8 text-center text-3xl font-bold text-gray-900 dark:text-gray-100">Leaderboard</h2>
        <div class="h-full overflow-hidden rounded-lg">
            <!-- Top 3 Grid -->
            <div class="sticky top-0 z-10 mb-6 grid grid-cols-3 gap-4">
                @foreach($topThree as $index => $user)
                    <div
                        class="flex flex-col items-center rounded-lg {{ $index == 0 ? 'bg-yellow-200  dark:bg-yellow-300' : ($index == 1 ? 'bg-gray-200 dark:bg-gray-500' : 'bg-orange-200 dark:bg-orange-400') }} p-4">
                        <img
                            src="https://www.gravatar.com/avatar/{{ md5( strtolower( trim( $user->email ) ) ) }}?d=mp&r=g"
                            alt="{{$user->name}}'s Profile Picture" class="mb-2 h-16 w-16 rounded-full"/>
                        <span
                            class="text-lg font-semibold {{ $index == 0 ? 'text-yellow-800' : ($index == 1 ? 'text-gray-800' : 'text-orange-800') }}">{{ $index + 1 }}</span>
                        <span
                            class="text-lg font-semibold {{ $index == 0 ? 'text-yellow-800' : ($index == 1 ? 'text-gray-800' : 'text-orange-800') }}">{{ $user->name }}</span>
                        <span
                            class="text-lg font-semibold {{ $index == 0 ? 'text-yellow-800' : ($index == 1 ? 'text-gray-800' : 'text-orange-800') }}">Level {{ optional($user->experience)->level_id ?? 1 }}</span>
                    </div>
                @endforeach
            </div>
            <!-- Other entries -->
            <div class="overflow-y-auto" style="max-height: calc(100vh - 275px);" wire:poll.10s>
                <div class="grid grid-cols-1 gap-4">
                    @foreach($otherUsers as $user)
                        <div
                            class="flex items-center justify-between rounded-lg bg-gray-200 p-4 border-b border-gray-200 shadow sm:rounded-lg dark:bg-gray-900/50 dark:border dark:border-gray-200/10">
                            <div class="flex items-center space-x-4">
                                <img
                                    src="https://www.gravatar.com/avatar/{{ md5( strtolower( trim( $user->email ) ) ) }}?d=mp&r=g"
                                    alt="{{$user->name}}'s Profile Picture" class="h-16 w-16 rounded-full"/>
                                <span
                                    class="text-lg text-gray-900 dark:text-gray-100">{{ $loop->iteration + 3 }}. {{ $user->name }}</span>
                            </div>
                            <span
                                class="text-lg text-gray-900 dark:text-gray-100">Level {{ optional($user->experience)->level_id ?? 1 }}</span>
                        </div>
                    @endforeach
                    @if($finished)
                        <div class="text-center text-gray-600 mt-4">No more users to load.</div>
                    @else
                        <x-ui.button rounded="md" type="blue" size="lg" wire:click="loadMore">Load More</x-ui.button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

EDIT: I made a slight mistake, fixed!

Supernova3339 · 2024-04-07T02:44:03Z

Supernova3339
Apr 7, 2024
Author

If a user doesn't have an entry under experiences, it defaults to Level 1

0 replies

cjmellor · 2024-04-08T01:16:57Z

cjmellor
Apr 8, 2024
Maintainer

Looks good man. What are you building?

1 reply

Supernova3339 Apr 8, 2024
Author

Thanks for the question! I am building gamified bookmarking. Has a few things that aren't from this package, but hey whatever helps, helps! ( achievements, quests, leveling, etc )

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Modified LeaderboardService to return the user's level_id much easier! ( implementation code provided ) #72

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Modified LeaderboardService to return the user's level_id much easier! ( implementation code provided ) #72

Uh oh!

Uh oh!

Supernova3339 Apr 7, 2024

Replies: 2 comments · 1 reply

Uh oh!

Supernova3339 Apr 7, 2024 Author

Uh oh!

Uh oh!

cjmellor Apr 8, 2024 Maintainer

Uh oh!

Supernova3339 Apr 8, 2024 Author

Supernova3339
Apr 7, 2024

Replies: 2 comments 1 reply

Supernova3339
Apr 7, 2024
Author

cjmellor
Apr 8, 2024
Maintainer

Supernova3339 Apr 8, 2024
Author