Character card and sheet now use actual character data

app/Flare/Transformers/CharacterSheetBaseInfoTransformer.php

@@ -17,6 +17,7 @@ class CharacterSheetBaseInfoTransformer extends BaseTransformer
 
     protected array $defaultIncludes = [
         'inventory_count',
+        'resistance_info',
     ];
 
     public function setIgnoreReductions(bool $ignoreReductions): void
@@ -43,10 +44,17 @@ public function transform(Character $character): array
             'race' => $character->race->name,
             'race_id' => $character->race->id,
             'to_hit_stat' => $character->class->to_hit_stat,
-            'level' => number_format($character->level),
-            'max_level' => number_format($this->getMaxLevel($character)),
+            'level' => $character->level,
+            'max_level' => $this->getMaxLevel($character),
             'xp' => (int) $character->xp,
             'xp_next' => (int) $character->xp_next,
+            'str_raw' => $character->str,
+            'dur_raw' => $character->dur,
+            'dex_raw' => $character->dex,
+            'chr_raw' => $character->chr,
+            'int_raw' => $character->int,
+            'agi_raw' => $character->agi,
+            'focus_raw' => $character->focus,
             'str_modded' => $characterStatBuilder->statMod('str'),
             'dur_modded' => $characterStatBuilder->statMod('dur'),
             'dex_modded' => $characterStatBuilder->statMod('dex'),
@@ -55,19 +63,26 @@ public function transform(Character $character): array
             'agi_modded' => $characterStatBuilder->statMod('agi'),
             'focus_modded' => $characterStatBuilder->statMod('focus'),
             'attack' => $characterStatBuilder->buildTotalAttack(),
+            'healing' => $characterStatBuilder->buildHealing(),
             'health' => $characterStatBuilder->buildHealth(),
             'ac' => $characterStatBuilder->buildDefence(),
             'class_bonus_chance' => (new ClassAttackValue($character))->buildAttackData()['chance'],
-            'gold' => number_format($character->gold),
-            'gold_dust' => number_format($character->gold_dust),
-            'shards' => number_format($character->shards),
-            'copper_coins' => number_format($character->copper_coins),
+            'gold' => $character->gold,
+            'gold_dust' => $character->gold_dust,
+            'shards' => $character->shards,
+            'copper_coins' => $character->copper_coins,
             'resurrection_chance' => $characterStatBuilder->buildResurrectionChance(),
+            'spell_evasion' => $characterStatBuilder,
+            'elemental_atonements' => $characterStatBuilder->buildElementalAtonement(),
         ];
     }
 
     public function includeInventoryCount(Character $character)
     {
         return $this->item($character, new CharacterInventoryCountTransformer);
     }
+
+    public function includeResistanceInfo(Character $character) {
+        return $this->item($character, new CharacterResistanceInfoTransformer);
+    }
 }

app/Game/Character/Builders/InformationBuilders/AttributeBuilders/ElementalAtonement.php

@@ -86,7 +86,7 @@ private function calculateAverages(array $atonements): array
         foreach ($atonements as $key => $values) {
             $average = array_sum($values) / count($values);
 
-            $averages[$key] = $average > 0.75 ? 0.75 : $average;
+            $averages[strtolower($key)] = $average > 0.75 ? 0.75 : $average;
         }
 
         return $averages;

resources/js/game-data/api-data-definitions/character/character-sheet-definition.ts

@@ -1,5 +1,8 @@
 import InventoryCountDefinition from './inventory-count-definition';
 
+import ElementalAtonementDefinition from 'game-data/api-data-definitions/character/elemental-atonement-definition';
+import ResistanceInfoDefinition from 'game-data/api-data-definitions/character/resistance-info-definition';
+
 export default interface CharacterSheetDefinition {
   id: number;
   user_id: number;
@@ -9,19 +12,27 @@ export default interface CharacterSheetDefinition {
   class_bonus_chance: number;
   race: string;
   race_id: number;
-  level: string;
-  max_level: string;
+  level: number;
+  max_level: number;
   xp: number;
   xp_next: number;
   to_hit_stat: string;
   ac: number;
   attack: number;
+  healing: number;
   health: number;
   resurrection_chance: number;
-  gold: string;
-  gold_dust: string;
-  shards: string;
-  copper_coins: string;
+  gold: number;
+  gold_dust: number;
+  shards: number;
+  copper_coins: number;
+  str_raw: number;
+  dex_raw: number;
+  int_raw: number;
+  dur_raw: number;
+  agi_raw: number;
+  chr_raw: number;
+  focus_raw: number;
   str_modded: number;
   dex_modded: number;
   int_modded: number;
@@ -30,4 +41,6 @@ export default interface CharacterSheetDefinition {
   chr_modded: number;
   focus_modded: number;
   inventory_count: InventoryCountDefinition;
+  resistance_info: ResistanceInfoDefinition;
+  elemental_atonements: ElementalAtonementDefinition;
 }

resources/js/game-data/api-data-definitions/character/elemental-atonement-definition.ts

@@ -0,0 +1,15 @@
+interface Atonements {
+  fire: number;
+  ice: number;
+  water: number;
+}
+
+interface HighestElement {
+  name: string;
+  damage: number;
+}
+
+export default interface ElementalAtonementDefinition {
+  atonements: Atonements;
+  highest_element: HighestElement;
+}

resources/js/game-data/api-data-definitions/character/resistance-info-definition.ts

@@ -0,0 +1,5 @@
+export default interface ResistanceInfoDefinition {
+  spell_evasion: number;
+  affix_damage_reduction: number;
+  healing_reduction: number;
+}

resources/js/game-data/components/game-data-error.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+
+import { Alert } from 'ui/alerts/alert';
+import { AlertVariant } from 'ui/alerts/enums/alert-variant';
+
+export const GameDataError = (): ReactNode => {
+  return (
+    <Alert variant={AlertVariant.DANGER}>
+      <p>
+        Something is wrong child. The character data is missing. Head to discord
+        and report this. You can access this via the right profile icon, click
+        Discord and post this in #bugs.
+      </p>
+    </Alert>
+  );
+};

resources/js/game/components/actions/components/character-details/xp-bar.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 
 import { xpbarPercentage } from './helpers/xp-bar-percentage';
 import XpBarProps from './types/xp-bar-props';
+import { formatNumberWithCommas } from '../../../../util/format-number';
 
 const XpBar = (props: XpBarProps): ReactNode => {
   return (
@@ -12,7 +13,8 @@ const XpBar = (props: XpBarProps): ReactNode => {
         </span>
         <span>Xp</span>
         <span aria-labelledby="xp-label" aria-live="polite">
-          {props.current_xp}/{props.max_xp}
+          {formatNumberWithCommas(props.current_xp)}/
+          {formatNumberWithCommas(props.max_xp)}
         </span>
       </div>
       <div className="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2">

resources/js/game/components/actions/partials/floating-cards/character-details/character-card-details.tsx

@@ -1,6 +1,8 @@
 import React, { ReactNode } from 'react';
 
 import { useManageCharacterInventoryVisibility } from './hooks/use-manage-character-inventory-visibility';
+import CharacterCardDetailsProps from './types/character-card-details-props';
+import { shortenNumber } from '../../../../../util/format-number';
 import { useManageCharacterSheetVisibility } from '../../../../hooks/use-manage-character-sheet-visibility';
 import XpBar from '../../../components/character-details/xp-bar';
 
@@ -9,44 +11,53 @@ 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 CharacterCardDetails = ({
+  characterData,
+}: CharacterCardDetailsProps): ReactNode => {
   const { openCharacterSheet } = useManageCharacterSheetVisibility();
   const { openCharacterInventory } = useManageCharacterInventoryVisibility();
 
+  const characterInventorProgress =
+    (characterData.inventory_count.inventory_count /
+      characterData.inventory_count.inventory_max) *
+    100;
+
   return (
     <>
-      <XpBar current_xp={150} max_xp={1000} />
+      <XpBar current_xp={characterData.xp} max_xp={characterData.xp_next} />
       <div className="grid grid-cols-2 gap-2">
         <div>
           <h4 className="text-danube-500 dark:text-danube-700">Stats</h4>
           <Separator />
           <dl className="text-gray-600 dark:text-gray-700">
             <dt className="font-bold">Str</dt>
-            <dd>1.0K</dd>
+            <dd>{shortenNumber(characterData.str_modded)}</dd>
             <dt className="font-bold">Dex</dt>
-            <dd>1.0K</dd>
+            <dd>{shortenNumber(characterData.dex_modded)}</dd>
             <dt className="font-bold">Int</dt>
-            <dd>1.0K</dd>
+            <dd>{shortenNumber(characterData.int_modded)}</dd>
+            <dt className="font-bold">Dur</dt>
+            <dd>{shortenNumber(characterData.dur_modded)}</dd>
             <dt className="font-bold">Agi</dt>
-            <dd>1.0K</dd>
+            <dd>{shortenNumber(characterData.agi_modded)}</dd>
             <dt className="font-bold">Chr</dt>
-            <dd>1.0K</dd>
+            <dd>{shortenNumber(characterData.chr_modded)}</dd>
             <dt className="font-bold">Focus</dt>
-            <dd>1.0K</dd>
+            <dd>{shortenNumber(characterData.focus_modded)}</dd>
           </dl>
         </div>
         <div>
           <h4 className="text-danube-500 dark:text-danube-700">Health & Atk</h4>
           <Separator />
           <dl className="text-gray-600 dark:text-gray-700">
             <dt className="font-bold">HP</dt>
-            <dd>100K</dd>
+            <dd>{shortenNumber(characterData.health)}</dd>
             <dt className="font-bold">ATK</dt>
-            <dd>100K</dd>
+            <dd>{shortenNumber(characterData.attack)}</dd>
             <dt className="font-bold">Healing</dt>
-            <dd>100K</dd>
-            <dt className="font-bold">Def</dt>
-            <dd>100K</dd>
+            <dd>{shortenNumber(characterData.healing)}</dd>
+            <dt className="font-bold">AC (Defence)</dt>
+            <dd>{shortenNumber(characterData.ac)}</dd>
           </dl>
         </div>
       </div>
@@ -55,20 +66,20 @@ const CharacterCardDetails = (): ReactNode => {
         <Separator />
         <dl className="text-gray-600 dark:text-gray-700">
           <dt className="font-bold">Gold</dt>
-          <dd>2.0T</dd>
+          <dd>{shortenNumber(characterData.gold)}</dd>
           <dt className="font-bold">Gold Dust</dt>
-          <dd>1.0M</dd>
+          <dd>{shortenNumber(characterData.gold_dust)}</dd>
           <dt className="font-bold">Shards</dt>
-          <dd>1.0M</dd>
+          <dd>{shortenNumber(characterData.shards)}</dd>
           <dt className="font-bold">Copper Coins</dt>
-          <dd>1.0M</dd>
+          <dd>{shortenNumber(characterData.copper_coins)}</dd>
         </dl>
       </div>
       <Separator />
       <ProgressButton
-        progress={10}
+        progress={characterInventorProgress}
         on_click={() => openCharacterInventory()}
-        label="Manage Inventory (56/75)"
+        label={`Manage Inventory (${characterData.inventory_count.inventory_count}/${characterData.inventory_count.inventory_max})`}
         variant={ButtonVariant.SUCCESS}
         additional_css="w-full my-2"
       />

resources/js/game/components/actions/partials/floating-cards/character-details/character-card.tsx

@@ -2,17 +2,39 @@ import React, { ReactNode } from 'react';
 
 import CharacterCardDetails from './character-card-details';
 import { useManageCharacterCardVisibility } from './hooks/use-manage-character-card-visibility';
+import { formatNumberWithCommas } from '../../../../../util/format-number';
 import FloatingCard from '../../../components/icon-section/floating-card';
 
+import { GameDataError } from 'game-data/components/game-data-error';
+import { useGameData } from 'game-data/hooks/use-game-data';
+
 const CharacterCard = (): ReactNode => {
   const { closeCharacterChard } = useManageCharacterCardVisibility();
+  const { gameData } = useGameData();
+
+  const characterData = gameData?.character;
+
+  if (!characterData) {
+    return (
+      <FloatingCard title="An error occured" close_action={closeCharacterChard}>
+        <GameDataError />
+      </FloatingCard>
+    );
+  }
 
   return (
     <FloatingCard
-      title="Character Name (Lvl: 5,000)"
+      title={
+        characterData.name +
+        ' (Level ' +
+        formatNumberWithCommas(characterData.level) +
+        '/' +
+        formatNumberWithCommas(characterData.max_level) +
+        ')'
+      }
       close_action={closeCharacterChard}
     >
-      <CharacterCardDetails />
+      <CharacterCardDetails characterData={characterData} />
     </FloatingCard>
   );
 };

resources/js/game/components/actions/partials/floating-cards/character-details/types/character-card-details-props.ts

@@ -0,0 +1,5 @@
+import CharacterSheetDefinition from 'game-data/api-data-definitions/character/character-sheet-definition';
+
+export default interface CharacterCardDetailsProps {
+  characterData: CharacterSheetDefinition;
+}