+
{short && `HP ${shortHpDisplay} `}
{!short && (
<>
{hpLabel}
{' '}
{longHpDisplay}
+ {' '}
)}
-
+ {typeof spellsLeft === 'number' && (
+
+ {' '}
+ {' '}
+ {short && `Spells: ${spellsLeft} `}
+ {!short && (
+ <>
+ Spell Slots:
+ {' '}
+ {spellsLeft}
+ {' '}
+
+ )}
+
+ )}
);
}
diff --git a/src/components/creature/spells/SpellCasting.js b/src/components/creature/spells/SpellCasting.js
new file mode 100644
index 00000000..7a5e34ab
--- /dev/null
+++ b/src/components/creature/spells/SpellCasting.js
@@ -0,0 +1,152 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable max-len */
+import React, { useState } from 'react';
+import { capitalizeWord } from '../../../util/characterSheet';
+import Checkbox from '../../buttons/CheckBox';
+
+const slotsExpired = (slots) => slots.every((slot) => slot.used);
+
+export default function SpellCasting({
+ creature,
+ active,
+ updateCreatureSpells,
+ addSpellSlot,
+ removeSpellSlot,
+ showSpellCreator,
+}) {
+ const { spellData } = creature;
+
+ const [showSpells, setShowSpells] = useState(active || showSpellCreator);
+
+ const [isHovering, setIsHovering] = useState(false);
+ const [hoverLevel, setLevel] = useState('');
+
+ const handleMouseOver = (level) => {
+ setLevel(level);
+ setIsHovering(true);
+ };
+
+ const onClickRandom = () => {
+ setIsHovering(false);
+ setLevel('');
+ };
+
+ if (!spellData) return null;
+
+ const toggleSpells = () => {
+ setShowSpells((prevValue) => !prevValue);
+ };
+
+ if (!showSpells) {
+ return (
+
+
+
+ );
+ }
+
+ const onChangeSlot = (event, level, slotIndex) => {
+ const { checked } = event.target;
+ updateCreatureSpells(creature.id, { level, slotIndex, value: checked });
+ };
+
+ const onAddSpellSlot = (level) => {
+ addSpellSlot(creature.id, level);
+ handleMouseOver(level);
+ };
+
+ const onRemoveSpellSlot = (level) => {
+ removeSpellSlot(creature.id, level);
+ handleMouseOver(level);
+ };
+
+ return (
+
+
Spellcasting
+
+ {spellData.school && (
+
+ School:
+ {' '}
+ {capitalizeWord(spellData.school)}
+
+ )}
+ {spellData.level && (
+
+ Level:
+ {' '}
+ {spellData.level}
+
+ )}
+ {spellData.saveDC && (
+
+ Save DC:
+ {' '}
+ {spellData.saveDC}
+
+ )}
+ {spellData.modifier && (
+
+ Spell MOD:
+ {' '}
+ {spellData.modifier}
+
+ )}
+ {spellData.ability && (
+
+ Spell Class:
+ {' '}
+ {spellData.ability}
+
+ )}
+
+ {spellData.spells.map((item) => {
+ if (item.level === '0') return null;
+ const isDisabled = slotsExpired(item.slots);
+ return (
+
{}}
+ onMouseOver={() => {
+ if (isDisabled) return;
+ handleMouseOver(item.level);
+ }}
+ onClick={onClickRandom}
+ key={`Item-Level-${item.level}`}
+ style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
+ >
+
+ Level
+ {' '}
+ {item.level}
+
+ {item.slots.map((slot) => (
+
onChangeSlot(ev, item.level, slot.slotIndex)}
+ />
+ ))}
+ {isHovering && item.level === hoverLevel && !isDisabled && (
+
+
+
+
+ )}
+
+
+ );
+ })}
+
+
+
+
+
+ );
+}
diff --git a/src/components/creature/spells/SpellList.js b/src/components/creature/spells/SpellList.js
new file mode 100644
index 00000000..4078fe2c
--- /dev/null
+++ b/src/components/creature/spells/SpellList.js
@@ -0,0 +1,50 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React from 'react';
+import SpellModal from './SpellModal';
+
+export default function SpellList({
+ knownSpells,
+}) {
+ const [visible, setVisible] = React.useState(false);
+ const [spell, setSpell] = React.useState(null);
+
+ const onClose = () => {
+ setVisible(false);
+ setSpell(null);
+ };
+
+ const onOpenSpell = (currentSpell) => {
+ setVisible(true);
+ setSpell(currentSpell);
+ };
+
+ const renderModal = () => {
+ if (!spell) return null;
+ return (
+
+ );
+ };
+
+ return (
+ <>
+ {renderModal()}
+ {knownSpells.map((item, index) => (
+
+ onOpenSpell(item)}>
+
+ {item.name}
+
+
+
+ {knownSpells.length - index !== 1 && {', '}}
+
+ ))}
+
+ );
+}
diff --git a/src/components/creature/spells/SpellModal.js b/src/components/creature/spells/SpellModal.js
new file mode 100644
index 00000000..c60f7a21
--- /dev/null
+++ b/src/components/creature/spells/SpellModal.js
@@ -0,0 +1,163 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useEffect } from 'react';
+import Modal from 'react-modal';
+import { Triangle } from 'react-loader-spinner';
+import { useMediaQuery } from 'react-responsive';
+
+import DescriptionHighlight from '../DescriptionHighlight';
+import {
+ spellIcon, spellIconBackground, spellModalStyle, spellModalStyleMobile, spellModalStyleWeb,
+} from './utils';
+
+const BASE_API_URL = 'https://www.dnd5eapi.co';
+
+export default function SpellModal({
+ currentSpell,
+ visible,
+ onClose,
+}) {
+ const [loading, setLoading] = React.useState(false);
+ const [spellInfo, setSpellInfo] = React.useState(null);
+
+ const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 });
+
+ useEffect(() => {
+ setLoading(true);
+ fetch(`${BASE_API_URL}${currentSpell.url}`, { 'Content-Type': 'application/json' })
+ .then((response) => response.json())
+ .then((data) => {
+ setSpellInfo(data);
+ })
+ .catch((error) => {
+ setSpellInfo(null);
+ console.log('error', error);
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ }, [currentSpell]);
+
+ const renderSpellInfo = () => {
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+ if (!loading && !spellInfo) return
Spell not found
; // add fallback;
+ return (
+
+
+
+ {spellIcon(spellInfo.school.name)}
+
+
+ {spellInfo.name}
+
+
+
+
+
+
+ Level
+
+
+ {spellInfo.level}
+
+
+
+
+
+ Casting Time
+
+
+ {spellInfo.casting_time}
+
+
+
+
+
+ Range/Area
+
+
+ {spellInfo.range}
+
+
+
+
+ Components
+
+
+ {spellInfo.components.map((el, index) => ({`${el}${spellInfo.components.length - index === 1 ? '' : ', '}`}))}
+
+
+
+
+ Duration
+
+
+ {spellInfo.duration}
+
+
+
+
+
+ School
+
+
+ {spellInfo.school?.name}
+
+
+
+
+
+ Attack/Save
+
+
+ {spellInfo.dc?.dc_type?.name ?? 'None'}
+
+
+
+
+ Damage/Effect
+
+
+ None
+
+
+
+ {/* separator line below */}
+
+
+ {spellInfo.desc.map((el) => (
))}
+
+
+ {spellInfo.higher_level.map((el) => (
))}
+
+
+
+ );
+ };
+
+ console.log('spellInfo', spellInfo);
+ return (
+
+ {renderSpellInfo()}
+
+ );
+}
diff --git a/src/components/creature/spells/SpellStat.js b/src/components/creature/spells/SpellStat.js
new file mode 100644
index 00000000..bade33b4
--- /dev/null
+++ b/src/components/creature/spells/SpellStat.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import DescriptionHighlight from '../DescriptionHighlight';
+import SpellList from './SpellList';
+
+const getLevelPrefix = (level) => {
+ switch (level) {
+ case '1':
+ return 'st';
+ case '2':
+ return 'nd';
+ case '3':
+ return 'rd';
+ default:
+ return 'th';
+ }
+};
+
+export default function SpellStat({
+ description,
+ spellData,
+}) {
+ if (!spellData) {
+ return (
+
+
+ Spellcasting
+ .
+ {' '}
+
+
+ {description && (
+
+
+ {' '}
+
+ )}
+
+ );
+ }
+ // cut the text until the first spell
+ const newDescription = description.split('prepared:');
+ const newText = newDescription[0];
+
+ const spellHeader = newText ? `${newText} prepared:` : '';
+
+ return (
+
+
+
+ Spellcasting
+ .
+ {' '}
+
+
+ {spellHeader && (
+
+
+
+
+ )}
+
+
+
+ {spellData.spells.map((spellThread) => {
+ const levelName = spellThread.level === '0' ? 'Cantrips' : ` ${spellThread.level}${getLevelPrefix(spellThread.level)} level`;
+ const suffix = spellThread.level === '0' ? '(at will):' : `(${spellThread.slots.length} slots):`;
+ return (
+
+
+ {levelName}
+ {' '}
+ {suffix}
+ {' '}
+
+ {spellThread.knownSpells && (
+
+ )}
+
+
+
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/src/components/creature/spells/utils.js b/src/components/creature/spells/utils.js
new file mode 100644
index 00000000..d81daccd
--- /dev/null
+++ b/src/components/creature/spells/utils.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import Abjuration from '../../icons/spells/Abjuration';
+import Conjuration from '../../icons/spells/Conjuration';
+import Divination from '../../icons/spells/Divination';
+import Enchantment from '../../icons/spells/Enchantment';
+import Evocation from '../../icons/spells/Evocation';
+import Illusion from '../../icons/spells/Illusion';
+import Necromancy from '../../icons/spells/Necromancy';
+import Transmutation from '../../icons/spells/Transmutation';
+
+export const spellModalStyle = {
+ content: {
+ padding: 0,
+ top: '50%',
+ left: '50%',
+ right: 'auto',
+ bottom: 'auto',
+ marginRight: '-50%',
+ transform: 'translate(-50%, -50%)',
+ backgroundColor: '#FDF1DC',
+ borderRadius: '20px',
+ boxShadow: '0px 1px 18px -4px rgba(117,74,50,0.98)',
+ WebkitOverflowScrolling: 'touch',
+ overflowScrolling: 'touch',
+ '-webkit-box-shadow': '0px 1px 18px -4px rgba(117,74,50,0.98)',
+ '-moz-box-shadow': '0px 1px 18px -4px rgba(117,74,50,0.98)',
+ },
+};
+
+export const spellModalStyleWeb = {
+ content: {
+ width: '55%',
+ height: '55%',
+ },
+};
+
+export const spellModalStyleMobile = {
+ content: {
+ width: '80%',
+ height: '60%',
+ },
+};
+
+export const spellIconBackground = (school) => {
+ const loweredSchool = school.toLowerCase();
+ switch (loweredSchool) {
+ case 'abjuration':
+ return 'abjuration-background';
+ case 'conjuration':
+ return 'conjuration-background';
+ case 'divination':
+ return 'divination-background';
+ case 'enchantment':
+ return 'enchantment-background';
+ case 'evocation':
+ return 'evocation-background';
+ case 'illusion':
+ return 'illusion-background';
+ case 'necromancy':
+ return 'necromancy-background';
+ case 'transmutation':
+ return 'transmutation-background';
+ default:
+ return '';
+ }
+};
+
+export const spellIcon = (school) => {
+ const loweredSchool = school.toLowerCase();
+ switch (loweredSchool) {
+ case 'abjuration':
+ return
;
+ case 'conjuration':
+ return
;
+ case 'divination':
+ return
;
+ case 'enchantment':
+ return
;
+ case 'evocation':
+ return
;
+ case 'illusion':
+ return
;
+ case 'necromancy':
+ return
;
+ case 'transmutation':
+ return
;
+ default:
+ return null;
+ }
+};
diff --git a/src/components/creature/toolbar/NewCreatureToolbar.js b/src/components/creature/toolbar/NewCreatureToolbar.js
index f6155f71..bc7d83d5 100644
--- a/src/components/creature/toolbar/NewCreatureToolbar.js
+++ b/src/components/creature/toolbar/NewCreatureToolbar.js
@@ -19,8 +19,6 @@ export default function NewCreatureToolbar({ creature }) {
const buttonClass = `${toolbarClass}-button`;
const textButtonClass = `${buttonClass} ${buttonClass}__text`;
- console.log('>>> FOCUSED', focused);
-
return (
addSpellSlots(id, { spellLevel, slotNumber })}
+ rightControls={{
+ rightTitle: 'Add spell slots',
+ RightSubmitIcon:
,
+ }}
+ inputId={`spellLevel-${id}`}
+ />
+ );
+}
diff --git a/src/components/creature/toolbar/SpellToolbar.js b/src/components/creature/toolbar/SpellToolbar.js
new file mode 100644
index 00000000..fadc217a
--- /dev/null
+++ b/src/components/creature/toolbar/SpellToolbar.js
@@ -0,0 +1,70 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState } from 'react';
+import SpellCreateInput from './SpellCreateInput';
+
+const SPELL_LEVELS = 9;
+
+const levels = Array.from({ length: SPELL_LEVELS }, (_, i) => i + 1);
+
+export default function SpellToolbar({
+ creatureId,
+ createSpellLevel,
+ resetSpells,
+}) {
+ const styleClass = 'form--input creature-toolbar--select creature-toolbar--dropdown';
+
+ const [currentSpell, setSpellLevel] = useState(1);
+
+ const onChangeLevel = (event) => {
+ event.preventDefault();
+ setSpellLevel(event.target.value);
+ };
+
+ const addSpellSlots = (id, { spellLevel, slotNumber }) => {
+ if (!spellLevel || !slotNumber) return;
+ createSpellLevel(id, { level: spellLevel, slotNumber });
+ setSpellLevel(1);
+ };
+
+ const onResetSpells = () => {
+ resetSpells(creatureId);
+ };
+
+ return (
+
+
Add spells
+
+
+
+
+
+
+
+
+ ↻ Reset Spells
+
+
+
+
+ );
+}
diff --git a/src/components/icons/SpellScroll.js b/src/components/icons/SpellScroll.js
new file mode 100644
index 00000000..6cbdc6b7
--- /dev/null
+++ b/src/components/icons/SpellScroll.js
@@ -0,0 +1,11 @@
+import React from 'react';
+// https://game-icons.net/1x1/delapouite/scroll-quill.html
+function SpellScrollIcon({ enabled }) {
+ const fill = enabled ? '#fff' : '#822000';
+ return (
+
+ );
+}
+export default SpellScrollIcon;
diff --git a/src/components/icons/spells/Abjuration.js b/src/components/icons/spells/Abjuration.js
new file mode 100644
index 00000000..482b3b42
--- /dev/null
+++ b/src/components/icons/spells/Abjuration.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+function Abjuration() {
+ return (
+
+ );
+}
+export default Abjuration;
diff --git a/src/components/icons/spells/Conjuration.js b/src/components/icons/spells/Conjuration.js
new file mode 100644
index 00000000..ce89fae2
--- /dev/null
+++ b/src/components/icons/spells/Conjuration.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+function Conjuration() {
+ return (
+
+ );
+}
+export default Conjuration;
diff --git a/src/components/icons/spells/Divination.js b/src/components/icons/spells/Divination.js
new file mode 100644
index 00000000..baf4245a
--- /dev/null
+++ b/src/components/icons/spells/Divination.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+function Divination() {
+ return (
+
+ );
+}
+export default Divination;
diff --git a/src/components/icons/spells/Enchantment.js b/src/components/icons/spells/Enchantment.js
new file mode 100644
index 00000000..5496ba33
--- /dev/null
+++ b/src/components/icons/spells/Enchantment.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+function Enchantment() {
+ return (
+
+ );
+}
+export default Enchantment;
diff --git a/src/components/icons/spells/Evocation.js b/src/components/icons/spells/Evocation.js
new file mode 100644
index 00000000..56c3d6e3
--- /dev/null
+++ b/src/components/icons/spells/Evocation.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+function Evocation() {
+ return (
+
+ );
+}
+export default Evocation;
diff --git a/src/components/icons/spells/Illusion.js b/src/components/icons/spells/Illusion.js
new file mode 100644
index 00000000..20dd712a
--- /dev/null
+++ b/src/components/icons/spells/Illusion.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+function Illusion() {
+ return (
+
+ );
+}
+export default Illusion;
diff --git a/src/components/icons/spells/Necromancy.js b/src/components/icons/spells/Necromancy.js
new file mode 100644
index 00000000..3db8cc83
--- /dev/null
+++ b/src/components/icons/spells/Necromancy.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+function Necromancy() {
+ return (
+
+ );
+}
+export default Necromancy;
diff --git a/src/components/icons/spells/Transmutation.js b/src/components/icons/spells/Transmutation.js
new file mode 100644
index 00000000..777c33eb
--- /dev/null
+++ b/src/components/icons/spells/Transmutation.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+function Transmutation() {
+ return (
+
+ );
+}
+export default Transmutation;
diff --git a/src/components/page/CreateCreatureForm.js b/src/components/page/CreateCreatureForm.js
index a1c93981..5f9d6f20 100644
--- a/src/components/page/CreateCreatureForm.js
+++ b/src/components/page/CreateCreatureForm.js
@@ -10,6 +10,7 @@ import D20Icon from '../icons/D20Icon';
import rollDice from '../../util/rollDice';
import DropdownOption from '../creature/toolbar/DropdownOption';
import { calculateAbilityModifier, getArmorClass } from '../../util/characterSheet';
+import { getCreatureSpellData } from '../../util/spells';
const BASE_API_URL = 'https://www.dnd5eapi.co';
@@ -137,7 +138,11 @@ function CreateCreatureForm({ createCreatureErrors, createCreature: propsCreateC
name: monster.name,
healthPoints: data.hit_points,
armorClass: getArmorClass(data.armor_class),
- apiData: data,
+ spellData: getCreatureSpellData(data.special_abilities),
+ apiData: {
+ ...data,
+ spellData: getCreatureSpellData(data.special_abilities),
+ },
}));
})
.finally(() => {
diff --git a/src/images/spell_background.png b/src/images/spell_background.png
new file mode 100644
index 00000000..48647762
Binary files /dev/null and b/src/images/spell_background.png differ
diff --git a/src/state/CreatureListManager.test.js b/src/state/CreatureListManager.test.js
index 9fd19300..6a9a9e2a 100644
--- a/src/state/CreatureListManager.test.js
+++ b/src/state/CreatureListManager.test.js
@@ -360,7 +360,7 @@ describe('addCreature', () => {
ariaAnnouncements: ['creatures added'],
};
- const newState = addCreature(defaultState, creature);
+ const newState = addCreature(defaultState, { ...creature, syncMultipleInitiatives: true });
expect(newState).toEqual(expectedState);
expect(createCreature.mock.calls.length).toBe(2);
@@ -437,7 +437,7 @@ describe('addCreature', () => {
ariaAnnouncements: ['creatures added'],
};
- const newState = addCreature(initialState, creature);
+ const newState = addCreature(initialState, { ...creature, syncMultipleInitiatives: true });
expect(newState).toEqual(expectedState);
expect(createCreature.mock.calls.length).toBe(2);
diff --git a/src/state/CreatureManager.js b/src/state/CreatureManager.js
index 4e42edf2..6373bd6c 100644
--- a/src/state/CreatureManager.js
+++ b/src/state/CreatureManager.js
@@ -1,4 +1,6 @@
+/* eslint-disable max-len */
import getSecondsElapsed from './TimeManager';
+import { findAndChangeSpellSlot, sortSpells } from '../util/spells';
import { allConditions, addCondition, removeCondition } from './ConditionsManager';
function findCreature(creatures, creatureId) {
@@ -30,6 +32,131 @@ export function killCreature(state, creatureId) {
);
}
+export function updateCreatureSpells(state, creatureId, currentSpell) {
+ const creature = findCreature(state.creatures, creatureId);
+
+ const ariaAnnouncement = `Spells changed for ${creature.name}`;
+ const { spellData } = creature;
+
+ const newSpells = findAndChangeSpellSlot(spellData.spells, currentSpell);
+
+ const newData = { ...spellData, spells: newSpells };
+
+ return updateCreature(state, creatureId, { spellData: newData }, ariaAnnouncement);
+}
+
+export function resetSpells(state, creatureId) {
+ const creature = findCreature(state.creatures, creatureId);
+
+ const ariaAnnouncement = `Spells changed for ${creature.name}`;
+ const { spellData } = creature;
+
+ const newSpells = spellData.spells.map((spell) => {
+ const slots = spell.slots.map((slot) => ({ ...slot, used: false }));
+ return { ...spell, slots };
+ });
+
+ const newData = { ...spellData, spells: newSpells };
+
+ return updateCreature(state, creatureId, { spellData: newData }, ariaAnnouncement);
+}
+
+export function addSpellSlot(state, creatureId, spellLevel) {
+ const creature = findCreature(state.creatures, creatureId);
+
+ const ariaAnnouncement = `Spells slot added for ${creature.name}`;
+ const { spellData } = creature;
+
+ const newSpells = spellData.spells.map((spell) => {
+ if (spell.level === spellLevel) {
+ const { slots } = spell;
+ return { ...spell, slots: [...slots, { used: false, slotIndex: slots.length + 1 }] };
+ }
+ return spell;
+ });
+
+ const newData = { ...spellData, spells: newSpells };
+
+ return updateCreature(state, creatureId, { spellData: newData }, ariaAnnouncement);
+}
+
+export function removeSpellSlot(state, creatureId, spellLevel) {
+ const creature = findCreature(state.creatures, creatureId);
+
+ const ariaAnnouncement = `Spells slot removed for ${creature.name}`;
+ const { spellData } = creature;
+
+ const newSpells = spellData.spells.map((spell) => {
+ if (spell.level === spellLevel) {
+ const { slots } = spell;
+ const updatedSlots = slots.filter((_, index) => slots.length - index !== 1);
+ if (updatedSlots.length === 0) return null;
+ return { ...spell, slots: updatedSlots };
+ }
+ return spell;
+ }).filter((spell) => spell !== null);
+
+ const newData = { ...spellData, spells: newSpells };
+
+ return updateCreature(state, creatureId, { spellData: newData }, ariaAnnouncement);
+}
+
+export function createSpellLevel(state, creatureId, { level, slotNumber }) {
+ const creature = findCreature(state.creatures, creatureId);
+
+ const ariaAnnouncement = `Spell level added for ${creature.name}`;
+
+ const stringLevel = `${level}`;
+
+ // if the creature doesn't have spell data, create it
+ if (!creature.spellData) {
+ const newData = {
+ // TODO: make this into a function
+ spells: [
+ {
+ slots: Array.from({ length: slotNumber }, (_, index) => ({ used: false, slotIndex: index })),
+ count: slotNumber,
+ level: stringLevel,
+ knownSpells: [],
+ },
+ ],
+
+ };
+
+ return updateCreature(state, creatureId, { spellData: newData }, ariaAnnouncement);
+ }
+ const { spellData } = creature;
+ // update
+ // update slots for existing spell level
+ if (spellData.spells.some((spell) => spell.level === stringLevel)) {
+ const newSpells = spellData.spells.map((spell) => {
+ if (spell.level === stringLevel) {
+ const { slots } = spell;
+ const newSlots = Array.from({ length: slotNumber }, (_, index) => ({ used: false, slotIndex: slots.length + index }));
+ const updatedSlots = [...slots, ...newSlots];
+ return { ...spell, slots: updatedSlots };
+ }
+ return spell;
+ }).filter((spell) => spell !== null);
+
+ const newData = { ...spellData, spells: sortSpells(newSpells) };
+
+ return updateCreature(state, creatureId, { spellData: newData }, ariaAnnouncement);
+ }
+ // if the creature does have spell data, add the new spell level
+ // TODO: make this into a function
+ const newSpells = [...spellData.spells, {
+ slots: Array.from({ length: slotNumber }, (_, index) => ({ used: false, slotIndex: index })),
+ count: slotNumber,
+ level: stringLevel,
+ knownSpells: [],
+ }];
+
+ const newData = { ...spellData, spells: sortSpells(newSpells) };
+
+ return updateCreature(state, creatureId, { spellData: newData }, ariaAnnouncement);
+}
+
export function stabalizeCreature(state, creatureId) {
const creature = findCreature(state.creatures, creatureId);
const ariaAnnouncement = `${creature.name} stabalized`;
@@ -112,11 +239,10 @@ export function getRawName(name) {
}
export function createCreature(creatureId, {
- armorClass, name, number, initiative, healthPoints,apiData,
+ armorClass, name, number, initiative, healthPoints, apiData, spellData,
}) {
const groupedName = number ? `${name} #${number}` : name;
- return {
- armorClass,
+ const finalCreature = {
name: groupedName,
initiative,
healthPoints,
@@ -129,8 +255,18 @@ export function createCreature(creatureId, {
locked: false,
shared: true,
hitPointsShared: true,
- apiData
};
+
+ if (armorClass) {
+ finalCreature.armorClass = armorClass;
+ }
+ if (apiData) {
+ finalCreature.apiData = apiData;
+ }
+ if (spellData) {
+ finalCreature.spellData = spellData;
+ }
+ return finalCreature;
}
export function validateCreature(name, initiative, healthPoints, multiplier) {
diff --git a/src/state/SyncManager.js b/src/state/SyncManager.js
index 2c7fcd51..90cc41e2 100644
--- a/src/state/SyncManager.js
+++ b/src/state/SyncManager.js
@@ -5,6 +5,13 @@ export function share(state, createBattle, updateBattle, date) {
if (!state.shareEnabled) {
return state;
}
+ // remove additional data from creatures to fix share battle
+ const newCreatures = state.creatures.map((creature) => {
+ const {
+ spellData, apiData, armorClass, ...rest
+ } = creature;
+ return rest;
+ });
const battleId = state.battleId || nanoid(11);
@@ -13,7 +20,7 @@ export function share(state, createBattle, updateBattle, date) {
battleinput: {
battleId,
round: state.round,
- creatures: state.creatures,
+ creatures: newCreatures,
activeCreature: state.activeCreature,
expdate: Math.floor(date.getTime() / 1000.0) + 86400,
},
diff --git a/src/util/spells.js b/src/util/spells.js
new file mode 100644
index 00000000..475aee9e
--- /dev/null
+++ b/src/util/spells.js
@@ -0,0 +1,68 @@
+/* eslint-disable max-len */
+export const getCreatureSpellData = (abilities) => {
+ if (!abilities) return undefined;
+ const data = abilities.find((ability) => ability.name === 'Spellcasting');
+ if (!data || !data?.spellcasting) return undefined;
+
+ const { spellcasting } = data;
+
+ const apiSpells = spellcasting.spells ?? [];
+
+ // for cantrips
+ const spells = [{ level: '0', count: 100, slots: [] }];
+
+ // eslint-disable-next-line no-restricted-syntax
+ for (const [key, value] of Object.entries(spellcasting.slots)) {
+ spells.push({
+ level: key,
+ count: value,
+ slots: Array.from({ length: value }, (_, i) => ({ used: false, slotIndex: i })),
+ });
+ }
+
+ const newSpells = spells.map((spell) => {
+ const knownSpells = apiSpells.filter((s) => `${s.level}` === spell.level);
+ return {
+ ...spell,
+ knownSpells,
+ };
+ });
+
+ const spellData = {
+ saveDC: spellcasting.dc,
+ modifier: spellcasting.modifier,
+ level: spellcasting.level,
+ school: spellcasting.school,
+ ability: spellcasting.ability.name,
+ spells: newSpells,
+ };
+
+ return spellData;
+};
+
+export const changeSpellSlot = (slots, { slotIndex, value }) => slots.map((currentSlot) => {
+ if (currentSlot.slotIndex === slotIndex) {
+ return {
+ ...currentSlot,
+ used: value,
+ };
+ }
+ return currentSlot;
+});
+
+export const findAndChangeSpellSlot = (spells, { level, slotIndex, value }) => spells.map((currentLevel) => {
+ if (currentLevel.level === level) {
+ return {
+ ...currentLevel,
+ slots: changeSpellSlot(currentLevel.slots, { slotIndex, value }),
+ };
+ }
+ return currentLevel;
+});
+
+export const sortSpells = (spells) => [...spells].sort((a, b) => a.level - b.level);
+
+export const getRemainingSpellSlots = (spells) => spells.reduce((acc, spell) => {
+ const remaining = spell.slots.filter((slot) => !slot.used).length;
+ return acc + remaining;
+}, 0);
diff --git a/test-integration/page-object-models/dmApp.js b/test-integration/page-object-models/dmApp.js
index 62912bde..174cd84e 100644
--- a/test-integration/page-object-models/dmApp.js
+++ b/test-integration/page-object-models/dmApp.js
@@ -32,7 +32,6 @@ export default class DmApp extends DndBattleTracker {
async addCreature(name, initiative, hp, multiply) {
await this.enterCreatureName(name);
-
if (initiative) {
const initiativeField = await screen.findByText('Initiative (optional)');
await this.user.type(initiativeField, initiative);