Try to fix empty slot bouncing

codemonkey85 · Sep 26, 2023 · 2f14406 · 2f14406
1 parent 01da871
commit 2f14406
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 71 deletions.
diff --git a/Pkmds.Rcl/Components/BoxSlotComponent.razor b/Pkmds.Rcl/Components/BoxSlotComponent.razor
@@ -4,7 +4,7 @@
           @onclick="SetSelectedPokemon"
           Width="68px"
           Height="68px"
-          Class="d-flex align-items-center justify-center slot-fill"
+          Class="@SpriteHelper.GetSpriteCssClass(Pokemon)"
           Style="@Style">
-        <img src="@(Pokemon is { Species: > 0 } ? SpriteHelper.GetPokemonSpriteFilename(Pokemon) : null)" />
+    <img class="pkm-sprite" src="@(Pokemon is { Species: > 0 } ? SpriteHelper.GetPokemonSpriteFilename(Pokemon) : null)" />
 </MudPaper>
diff --git a/Pkmds.Rcl/Components/BoxSlotComponent.razor.css b/Pkmds.Rcl/Components/BoxSlotComponent.razor.css
diff --git a/Pkmds.Rcl/Components/PartyGrid.razor.css b/Pkmds.Rcl/Components/PartyGrid.razor.css
diff --git a/Pkmds.Rcl/Components/PartySlotComponent.razor b/Pkmds.Rcl/Components/PartySlotComponent.razor
@@ -4,7 +4,7 @@
           @onclick="SetSelectedPokemon"
           Width="68px"
           Height="68px"
-          Class="d-flex align-items-center justify-center slot-fill"
+          Class="@SpriteHelper.GetSpriteCssClass(Pokemon)"
           Style="@Style">
-        <img src="@(Pokemon is { Species: > 0 } ? SpriteHelper.GetPokemonSpriteFilename(Pokemon) : null)" />
+    <img class="pkm-sprite" src="@(Pokemon is { Species: > 0 } ? SpriteHelper.GetPokemonSpriteFilename(Pokemon) : null)" />
 </MudPaper>
diff --git a/Pkmds.Rcl/Components/PartySlotComponent.razor.css b/Pkmds.Rcl/Components/PartySlotComponent.razor.css
diff --git a/Pkmds.Rcl/SpriteHelper.cs b/Pkmds.Rcl/SpriteHelper.cs
@@ -36,4 +36,7 @@ public static string GetTypeSquareSpriteFileName(byte type) =>
 
     public static string GetTypeWideSpriteFileName(byte type) =>
         $"_content/Pkmds.Rcl/sprites/t/w/type_wide_{type:00}.png";
+
+    public static string GetSpriteCssClass(PKM? pkm) =>
+        $"d-flex align-items-center justify-center {(pkm is { Species: > 0 } ? "slot-fill" : string.Empty)}";
 }
diff --git a/Pkmds.Rcl/wwwroot/css/app.css b/Pkmds.Rcl/wwwroot/css/app.css
@@ -1,3 +1,29 @@
+pkm-sprite {
+    max-width: 68px;
+    max-height: 56px;
+    align-self: center;
+}
+
+.slot-fill :hover {
+    transform-origin: center;
+    animation: bounce 500ms linear infinite;
+    border-radius: 6px;
+}
+
+.party-grid {
+    width: 462px; /* (68 + 4 + 5) * 30 */
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-5px);
+    }
+}
+
 .loading-progress {
     position: relative;
     display: block;