better account id and display

public/tooldb-worker/index.js

@@ -39,6 +39,15 @@ function afterLogin() {
                 newestDate = data[uuid];
                 newest = uuid;
             }
+            self.toolDb.addKeyListener(self.toolDb.getUserNamespacedKey(`${uuid}-displayname`), (msg) => {
+                if (msg.type === "put") {
+                    (0, reduxAction_1.default)("SET_UUID_DISPLAYNAME", {
+                        displayName: msg.v.displayName,
+                        uuid,
+                    });
+                }
+            });
+            self.toolDb.subscribeData(`${uuid}-displayname`, true);
             self.toolDb.addKeyListener(self.toolDb.getUserNamespacedKey(`${uuid}-cards`), (msg) => {
                 if (msg.type === "put") {
                     (0, reduxAction_1.default)("SET_UUID_CARDS_DATA", { cards: msg.v, uuid });

src/components/App.tsx

@@ -61,7 +61,7 @@ function App(props: AppProps) {
       // console.warn("Worker REDUX_ACTION", action.type, action.arg);
       if (e.data.type === "REDUX_ACTION") {
         const action = e.data.arg;
-        console.warn("Worker REDUX_ACTION", action.type, action.arg);
+        // console.warn("Worker REDUX_ACTION", action.type, action.arg);
         reduxAction(dispatch, {
           type: action.type,
           arg: action.arg,

src/components/popups/ArenaIdSelector.tsx

@@ -23,33 +23,45 @@ export default function ArenaIdSelector(props: ArenaIdSelectorProps) {
         <Close fill="var(--color-text-hover)" />
       </div>
       <div style={{ margin: "22px 16px 16px 16px" }}>
-        <h3 style={{ marginBottom: "16px" }}>
-          Arena User ID{" "}
-          <i style={{ color: "var(--color-text-dark)" }}>
-            (Wizards Account ID)
-          </i>
-        </h3>
-        {Object.keys(uuidData).map((uuid) => {
-          const selected = currentUUID === uuid;
-          return (
-            <div key={`uuid-selector-${uuid}`}>
-              <Radio
-                text={uuid}
-                value={selected}
-                callback={() => {
-                  switchPlayerUUID(uuid);
-                }}
-              />
-            </div>
-          );
-        })}
+        <h3 style={{ marginBottom: "16px" }}>MTG Arena Account User and ID</h3>
+        {Object.keys(uuidData)
+          .filter((v) => v !== "undefined")
+          .map((uuid) => {
+            const { displayName } = uuidData[uuid];
+            const selected = currentUUID === uuid;
+            return (
+              <div key={`uuid-selector-${uuid}`}>
+                <Radio
+                  text={
+                    <p>
+                      {displayName || "Unknown"}
+                      {` - `}
+                      <i
+                        style={{
+                          color: "var(--color-text-dark)",
+                        }}
+                      >
+                        {uuid}
+                      </i>
+                    </p>
+                  }
+                  value={selected}
+                  callback={() => {
+                    switchPlayerUUID(uuid);
+                  }}
+                />
+              </div>
+            );
+          })}
 
         <p style={{ marginTop: "16px", color: "var(--color-text-dark)" }}>
           <b style={{ color: "var(--color-r)" }}>Warning: </b>
           Your cards, decks, matches and rank data are filtered depending on
-          your account id. Switching this while you play with a different
+          your MTGA account. Switching while you play with a different MTGA
           account will result on data being mixed between accounts unexpectedly.
-          MTG Arena Tool might switch between account ids to avoid this from
+          {` `}
+          <b>MTG Arena Tool will switch</b> between accounts automatically
+          depending on what it sees as the current account to avoid this from
           happening.
         </p>
       </div>

src/daemon/fetchPlayerId.ts

@@ -4,10 +4,10 @@ import switchPlayerUUID from "../utils/switchPlayerUUID";
 export default function fetchPlayerId(): Promise<string | undefined> {
   return new Promise((resolve) => {
     if (globalData.daemon) {
-      globalData.daemon.getPlayerId().then((pid) => {
-        if (pid && pid !== "") {
-          switchPlayerUUID(pid);
-          resolve(pid);
+      globalData.daemon.getPlayerId().then((d) => {
+        if (d && d.playerId !== "") {
+          switchPlayerUUID(d.playerId, d.displayName);
+          resolve(d.playerId);
         } else {
           resolve(undefined);
         }

src/daemon/mtgaTrackerDaemon.ts

@@ -13,6 +13,13 @@ import getLocalSetting from "../utils/getLocalSetting";
 import globalData from "../utils/globalData";
 import setLocalSetting from "../utils/setLocalSetting";
 
+interface DaemonPlayerId {
+  playerId: string;
+  displayName?: string;
+  personaId?: string;
+  elapsedTime: number;
+}
+
 interface DaemonInventory {
   gems: number;
   gold: number;
@@ -272,11 +279,11 @@ export default class MtgaTrackerDaemon {
       .catch(() => []);
   }
 
-  public getPlayerId(): Promise<string | null> {
+  public getPlayerId(): Promise<DaemonPlayerId | null> {
     console.log("mtgaTrackerDaemon getPlayerId()");
     return axios
-      .get(`${this._url}/playerId`)
-      .then((d) => d.data.playerId)
+      .get<DaemonPlayerId>(`${this._url}/playerId`)
+      .then((d) => d.data)
       .catch(() => null);
   }
 

src/info.json

@@ -1 +1 @@
-{"version":"6.3.1","branch":"dev","timestamp":1694811826188}
+{"version":"6.3.1","branch":"dev","timestamp":1694979864001}

src/redux/actions.ts

@@ -19,6 +19,7 @@ export const actions = {
   SET_LIVE_FEED: MainDataSlice.setLiveFeed,
   SET_LIVE_FEED_MATCH: MainDataSlice.setLiveFeedMatch,
   SET_UUID: MainDataSlice.setUUID,
+  SET_UUID_DISPLAYNAME: MainDataSlice.setUUIDDisplayName,
   SET_UUID_RANK_DATA: MainDataSlice.setUUIDRank,
   SET_UUID_INVENTORY_DATA: MainDataSlice.setUUIDInventory,
   SET_UUID_CARDS_DATA: MainDataSlice.setUUIDCards,

src/redux/slices/mainDataSlice.ts

@@ -22,6 +22,7 @@ const mainState = {
       rank: DbRankData;
       inventory: DbInventoryData;
       cards: DbCardsData;
+      displayName: string | null;
     }
   >,
   liveFeed: [] as string[],
@@ -41,6 +42,7 @@ export function makeDefaultUUIDData(): MainState["uuidData"][""] {
     rank: { ...defaultRankData, updated: 0 },
     inventory: { ...defaultInventoryData, updated: 0 },
     cards: defaultCardsData,
+    displayName: null,
   };
 }
 
@@ -72,6 +74,20 @@ const mainDataSlice = createSlice({
     setUUID: (state: MainState, action: PayloadAction<string>): void => {
       state.currentUUID = action.payload;
     },
+    setUUIDDisplayName: (
+      state: MainState,
+      action: PayloadAction<{ displayName: string | null; uuid: string }>
+    ): void => {
+      if (!state.uuidData[action.payload.uuid]) {
+        state.uuidData[action.payload.uuid] = {
+          ...makeDefaultUUIDData(),
+          displayName: action.payload.displayName,
+        };
+      } else {
+        state.uuidData[action.payload.uuid].displayName =
+          action.payload.displayName;
+      }
+    },
     setUUIDRank: (
       state: MainState,
       action: PayloadAction<{ rank: DbRankData; uuid: string }>
@@ -152,6 +168,7 @@ export const {
   setLiveFeedMatch,
   setUUID,
   setForceCollection,
+  setUUIDDisplayName,
   setUUIDRank,
   setUUIDInventory,
   setUUIDCards,

src/toolDb/upsertDbDisplayName.ts

@@ -0,0 +1,27 @@
+import reduxAction from "../redux/reduxAction";
+import store from "../redux/stores/rendererStore";
+import { DbDisplayName } from "../types/dbTypes";
+import { putData } from "./worker-wrapper";
+
+export default async function upsertDbDisplayName(
+  displayName: string,
+  uuid: string
+) {
+  console.log("> Upsert displayName", displayName, uuid);
+
+  const { dispatch } = store;
+
+  reduxAction(dispatch, {
+    type: "SET_UUID_DISPLAYNAME",
+    arg: { displayName, uuid },
+  });
+
+  putData<DbDisplayName>(
+    `${uuid}-displayname`,
+    {
+      displayName,
+      updated: new Date().getTime(),
+    },
+    true
+  );
+}

src/types/dbTypes.ts

@@ -93,6 +93,11 @@ export type DbInventoryInfo = Omit<
   "SeqId" | "Changes" | "CustomTokens" | "Vouchers" | "Cosmetics"
 >;
 
+export type DbDisplayName = {
+  displayName: string | null;
+  updated: number;
+};
+
 export type DbCardsData = {
   cards: Cards;
   prevCards: Cards;

src/utils/switchPlayerUUID.ts

@@ -2,10 +2,14 @@ import _ from "lodash";
 
 import reduxAction from "../redux/reduxAction";
 import store from "../redux/stores/rendererStore";
+import upsertDbDisplayName from "../toolDb/upsertDbDisplayName";
 import upsertDbUserdata from "../toolDb/upsertDbuserdata";
 import setLocalSetting from "./setLocalSetting";
 
-export default async function switchPlayerUUID(uuid: string) {
+export default async function switchPlayerUUID(
+  uuid: string,
+  displayName?: string
+) {
   console.info("switchPlayerUUID", uuid);
   setLocalSetting("playerId", uuid);
   const { dispatch, getState } = store;
@@ -15,6 +19,9 @@ export default async function switchPlayerUUID(uuid: string) {
       type: "SET_UUID",
       arg: uuid,
     });
+    if (displayName) {
+      upsertDbDisplayName(displayName, uuid);
+    }
 
     upsertDbUserdata({ [uuid]: new Date().getTime() });
   }

tooldb-worker/afterLogin.ts

@@ -1,5 +1,10 @@
 /* eslint-disable no-restricted-globals */
-import { DbCardsData, DbInventoryData, DbRankData } from "./dbTypes";
+import {
+  DbCardsData,
+  DbDisplayName,
+  DbInventoryData,
+  DbRankData,
+} from "./dbTypes";
 import handleDraftsIndex from "./handleDraftsIndex";
 import handleLiveFeed from "./handleLiveFeed";
 import handleMatchesIndex from "./handleMatchesIndex";
@@ -43,6 +48,19 @@ export default function afterLogin() {
           newest = uuid;
         }
 
+        self.toolDb.addKeyListener<DbDisplayName>(
+          self.toolDb.getUserNamespacedKey(`${uuid}-displayname`),
+          (msg) => {
+            if (msg.type === "put") {
+              reduxAction("SET_UUID_DISPLAYNAME", {
+                displayName: msg.v.displayName,
+                uuid,
+              });
+            }
+          }
+        );
+        self.toolDb.subscribeData(`${uuid}-displayname`, true);
+
         self.toolDb.addKeyListener<DbCardsData>(
           self.toolDb.getUserNamespacedKey(`${uuid}-cards`),
           (msg) => {

tooldb-worker/dbTypes.ts

@@ -26,26 +26,26 @@ export interface InventoryInfo {
   Boosters: { CollationId: number; SetCode: string; Count: number }[];
   Vouchers: any;
   Cosmetics:
-  | any
-  | {
-    ArtStyles: {
-      Type: string;
-      Id: string;
-      ArtId: number;
-      Variant: string;
-    }[];
-    Avatars: { Id: string; Type: string }[];
-    Pets: { Type: string; Id: string; Name: string; Variant: string }[];
-    Sleeves: { Id: string; Type: string }[];
-    Emotes: {
-      Id: string;
-      Type: string;
-      Page: string;
-      FlipType: string;
-      Category: string;
-      Treatment: string;
-    }[];
-  };
+    | any
+    | {
+        ArtStyles: {
+          Type: string;
+          Id: string;
+          ArtId: number;
+          Variant: string;
+        }[];
+        Avatars: { Id: string; Type: string }[];
+        Pets: { Type: string; Id: string; Name: string; Variant: string }[];
+        Sleeves: { Id: string; Type: string }[];
+        Emotes: {
+          Id: string;
+          Type: string;
+          Page: string;
+          FlipType: string;
+          Category: string;
+          Treatment: string;
+        }[];
+      };
 }
 
 export interface CombinedRankInfo {
@@ -161,6 +161,11 @@ export type DbInventoryInfo = Omit<
   "SeqId" | "Changes" | "CustomTokens" | "Vouchers" | "Cosmetics"
 >;
 
+export type DbDisplayName = {
+  displayName: string | null;
+  updated: number;
+};
+
 export type DbCardsData = {
   cards: Cards;
   prevCards: Cards;