character stats in ui

mbrinkl · Dec 1, 2024 · c8de054 · c8de054
1 parent 95d7e63
commit c8de054
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 17 deletions.
diff --git a/packages/client/src/api/index.ts b/packages/client/src/api/index.ts
@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { CharacterInfo, Encyclopedia } from "@artifacts/shared";
+import { CharacterInfo, CharacterInfoResponse, Encyclopedia } from "@artifacts/shared";
 import { serverUrl } from "../config";
 
 const fetcher = async <T>(path: string, token: string, method: "GET" | "POST" = "GET", body?: BodyInit): Promise<T> => {
@@ -25,8 +25,8 @@ export const useGetEncyclopediaQuery = (token: string) =>
 export const useGetDashboardDataQuery = (token: string) =>
   useQuery({
     queryKey: ["characters"],
-    queryFn: () => fetcher<CharacterInfo[]>("/characters", token),
-    refetchInterval: 15000,
+    queryFn: () => fetcher<CharacterInfoResponse>("/characters", token),
+    refetchInterval: 20000,
     retry: false,
   });
 
@@ -35,7 +35,7 @@ export const useUpdateActivityMutation = () => {
 
   return useMutation({
     mutationFn: ({ token, characterInfo }: { token: string; characterInfo: CharacterInfo }) =>
-      fetcher<CharacterInfo[]>("/update", token, "POST", JSON.stringify(characterInfo)),
+      fetcher<CharacterInfoResponse>("/update", token, "POST", JSON.stringify(characterInfo)),
     onSuccess: (data) => {
       queryClient.setQueryData(["characters"], data);
     },

diff --git a/packages/client/src/components/CharacterStats.tsx b/packages/client/src/components/CharacterStats.tsx
@@ -0,0 +1,64 @@
+import { CharacterInfoResponse } from "@artifacts/shared";
+import { Flex, Image, Text } from "@mantine/core";
+
+interface CharacterStatsProps {
+  character: CharacterInfoResponse[0];
+}
+
+export const CharacterStats = ({ character: c }: CharacterStatsProps) => {
+  return (
+    <Flex justify="center" gap="md" wrap="wrap">
+      <Text>
+        Level: {c.level} ({c.xp} / {c.max_xp})
+      </Text>
+      <Flex align="center">
+        <Image h={25} w="auto" fit="contain" src="https://artifactsmmo.com/images/effects/alchemy.png" />
+        <Text>
+          Alchemy: Lv{c.alchemy_level} ({c.alchemy_xp} / {c.alchemy_max_xp})
+        </Text>
+      </Flex>
+      <Flex align="center">
+        <Image h={25} w="auto" fit="contain" src="https://artifactsmmo.com/images/items/cooked_chicken.png" />
+        <Text>
+          Cooking: Lv{c.cooking_level} ({c.cooking_xp} / {c.cooking_max_xp})
+        </Text>
+      </Flex>
+      <Flex align="center">
+        <Image h={25} w="auto" fit="contain" src="https://artifactsmmo.com/images/effects/fishing.png" />
+        <Text>
+          Fishing: Lv{c.fishing_level} ({c.fishing_xp} / {c.fishing_max_xp})
+        </Text>
+      </Flex>
+      <Flex align="center">
+        <Image h={25} w="auto" fit="contain" src="https://artifactsmmo.com/images/items/iron_armor.png" />
+        <Text>
+          Gearcrafting: Lv{c.gearcrafting_level} ({c.gearcrafting_xp} / {c.gearcrafting_max_xp})
+        </Text>
+      </Flex>
+      <Flex align="center">
+        <Image h={25} w="auto" fit="contain" src="https://artifactsmmo.com/images/items/ruby_ring.png" />
+        <Text>
+          Jewelrycrafting: Lv{c.jewelrycrafting_level} ({c.jewelrycrafting_xp} / {c.jewelrycrafting_max_xp})
+        </Text>
+      </Flex>
+      <Flex align="center">
+        <Image h={25} w="auto" fit="contain" src="https://artifactsmmo.com/images/effects/mining.png" />
+        <Text>
+          Mining: Lv{c.mining_level} ({c.mining_xp} / {c.mining_max_xp})
+        </Text>
+      </Flex>
+      <Flex align="center">
+        <Image h={25} w="auto" fit="contain" src="https://artifactsmmo.com/images/items/iron_sword.png" />
+        <Text>
+          Weaponcrafting: Lv{c.weaponcrafting_level} ({c.weaponcrafting_xp} / {c.weaponcrafting_max_xp})
+        </Text>
+      </Flex>
+      <Flex align="center">
+        <Image h={25} w="auto" fit="contain" src="https://artifactsmmo.com/images/effects/woodcutting.png" />
+        <Text>
+          Woodcutting: Lv{c.woodcutting_level} ({c.woodcutting_xp} / {c.woodcutting_max_xp})
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/packages/client/src/components/DashboardCharacter.tsx b/packages/client/src/components/DashboardCharacter.tsx
@@ -1,11 +1,19 @@
 import { useState } from "react";
-import { Activity, ActivityName, ActivityParams, CharacterInfo, Encyclopedia } from "@artifacts/shared";
+import {
+  Activity,
+  ActivityName,
+  ActivityParams,
+  CharacterInfo,
+  CharacterInfoResponse,
+  Encyclopedia,
+} from "@artifacts/shared";
 import { Button, Flex, Group, Image, Paper, Text } from "@mantine/core";
 import { ActivitySelector } from "./ActivitySelector";
 import styles from "./DashboardCharacter.module.css";
+import { CharacterStats } from "./CharacterStats";
 
 interface DashboardCharacterProps {
-  character: CharacterInfo;
+  character: CharacterInfoResponse[0];
   encyclopedia: Encyclopedia;
   update: (info: CharacterInfo) => void;
 }
@@ -44,14 +52,19 @@ export const DashboardCharacter = ({ character, update, encyclopedia }: Dashboar
     <Paper p="sm" className={`${styles.container} ${isActive ? styles.active : styles.inactive}`}>
       <Flex justify="center" direction="column" style={{ textAlign: "center" }}>
         <Flex justify="center" align="center" gap="sm">
-          <Image mah={50} w="auto" fit="contain" src="https://artifactsmmo.com/images/characters/men1.png" />
+          <Image
+            mah={50}
+            w="auto"
+            fit="contain"
+            src={`https://artifactsmmo.com/images/characters/${character.skin}.png`}
+          />
           <Text size="xl" fw="bold">
             {character.characterName}
           </Text>
         </Flex>
-        {character.error && <Text>Error: {character.error}</Text>}
+        <CharacterStats character={character} />
         <Text>Default Activity: none</Text>
-        <Text>Stats: ...</Text>
+        {character.error && <Text>Error: {character.error}</Text>}
       </Flex>
 
       <Flex direction="column" gap="sm" pb="sm">

diff --git a/packages/server/src/app.controller.ts b/packages/server/src/app.controller.ts
@@ -1,6 +1,6 @@
 import { Body, Controller, Get, HttpException, HttpStatus, Inject, Post } from "@nestjs/common";
 import { AppService } from "./app.service";
-import { CharacterInfo, Encyclopedia } from "@artifacts/shared";
+import { CharacterInfo, CharacterInfoResponse, Encyclopedia } from "@artifacts/shared";
 import { InitialData } from "./services/artifactsApi.service";
 
 @Controller()
@@ -16,8 +16,8 @@ export class AppController {
   }
 
   @Get("characters")
-  getCharacters(): CharacterInfo[] {
-    return this.appService.getAllCharacterInfo();
+  async getCharacters(): Promise<CharacterInfoResponse> {
+    return await this.appService.getAllCharacterInfo();
   }
 
   @Post("update")
@@ -30,8 +30,8 @@ export class AppController {
   }
 
   @Post("clear-all")
-  clearAll(): CharacterInfo[] {
+  async clearAll(): Promise<CharacterInfoResponse> {
     this.appService.clearAll();
-    return this.appService.getAllCharacterInfo();
+    return await this.appService.getAllCharacterInfo();
   }
 }
diff --git a/packages/server/src/app.service.ts b/packages/server/src/app.service.ts
@@ -1,5 +1,5 @@
 import { Inject, Injectable, Logger, OnModuleInit } from "@nestjs/common";
-import { CharacterInfo } from "@artifacts/shared";
+import { CharacterInfo, CharacterInfoResponse } from "@artifacts/shared";
 import { Queue } from "./queue/queue";
 import { CharacterActivityService } from "./services/characterActivity.service";
 import { ArtifactsApiService, InitialData } from "./services/artifactsApi.service";
@@ -31,8 +31,15 @@ export class AppService implements OnModuleInit {
     });
   }
 
-  getAllCharacterInfo(): CharacterInfo[] {
-    return [...this.ctxMap.values()].map(({ characterName, activity, error }) => ({ characterName, activity, error }));
+  async getAllCharacterInfo(): Promise<CharacterInfoResponse> {
+    // TODO should keep this updated using a queue callback
+    const characters = await this.client.getCharacters();
+    return [...this.ctxMap.values()].map(({ characterName, activity, error }) => ({
+      characterName,
+      activity,
+      error,
+      ...characters.find((x) => x.name === characterName),
+    }));
   }
 
   async update(info: CharacterInfo, updateDb: boolean = true): Promise<void> {

diff --git a/packages/shared/src/character.ts b/packages/shared/src/character.ts
@@ -1,7 +1,10 @@
 import { Activity } from "./activity";
+import { Character } from "./derived";
 
 export interface CharacterInfo {
   characterName: string;
   activity: Activity | null;
   error?: string;
 }
+
+export type CharacterInfoResponse = (CharacterInfo & Character)[];