Implement freezing

src/data/CharacterSlot.vue

@@ -79,6 +79,7 @@
                 <img :src="level2_2" v-if="character.exp === 5" />
                 <img :src="level3" v-if="character.exp === 6" />
             </span>
+            <div v-if="frozen" class="frozen" />
             <Node v-if="id" :id="id" />
         </div>
     </Tooltip>
@@ -109,6 +110,7 @@ const props = defineProps<{
     isDragging?: boolean;
     selected?: Character | null;
     shake?: boolean;
+    frozen?: boolean;
 }>();
 
 const dragging = ref(false);
@@ -278,6 +280,17 @@ watchEffect(() => {
     color: var(--feature-foreground);
 }
 
+.frozen {
+    position: absolute;
+    background: skyblue;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.5;
+    transform: rotate(45deg);
+}
+
 @keyframes bouncingMoveIndicator {
     0% {
         transform: translateX(-50%) rotate(180deg) translateY(0%);

src/data/projEntry.tsx

@@ -23,7 +23,6 @@ import { createReset } from "features/reset";
 import settings from "game/settings";
 import type { AbilityTypes, CharacterInfo, Character, BattleOutcome } from "./types";
 import { formatWhole } from "util/bignum";
-import particles from "./particle.json";
 import { createParticles } from "features/particles/particles";
 import { render } from "util/vue";
 
@@ -132,6 +131,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
             target?: Character;
         }[]
     >([]);
+    const frozen = ref<number[]>([]);
 
     const battle = ref<{
         team: Character[];
@@ -183,6 +183,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
             showingOutcome.value = false;
             playClicked.value = false;
             queue.value = [];
+            frozen.value = [];
         }
     }));
 
@@ -507,6 +508,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                         {shop.value.map((item, i) => (
                             <CharacterSlot
                                 id={`shop-char-${i}`}
+                                frozen={frozen.value.includes(i)}
                                 character={item == null ? undefined : item}
                                 isSelected={selectedShopItem.value === i}
                                 isShop={true}
@@ -587,6 +589,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
         outcome,
         reset,
         battle,
+        frozen,
         playClicked,
         prepareMove,
         particles

src/data/socket.tsx

@@ -143,6 +143,7 @@ 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);
@@ -198,6 +199,13 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
         main.team.value[index] = null;
         poof(`team-char-${index}`);
     });
+    socket.on("freeze", index => {
+        if (main.frozen.value.includes(index)) {
+            main.frozen.value = main.frozen.value.filter(m => m !== index);
+        } else {
+            main.frozen.value.push(index);
+        }
+    });
 }
 
 declare module "game/settings" {