Skip to content

Commit

Permalink
Added a way for the inventory to be opened from the character card
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdamKyle
AdamKyle committed Dec 30, 2024
1 parent 592b62d commit 2b595d4
Show file tree
Hide file tree
Showing 14 changed files with 347 additions and 238 deletions.
18 changes: 4 additions & 14 deletions resources/js/game/components/actions/partials/actions/actions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,23 @@
import React, { ReactNode } from 'react';

import MonsterSection from '../monster-section/monster-section';
import { useManageMonsterStatSectionVisibility } from '../monster-stat-section/hooks/use-manage-monster-stat-section-visibility';
import { MonsterStatSection } from '../monster-stat-section/monster-stat-section';
import { useScrollIconMenu } from './hooks/use-scroll-icon-menu';
import NavigationActionsComponent from './navigation-actions';
import ActionsProps from './types/actions-props';

import Card from 'ui/cards/card';

const Actions = (): ReactNode => {
const { showMonsterStatsSection, showMonsterStats } =
useManageMonsterStatSectionVisibility();

const Actions = (props: ActionsProps): ReactNode => {
const { scrollY, isMobile } = useScrollIconMenu();

return (
<Card>
<div className="w-full flex flex-col lg:flex-row">
<div className="relative">
{!showMonsterStatsSection ? (
<NavigationActionsComponent scrollY={scrollY} isMobile={isMobile} />
) : null}
<NavigationActionsComponent scrollY={scrollY} isMobile={isMobile} />
</div>
<div className="flex flex-col items-center lg:items-start w-full">
{showMonsterStatsSection ? (
<MonsterStatSection />
) : (
<MonsterSection show_monster_stats={showMonsterStats} />
)}
<MonsterSection show_monster_stats={props.showMonsterStats} />
</div>
</div>
</Card>
Expand Down
2 changes: 0 additions & 2 deletions resources/js/game/components/actions/partials/actions/hooks/use-scroll-icon-menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ export const useScrollIconMenu = (): UseScrollIconMenuDefinition => {

const checkMobile = () => setIsMobile(window.innerWidth < 1024);

console.log('window inner width', window.innerWidth);

checkMobile();
window.addEventListener('resize', checkMobile);

Expand Down
3 changes: 3 additions & 0 deletions resources/js/game/components/actions/partials/actions/types/actions-props.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default interface ActionsProps {
showMonsterStats: () => void;
}
10 changes: 10 additions & 0 deletions ...e/components/actions/partials/floating-cards/character-details/character-card-details.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import React, { ReactNode } from 'react';

import { useManageCharacterInventoryVisibility } from './hooks/use-manage-character-inventory-visibility';
import { useManageCharacterSheetVisibility } from '../../../../hooks/use-manage-character-sheet-visibility';
import XpBar from '../../../components/character-details/xp-bar';

import Button from 'ui/buttons/button';
import ProgressButton from 'ui/buttons/button-progress';
import { ButtonVariant } from 'ui/buttons/enums/button-variant-enum';
import Separator from 'ui/seperatror/separator';

const CharacterCardDetails = (): ReactNode => {
const { openCharacterSheet } = useManageCharacterSheetVisibility();
const { openCharacterInventory } = useManageCharacterInventoryVisibility();

return (
<>
Expand Down Expand Up @@ -62,6 +65,13 @@ const CharacterCardDetails = (): ReactNode => {
</dl>
</div>
<Separator />
<ProgressButton
progress={10}
on_click={() => openCharacterInventory()}
label="Manage Inventory (56/75)"
variant={ButtonVariant.SUCCESS}
additional_css="w-full my-2"
/>
<Button
label="See More Details"
on_click={() => {
Expand Down
3 changes: 3 additions & 0 deletions ...ng-cards/character-details/hooks/definitions/use-manage-character-inventory-visibility.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default interface UseManageCharacterInventoryVisibility {
openCharacterInventory: () => void;
}
45 changes: 45 additions & 0 deletions ...tials/floating-cards/character-details/hooks/use-manage-character-inventory-visibility.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { useEventSystem } from 'event-system/hooks/use-event-system';

import UseManageCharacterInventoryVisibility from './definitions/use-manage-character-inventory-visibility';
import { CharacterSheet } from '../../../../../character-sheet/event-types/character-sheet';
import { ActionCardEvents } from '../../event-types/action-cards';

export const useManageCharacterInventoryVisibility =
(): UseManageCharacterInventoryVisibility => {
const eventSystem = useEventSystem();

const manageCharacterInventoryEmitter = eventSystem.isEventRegistered(
CharacterSheet.OPEN_INVENTORY_SECTION
)
? eventSystem.getEventEmitter<{ [key: string]: boolean }>(
CharacterSheet.OPEN_INVENTORY_SECTION
)
: eventSystem.registerEvent<{ [key: string]: boolean }>(
CharacterSheet.OPEN_INVENTORY_SECTION
);

const openCharacterInventory = () => {
const closeCraftingCardEvent = eventSystem.getEventEmitter<{
[key: string]: boolean;
}>(ActionCardEvents.OPEN_CRATING_CARD);
const closeChatCardEvent = eventSystem.getEventEmitter<{
[key: string]: boolean;
}>(ActionCardEvents.OPEN_CHAT_CARD);
const closeCharacterCardEvent = eventSystem.getEventEmitter<{
[key: string]: boolean;
}>(ActionCardEvents.OPEN_CHARACTER_CARD);

closeCraftingCardEvent.emit(ActionCardEvents.OPEN_CRATING_CARD, false);
closeChatCardEvent.emit(ActionCardEvents.OPEN_CHAT_CARD, false);
closeCharacterCardEvent.emit(ActionCardEvents.OPEN_CHARACTER_CARD, false);

manageCharacterInventoryEmitter.emit(
CharacterSheet.OPEN_INVENTORY_SECTION,
true
);
};

return {
openCharacterInventory,
};
};
242 changes: 125 additions & 117 deletions resources/js/game/components/actions/partials/monster-stat-section/monster-stat-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useManageMonsterStatSectionVisibility } from './hooks/use-manage-monste

import { Alert } from 'ui/alerts/alert';
import { AlertVariant } from 'ui/alerts/enums/alert-variant';
import Card from 'ui/cards/card';
import Container from 'ui/container/container';
import Separator from 'ui/seperatror/separator';

Expand All @@ -15,132 +16,139 @@ export const MonsterStatSection = (): ReactNode => {
manageSectionVisibility={closeMonsterStats}
title={'Monster Name'}
>
<div role="region" aria-labelledby="celestial-info" className="mb-6">
<h2 id="celestial-info" className="sr-only">
Celestial Creature Information
</h2>
<Alert variant={AlertVariant.INFO}>
<strong>This Creature is a celestial</strong>: You will find the
conjuration cost in shards to conjure this beast. You cannot encounter
this beast in the wild unless you trigger a spawn by either moving
(small chance) or unless it's Celestial Day, in which case any form of
movement has an 80% chance to conjure one. Players who completed Quest
X can use /PCT command to instantly travel to it. Killing it in one
hit is advised or it will move and heal for full health.
</Alert>
</div>
<Card>
<div role="region" aria-labelledby="celestial-info" className="mb-6">
<h2 id="celestial-info" className="sr-only">
Celestial Creature Information
</h2>
<Alert variant={AlertVariant.INFO}>
<strong>This Creature is a celestial</strong>: You will find the
conjuration cost in shards to conjure this beast. You cannot
encounter this beast in the wild unless you trigger a spawn by
either moving (small chance) or unless it's Celestial Day, in which
case any form of movement has an 80% chance to conjure one. Players
who completed Quest X can use /PCT command to instantly travel to
it. Killing it in one hit is advised or it will move and heal for
full health.
</Alert>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
<div>
<dl>
<dt className="font-semibold">Monster Name:</dt>
<dd>Name</dd>
<dt className="font-semibold">Receive 1/3 Xp at level:</dt>
<dd>10</dd>
<dt className="font-semibold">Conjuration Cost (Shards):</dt>
<dd>1,000</dd>
</dl>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
<div>
<dl>
<dt className="font-semibold">Monster Name:</dt>
<dd>Name</dd>
<dt className="font-semibold">Receive 1/3 Xp at level:</dt>
<dd>10</dd>
<dt className="font-semibold">Conjuration Cost (Shards):</dt>
<dd>1,000</dd>
</dl>

<h3 className="text-danube-500 dark:text-danube-700 mt-5">
Basic Stats
</h3>
<Separator />
<dl>
<dt className="font-semibold">Health Range:</dt>
<dd>100 - 200</dd>
<dt className="font-semibold">Attack Range:</dt>
<dd>100 - 200</dd>
<dt className="font-semibold">Max Spell Damage:</dt>
<dd>350</dd>
<dt className="font-semibold">Entrancing Chance:</dt>
<dd>8%</dd>
<dt className="font-semibold">Armour Class (Defence):</dt>
<dd>150</dd>
</dl>
<h3 className="text-danube-500 dark:text-danube-700 mt-5">
Basic Stats
</h3>
<Separator />
<dl>
<dt className="font-semibold">Health Range:</dt>
<dd>100 - 200</dd>
<dt className="font-semibold">Attack Range:</dt>
<dd>100 - 200</dd>
<dt className="font-semibold">Max Spell Damage:</dt>
<dd>350</dd>
<dt className="font-semibold">Entrancing Chance:</dt>
<dd>8%</dd>
<dt className="font-semibold">Armour Class (Defence):</dt>
<dd>150</dd>
</dl>

<h3 className="text-danube-500 dark:text-danube-700 mt-5">
Ambush and Counter
</h3>
<Separator />
<dl>
<dt className="font-semibold">Ambush Chance:</dt>
<dd>8%</dd>
<dt className="font-semibold">Ambush Resistance:</dt>
<dd>2%</dd>
<dt className="font-semibold">Counter Chance:</dt>
<dd>10%</dd>
<dt className="font-semibold">Counter Resistance:</dt>
<dd>10%</dd>
</dl>
<h3 className="text-danube-500 dark:text-danube-700 mt-5">
Ambush and Counter
</h3>
<Separator />
<dl>
<dt className="font-semibold">Ambush Chance:</dt>
<dd>8%</dd>
<dt className="font-semibold">Ambush Resistance:</dt>
<dd>2%</dd>
<dt className="font-semibold">Counter Chance:</dt>
<dd>10%</dd>
<dt className="font-semibold">Counter Resistance:</dt>
<dd>10%</dd>
</dl>

<h3 className="text-danube-500 dark:text-danube-700 mt-5">Rewards</h3>
<Separator />
<dl>
<dt className="font-semibold">XP:</dt>
<dd>100</dd>
<dt className="font-semibold">Gold:</dt>
<dd>500</dd>
<dt className="font-semibold">Drop Chance:</dt>
<dd>10%</dd>
</dl>
</div>
<h3 className="text-danube-500 dark:text-danube-700 mt-5">
Rewards
</h3>
<Separator />
<dl>
<dt className="font-semibold">XP:</dt>
<dd>100</dd>
<dt className="font-semibold">Gold:</dt>
<dd>500</dd>
<dt className="font-semibold">Drop Chance:</dt>
<dd>10%</dd>
</dl>
</div>

<div>
<h3 className="text-danube-500 dark:text-danube-700">Core Stats</h3>
<Separator />
<dl>
<dt className="font-semibold">Str:</dt>
<dd>100</dd>
<dt className="font-semibold">Dex:</dt>
<dd>100</dd>
<dt className="font-semibold">Int:</dt>
<dd>100</dd>
<dt className="font-semibold">Chr:</dt>
<dd>100</dd>
<dt className="font-semibold">Agi:</dt>
<dd>100</dd>
<dt className="font-semibold">Focus:</dt>
<dd>100</dd>
</dl>
<div>
<h3 className="text-danube-500 dark:text-danube-700">Core Stats</h3>
<Separator />
<dl>
<dt className="font-semibold">Str:</dt>
<dd>100</dd>
<dt className="font-semibold">Dex:</dt>
<dd>100</dd>
<dt className="font-semibold">Int:</dt>
<dd>100</dd>
<dt className="font-semibold">Chr:</dt>
<dd>100</dd>
<dt className="font-semibold">Agi:</dt>
<dd>100</dd>
<dt className="font-semibold">Focus:</dt>
<dd>100</dd>
</dl>

<h3 className="text-danube-500 dark:text-danube-700 mt-5">Skills</h3>
<Separator />
<dl>
<dt className="font-semibold">Accuracy:</dt>
<dd>1.5%</dd>
<dt className="font-semibold">Casting Accuracy:</dt>
<dd>2.8%</dd>
<dt className="font-semibold">Dodge:</dt>
<dd>10%</dd>
<dt className="font-semibold">Criticality:</dt>
<dd>10%</dd>
</dl>
<h3 className="text-danube-500 dark:text-danube-700 mt-5">
Skills
</h3>
<Separator />
<dl>
<dt className="font-semibold">Accuracy:</dt>
<dd>1.5%</dd>
<dt className="font-semibold">Casting Accuracy:</dt>
<dd>2.8%</dd>
<dt className="font-semibold">Dodge:</dt>
<dd>10%</dd>
<dt className="font-semibold">Criticality:</dt>
<dd>10%</dd>
</dl>

<h3 className="text-danube-500 dark:text-danube-700 mt-5">
Resistances
</h3>
<Separator />
<dl>
<dt className="font-semibold">Affix:</dt>
<dd>1.5%</dd>
<dt className="font-semibold">Spells:</dt>
<dd>2.8%</dd>
<dt className="font-semibold">Life Stealing:</dt>
<dd>10%</dd>
</dl>
<h3 className="text-danube-500 dark:text-danube-700 mt-5">
Resistances
</h3>
<Separator />
<dl>
<dt className="font-semibold">Affix:</dt>
<dd>1.5%</dd>
<dt className="font-semibold">Spells:</dt>
<dd>2.8%</dd>
<dt className="font-semibold">Life Stealing:</dt>
<dd>10%</dd>
</dl>

<h3 className="text-danube-500 dark:text-danube-700 mt-5">
Devouring Light / Darkness
</h3>
<Separator />
<dl>
<dt className="font-semibold">Devouring Light:</dt>
<dd>1.5%</dd>
<dt className="font-semibold">Devouring Darkness:</dt>
<dd>2.8%</dd>
</dl>
<h3 className="text-danube-500 dark:text-danube-700 mt-5">
Devouring Light / Darkness
</h3>
<Separator />
<dl>
<dt className="font-semibold">Devouring Light:</dt>
<dd>1.5%</dd>
<dt className="font-semibold">Devouring Darkness:</dt>
<dd>2.8%</dd>
</dl>
</div>
</div>
</div>
</Card>
</Container>
);
};
Loading

0 comments on commit 2b595d4

Please sign in to comment.