From f8963bb662054afb520886c459aacf22d54c8dd4 Mon Sep 17 00:00:00 2001
From: "emre.kartal" <emre.kartal@etu.uca.fr>
Date: Sat, 10 Dec 2022 08:45:48 +0100
Subject: [PATCH] Realization of the "Craft Table" page (it works)

---
 src/CraftSharp/Components/Crafting.razor      | 35 +++++++++----------
 src/CraftSharp/Components/Crafting.razor.cs   |  3 --
 src/CraftSharp/Components/Crafting.razor.css  | 16 ++++++---
 src/CraftSharp/Components/CraftingItem.razor  |  3 +-
 .../Components/CraftingItem.razor.css         | 13 +++++++
 src/CraftSharp/Pages/Crafting.razor           |  5 ---
 src/CraftSharp/Pages/TableDeCraft.razor       |  8 +++++
 ...rafting.razor.cs => TableDeCraft.razor.cs} |  2 +-
 src/CraftSharp/Shared/HeaderLayout.razor      |  4 +--
 9 files changed, 55 insertions(+), 34 deletions(-)
 delete mode 100644 src/CraftSharp/Pages/Crafting.razor
 create mode 100644 src/CraftSharp/Pages/TableDeCraft.razor
 rename src/CraftSharp/Pages/{Crafting.razor.cs => TableDeCraft.razor.cs} (91%)

diff --git a/src/CraftSharp/Components/Crafting.razor b/src/CraftSharp/Components/Crafting.razor
index 378f220..fb647db 100644
--- a/src/CraftSharp/Components/Crafting.razor
+++ b/src/CraftSharp/Components/Crafting.razor
@@ -1,23 +1,7 @@
 <CascadingValue Value="@this">
     <div class="container">
-        <div class="row">
-            <div class="col-6">
-                
-                <div>Available items:</div>
-                <div>
-                    <div class="css-grid">
-                        <CascadingValue Value="@this">
-                        @foreach (var item in Items)
-                        {
-                            <CraftingItem Item="item" NoDrop="true"/>
-                        }
-                        </CascadingValue>
-                    </div>
-                </div>
-
-            </div>
-
-            <div class="col-6">
+        <div class="body">
+            <div class="row">
                 <div>Recipe</div>
                 
                 <div>
@@ -40,6 +24,21 @@
                     <CraftingItem Item="RecipeResult"/>
                 </div>
             </div>
+            <div >
+                
+                <div>Available items:</div>
+                <div class="col-12">
+                    <div class="css-grid">
+                        
+                        @foreach (var item in Items)
+                        {
+                            <CraftingItem Item="item" NoDrop="true"/>
+                        }
+                    </div>
+                </div>
+
+            </div>
+
 
             <div class="col-12">
                 <div>Actions</div>
diff --git a/src/CraftSharp/Components/Crafting.razor.cs b/src/CraftSharp/Components/Crafting.razor.cs
index 3fc4f9a..c8517d6 100644
--- a/src/CraftSharp/Components/Crafting.razor.cs
+++ b/src/CraftSharp/Components/Crafting.razor.cs
@@ -10,9 +10,6 @@ namespace CraftSharp.Components
     {
         private Item _recipeResult;
 
-        [CascadingParameter]
-        public Crafting Parent { get; set; }
-
         public Crafting()
         {
             Actions = new ObservableCollection<CraftingAction>();
diff --git a/src/CraftSharp/Components/Crafting.razor.css b/src/CraftSharp/Components/Crafting.razor.css
index 1c0cb8b..768b97b 100644
--- a/src/CraftSharp/Components/Crafting.razor.css
+++ b/src/CraftSharp/Components/Crafting.razor.css
@@ -1,15 +1,17 @@
 .css-grid {
-    grid-template-columns: repeat(4,minmax(0,1fr));
+    grid-template-columns: repeat(10,minmax(0,1fr));
     gap: 10px;
     display: grid;
-    width: 286px;
+    height: 500px;
+    overflow: scroll;
+    border: 1px solid black;
 }
 
 .css-recipe {
     grid-template-columns: repeat(3,minmax(0,1fr));
-    gap: 10px;
+    gap: 20px;
     display: grid;
-    width: 212px;
+    width: 312px;
 }
 
 .actions {
@@ -17,3 +19,9 @@
     height: 250px;
     overflow: scroll;
 }
+
+.body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
diff --git a/src/CraftSharp/Components/CraftingItem.razor b/src/CraftSharp/Components/CraftingItem.razor
index 450dfc5..0f3ab24 100644
--- a/src/CraftSharp/Components/CraftingItem.razor
+++ b/src/CraftSharp/Components/CraftingItem.razor
@@ -11,6 +11,7 @@
 
     @if (Item != null)
     {
-        @Item.DisplayName
+        <img src="data:image/png;base64, @(Item.ImageBase64)" title="@Item.DisplayName" alt="@Item.DisplayName" style="min-width: 64px; max-width: 64px" />
+        <p>@Item.DisplayName</p>
     }
 </div>
\ No newline at end of file
diff --git a/src/CraftSharp/Components/CraftingItem.razor.css b/src/CraftSharp/Components/CraftingItem.razor.css
index d6f5ec3..f1f299f 100644
--- a/src/CraftSharp/Components/CraftingItem.razor.css
+++ b/src/CraftSharp/Components/CraftingItem.razor.css
@@ -3,4 +3,17 @@
     height: 64px;
     border: 1px solid;
     overflow: hidden;
+    position: relative;
+}
+
+
+
+p {
+    position: absolute;
+    top: 0;
+    color: white;
+    text-align: center;
+    background-color: rgba(0, 0, 0, .4);
+    width: 64px;
+    font-size: .75em;
 }
diff --git a/src/CraftSharp/Pages/Crafting.razor b/src/CraftSharp/Pages/Crafting.razor
deleted file mode 100644
index 95529a1..0000000
--- a/src/CraftSharp/Pages/Crafting.razor
+++ /dev/null
@@ -1,5 +0,0 @@
-@page "/Crafting"
-
-<div>
-    <Crafting Items="Items" Recipes="Recipes" />
-</div>
\ No newline at end of file
diff --git a/src/CraftSharp/Pages/TableDeCraft.razor b/src/CraftSharp/Pages/TableDeCraft.razor
new file mode 100644
index 0000000..e05d885
--- /dev/null
+++ b/src/CraftSharp/Pages/TableDeCraft.razor
@@ -0,0 +1,8 @@
+@page "/tabledecraft"
+@using CraftSharp.Components
+
+<h1>Table de craft</h1>
+
+<div>
+    <Crafting Items="Items" Recipes="Recipes" />
+</div>
\ No newline at end of file
diff --git a/src/CraftSharp/Pages/Crafting.razor.cs b/src/CraftSharp/Pages/TableDeCraft.razor.cs
similarity index 91%
rename from src/CraftSharp/Pages/Crafting.razor.cs
rename to src/CraftSharp/Pages/TableDeCraft.razor.cs
index 0ce2f97..c12dc0a 100644
--- a/src/CraftSharp/Pages/Crafting.razor.cs
+++ b/src/CraftSharp/Pages/TableDeCraft.razor.cs
@@ -5,7 +5,7 @@ using Microsoft.AspNetCore.Components;
 
 namespace CraftSharp.Pages
 {
-    public partial class Crafting
+    public partial class TableDeCraft
     {
         [Inject]
         public IDataService DataService { get; set; }
diff --git a/src/CraftSharp/Shared/HeaderLayout.razor b/src/CraftSharp/Shared/HeaderLayout.razor
index 87dc25b..9251b24 100644
--- a/src/CraftSharp/Shared/HeaderLayout.razor
+++ b/src/CraftSharp/Shared/HeaderLayout.razor
@@ -32,8 +32,8 @@
                     </NavLink>
                 </li>
                 <li class="nav-item">
-                    <NavLink class="nav-link" href="Crafting">
-                        <span class="oi oi-list-rich"></span> Table de craft
+                    <NavLink class="nav-link" href="Tabledecraft">
+                        <span class="oi oi-vertical-align-top"></span> Crafter
                     </NavLink>
                 </li>
             </ul>