Finished Progression Overview with edit fields in user details page.

dist/app/View/Components/Misc/Progression/CharacterProgression.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\View\Components\Misc\Progression;
+
+use App\Models\Game\CharacterData;
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class CharacterProgression extends Component
+{
+    public float $progress = 0;
+
+    public int $neededExperience;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public CharacterData $character,
+    )
+    {
+        $this->neededExperience = CharacterData::getExperienceForLevel($character->level);
+        $this->progress = (float)$character->experience / (float)$this->neededExperience ;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.misc.progression.character-progression');
+    }
+}

dist/resources/css/components/admin/tools/game-news-list-entry.scss

@@ -7,8 +7,7 @@
       @apply text-2xl font-semibold;
 
       &::after {
-        @apply block w-ful
-        l mt-2;
+        @apply block w-full mt-2;
         content: "";
         border-top: 0.1rem solid;
         border-image: linear-gradient(to right, theme('colors.indigo.600') 10%, transparent) 1;

dist/resources/views/admin/tools/game-news.blade.php

@@ -3,7 +3,7 @@
 ])
 
 <x-layouts.admin>
-    <div class="w-full p-2 md:px-16">
+    <div class="w-full p-2 md:px-16 bg-inherit">
         @foreach($newsList as $index => $news)
             <x-admin.tools.game-news-list-entry :$news :idPrefix="$index"/>
         @endforeach

dist/resources/views/admin/tools/user-details.blade.php

@@ -15,11 +15,11 @@
     use App\Models\User\PlayerData;
 
     $allowEdit = $user->can(\App\Enums\Auth\Permissions::EDIT_USERS->value);
-    $allowEdit = false;
+    $allowEdit = true;
 @endphp
 
 <x-layouts.admin>
-    <div class="w-full h-full user-details">
+    <div class="w-full user-details max-h-full bg-inherit overflow-y-auto">
         <div class="section">
             <h1>General Info</h1>
             <div class="flex gap-4 mt-4 items-center">
@@ -152,24 +152,54 @@ class="size-6"
             <div class="bg-green-400 dark:bg-green-800 p-2 rounded-md shadow-glow shadow-green-400/15 outline outline-green-700">
                 <div class="flex justify-between p-2 text-2xl font-bold ">
                     <label>Runner</label>
-                    <span class="text-yellow-500">{{ $user->playerData()->runner_faction_level }}</span>
+                    @if($allowEdit)
+                        <x-inputs.number
+                                class="w-32"
+                                id="RunnerFactionLevel"
+                                name="RunnerFactionLevel"
+                                value="{{ $user->playerData()->runner_faction_level }}"
+                        />
+                    @else
+                        <span class="text-yellow-500">{{ number_format($user->playerData()->runner_faction_level, thousands_separator: '.') }}</span>
+                    @endif
                 </div>
                 <x-misc.progression.faction-progression
                         class="p-2"
                         :current="$user->playerData()->runner_faction_experience"
                         :needed="PlayerData::getRemainingFactionExperience($user->playerData()->runner_faction_level)"
                 />
+                @foreach(Runner::cases() as $character)
+                    <x-misc.progression.character-progression
+                            class="mt-1 bg-gray-500/50 rounded-md"
+                            :allowEdit="$allowEdit"
+                            :character="$user->playerData()->characterDataForCharacter(\App\Enums\Game\Characters::from($character->value))"/>
+                @endforeach
             </div>
-            <div class="bg-red-400 dark:bg-red-800 p-2 rounded-md col-start-2 shadow-glow shadow-red-400/15 outline outline-red-900">
+            <div class="bg-red-400 dark:bg-red-800 p-2 rounded-md col-start-2 shadow-glow shadow-red-400/15 outline outline-red-900 mt-4 md:mt-0">
                 <div class="flex justify-between p-2 text-2xl font-bold ">
                     <label>Hunter</label>
-                    <span class="text-yellow-500">{{ $user->playerData()->hunter_faction_level }}</span>
+                    @if($allowEdit)
+                        <x-inputs.number
+                                class="w-32"
+                                id="HunterFactionLevel"
+                                name="RunnerFactionLevel"
+                                value="{{ $user->playerData()->hunter_faction_level }}"
+                        />
+                    @else
+                        <span class="text-yellow-500">{{ number_format($user->playerData()->hunter_faction_level, thousands_separator: '.') }}</span>
+                    @endif
                 </div>
                 <x-misc.progression.faction-progression
                         class="p-2"
                         :current="$user->playerData()->hunter_faction_experience"
                         :needed="PlayerData::getRemainingFactionExperience($user->playerData()->hunter_faction_level)"
                 />
+                @foreach(Hunter::cases() as $character)
+                    <x-misc.progression.character-progression
+                            class="mt-1 bg-gray-500/50 rounded-md"
+                            :allowEdit="$allowEdit"
+                            :character="$user->playerData()->characterDataForCharacter(\App\Enums\Game\Characters::from($character->value))"/>
+                @endforeach
             </div>
         </div>
     </div>

dist/resources/views/components/layouts/admin.blade.php

@@ -1,7 +1,7 @@
 <x-layouts.app>
-    <div class="h-screen flex flex-col">
+    <div class="h-screen flex flex-col bg-inherit">
         <x-admin.navbar class="row-span-1"/>
-        <div class="row-span-2 h-fit">
+        <div class="row-span-2 h-full bg-inherit">
             {{ $slot }}
         </div>
     </div>

dist/resources/views/components/misc/progression/character-progression.blade.php

@@ -0,0 +1,30 @@
+@props([
+    'allowEdit' => false,
+])
+
+@php
+    /** @var \App\Models\Game\CharacterData $character */
+@endphp
+
+<div {{ $attributes->merge(['class' => 'p-2']) }}>
+    <div class="flex justify-between text-xl font-bold">
+        <span>{{ $character->character->name }}</span>
+        @if($allowEdit)
+            <x-inputs.number
+                    class="w-20"
+                    id="{{ $character->character->value }}Level"
+                    name="{{ $character->character->value }}Level"
+                    value="{{ $character->level }}"
+            />
+        @else
+            <span class="text-yellow-500">{{ $character->level }}</span>
+        @endif
+    </div>
+    <div class="w-full bg-gray-800 min-h-2 mt-1">
+        <div class="bg-sky-400" style="width: {{ ($progress * 100).'%' }}">
+            <span class="text-nowrap p-2">
+                {{ number_format($character->experience, thousands_separator: '.').' | '.number_format($neededExperience, thousands_separator: '.') }}
+            </span>
+        </div>
+    </div>
+</div>

dist/resources/views/components/misc/progression/faction-progression.blade.php

@@ -6,7 +6,7 @@
 
 <div {{ $attributes->merge(['class' => 'flex gap-2']) }}>
     @for($i = 0;$i < $needed;++$i)
-        <div class="h-2 w-full {{ $i < $current ? 'bg-sky-400' : 'bg-gray-500 ' }}">
+        <div class="h-2 w-full {{ $i < $current ? 'bg-sky-400' : 'bg-gray-800 ' }}">
 
         </div>
     @endfor