Skip to content

Commit

Permalink
Render selected spell if there is one
Browse files Browse the repository at this point in the history
  • Loading branch information
@lorgan3
lorgan3 committed Jul 9, 2024
1 parent 6c6b5a9 commit ef3d004
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 106 deletions.
94 changes: 94 additions & 0 deletions src/components/molecules/SpellSlot.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<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<{
spell: Spell;
animated?: boolean;
}>();
const getElementFilter = (element: Element) =>
`brightness(${
0.1 + Math.min(1, Manager.instance.getElementValue(element) / 1.3)
})`;
</script>

<template>
<div
:style="{
'--row': -Math.floor(spell.iconId / SPRITES_PER_ROW),
'--column': -(spell.iconId % SPRITES_PER_ROW),
}"
class="spell-icon"
></div>
<svg
width="50px"
height="50px"
:class="{
border: true,
animated,
}"
>
<rect
:style="{
'--dash-offset': 0,
stroke: ELEMENT_COLOR_MAP[spell.elements[0]],
filter: getElementFilter(spell.elements[0]),
}"
x="2px"
y="2px"
width="46px"
height="46px"
rx="3px"
ry="3px"
></rect>
<rect
:style="{
'--dash-offset': 1,
stroke: ELEMENT_COLOR_MAP[spell.elements[1] || spell.elements[0]],
filter: getElementFilter(spell.elements[1] || spell.elements[0]),
}"
x="2px"
y="2px"
width="46px"
height="46px"
rx="3px"
ry="3px"
></rect>
</svg>
</template>

<style lang="scss" scoped>
.spell-icon {
background: url("../../assets/spells.png");
background-position: left calc(var(--column, 0) * var(--size)) top
calc(var(--row, 0) * var(--size));
width: var(--size);
height: var(--size);
}
.border {
position: absolute;
rect {
fill: none;
stroke: #000;
stroke-width: 3px;
stroke-dasharray: var(--stroke-length), var(--stroke-length);
stroke-dashoffset: calc(var(--dash-offset, 0) * var(--stroke-length));
}
&.animated {
rect {
--stroke-length: calc(43.425px * 2);
stroke-dasharray: calc(var(--stroke-length) / 2),
calc(var(--stroke-length) * 3 / 2);
animation: rotateBorder 2s linear infinite;
}
}
}
</style>
125 changes: 19 additions & 106 deletions src/components/organisms/Inventory.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@ import { Manager } from "../../data/network/manager";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import { Server } from "../../data/network/server";
import { Client } from "../../data/network/client";
import { ELEMENT_COLOR_MAP } from "../../graphics/elements";
import { Message, MessageType } from "../../data/network/types";
import { Element } from "../../data/spells/types";
import Tooltip from "../atoms/Tooltip.vue";
import SpellDescription from "../molecules/SpellDescription.vue";
import SpellSlot from "../molecules/SpellSlot.vue";
const props = defineProps<{
isOpen: boolean;
Expand All @@ -28,16 +27,11 @@ const sections = {
Offense: offenseSpells,
};
const SPRITES_PER_ROW = 5;
const previewSpell = ref(Manager.instance?.selectedSpell);
const previewMultiplier = ref(1);
const selectedSpell = ref(Manager.instance?.selectedSpell);
const availableList = ref<boolean[]>([]);
const poll = () => {
if (props.isOpen) {
previewMultiplier.value = previewSpell.value?.costMultiplier?.() || 1;
const mana = Manager.instance.self.mana;
availableList.value = [];
SPELLS.forEach((spell) => {
Expand Down Expand Up @@ -80,27 +74,10 @@ const handleClick = (spell?: Spell) => {
};
Client.instance.broadcast(message);
}
}
};
const onMouseLeave = (event: Event) => {
previewSpell.value = Manager.instance.selectedSpell;
previewMultiplier.value =
Manager.instance?.selectedSpell?.costMultiplier?.() || 1;
};
const onMouseEnter = (spell?: Spell) => {
if (spell) {
previewSpell.value = spell;
previewMultiplier.value = spell.costMultiplier?.() || 1;
selectedSpell.value = spell;
}
};
const getElementFilter = (element: Element) =>
`brightness(${
0.1 + Math.min(1, Manager.instance.getElementValue(element) / 1.3)
})`;
</script>

<template>
Expand All @@ -114,15 +91,29 @@ const getElementFilter = (element: Element) =>
<div class="control crystal-ball slot"></div>
</Tooltip>
<Tooltip
v-if="!selectedSpell"
direction="center-left"
text="Right click to open spell book"
width="240px"
>
<div class="control spell-book slot"></div>
</Tooltip>
<Tooltip v-else direction="center-left">
<template v-slot:tooltip>
<SpellDescription :spell="selectedSpell"
/></template>
<div
:class="{
slot: true,
locked: !availableList[selectedSpell.iconId],
}"
>
<SpellSlot :spell="selectedSpell" />
</div>
</Tooltip>
</div>
<div :class="{ wrapper: true, isOpen: props.isOpen }">
<div class="inventory" @mouseleave="onMouseLeave">
<div class="inventory">
<template v-for="(spells, title) in sections">
<p class="title">{{ title }}</p>
<div class="grid">
Expand All @@ -136,55 +127,8 @@ const getElementFilter = (element: Element) =>
locked: !availableList[spell.iconId],
}"
@click="handleClick(spell)"
@mouseenter="onMouseEnter(spell)"
>
<div
:style="{
'--row': -Math.floor(spell.iconId / SPRITES_PER_ROW),
'--column': -(spell.iconId % SPRITES_PER_ROW),
}"
class="spell-icon"
></div>
<svg
width="50px"
height="50px"
:class="{
border: true,
animated: spell === Manager.instance?.selectedSpell,
}"
>
<rect
:style="{
'--dash-offset': 0,
stroke: ELEMENT_COLOR_MAP[spell.elements[0]],
filter: getElementFilter(spell.elements[0]),
}"
x="2px"
y="2px"
width="46px"
height="46px"
rx="3px"
ry="3px"
></rect>
<rect
:style="{
'--dash-offset': 1,
stroke:
ELEMENT_COLOR_MAP[
spell.elements[1] || spell.elements[0]
],
filter: getElementFilter(
spell.elements[1] || spell.elements[0]
),
}"
x="2px"
y="2px"
width="46px"
height="46px"
rx="3px"
ry="3px"
></rect>
</svg>
<SpellSlot :spell="spell" :animated="spell === selectedSpell" />
</div>
</Tooltip>
</div>
Expand Down Expand Up @@ -302,37 +246,6 @@ const getElementFilter = (element: Element) =>
font-size: 42px;
margin-top: 6px;
}
.spell-icon {
background: url("../../assets/spells.png");
background-position: left calc(var(--column, 0) * var(--size)) top
calc(var(--row, 0) * var(--size));
width: var(--size);
height: var(--size);
}
.border {
position: absolute;
rect {
fill: none;
stroke: #000;
stroke-width: 3px;
stroke-dasharray: var(--stroke-length), var(--stroke-length);
stroke-dashoffset: calc(
var(--dash-offset, 0) * var(--stroke-length)
);
}
&.animated {
rect {
--stroke-length: calc(43.425px * 2);
stroke-dasharray: calc(var(--stroke-length) / 2),
calc(var(--stroke-length) * 3 / 2);
animation: rotateBorder 2s linear infinite;
}
}
}
}
}
}
Expand Down

0 comments on commit ef3d004

Please sign in to comment.