Implement shop anim

src/data/common.css

@@ -40,13 +40,17 @@
 }
 
 .reroll {
-    flex-direction: column;
-    margin: 2vmin;
+    height: 18vmin;
     cursor: pointer;
     user-select: none;
     transition-duration: 0s;
 }
 
+.reroll img {
+    height: 100%;
+    transform: scale(1.5) translateY(-18%);
+}
+
 .startStream {
     height: 16vmin;
     cursor: pointer;

src/data/projEntry.tsx

@@ -27,6 +27,8 @@ import { createParticles } from "features/particles/particles";
 import { render } from "util/vue";
 import { globalBus } from "game/events";
 import victoryParticles from "./victory.json";
+import shopStill from "../../public/shop1.png";
+import shopGif from "../../public/shop.gif";
 
 export const characters: Record<string, CharacterInfo> = {
     // Tier 1
@@ -257,6 +259,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
         }[]
     >([]);
     const frozen = ref<number[]>([]);
+    const showRefreshAnim = ref<boolean>(false);
 
     const battle = ref<{
         team: Character[];
@@ -681,10 +684,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                                 }
                             }}
                         >
-                            <span class="material-icons" style="font-size: 8vmin">
-                                casino
-                            </span>
-                            <span style="font-size: 2vmin">Roll</span>
+                            <img src={showRefreshAnim.value ? shopGif : shopStill} />
                         </div>
                         {shop.value.map((item, i) => (
                             <CharacterSlot
@@ -774,7 +774,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
         playClicked,
         prepareMove,
         particles,
-        queue
+        queue,
+        showRefreshAnim
     };
 });
 

src/data/socket.tsx

@@ -131,9 +131,12 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
             presence: characters[item].initialPresence,
             exp: 1
         }));
+        main.frozen.value = main.frozen.value.map((_, i) => i);
         setTimeout(() => {
             shop.forEach((_, i) => poof(`shop-char-${i}`));
         }, 0);
+        main.showRefreshAnim.value = true;
+        setTimeout(() => (main.showRefreshAnim.value = false), 500);
     });
     socket.on("reroll", shop => {
         main.gold.value--;
@@ -147,6 +150,8 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
         setTimeout(() => {
             shop.forEach((_, i) => poof(`shop-char-${i}`));
         }, 0);
+        main.showRefreshAnim.value = true;
+        setTimeout(() => (main.showRefreshAnim.value = false), 500);
     });
     socket.on("buy", (shopIndex, teamIndex, char) => {
         main.team.value[teamIndex] = char;