From 1f21598656290e1adeba3b0acc1e6bf3da499e0e Mon Sep 17 00:00:00 2001 From: "arthur.valin" Date: Mon, 26 Dec 2022 19:57:52 +0100 Subject: [PATCH] Update opening animation --- src/CraftSharp/CraftSharp.csproj | 1 + src/CraftSharp/Factories/ItemFactory.cs | 2 +- src/CraftSharp/Pages/Index.razor | 2 - src/CraftSharp/Pages/Opening.razor | 22 ++- src/CraftSharp/Pages/Opening.razor.cs | 64 ++++++++- src/CraftSharp/Pages/Opening.razor.css | 134 ++++++++++++++++++ src/CraftSharp/Shared/CraftLayout.razor.css | 3 +- src/CraftSharp/Shared/HeaderLayout.razor | 4 +- src/CraftSharp/Shared/HeaderLayout.razor.css | 8 +- src/CraftSharp/wwwroot/Images/chest.png | Bin 0 -> 13782 bytes src/CraftSharp/wwwroot/Images/chestBottom.png | Bin 0 -> 10334 bytes 11 files changed, 228 insertions(+), 12 deletions(-) create mode 100644 src/CraftSharp/Pages/Opening.razor.css create mode 100644 src/CraftSharp/wwwroot/Images/chest.png create mode 100644 src/CraftSharp/wwwroot/Images/chestBottom.png diff --git a/src/CraftSharp/CraftSharp.csproj b/src/CraftSharp/CraftSharp.csproj index 12e1c93..c547565 100644 --- a/src/CraftSharp/CraftSharp.csproj +++ b/src/CraftSharp/CraftSharp.csproj @@ -32,6 +32,7 @@ + diff --git a/src/CraftSharp/Factories/ItemFactory.cs b/src/CraftSharp/Factories/ItemFactory.cs index 7a9e531..e1ddc63 100644 --- a/src/CraftSharp/Factories/ItemFactory.cs +++ b/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 items) { Random rnd = new Random(); int idx = rnd.Next(items.Count()); diff --git a/src/CraftSharp/Pages/Index.razor b/src/CraftSharp/Pages/Index.razor index 131823e..5570bf5 100644 --- a/src/CraftSharp/Pages/Index.razor +++ b/src/CraftSharp/Pages/Index.razor @@ -34,5 +34,3 @@

Vous n'etes pas connecté

- - diff --git a/src/CraftSharp/Pages/Opening.razor b/src/CraftSharp/Pages/Opening.razor index 8659a0e..796c858 100644 --- a/src/CraftSharp/Pages/Opening.razor +++ b/src/CraftSharp/Pages/Opening.razor @@ -1,3 +1,23 @@ -

Opening

+@page "/opening" + + +

Opening

+ +
+ + + + + @if (randomItem is not null) + { +
+ @randomItem.DisplayName +

@randomItem.DisplayName

+
+ } + + +
+ diff --git a/src/CraftSharp/Pages/Opening.razor.cs b/src/CraftSharp/Pages/Opening.razor.cs index 24124bd..d400b6b 100644 --- a/src/CraftSharp/Pages/Opening.razor.cs +++ b/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 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(); + + + } } } diff --git a/src/CraftSharp/Pages/Opening.razor.css b/src/CraftSharp/Pages/Opening.razor.css new file mode 100644 index 0000000..19733b4 --- /dev/null +++ b/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; +} + diff --git a/src/CraftSharp/Shared/CraftLayout.razor.css b/src/CraftSharp/Shared/CraftLayout.razor.css index 62dcb13..ecd2338 100644 --- a/src/CraftSharp/Shared/CraftLayout.razor.css +++ b/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 { diff --git a/src/CraftSharp/Shared/HeaderLayout.razor b/src/CraftSharp/Shared/HeaderLayout.razor index 2a435f1..a014692 100644 --- a/src/CraftSharp/Shared/HeaderLayout.razor +++ b/src/CraftSharp/Shared/HeaderLayout.razor @@ -17,7 +17,7 @@