Merge pull request #20 from imjangkar/add-might-favor

Add might favor

gui/src/App.tsx

@@ -73,6 +73,7 @@ const Init = ({ children }: { children: React.ReactNode }) => {
     updateFame,
     updateReSpec,
     updateSilver,
+    updateMightAndFavor,
     updateLocation,
     updateIsDPSMeterRunning,
     updateParty,
@@ -96,6 +97,12 @@ const Init = ({ children }: { children: React.ReactNode }) => {
         updateReSpec(ws_event.payload.re_spec_gained);
       } else if (ws_event.type == "update_silver") {
         updateSilver(ws_event.payload.username, ws_event.payload.silver_gained);
+      } else if (ws_event.type == "update_might_and_favor") {
+        updateMightAndFavor(
+          ws_event.payload.username,
+          ws_event.payload.might_gained,
+          ws_event.payload.favor_gained
+        );
       } else if (ws_event.type == "update_location") {
         updateLocation(ws_event.payload.map, ws_event.payload.dungeon);
       } else if (ws_event.type == "update_damage_meter") {

gui/src/components/DungeonCard.tsx

@@ -83,20 +83,63 @@ const DungeonCard = ({ dungeon }: DungeonCardProps) => {
           onChange={(e) => setTier(e.target.value)}
         />
       </div>
-      <div className={app.options}>
-        <div className={app.stats}>
+      <div className={styles.statRow}>
+        <div className={styles.stats}>
           <img src="fame.png" width={"24px"} />
-          <Typography>{formatter(Math.round(dungeon.fame))}</Typography>
+          <div>
+            <Typography fontWeight={"bold"}>
+              {formatter(Math.round(dungeon.fame))}
+            </Typography>
+            <Typography variant="body2">
+              {formatter(Math.round(dungeon.fame_per_hour))}/hr
+            </Typography>
+          </div>
         </div>
-        <div className={app.stats}>
+        <div className={styles.stats}>
           <img src="silver.png" width={"24px"} />
-          <Typography>{formatter(Math.round(dungeon.silver))}</Typography>
+          <div>
+            <Typography fontWeight={"bold"}>
+              {formatter(Math.round(dungeon.silver))}
+            </Typography>
+            <Typography variant="body2">
+              {formatter(Math.round(dungeon.silver_per_hour))}/hr
+            </Typography>
+          </div>{" "}
         </div>
-        <div className={app.stats}>
+        <div className={styles.stats}>
           <img src="re_spec.png" width={"24px"} />
-          <Typography>{formatter(Math.round(dungeon.re_spec))}</Typography>
+          <div>
+            <Typography fontWeight={"bold"}>
+              {formatter(Math.round(dungeon.re_spec))}
+            </Typography>
+            <Typography variant="body2">
+              {formatter(Math.round(dungeon.re_spec_per_hour))}/hr
+            </Typography>
+          </div>{" "}
         </div>
-        <div className={app.stats}>
+        <div className={styles.stats}>
+          <img src="might.png" width={"24px"} />
+          <div>
+            <Typography fontWeight={"bold"}>
+              {formatter(Math.round(dungeon.might))}
+            </Typography>
+            <Typography variant="body2">
+              {formatter(Math.round(dungeon.might_per_hour))}/hr
+            </Typography>
+          </div>{" "}
+        </div>
+        <div className={styles.stats}>
+          <img src="favor.png" width={"24px"} />
+          <div>
+            <Typography fontWeight={"bold"}>
+              {formatter(Math.round(dungeon.favor))}
+            </Typography>
+            <Typography variant="body2">
+              {formatter(Math.round(dungeon.favor_per_hour))}/hr
+            </Typography>
+          </div>{" "}
+        </div>
+        <div className={styles.stats}>
           <AccessTimeIcon />
           {dungeon.time_elapsed}
         </div>

gui/src/pages/DPSMeter.tsx

@@ -3,17 +3,17 @@ import { useContext, useRef, useState } from "react";
 import styles from "./DPSMeter.module.css";
 import dungeon from "./DungeonTracker.module.css";
 
-import app from "../App.module.css";
-import Checkbox from "../components/Checkbox";
-import { WorldContext } from "../providers/WorldProvider";
-import { WebsocketContext } from "../providers/WebsocketProvider";
-import { Alert, Button, Collapse, Typography } from "@mui/material";
 import {
+  ContentCopy,
   FiberManualRecord,
   Pause,
-  ContentCopy,
   RestartAlt,
 } from "@mui/icons-material";
+import { Alert, Button, Collapse, Typography } from "@mui/material";
+import app from "../App.module.css";
+import Checkbox from "../components/Checkbox";
+import { WebsocketContext } from "../providers/WebsocketProvider";
+import { WorldContext } from "../providers/WorldProvider";
 
 import { theme } from "../theme";
 
@@ -140,6 +140,14 @@ const DPSMeter = () => {
             <img src="re_spec.png" width={"24px"} />
             <Typography>{formatter(Math.round(me.re_spec))}</Typography>
           </div>
+          <div className={app.stats}>
+            <img src="might.png" width={"24px"} />
+            <Typography>{formatter(Math.round(me.might))}</Typography>
+          </div>
+          <div className={app.stats}>
+            <img src="favor.png" width={"24px"} />
+            <Typography>{formatter(Math.round(me.favor))}</Typography>
+          </div>
         </div>
         <Button
           variant="text"

gui/src/pages/DungeonTracker.module.css

@@ -17,6 +17,20 @@
   font-weight: bold;
 }
 
+.stats {
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  gap: 0.5rem;
+}
+
+.statRow {
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  gap: 3rem;
+}
+
 .stickToTop {
   z-index: 10;
 
@@ -27,3 +41,11 @@
   width: 100%;
   padding: 24px 0;
 }
+
+@media screen and (max-width: 1000px) {
+  .statRow {
+    width: 100%;
+    justify-content: space-between;
+    gap: 0;
+  }
+}

gui/src/providers/WorldProvider.tsx

@@ -5,6 +5,8 @@ type PlayerCharacter = {
   fame: number;
   re_spec: number;
   silver: number;
+  might: number;
+  favor: number;
   weapon: string;
 };
 
@@ -33,8 +35,15 @@ export type Dungeon = {
   name: string;
   tier: number;
   fame: number;
+  fame_per_hour: number;
   silver: number;
+  silver_per_hour: number;
   re_spec: number;
+  re_spec_per_hour: number;
+  might: number;
+  might_per_hour: number;
+  favor: number;
+  favor_per_hour: number;
   date_time: string;
   time_elapsed: string;
   meter: PartyMember[];
@@ -82,6 +91,11 @@ type WorldContextData = {
   updateHealthCheck: (healthCheck: HealthCheck) => void;
   updateReSpec: (re_spec_gained: number) => void;
   updateSilver: (username: string, silver_gained: number) => void;
+  updateMightAndFavor: (
+    username: string,
+    might_gained: number,
+    favor_gained: number
+  ) => void;
   updateLocation: (map: string, dungeon: string) => void;
   updateIsDPSMeterRunning: (value: boolean) => void;
   updateParty: (party: PartyMember[]) => void;
@@ -97,6 +111,8 @@ export const WorldContext = React.createContext<WorldContextData>({
     re_spec: 0,
     silver: 0,
     weapon: "Waiting for backend",
+    might: 0,
+    favor: 0,
   },
   world: {
     map: "None",
@@ -123,6 +139,7 @@ export const WorldContext = React.createContext<WorldContextData>({
   updateFame: () => {},
   updateReSpec: () => {},
   updateSilver: () => {},
+  updateMightAndFavor: () => {},
   updateLocation: () => {},
   updateIsDPSMeterRunning: () => {},
   updateParty: () => {},
@@ -142,6 +159,8 @@ const WorldProvider = ({ children }: WorldProviderProps) => {
     re_spec: 0,
     silver: 0,
     weapon: "Waiting for backend",
+    might: 0,
+    favor: 0,
   });
 
   const [world, setWorld] = useState<World>({
@@ -172,6 +191,8 @@ const WorldProvider = ({ children }: WorldProviderProps) => {
       fame: me.fame,
       re_spec: me.re_spec,
       silver: me.silver,
+      might: me.might,
+      favor: me.favor,
       weapon: me.weapon,
     });
     setWorld({
@@ -190,6 +211,8 @@ const WorldProvider = ({ children }: WorldProviderProps) => {
       fame: me.fame,
       re_spec: me.re_spec,
       silver: me.silver,
+      might: me.might,
+      favor: me.favor,
       weapon: me.weapon,
     });
   };
@@ -216,6 +239,19 @@ const WorldProvider = ({ children }: WorldProviderProps) => {
       }));
     }
   };
+  const updateMightAndFavor = (
+    username: string,
+    might_gained: number,
+    favor_gained: number
+  ) => {
+    if (username == me.username) {
+      setMe((prev) => ({
+        ...prev,
+        might: might_gained,
+        favor: favor_gained,
+      }));
+    }
+  };
 
   const updateLocation = (map: string, dungeon: string) =>
     setWorld((prev) => ({
@@ -289,6 +325,7 @@ const WorldProvider = ({ children }: WorldProviderProps) => {
         updateFame,
         updateReSpec,
         updateSilver,
+        updateMightAndFavor,
         updateLocation,
         updateIsDPSMeterRunning,
         updateParty,

gui/src/theme.tsx

@@ -35,6 +35,9 @@ export const theme = createTheme({
     body1: {
       fontSize: "1rem",
     },
+    body2: {
+      fontSize: "0.8rem",
+    },
   },
   components: {
     MuiInput: {

pyproject.toml

@@ -20,7 +20,7 @@ albibong = "albibong:main"
 
 [project]
 name = "albibong"
-version = "1.1.0"
+version = "1.1.1"
 authors = [
   { name="imjangkar", email="[email protected]" },
 ]
@@ -36,6 +36,7 @@ dependencies = [
   "websockets==12.0",
   "pywebview==5.1",
   "peewee==3.17.6",
+  "peewee-migrate==1.13.0",
 ]
 
 [project.urls]