Added a way to load the game.

- We load a simplified character sheet
- We load monsters

Various refactorings and changes, including adding in a progress loader.

Also created a way where we can simplify some of the imports such as the api handler, the
new game loader context and so on.

app/Flare/Transformers/CharacterSheetBaseInfoTransformer.php

@@ -57,7 +57,7 @@ public function transform(Character $character): array
             'attack' => $characterStatBuilder->buildTotalAttack(),
             'health' => $characterStatBuilder->buildHealth(),
             'ac' => $characterStatBuilder->buildDefence(),
-            'class_bonus_chance' => (new ClassAttackValue($character))->buildAttackData(),
+            '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),

app/Game/Battle/Controllers/Api/BattleController.php

@@ -91,14 +91,12 @@ public function index(Character $character): JsonResponse
 
         $monsters = collect($monsters);
 
-        return response()->json([
-            'monsters' => $monsters->map(function ($monster) {
-                return [
-                    'id' => $monster['id'],
-                    'name' => $monster['name'],
-                ];
-            }),
-        ]);
+        return response()->json($monsters->map(function ($monster) {
+            return [
+                'id' => $monster['id'],
+                'name' => $monster['name'],
+            ];
+        }));
     }
 
     public function setupMonster(AttackTypeRequest $attackTypeRequest, Character $character, Monster $monster): JsonResponse

app/Game/Character/CharacterSheet/Controllers/Api/CharacterSheetController.php

@@ -46,9 +46,7 @@ public function sheet(Character $character, CharacterSheetBaseInfoTransformer $c
         $character = new Item($character, $characterSheetBaseInfoTransformer);
         $sheet = $this->manager->createData($character)->toArray();
 
-        return response()->json([
-            'sheet' => $sheet,
-        ], 200);
+        return response()->json($sheet);
     }
 
     public function baseCharacterInformation(Character $character, CharacterSheetBaseInfoTransformer $characterBaseInfo)

eslint.config.js

@@ -25,6 +25,9 @@ export default [
             'import/resolver': {
                 alias: {
                     map: [
+                        ['event-system', './resources/js/even-system'],
+                        ['axios', './resources/js/api-handler'],
+                        ['game-data', './resources/js/game-data'],
                         ['components', './resources/js/components'],
                         ['ui', './resources/js/ui'],
                         ['service-container', './resources/js/service-container'],
@@ -69,11 +72,21 @@ export default [
                             group: "internal",
                             position: "before",
                         },
+                        {
+                            pattern: "api-handler/**",
+                            group: "internal",
+                            position: "after",
+                        },
                         {
                             pattern: "event-system/**",
                             group: "internal",
                             position: "after",
                         },
+                        {
+                            pattern: "game-data/**",
+                            group: "internal",
+                            position: "after",
+                        },
                         {
                             pattern: "ui/**",
                             group: "internal",

resources/js/axios/axios.tsx → resources/js/api-handler/api-handler.tsx

@@ -2,7 +2,7 @@ import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
 import AxiosDefinition from './definitions/axios-definition';
 
-export default class Axios implements AxiosDefinition {
+export default class ApiHandler implements AxiosDefinition {
   async get<T>(url: string, config: AxiosRequestConfig = {}): Promise<T> {
     this.setCsrfToken(config);
     const modifiedUrl = this.addApiPrefix(url);
@@ -64,7 +64,9 @@ export default class Axios implements AxiosDefinition {
       }
       config.headers = {
         ...config.headers,
+        Accept: 'application/json',
         'X-CSRF-Token': csrfToken,
+        'X-Requested-With': 'XMLHttpRequest',
       };
     }
   }

resources/js/axios/axios-service-container.ts → resources/js/api-handler/axios-service-container.ts

@@ -1,11 +1,11 @@
 import { ModularContainerDefinition } from 'configuration/deffinitions/modular-container-definition';
 
-import Axios from './axios';
+import ApiHandler from './api-handler';
 import AxiosDefinition from './definitions/axios-definition';
 import CoreContainerDefinition from '../service-container/deffinitions/core-container-definition';
 
 export const axiosServiceContainer: ModularContainerDefinition = (
   container: CoreContainerDefinition
 ) => {
-  container.register<AxiosDefinition>('ApiHandler', new Axios());
+  container.register<AxiosDefinition>('ApiHandler', new ApiHandler());
 };

resources/js/api-handler/definitions/api-parameters-definitions.ts

@@ -0,0 +1,4 @@
+export default interface ApiParametersDefinitions {
+  url: string;
+  urlParams?: Record<string, number>;
+}

resources/js/api-handler/definitions/axios-error-definition.ts

@@ -0,0 +1,3 @@
+export type AxiosErrorDefinition = {
+  message: string;
+};

resources/js/bootstrap.js

@@ -9,32 +9,6 @@ try {
 } catch (e) {
 }
 
-/**
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * CSRF token as a header based on the value of the "XSRF" token cookie.
- */
-
-import axios from 'axios';
-window.axios = axios;
-
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
-let token = document.head.querySelector('meta[name="csrf-token"]');
-
-axios.interceptors.request.use(function (config) {
-    config.headers = {
-        Accept: 'application/json',
-        'X-CSRF-TOKEN': token.content,
-        'X-Requested-With': 'XMLHttpRequest'
-    };
-
-    return config;
-}, function (error) {
-    return Promise.reject(error);
-});
-
-
 /**
  * Echo exposes an expressive API for subscribing to channels and listening
  * for events that are broadcast by Laravel. Echo and event broadcasting

resources/js/configuration/modular-container.ts

@@ -1,7 +1,7 @@
+import { axiosServiceContainer } from 'api-handler/axios-service-container';
 import { eventServiceContainer } from 'event-system/event-service-container';
 
 import { ModularContainerDefinition } from './deffinitions/modular-container-definition';
-import { axiosServiceContainer } from '../axios/axios-service-container';
 
 /**
  * Register service containers here.

resources/js/event-system/event-emitter.ts

@@ -14,8 +14,6 @@ export default class EventEmitter<T extends EventMapDefinition>
     }
 
     this.listeners[eventType].push(listener);
-
-    console.log(this.listeners);
   }
 
   emit<K extends keyof T>(eventType: K, data: T[K]): void {

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

@@ -0,0 +1,33 @@
+import InventoryCountDefinition from './inventory-count-definition';
+
+export default interface CharacterSheetDefinition {
+  id: number;
+  user_id: number;
+  name: string;
+  class: string;
+  class_id: number;
+  class_bonus_chance: number;
+  race: string;
+  race_id: number;
+  level: string;
+  max_level: string;
+  xp: number;
+  xp_next: number;
+  to_hit_stat: string;
+  ac: number;
+  attack: number;
+  health: number;
+  resurrection_chance: number;
+  gold: string;
+  gold_dust: string;
+  shards: string;
+  copper_coins: string;
+  str_modded: number;
+  dex_modded: number;
+  int_modded: number;
+  dur_modded: number;
+  agi_modded: number;
+  chr_modded: number;
+  focus_modded: number;
+  inventory_count: InventoryCountDefinition;
+}

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

@@ -0,0 +1,7 @@
+export default interface InventoryCountDefinition {
+  inventory_max: number;
+  inventory_count: number;
+  gem_bag_count: number;
+  inventory_bag_count: number;
+  alchemy_item_count: number;
+}

resources/js/game-data/api-data-definitions/monsters/monster-definition.ts

@@ -0,0 +1,4 @@
+export default interface MonsterDefinition {
+  name: string;
+  id: number;
+}

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

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+
+import { GameDataContext } from '../game-data-context';
+import GameDataProviderProps from './types/game-data-provider-props';
+import GameDataDefinition from '../deffinitions/game-data-definition';
+
+const GameDataProvider = (props: GameDataProviderProps): React.ReactNode => {
+  const [gameData, setGameData] = useState<GameDataDefinition | null>(null);
+
+  return (
+    <GameDataContext.Provider value={{ gameData, setGameData }}>
+      {props.children}
+    </GameDataContext.Provider>
+  );
+};
+
+export default GameDataProvider;

resources/js/game-data/components/types/game-data-provider-props.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export default interface GameDataProviderProps {
+  children: ReactNode;
+}

resources/js/game-data/deffinitions/game-data-context-definition.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import GameDataDefinition from './game-data-definition';
+
+export default interface GameDataContextDefinition {
+  gameData: GameDataDefinition | null;
+  setGameData: React.Dispatch<React.SetStateAction<GameDataDefinition | null>>;
+}

resources/js/game-data/deffinitions/game-data-definition.ts

@@ -0,0 +1,7 @@
+import CharacterSheetDefinition from '../api-data-definitions/character/character-sheet-definition';
+import MonsterDefinition from '../api-data-definitions/monsters/monster-definition';
+
+export default interface GameDataDefinition {
+  character: CharacterSheetDefinition | null;
+  monsters: MonsterDefinition[] | [];
+}

resources/js/game-data/game-data-context.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+import GameDataContextDefinition from './deffinitions/game-data-context-definition';
+
+export const GameDataContext = createContext<GameDataContextDefinition | null>(
+  null
+);

resources/js/game-data/hooks/use-game-data.ts

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+
+import GameDataContextDefinition from '../deffinitions/game-data-context-definition';
+import { GameDataContext } from '../game-data-context';
+
+export const useGameData = (): GameDataContextDefinition => {
+  const context = useContext(GameDataContext);
+
+  if (!context) {
+    throw new Error('useGameData must be used within an GameDataProvider');
+  }
+
+  return context;
+};

resources/js/game/components/actions/partials/monster-stat-section/monster-stat-section.tsx

@@ -5,14 +5,14 @@ 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 ContainerWithTitle from 'ui/container/container-with-title';
 import Separator from 'ui/seperatror/separator';
 
 export const MonsterStatSection = (): ReactNode => {
   const { closeMonsterStats } = useManageMonsterStatSectionVisibility();
 
   return (
-    <Container
+    <ContainerWithTitle
       manageSectionVisibility={closeMonsterStats}
       title={'Monster Name'}
     >
@@ -149,6 +149,6 @@ export const MonsterStatSection = (): ReactNode => {
           </div>
         </div>
       </Card>
-    </Container>
+    </ContainerWithTitle>
   );
 };