Add detail game page (#41)

Reviewed-on: #41

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor

@@ -1,5 +1,6 @@
 @using Blazored.FluentValidation
 @using GameIdeas.BlazorApp.Shared.Components.CircleLoader
+@using GameIdeas.BlazorApp.Shared.Components.Select.Models
 @using GameIdeas.BlazorApp.Shared.Components.SelectSearch
 @using GameIdeas.BlazorApp.Shared.Components.Slider
 @using GameIdeas.Shared.Dto
@@ -21,16 +22,16 @@
                 <InputNumber TValue="double?" class="storage" @bind-Value=GameDto.StorageSpace />
             </div>
             <div class="input-game">
-                <div class="label">@ResourcesKey.Developers :</div>
+                <div class="label">@ResourcesKey.Developer :</div>
                 <SelectSearch TItem="DeveloperDto" Theme="Theme" GetLabel="@(i => i.Name)" QuickAdd=true
-                Items="Categories?.Developers" @bind-Values=GameDto.Developers 
-                AddItem="@(str => new DeveloperDto() { Name = str })" />
+                              Items="Categories?.Developers" ValuesChanged="HandleDeveloperChanged" 
+                              AddItem="@(str => new DeveloperDto() { Name = str })" SelectType="SelectType.Single" />
             </div>
             <div class="input-game">
-                <div class="label">@ResourcesKey.Publishers :</div>
+                <div class="label">@ResourcesKey.Publisher :</div>
                 <SelectSearch TItem="PublisherDto" Theme="Theme" GetLabel="@(i => i.Name)" QuickAdd=true
-                Items="Categories?.Publishers" @bind-Values=GameDto.Publishers
-                AddItem="@(str => new PublisherDto() { Name = str })" />
+                              Items="Categories?.Publishers" ValuesChanged="HandlePublisherChanged"
+                              AddItem="@(str => new PublisherDto() { Name = str })" SelectType="SelectType.Single" />
             </div>
         </div>
         <div class="container">

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs

@@ -75,4 +75,12 @@ public partial class GameCreationForm
             StateHasChanged();
         }
     }
+    private void HandlePublisherChanged(List<PublisherDto> pubs)
+    {
+        GameDto.Publisher = pubs.FirstOrDefault();
+    }
+    private void HandleDeveloperChanged(List<DeveloperDto> devs)
+    {
+        GameDto.Developer = devs.FirstOrDefault();
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor

@@ -1,11 +1,12 @@
 @using GameIdeas.BlazorApp.Helpers
+@using GameIdeas.BlazorApp.Shared.Components.Interest
 @using GameIdeas.BlazorApp.Shared.Constants
 @inherits GameBase
 
 <div class="row">
     <img class="icon" src="~/icon.png" />
 
-    <a class="title" href="@($"/Games/Detail/{GameDto.Id}")">@GameDto.Title</a>
+    <a class="title" href="@($"/Detail/{GameDto.Id}")">@GameDto.Title</a>
 
     <span class="release-date">@(GameDto.ReleaseDate?.ToShortDateString() ?? @ResourcesKey.Unknown)</span>
 
@@ -30,12 +31,7 @@
 
     <span class="storage">@GameHelper.GetFormatedStorageSpace(GameDto.StorageSpace)</span>
 
-    <div class="interest">
-        <span class="value" style="@($"color: var({GameHelper.GetInterestColor(GameDto.Interest, 5)})")">
-            @GameDto.Interest
-        </span>
-        <span class="max-value">/5</span>
-    </div>
+    <Interest Value="GameDto.Interest" />
 
     <button class="detail">@Icons.Triangle</button>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css

@@ -11,7 +11,7 @@
     overflow: hidden;
 }
 
-.row * {
+.row > * {
     max-height: 64px;
     height: fit-content;
     padding: 6px 0;
@@ -39,7 +39,7 @@
     background: var(--input-selected);
 }
 
-.release-date, .storage, .max-value {   
+.release-date, .storage {   
     color: rgb(184, 184, 184);
 }
 
@@ -50,7 +50,7 @@
     background: rgb(255, 255, 255, 0.2);
     border-radius: var(--small-radius);
     align-content: center;
-}
+} 
 
 .platforms, .tags {
     display: flex;
@@ -80,16 +80,6 @@
     fill: var(--white);
 }
 
-.value {
-    font-size: 24px;
-    font-weight: bold;
-}
-
-.max-value {
-    position: absolute;
-    transform: translate(2px, 10px);
-}
-
 @media screen and (max-width: 1000px) {
     .row {
         grid-template-columns: 48px 3fr 2fr 3fr 30px 30px;