Pass filters from parent component

We need to constantly recalculate these which wasn't happening in the child component
lorgan3 · Jul 9, 2024 · ffa1174 · ffa1174
1 parent ef3d004
commit ffa1174
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/src/components/molecules/SpellSlot.vue b/src/components/molecules/SpellSlot.vue
@@ -1,20 +1,15 @@
 <script setup lang="ts">
 import { Spell } from "../../data/spells";
-import { Manager } from "../../data/network/manager";
 import { ELEMENT_COLOR_MAP } from "../../graphics/elements";
-import { Element } from "../../data/spells/types";
 
 const SPRITES_PER_ROW = 5;
 
-const { spell, animated } = defineProps<{
+const { spell, animated, element1Filter, element2Filter } = defineProps<{
   spell: Spell;
   animated?: boolean;
+  element1Filter: string;
+  element2Filter: string;
 }>();
-
-const getElementFilter = (element: Element) =>
-  `brightness(${
-    0.1 + Math.min(1, Manager.instance.getElementValue(element) / 1.3)
-  })`;
 </script>
 
 <template>
@@ -37,7 +32,7 @@ const getElementFilter = (element: Element) =>
       :style="{
         '--dash-offset': 0,
         stroke: ELEMENT_COLOR_MAP[spell.elements[0]],
-        filter: getElementFilter(spell.elements[0]),
+        filter: element1Filter,
       }"
       x="2px"
       y="2px"
@@ -50,7 +45,7 @@ const getElementFilter = (element: Element) =>
       :style="{
         '--dash-offset': 1,
         stroke: ELEMENT_COLOR_MAP[spell.elements[1] || spell.elements[0]],
-        filter: getElementFilter(spell.elements[1] || spell.elements[0]),
+        filter: element2Filter,
       }"
       x="2px"
       y="2px"

diff --git a/src/components/organisms/Inventory.vue b/src/components/organisms/Inventory.vue
@@ -8,6 +8,7 @@ import { Message, MessageType } from "../../data/network/types";
 import Tooltip from "../atoms/Tooltip.vue";
 import SpellDescription from "../molecules/SpellDescription.vue";
 import SpellSlot from "../molecules/SpellSlot.vue";
+import { Element } from "../../data/spells/types";
 
 const props = defineProps<{
   isOpen: boolean;
@@ -78,6 +79,11 @@ const handleClick = (spell?: Spell) => {
     selectedSpell.value = spell;
   }
 };
+
+const getElementFilter = (element: Element) =>
+  `brightness(${
+    0.1 + Math.min(1, Manager.instance.getElementValue(element) / 1.3)
+  })`;
 </script>
 
 <template>
@@ -108,7 +114,15 @@ const handleClick = (spell?: Spell) => {
             locked: !availableList[selectedSpell.iconId],
           }"
         >
-          <SpellSlot :spell="selectedSpell" />
+          <SpellSlot
+            :spell="selectedSpell"
+            :element1Filter="getElementFilter(selectedSpell.elements[0])"
+            :element2Filter="
+              getElementFilter(
+                selectedSpell.elements[1] || selectedSpell.elements[0]
+              )
+            "
+          />
         </div>
       </Tooltip>
     </div>
@@ -128,7 +142,14 @@ const handleClick = (spell?: Spell) => {
                 }"
                 @click="handleClick(spell)"
               >
-                <SpellSlot :spell="spell" :animated="spell === selectedSpell" />
+                <SpellSlot
+                  :spell="spell"
+                  :animated="spell === selectedSpell"
+                  :element1Filter="getElementFilter(spell.elements[0])"
+                  :element2Filter="
+                    getElementFilter(spell.elements[1] || spell.elements[0])
+                  "
+                />
               </div>
             </Tooltip>
           </div>