Skip to content

Feat/8 add ability point spending flow #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ECWireless merged 5 commits into from
Jul 30, 2024
Merged

Feat/8 add ability point spending flow #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
72ad9b7
Tweak ActionOutcome type name
ECWireless Jul 30, 2024
e53f705
Add level up indicators
ECWireless Jul 30, 2024
f0c9294
Add LevelingPanel
ECWireless Jul 30, 2024
8b8210b
Merge branch 'main' into feat/8-add-ability-point-spending-flow
ECWireless Jul 30, 2024
28a8f75
Fix ability points bug
ECWireless Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/client/src/components/ActionsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const ActionsPanel = (): JSX.Element => {
equippedItems,
} = useCharacter();
const {
battleActionOutcomes,
actionOutcomes,
currentBattle,
isAttacking,
isRefreshing: isRefreshingMap,
Expand Down Expand Up @@ -192,7 +192,7 @@ export const ActionsPanel = (): JSX.Element => {
{!currentBattle && actionText}

{monsterOponent &&
battleActionOutcomes.map((action, i) => {
actionOutcomes.map((action, i) => {
if (action.miss) {
return (
<Typist
Expand Down
8 changes: 7 additions & 1 deletion packages/client/src/components/Level.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ export const Level = ({
return (
<Box fontSize="10px" mt={8} position="relative" w="100%">
<Text
color={levelPercent === 100 ? 'green' : 'black'}
fontWeight={levelPercent === 100 ? 'bold' : 'normal'}
position="absolute"
right={100 - levelPercent - 2 + '%'}
top="-15px"
Expand All @@ -24,7 +26,11 @@ export const Level = ({
>
100%
</Text>
<Progress h={2} value={levelPercent} />
<Progress
h={2}
variant={levelPercent === 100 ? 'filled' : 'filling'}
value={levelPercent}
/>
<HStack mt={1}>
<Text>Level {currentLevel}</Text>
<Spacer />
Expand Down
339 changes: 339 additions & 0 deletions packages/client/src/components/LevelingPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,339 @@
import { Button, HStack, Text, VStack } from '@chakra-ui/react';
import { useCallback, useEffect, useMemo, useState } from 'react';

import { useCharacter } from '../contexts/CharacterContext';
import { useMUD } from '../contexts/MUDContext';
import { useToast } from '../hooks/useToast';
import { type Character } from '../utils/types';

export const LevelingPanel = ({
canLevel,
character,
}: {
canLevel: boolean;
character: Character;
}): JSX.Element => {
const { renderError, renderSuccess, renderWarning } = useToast();
const {
delegatorAddress,
systemCalls: { levelCharacter },
} = useMUD();
const { refreshCharacter } = useCharacter();

const [abilityPoints, setAbilityPoints] = useState(0);
const [newAgility, setNewAgility] = useState(character.agility);
const [newIntelligence, setNewIntelligence] = useState(
character.intelligence,
);
const [newStrength, setNewStrength] = useState(character.strength);

const [isLeveling, setIsLeveling] = useState(false);

useEffect(() => {
if (canLevel) {
setAbilityPoints(2);
} else {
setAbilityPoints(0);
}
setNewAgility(character.agility);
setNewIntelligence(character.intelligence);
setNewStrength(character.strength);
}, [canLevel, character.agility, character.intelligence, character.strength]);

const strengthIncreased = useMemo(
() => BigInt(newStrength) > BigInt(character.strength),
[newStrength, character.strength],
);

const agilityIncreased = useMemo(
() => BigInt(newAgility) > BigInt(character.agility),
[newAgility, character.agility],
);

const intelligenceIncreased = useMemo(
() => BigInt(newIntelligence) > BigInt(character.intelligence),
[newIntelligence, character.intelligence],
);

const onDecrementStat = useCallback(
(stat: 'str' | 'agi' | 'int') => {
if (isLeveling) return;

let replenishAbilityPoint = false;

switch (stat) {
case 'str':
if (newStrength === character.strength) return;
if (strengthIncreased) {
replenishAbilityPoint = true;
}
if (!replenishAbilityPoint && abilityPoints <= 0) {
renderWarning('You do not have enough ability points.');
return;
}

setNewStrength(prev => (BigInt(prev) - BigInt(1)).toString());
break;
case 'agi':
if (newAgility === character.agility) return;
if (agilityIncreased) {
replenishAbilityPoint = true;
}
if (!replenishAbilityPoint && abilityPoints <= 0) {
renderWarning('You do not have enough ability points.');
return;
}

setNewAgility(prev => (BigInt(prev) - BigInt(1)).toString());
break;
case 'int':
if (newIntelligence === character.intelligence) return;
if (intelligenceIncreased) {
replenishAbilityPoint = true;
}
if (!replenishAbilityPoint && abilityPoints <= 0) {
renderWarning('You do not have enough ability points.');
return;
}

setNewIntelligence(prev => (BigInt(prev) - BigInt(1)).toString());
break;
default:
}

if (replenishAbilityPoint) {
setAbilityPoints(prev => prev + 1);
} else {
setAbilityPoints(prev => prev - 1);
}
},
[
abilityPoints,
agilityIncreased,
character.agility,
character.intelligence,
character.strength,
intelligenceIncreased,
isLeveling,
newAgility,
newIntelligence,
newStrength,
renderWarning,
strengthIncreased,
],
);

const onIncrementStat = useCallback(
(stat: 'str' | 'agi' | 'int') => {
if (isLeveling) return;
if (abilityPoints <= 0) {
renderWarning('You do not have enough ability points.');
return;
}

switch (stat) {
case 'str':
setNewStrength(prev => (BigInt(prev) + BigInt(1)).toString());
break;
case 'agi':
setNewAgility(prev => (BigInt(prev) + BigInt(1)).toString());
break;
case 'int':
setNewIntelligence(prev => (BigInt(prev) + BigInt(1)).toString());
break;
default:
}

setAbilityPoints(prev => prev - 1);
},
[abilityPoints, isLeveling, renderWarning],
);

const onLevelCharacter = useCallback(async () => {
try {
setIsLeveling(true);
if (abilityPoints > 0) {
renderWarning('You have unused ability points');
return;
}
if (!delegatorAddress) {
throw new Error('Missing delegation.');
}

const newStats = {
agility: newAgility,
baseHp: character.baseHp,
currentHp: character.currentHp,
class: character.entityClass,
experience: character.experience,
intelligence: newIntelligence,
level: character.level,
strength: newStrength,
};

const { error, success } = await levelCharacter(
character.characterId,
newStats,
);

if (error && !success) {
throw new Error(error);
}

await refreshCharacter();
renderSuccess('Character leveled up!');
} catch (e) {
renderError((e as Error)?.message ?? 'Failed to unequip item.', e);
} finally {
setIsLeveling(false);
}
}, [
abilityPoints,
character.baseHp,
character.characterId,
character.currentHp,
character.entityClass,
character.experience,
character.level,
delegatorAddress,
levelCharacter,
newAgility,
newIntelligence,
newStrength,
refreshCharacter,
renderError,
renderSuccess,
renderWarning,
]);

return (
<VStack>
<HStack justify="space-between" w="100%">
<Text alignSelf="start" fontWeight="bold">
My Stats
</Text>
<Text alignSelf="start" fontWeight="bold">
Ability Points: {abilityPoints}
</Text>
</HStack>
<Text alignSelf="end" mt={4} size="xs">
Base
</Text>
<VStack w="100%">
<HStack justify="space-between" w="100%">
<Text>HP - Hit</Text>
<Text>
{character.currentHp}/{character.baseHp}
</Text>
</HStack>

<HStack justify="space-between" w="100%">
<Text>STR - Strength</Text>
<HStack>
{strengthIncreased && (
<Button
borderWidth="1.5px"
onClick={() => onDecrementStat('str')}
size="xs"
variant="outline"
>
<Text>-</Text>
</Button>
)}
<Text
color={strengthIncreased ? 'green' : 'black'}
fontWeight={strengthIncreased ? 'bold' : 'normal'}
>
{newStrength}
</Text>
{canLevel && (
<Button
borderWidth="1.5px"
onClick={() => onIncrementStat('str')}
size="xs"
variant="outline"
>
<Text>+</Text>
</Button>
)}
</HStack>
</HStack>

<HStack justify="space-between" w="100%">
<Text>AGI - Agility</Text>
<HStack>
{agilityIncreased && (
<Button
borderWidth="1.5px"
onClick={() => onDecrementStat('agi')}
size="xs"
variant="outline"
>
<Text>-</Text>
</Button>
)}
<Text
color={agilityIncreased ? 'green' : 'black'}
fontWeight={agilityIncreased ? 'bold' : 'normal'}
>
{newAgility}
</Text>
{canLevel && (
<Button
borderWidth="1.5px"
onClick={() => onIncrementStat('agi')}
size="xs"
variant="outline"
>
<Text>+</Text>
</Button>
)}
</HStack>
</HStack>

<HStack justify="space-between" w="100%">
<Text>INT - Intelligence</Text>
<HStack>
{intelligenceIncreased && (
<Button
borderWidth="1.5px"
onClick={() => onDecrementStat('int')}
size="xs"
variant="outline"
>
<Text>-</Text>
</Button>
)}
<Text
color={intelligenceIncreased ? 'green' : 'black'}
fontWeight={intelligenceIncreased ? 'bold' : 'normal'}
>
{newIntelligence}
</Text>
{canLevel && (
<Button
borderWidth="1.5px"
onClick={() => onIncrementStat('int')}
size="xs"
variant="outline"
>
<Text>+</Text>
</Button>
)}
</HStack>
</HStack>
</VStack>
{canLevel && (
<Button
isLoading={isLeveling}
mt={8}
onClick={onLevelCharacter}
size="sm"
variant="gold"
>
Level Up!
</Button>
)}
</VStack>
);
};
Loading