Update opening animation

src/CraftSharp/CraftSharp.csproj

@@ -32,6 +32,7 @@
 		<PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.1.4.1" />
 		<PackageReference Include="Microsoft.Extensions.Localization" Version="7.0.0" />
 		<PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.17.0" />
+		<PackageReference Include="System.Linq.Dynamic.Core" Version="1.2.24" />
 	</ItemGroup>
 
 	<ItemGroup>

src/CraftSharp/Factories/ItemFactory.cs

@@ -5,7 +5,7 @@ namespace CraftSharp.Factories
     public static class ItemFactory
     {
 
-        public static Item GetRandomItem(Item[] items)
+        public static Item GetRandomItem(List<Item> items)
         {
             Random rnd = new Random();
             int idx = rnd.Next(items.Count());

src/CraftSharp/Pages/Index.razor

@@ -34,5 +34,3 @@
         <p>Vous n'etes pas connecté</p>
     </NotAuthorized>
 </AuthorizeView>
-
-<SurveyPrompt Title="How is Blazor working for you?" />

src/CraftSharp/Pages/Opening.razor

@@ -1,3 +1,23 @@
-<h3>Opening</h3>
+@page "/opening"
+
+
+<h3>Opening</h3>
+
+<div class="openingPanel">
+    <img src="/Images/chestBottom.png" class="chest chestOpenBottom @openAnim" />
+    <img src="/Images/chest.png" class="chest chestOpen @openAnim" />
+    <img src="/Images/inventory_icon.png" class="chest chestClose @closeAnim" />
+
+    @if (randomItem is not null)
+    {
+        <div class="item @itemAnim" style="opacity: @itemOpacity">
+            <img src="data:image/png;base64, @(randomItem.ImageBase64)" title="@randomItem.DisplayName" alt="@randomItem.DisplayName" style="min-width: 128px; max-width: 128px" />
+            <p class="itemName">@randomItem.DisplayName</p>
+        </div>
+    }
+
+    <button class="button openBtn" @onclick="selectRandom">OUVRIR</button>
+</div>
+
 
 

src/CraftSharp/Pages/Opening.razor.cs

@@ -1,6 +1,68 @@
-namespace CraftSharp.Pages
+using CraftSharp.Factories;
+using CraftSharp.Models;
+using CraftSharp.Services;
+using Microsoft.AspNetCore.Components;
+
+namespace CraftSharp.Pages
 {
     public partial class Opening
     {
+        public Item randomItem;
+
+        string closeAnim = "";
+        string openAnim = "";
+        string itemAnim = "";
+
+        bool canOpen = true;
+
+        int itemOpacity = 0;
+
+        [Inject]
+        public IDataService DataService { get; set; }
+
+        int totalItem;
+        List<Item> items;
+
+        protected override async Task OnInitializedAsync()
+        {
+            totalItem = await DataService.Count();
+
+            items = await DataService.List(0, totalItem);
+        }
+
+        async void selectRandom()
+        {
+
+            if (canOpen)
+            {
+                randomItem = ItemFactory.GetRandomItem(items);
+                Console.WriteLine(randomItem.Name);
+                openingAnimation();
+            }
+
+        }
+
+        async void openingAnimation()
+        {
+            itemOpacity = 0;
+            canOpen = false;
+            openAnim = "chestAppear";
+            closeAnim = "chestDisppear";
+            StateHasChanged();
+
+            await Task.Delay(200);
+            itemAnim = "itemShow";
+            StateHasChanged();
+
+            await Task.Delay(2000);
+            openAnim = "chestDisppear";
+            closeAnim = "chestAppear";
+            itemAnim = "itemIdle";
+            itemOpacity = 1;
+            canOpen = true;
+            StateHasChanged();
+
+
+        }
     }
 }

src/CraftSharp/Pages/Opening.razor.css

@@ -0,0 +1,134 @@
+@keyframes Appear{
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes Disappear{
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes itemShow {
+    from {
+        opacity: 0;
+        transform: translateY(250px);
+    }
+
+    to {
+        opacity: 5;
+        transform: translateY(0px);
+    }
+}
+
+@keyframes itemIdle {
+    0% {
+        transform: translatey(0px);
+    }
+
+    50% {
+        transform: translatey(-10px);
+    }
+
+    100% {
+        transform: translatey(0px);
+    }
+}
+
+.chestAppear {
+    animation: Appear .2s ease 0s 1 normal forwards;
+}
+
+.chestDisppear {
+    animation: Disappear .2s ease 0s 1 normal forwards;
+}
+
+.itemShow {
+    animation: itemShow 1s ease 0s 1 normal forwards;
+}
+
+.itemIdle {
+    animation: itemIdle 1.5s ease 0s infinite normal forwards;
+}
+
+.openingPanel{
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+
+}
+
+.chest {
+    width: 500px;
+    height: 500px;
+    z-index: 3;
+    position: absolute;
+    pointer-events: none;
+}
+
+.chestOpen {
+    opacity: 0;
+    z-index: 3;
+}
+
+.chestOpenBottom {
+    opacity: 0;
+    z-index:5;
+}
+
+.button {
+    width: 11rem;
+    text-decoration: none;
+    text-align: center;
+    color: white;
+    cursor: pointer;
+    background: url('Images/btn1.png') center center/contain no-repeat;
+    background-size: 100% 100%;
+    font-family: SilkscreenNormal;
+    line-height: 26px;
+    padding-top: 6px;
+    font-family: Minecraft;
+}
+
+.button:hover {
+    background: url('Images/btn2.png')center center/contain no-repeat;
+    background-size: 100% 100%;
+}
+
+.openBtn {
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+    width: 400px;
+}
+
+.item {
+    opacity: 0;
+    z-index: 4;
+    width: 128px;
+    height: 128px;
+    border: 1px solid;
+    overflow: hidden;
+    position: absolute;
+}
+
+
+
+.itemName {
+    position: absolute;
+    top: 0;
+    color: white;
+    text-align: center;
+    background-color: rgba(0, 0, 0, .4);
+    width: 128px;
+    font-size: .75em;
+}
+

src/CraftSharp/Shared/CraftLayout.razor.css

@@ -1,7 +1,8 @@
 .bedrock_footer{
     width: 100%;
     position: absolute;
-    bottom: 0
+    bottom: 0;
+    pointer-events:none;
 }
 
 .bedrock_footer_img {

src/CraftSharp/Shared/HeaderLayout.razor

@@ -17,7 +17,7 @@
 
                      
                     <li class="nav-item">
-                        <NavLink class="nav-link" href="counter">
+                        <NavLink class="nav-link" href="list">
                             <span class="topbar_item">
                                 <img src="/Images/shop_icon.png" class="topbar_itemimg"/> @Localizer["Shop"]
                             </span>
@@ -29,7 +29,7 @@
                      </span>
 
                     <li class="nav-item">
-                        <NavLink class="nav-link" href="fetchdata">
+                        <NavLink class="nav-link" href="opening">
                             <span class="topbar_item">
                                 <img src="/Images/opening_icon.png" class="topbar_itemimg"/> @Localizer["Opening"]
                             </span>

src/CraftSharp/Shared/HeaderLayout.razor.css

@@ -92,10 +92,10 @@ nav-link {
     font-family: Minecraft;
 }
 
-    .button:hover {
-        background: url('Images/btn2.png')center center/contain no-repeat;
-        background-size: 100% 100%;
-    }
+.button:hover {
+    background: url('Images/btn2.png')center center/contain no-repeat;
+    background-size: 100% 100%;
+}
 
 .nav-item {
     font-size: 1.1rem;