feat(calcdex): added proper myPokemon support

and by proper, I mean it might properly work lmaoo

src/pages/Calcdex/Calcdex.bootstrap.tsx

@@ -1,35 +1,44 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { createSideRoom, getActiveBattle } from '@showdex/utils/app';
+import {
+  createSideRoom,
+  // getActiveBattle,
+  getBattleRoom,
+} from '@showdex/utils/app';
 import { logger } from '@showdex/utils/debug';
 import { calcBattleCalcdexNonce } from './calcCalcdexNonce';
 import { Calcdex } from './Calcdex';
 
 const l = logger('Calcdex.bootstrap');
 
-export const bootstrap = (roomId?: string): void => {
+export const bootstrap = (roomid?: string): void => {
   l.debug(
     'Calcdex bootstrapper was invoked;',
     'determining if there\'s anything to do...',
   );
 
-  if (!roomId?.startsWith?.('battle-')) {
+  if (!roomid?.startsWith?.('battle-')) {
     l.debug(
-      'Calcdex bootstrap request was ignored for roomId', roomId,
+      'Calcdex bootstrap request was ignored for roomid', roomid,
       'since it\'s not a BattleRoom',
     );
 
     return;
   }
 
+  // const {
+  //   battle,
+  //   tooltips,
+  // } = app.curRoom as BattleRoom;
+
   const {
     battle,
     tooltips,
-  } = app.curRoom as BattleRoom;
+  } = getBattleRoom(roomid);
 
   if (!battle?.id) {
     l.debug(
-      'Calcdex bootstrap request was ignored for roomId', roomId,
+      'Calcdex bootstrap request was ignored for roomid', roomid,
       'since no proper battle object exists within the current BattleRoom',
     );
 
@@ -51,42 +60,53 @@ export const bootstrap = (roomId?: string): void => {
     subscriptionDirty,
   } = battle || { subscription: null };
 
-  if (typeof subscription === 'function') {
-    battle.prevSubscription = subscription;
-  }
-
   if (!subscriptionDirty) {
     l.debug(
       'battle\'s subscription isn\'t dirty yet!',
       '\n', 'about to inject some real filth into battle.subscribe()...',
       '\n', 'subscriptionDirty', subscriptionDirty,
     );
 
+    if (typeof subscription === 'function' && typeof prevSubscription !== 'function') {
+      l.debug('remapping original subscription() function to prevSubscription()');
+
+      battle.prevSubscription = subscription.bind(battle) as typeof subscription;
+    }
+
+    // note: battle.subscribe() internally sets its `subscription` property to the `listener` arg
+    // (in js/battle.js) battle.subscribe = function (listener) { this.subscription = listener; };
     battle.subscribe((state) => {
       l.debug(
         'battle.subscribe()',
         '\n', 'state', state,
       );
 
-      if (state === 'paused') {
+      if (typeof battle.prevSubscription === 'function') {
         l.debug(
           'battle.subscribe()',
-          '\n', 'subscription ignored cause the battle is paused or, probs more likely, ended',
+          '\n', 'calling the original battle.subscribe() function...',
         );
 
-        return;
+        battle.prevSubscription(state);
       }
 
-      if (typeof prevSubscription === 'function') {
+      if (state === 'paused') {
         l.debug(
           'battle.subscribe()',
-          '\n', 'calling the original battle.subscribe() function...',
+          '\n', 'subscription ignored cause the battle is paused or, probs more likely, ended',
         );
 
-        prevSubscription(state);
+        return;
       }
 
-      const activeBattle = getActiveBattle();
+      // const activeBattle = getActiveBattle();
+      const { battle: activeBattle } = getBattleRoom(roomid);
+
+      l.debug(
+        'battle.subscribe() <- getBattleRoom()',
+        '\n', 'roomid', roomid,
+        '\n', 'activeBattle', activeBattle,
+      );
 
       if (!activeBattle) {
         l.warn(
@@ -98,7 +118,7 @@ export const bootstrap = (roomId?: string): void => {
       }
 
       if (!activeBattle.calcdexRoom) {
-        const calcdexRoomId = `view-calcdex-${roomId}`;
+        const calcdexRoomId = `view-calcdex-${roomid}`;
 
         l.debug(
           'battle.subscribe() -> createSideRoom()',

src/pages/Calcdex/Calcdex.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { logger, printBuildInfo } from '@showdex/utils/debug';
+import { detectPlayerKeyFromBattle } from './detectPlayerKey';
 import { FieldCalc } from './FieldCalc';
 import { PlayerCalc } from './PlayerCalc';
 import { useCalcdex } from './useCalcdex';
@@ -39,26 +40,42 @@ export const Calcdex = ({
   const {
     gen,
     field,
+    format,
     p1,
     p2,
   } = state;
 
+  const playerKey = detectPlayerKeyFromBattle(battle);
+
+  const player = playerKey === 'p1' ? p1 : p2;
+  const opponent = playerKey === 'p1' ? p2 : p1;
+
   return (
-    <div className={cx('showdex-module', styles.container)}>
+    <div
+      className={cx(
+        'showdex-module',
+        styles.container,
+      )}
+    >
       <div className={styles.content}>
         <div className={styles.buildInfo}>
           {printBuildInfo()}
         </div>
 
         <PlayerCalc
-          player={p1}
-          opponent={p2}
+          format={format}
+          playerKey={playerKey}
+          player={player}
+          opponent={opponent}
           field={field}
           gen={gen}
           dex={dex}
-          defaultName="Player 1"
+          defaultName="Player"
           onPokemonChange={updatePokemon}
-          onIndexSelect={(index) => setSelectionIndex('p1', index)}
+          onIndexSelect={(index) => setSelectionIndex(
+            playerKey,
+            index,
+          )}
         />
 
         <FieldCalc
@@ -69,14 +86,19 @@ export const Calcdex = ({
 
         <PlayerCalc
           style={{ marginTop: 30 }}
-          player={p2}
-          opponent={p1}
+          format={format}
+          playerKey={playerKey}
+          player={opponent}
+          opponent={player}
           field={field}
           gen={gen}
           dex={dex}
-          defaultName="Player 2"
+          defaultName="Opponent"
           onPokemonChange={updatePokemon}
-          onIndexSelect={(index) => setSelectionIndex('p2', index)}
+          onIndexSelect={(index) => setSelectionIndex(
+            playerKey === 'p1' ? 'p2' : 'p1',
+            index,
+          )}
         />
       </div>
     </div>

src/pages/Calcdex/PlayerCalc.tsx

@@ -6,6 +6,7 @@ import type { Generation, GenerationNum } from '@pkmn/data';
 import type {
   CalcdexBattleField,
   CalcdexPlayer,
+  CalcdexPlayerKey,
   CalcdexPokemon,
 } from './CalcdexReducer';
 import { PokeCalc } from './PokeCalc';
@@ -14,6 +15,8 @@ import styles from './PlayerCalc.module.scss';
 interface PlayerCalcProps {
   className?: string;
   style?: React.CSSProperties;
+  format?: string;
+  playerKey?: CalcdexPlayerKey;
   player: CalcdexPlayer;
   opponent: CalcdexPlayer;
   field?: CalcdexBattleField;
@@ -27,12 +30,14 @@ interface PlayerCalcProps {
 export const PlayerCalc = ({
   className,
   style,
+  format,
+  playerKey = 'p1',
   player,
   opponent,
   field,
   gen,
   dex,
-  defaultName = 'p1',
+  defaultName = '--',
   onPokemonChange,
   onIndexSelect,
 }: PlayerCalcProps): JSX.Element => {
@@ -108,17 +113,13 @@ export const PlayerCalc = ({
 
       <PokeCalc
         style={{ paddingTop: 15 }}
-        // pokemon={selected}
-        // vsPokemon={vsPokemon}
+        format={format}
         playerPokemon={playerPokemon}
         opponentPokemon={opponentPokemon}
-        // tooltips={tooltips}
-        // format={format}
-        // smogon={smogon}
         field={{
           ...field,
-          attackerSide: playerSideId === 'p1' ? field?.attackerSide : field?.defenderSide,
-          defenderSide: playerSideId === 'p1' ? field?.defenderSide : field?.attackerSide,
+          attackerSide: playerSideId === playerKey ? field?.attackerSide : field?.defenderSide,
+          defenderSide: playerSideId === playerKey ? field?.defenderSide : field?.attackerSide,
         }}
         gen={gen}
         dex={dex}