Merge pull request #2 from tribalwarshelp/WarStatsPage-more-info

[WarStatsPage] - improvements, add the number of villages that each side has in the Results component
2021-01-06 12:19:22 +01:00 · 2021-01-06 12:19:22 +01:00 · 5309807864
commit 5309807864
parent 0f4d77841c 4578ac01d1
9 changed files with 92 additions and 37 deletions
--- a/src/features/ServerPage/features/WarStatsPage/WarStatsPage.tsx
+++ b/src/features/ServerPage/features/WarStatsPage/WarStatsPage.tsx
@ -64,10 +64,10 @@ function WarStatsPage() {
    handleChangePlayers: sideTwoHandleChangePlayers,
    handleChangeTribes: sideTwoHandleChangeTribes,
  } = useSide(server.key, { paramNamePrefix: 'sideTwo' });
-  const selectedPlayersIDs = useMemo(() => {
+  const selectedPlayerIDs = useMemo(() => {
    return [...sideOnePlayers.map(p => p.id), ...sideTwoPlayers.map(p => p.id)];
  }, [sideOnePlayers, sideTwoPlayers]);
-  const selectedTribesIDs = useMemo(() => {
+  const selectedTribeIDs = useMemo(() => {
    return [...sideOneTribes.map(p => p.id), ...sideTwoTribes.map(p => p.id)];
  }, [sideOneTribes, sideTwoTribes]);
  const loading = sideTwoLoading || sideOneLoading;
@ -80,6 +80,15 @@ function WarStatsPage() {
    players: Player[] = [],
    tribes: Tribe[] = []
  ): SideResult => {
+    let totalVillages = 0;
+    tribes.forEach(t => {
+      totalVillages += t.totalVillages;
+    });
+    players
+      .filter(p => !p.tribe || !tribes.some(t => t.id === p.tribe?.id))
+      .forEach(p => {
+        totalVillages += p.totalVillages;
+      });
    return {
      gained: totalGained,
      lost: totalLost,
@ -87,6 +96,7 @@ function WarStatsPage() {
      difference: totalGained - totalLost,
      players,
      tribes,
+      totalVillages,
    };
  };

@ -279,8 +289,8 @@ function WarStatsPage() {
                onChangePlayers={sideOneHandleChangePlayers}
                onChangeTribes={sideOneHandleChangeTribes}
                server={server.key}
-                tribeIDNEQ={selectedTribesIDs}
-                playerIDNEQ={selectedPlayersIDs}
+                selectedTribeIDs={selectedTribeIDs}
+                selectedPlayerIDs={selectedPlayerIDs}
                className={classes.formGroup}
                disabled={isSubmitting}
              />
@ -293,8 +303,8 @@ function WarStatsPage() {
                onChangePlayers={sideTwoHandleChangePlayers}
                onChangeTribes={sideTwoHandleChangeTribes}
                server={server.key}
-                tribeIDNEQ={selectedTribesIDs}
-                playerIDNEQ={selectedPlayersIDs}
+                selectedTribeIDs={selectedTribeIDs}
+                selectedPlayerIDs={selectedPlayerIDs}
                className={classes.formGroup}
                disabled={isSubmitting}
              />
--- a/src/features/ServerPage/features/WarStatsPage/components/OneSide/OneSide.tsx
+++ b/src/features/ServerPage/features/WarStatsPage/components/OneSide/OneSide.tsx
@ -28,8 +28,8 @@ export interface Props {
  ) => void;
  onChangeTribes: (_e: React.ChangeEvent<{}>, tribes: Tribe[] | null) => void;
  server: string;
-  playerIDNEQ: number[];
-  tribeIDNEQ: number[];
+  selectedPlayerIDs: number[];
+  selectedTribeIDs: number[];
  disabled?: boolean;
  className?: string;
 }
@ -41,8 +41,8 @@ function OneSide({
  onChangePlayers,
  onChangeTribes,
  server,
-  tribeIDNEQ,
-  playerIDNEQ,
+  selectedTribeIDs,
+  selectedPlayerIDs,
  className,
  disabled,
 }: Props) {
@ -96,7 +96,7 @@ function OneSide({
          filter: {
            exists: true,
            nameIEQ: searchValue + '%',
-            idNEQ: playerIDNEQ,
+            idNEQ: selectedPlayerIDs,
          },
          server,
          offset: 0,
@ -124,7 +124,7 @@ function OneSide({
          filter: {
            exists: true,
            tagIEQ: searchValue + '%',
-            idNEQ: tribeIDNEQ,
+            idNEQ: selectedTribeIDs,
          },
          server,
          offset: 0,
@ -145,7 +145,7 @@ function OneSide({
    return v1 && v2 ? v1.id === v2.id : false;
  };

-  const isDisabled = (id: number, blacklist: number[]) => {
+  const isSelected = (id: number, blacklist: number[]) => {
    return blacklist.some(id2 => id === id2);
  };

@ -169,12 +169,17 @@ function OneSide({
        <Autocomplete
          {...autocompleteProps}
          value={players}
-          options={[...playerSuggestions, ...players]}
+          options={[
+            ...playerSuggestions.filter(
+              s => !isSelected(s.id, selectedPlayerIDs)
+            ),
+            ...players,
+          ]}
          getOptionLabel={opt => {
            return opt ? opt.name : '';
          }}
          disabled={disabled}
-          getOptionDisabled={opt => isDisabled(opt.id, playerIDNEQ)}
+          getOptionDisabled={opt => isSelected(opt.id, selectedPlayerIDs)}
          onChange={handleChangePlayers}
          renderInput={params => (
            <TextField
@ -194,8 +199,13 @@ function OneSide({
        <Autocomplete
          {...autocompleteProps}
          value={tribes}
-          options={[...tribeSuggestions, ...tribes]}
-          getOptionDisabled={opt => isDisabled(opt.id, tribeIDNEQ)}
+          options={[
+            ...tribeSuggestions.filter(
+              s => !isSelected(s.id, selectedTribeIDs)
+            ),
+            ...tribes,
+          ]}
+          getOptionDisabled={opt => isSelected(opt.id, selectedTribeIDs)}
          getOptionLabel={opt => {
            return opt ? opt.tag : '';
          }}
--- a/src/features/ServerPage/features/WarStatsPage/components/Results/OneSideResult.tsx
+++ b/src/features/ServerPage/features/WarStatsPage/components/Results/OneSideResult.tsx
@ -23,31 +23,39 @@ function OneSideResult({ data, t, server, title }: Props) {
      {data.players.length > 0 && (
        <Typography>
          {t('players')}:{' '}
-          {data.players.map(player => (
-            <Link
-              key={player.id}
-              to={ROUTES.SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}
-              params={{ id: player.id, key: server }}
-            >
-              {player.name}{' '}
-            </Link>
+          {data.players.map((player, index) => (
+            <span key={player.id}>
+              <Link
+                to={ROUTES.SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}
+                params={{ id: player.id, key: server }}
+              >
+                {player.name}
+              </Link>
+              {index !== data.players.length - 1 ? ', ' : ''}
+            </span>
          ))}
        </Typography>
      )}
      {data.tribes.length > 0 && (
        <Typography>
          {t('tribes')}:{' '}
-          {data.tribes.map(tribe => (
-            <Link
-              key={tribe.id}
-              to={ROUTES.SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}
-              params={{ id: tribe.id, key: server }}
-            >
-              {tribe.tag}{' '}
-            </Link>
+          {data.tribes.map((tribe, index) => (
+            <span key={tribe.id}>
+              <Link
+                to={ROUTES.SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}
+                params={{ id: tribe.id, key: server }}
+              >
+                {tribe.tag}
+              </Link>
+              {index !== data.tribes.length - 1 ? ', ' : ''}
+            </span>
          ))}
        </Typography>
      )}
+      <Typography>
+        {t('results.villages')}:{' '}
+        <strong>{formatNumber('commas', data.totalVillages)}</strong>
+      </Typography>
      <Typography>
        {t('results.gained')}:{' '}
        <strong>{formatNumber('commas', data.gained)}</strong>
--- a/src/features/ServerPage/features/WarStatsPage/queries.ts
+++ b/src/features/ServerPage/features/WarStatsPage/queries.ts
@ -18,6 +18,10 @@ export const PLAYERS = gql`
      items {
        id
        name
+        totalVillages
+        tribe {
+          id
+        }
      }
    }
  }
@ -41,6 +45,7 @@ export const TRIBES = gql`
      items {
        id
        tag
+        totalVillages
      }
    }
  }
@ -65,45 +70,57 @@ export const ENNOBLEMENTS = gql`
    sideOneTotalGained: ennoblements(
      server: $server
      filter: $sideOneTotalGainedFilter
+      limit: 1
    ) {
      total
    }
    sideOneTotalLost: ennoblements(
      server: $server
      filter: $sideOneTotalLostFilter
+      limit: 1
    ) {
      total
    }
    sideOnePlayers: ennoblements(
      server: $server
      filter: $sideOnePlayersFilter
+      limit: 1
    ) @skip(if: $skipSideOnePlayers) {
      total
    }
-    sideOneTribes: ennoblements(server: $server, filter: $sideOneTribesFilter)
-      @skip(if: $skipSideOneTribes) {
+    sideOneTribes: ennoblements(
+      server: $server
+      filter: $sideOneTribesFilter
+      limit: 1
+    ) @skip(if: $skipSideOneTribes) {
      total
    }
    sideTwoTotalGained: ennoblements(
      server: $server
      filter: $sideTwoTotalGainedFilter
+      limit: 1
    ) {
      total
    }
    sideTwoTotalLost: ennoblements(
      server: $server
      filter: $sideTwoTotalLostFilter
+      limit: 1
    ) {
      total
    }
    sideTwoPlayers: ennoblements(
      server: $server
      filter: $sideTwoPlayersFilter
+      limit: 1
    ) @skip(if: $skipSideTwoPlayers) {
      total
    }
-    sideTwoTribes: ennoblements(server: $server, filter: $sideTwoTribesFilter)
-      @skip(if: $skipSideTwoTribes) {
+    sideTwoTribes: ennoblements(
+      server: $server
+      filter: $sideTwoTribesFilter
+      limit: 1
+    ) @skip(if: $skipSideTwoTribes) {
      total
    }
  }
--- a/src/features/ServerPage/features/WarStatsPage/types.ts
+++ b/src/features/ServerPage/features/WarStatsPage/types.ts
@ -3,6 +3,7 @@ import { List, EnnoblementFilter } from '@libs/graphql/types';
 export type Tribe = {
  id: number;
  tag: string;
+  totalVillages: number;
 };

 export type TribeList = {
@ -12,6 +13,10 @@ export type TribeList = {
 export type Player = {
  id: number;
  name: string;
+  totalVillages: number;
+  tribe?: {
+    id: number;
+  };
 };

 export type PlayerList = {
@ -68,6 +73,7 @@ export type SideResult = {
  againstOppositeSide: number;
  players: Player[];
  tribes: Tribe[];
+  totalVillages: number;
 };

 export type Results = {
--- a/src/libs/i18n/en/server-page/war-stats-page.ts
+++ b/src/libs/i18n/en/server-page/war-stats-page.ts
@ -21,6 +21,7 @@ const translations = {
    sideOne: 'Side one',
    sideTwo: 'Side two',
    lost: 'Lost',
+    villages: 'Villages',
    gained: 'Gained',
    difference: 'Difference',
    ennoblementsAgainstOppositeSide: 'Ennoblements against opposite side',
--- a/src/libs/i18n/pl/server-page/war-stats-page.ts
+++ b/src/libs/i18n/pl/server-page/war-stats-page.ts
@ -20,6 +20,7 @@ const translations = {
  results: {
    sideOne: 'Strona pierwsza',
    sideTwo: 'Strona druga',
+    villages: 'Wioski',
    lost: 'Stracone',
    gained: 'Zdobyte',
    difference: 'Różnica',
--- a/src/libs/i18n/pt/server-page/war-stats-page.ts
+++ b/src/libs/i18n/pt/server-page/war-stats-page.ts
@ -20,6 +20,7 @@ const translations = {
  results: {
    sideOne: 'Primeiro lado',
    sideTwo: 'Segundo lado',
+    villages: 'Aldeias',
    lost: 'Perdas',
    gained: 'Ganhos',
    difference: 'Diferença',
--- a/src/libs/i18n/pt_br/server-page/war-stats-page.ts
+++ b/src/libs/i18n/pt_br/server-page/war-stats-page.ts
@ -20,6 +20,7 @@ const translations = {
  results: {
    sideOne: 'Primeiro lado',
    sideTwo: 'Segundo lado',
+    villages: 'Aldeias',
    lost: 'Perda',
    gained: 'Ganho',
    difference: 'Diferença',