Adding the ability to Party Up!

client/src/areas/grail/changeManagement/ChangeLogs.ts

@@ -5,7 +5,7 @@ export type ChangeLogCollection = {
 export const changeLogs: ChangeLogCollection = {
   "2.0.0": [
     {
-      change: `You can now Party Up with your friends!`,
+      change: `You can now Party Up with your friends! Implemented by github user mpherman (or glymph on Discord)`,
       children: [
         "Go to https://d2-holy-grail.herokuapp.com/party to create your own party!",
         "Share and compare grail progress easily by inviting friends to your party",

client/src/areas/party/ItemTotal.ts

@@ -0,0 +1,6 @@
+export enum ItemTotal {
+  Armor = 123,
+  Weapons = 197,
+  Other = 59,
+  Sets = 127
+}

client/src/areas/party/JoinFormRenderer.tsx

@@ -13,7 +13,7 @@ import { PartyManager } from "./PartyManager";
 export interface IJoinInfo {
   address?: string;
   password?: string;
-  join_address?: string;
+  joinAddress?: string;
 }
 
 interface IJoinFormState extends IJoinInfo {
@@ -53,7 +53,7 @@ export class JoinFormRenderer extends React.Component<{}, IJoinFormState> {
           )}
           <JoinButtonWithProgressWrapper
             isLoading={this.state.isLoading}
-            isDisabled={!this.state.join_address}
+            isDisabled={!this.state.joinAddress}
             onClick={this.join}
             text={this.state.joinButtonText}
             secondIcon="check"
@@ -65,7 +65,7 @@ export class JoinFormRenderer extends React.Component<{}, IJoinFormState> {
   }
 
   private handleAddressChange = (e: any) => {
-    this.setState({ join_address: e.target.value });
+    this.setState({ joinAddress: e.target.value });
     if (this.state.success) {
       // We just successfully saved, so reset the button state on new grail address
       this.resetJoinButtonState();
@@ -88,41 +88,44 @@ export class JoinFormRenderer extends React.Component<{}, IJoinFormState> {
   };
 
   private join = () => {
-    if (!this.state.join_address) {
+    if (!this.state.joinAddress || this.state.success) {
       return;
     }
 
     this.setState({ isLoading: true });
 
-    PartyManager.current.signupUserToParty(this.state.join_address).subscribe(
-      r => {
-        this.setState({
-          isLoading: false,
-          success: true,
-          joinButtonText: "Partied!"
-        });
-        PartyManager.current.refreshData().subscribe();
-      },
-      res => {
-        if (res.status === 404) {
+    PartyManager.current
+      .modifyPartyUser(this.state.joinAddress, "join")
+      .subscribe(
+        r => {
           this.setState({
             isLoading: false,
-            error: "No grail exists with this username."
-          });
-        } else if (res.status === 409) {
-          this.setState({
-            isLoading: false,
-            error:
-              "There is already a grail with this username signed up to the party.\n If you are not shown on the party yet, contact the owner of the party to become an accepted user."
-          });
-        } else {
-          this.setState({
-            isLoading: false,
-            error: "An error occurred when trying to validate your password."
+            success: true,
+            joinButtonText: "Partied!"
           });
+          PartyManager.current.refreshData().subscribe();
+        },
+        res => {
+          if (res.status === 404) {
+            this.setState({
+              isLoading: false,
+              error: "No grail exists with this username."
+            });
+          } else if (res.status === 409) {
+            this.setState({
+              isLoading: false,
+              error:
+                "There is already a grail with this username signed up to the party.\n If you are not shown on the party yet, contact the owner of the party to become an accepted user."
+            });
+          } else {
+            this.setState({
+              isLoading: false,
+              error:
+                "An error occurred when trying to join the party. Try again."
+            });
+          }
         }
-      }
-    );
+      );
   };
 }
 

client/src/areas/party/PartyManager.ts

@@ -4,7 +4,6 @@ import { LocalStorageHandler } from "../../common/utils/LocalStorageHandler";
 import { Observable, ReplaySubject, Subscriber } from "rxjs";
 import { IPartyError } from "./IPartyError";
 import { IPartyData } from "../../common/definitions/union/IPartyData";
-import { IPartySettings } from "../../common/definitions/union/IPartySettings";
 import { IPartyUserData } from "../../common/definitions/union/IPartyUserData";
 import { IPartyAreaData } from "../../common/definitions/union/IPartyAreaData";
 
@@ -53,10 +52,6 @@ export class PartyManager {
     return !this.password;
   }
 
-  public get settings(): IPartySettings {
-    return this.partyData.settings;
-  }
-
   private updateLocaleStorage = (data: IPartyAreaData) => {
     this.partyLocalStorage.setValue(data);
   };
@@ -114,32 +109,17 @@ export class PartyManager {
     });
   };
 
-  public signupUserToParty = (userAddress: string) => {
-    return Observable.create((observer: Subscriber<void>) => {
-      Api.addUserToParty(this.address, userAddress).subscribe(
-        response => {
-          observer.next();
-          observer.complete();
-        },
-        err => observer.error(err)
-      );
-    });
-  };
-
   private convertToAreaData = (data: IPartyApiModel): IPartyAreaData => {
     const users = {
       userlist: data.userlist,
-      pendingUserlist: data.pendingUserlist,
-      resolvedUserlist: [],
-      removedUserlist: []
+      pendingUserlist: data.pendingUserlist
     };
     const areaData = {
       address: data.address,
       password: data.password,
       token: data.token,
       users: users,
-      data: data.data,
-      settings: data.settings
+      data: data.data
     };
     return areaData;
   };
@@ -214,9 +194,6 @@ export class PartyManager {
       data.users.pendingUserlist = [];
     }
 
-    if (!data.settings) {
-      data.settings = {} as any;
-    }
     this.partyData = data;
     this.dataInitializer.next();
   }

client/src/areas/party/PartyTable.tsx

@@ -12,7 +12,8 @@ import { IPartyData } from "../../common/definitions/union/IPartyData";
 import Icon, { IconProps } from "@material-ui/core/Icon/Icon";
 import { DataTableColumnHeader } from "./components/DataTableColumnHeader";
 import { PartyManager } from "./PartyManager";
-import { IconWithProgress } from "./components/IconWithProgress";
+import { IconWithProgress } from "../../common/components/IconWithProgress";
+import { ItemTotal } from "./ItemTotal";
 
 export interface IPartyTableProps {
   data: IPartyData;
@@ -58,19 +59,27 @@ export class PartyTable extends React.Component<
 
   public render() {
     let stats: Stats[] = [];
-    for (let i = 0; i < this.state.data.users.length; i++) {
-      var user = this.state.data.users[i];
-      var statRow = new Stats(user.username);
-      statRow.uniqArm = user.data.uniqueArmor.missing;
-      statRow.uniqWep = user.data.uniqueWeapons.missing;
-      statRow.uniqOth = user.data.uniqueOther.missing;
-      statRow.set = user.data.sets.missing;
-      statRow.itemScore = user.data.itemScore;
-      statRow.total =
-        statRow.uniqArm + statRow.uniqWep + statRow.uniqOth + statRow.set;
-      stats.push(statRow);
+    if (this.state.data.users) {
+      for (let i = 0; i < this.state.data.users.length; i++) {
+        let user = this.state.data.users[i];
+        let statRow = new Stats(user.username);
+        statRow.uniqArm = user.data
+          ? user.data.uniqueArmor.missing
+          : ItemTotal.Armor;
+        statRow.uniqWep = user.data
+          ? user.data.uniqueWeapons.missing
+          : ItemTotal.Weapons;
+        statRow.uniqOth = user.data
+          ? user.data.uniqueOther.missing
+          : ItemTotal.Other;
+        statRow.set = user.data ? user.data.sets.missing : ItemTotal.Sets;
+        statRow.itemScore = user.data ? user.data.itemScore : 0;
+        statRow.total =
+          statRow.uniqArm + statRow.uniqWep + statRow.uniqOth + statRow.set;
+        stats.push(statRow);
+      }
+      this.sortData(stats, this.state.sorted);
     }
-    this.sortData(stats, this.state.sorted);
 
     return (
       <div>
@@ -125,7 +134,7 @@ export class PartyTable extends React.Component<
                   showIcon={this.state.sorted === "itemScore"}
                   secondIcon={"info"}
                   secondIconText={
-                    "ItemScore is a measure of the total rarity of the items found in each grail.\nRarer items like Tyrael's contribute a large ItemScore (1135 pts), while common items like Venom Ward contribute a small ItemScore (1 pt).\nA finished grail will have an ItemScore of 10000."
+                    "ItemScore is a measure of the total rarity of the items found in each grail.\nRarer items like Tyrael's contribute a large ItemScore (1000 pts), while common items like Venom Ward contribute a small ItemScore (1 pt).\nA finished grail will have an ItemScore of 10000."
                   }
                 />
               </TableRow>
@@ -174,7 +183,7 @@ export class PartyTable extends React.Component<
     return (
       <TableRow key={`$EmptyStat`} hover={true}>
         <StyledTableCell component="th" scope="row" colSpan={7}>
-          <RowHeader>"No users yet! Ask them to join."</RowHeader>
+          <RowHeader>"No members yet! Ask them to join."</RowHeader>
         </StyledTableCell>
       </TableRow>
     );

client/src/areas/party/home/ItemScoreInfoDialog.tsx

@@ -26,9 +26,14 @@ export const ItemScoreInfoDialog: FC<IInfoProps> = ({ onDialogClosed }) => {
             <br />
           </TitleText>
           <Typography variant="body1">
-            A unique or set item's "Item Score" is based on it's relative rarity
-            to that ultimate Holy Grail in Diablo II: Tyrael's Might. <br />
-            A list of example ItemScores can be found below: <br />
+            ItemScore is based on the relative rarity of an item. Common items
+            like a Nagelring are not worth many points. The rarer an item is,
+            the higher its ItemScore.
+            <br />
+            The ultimate Holy Grail item, Tyrael's Might, is worth 1000 points.{" "}
+            <br />
+            A fully completed grail will score 10000 points. <br />
+            Some eamples: <br />
           </Typography>
           <StyledTable>
             <TableHead>
@@ -38,10 +43,6 @@ export const ItemScoreInfoDialog: FC<IInfoProps> = ({ onDialogClosed }) => {
               </TableRow>
             </TableHead>
             <TableBody>
-              <TableRow>
-                <StyledTableCell>Nokozan Relic</StyledTableCell>
-                <StyledTableCell>1</StyledTableCell>
-              </TableRow>
               <TableRow>
                 <StyledTableCell>Nagelring</StyledTableCell>
                 <StyledTableCell>1</StyledTableCell>
@@ -59,29 +60,23 @@ export const ItemScoreInfoDialog: FC<IInfoProps> = ({ onDialogClosed }) => {
                 <StyledTableCell>30</StyledTableCell>
               </TableRow>
               <TableRow>
-                <StyledTableCell>Windforce</StyledTableCell>
-                <StyledTableCell>110</StyledTableCell>
+                <StyledTableCell>Metalgrid</StyledTableCell>
+                <StyledTableCell>75</StyledTableCell>
               </TableRow>
               <TableRow>
                 <StyledTableCell>Crown of Ages</StyledTableCell>
-                <StyledTableCell>130</StyledTableCell>
+                <StyledTableCell>150</StyledTableCell>
               </TableRow>
               <TableRow>
                 <StyledTableCell>Astreon's Iron Ward</StyledTableCell>
-                <StyledTableCell>335</StyledTableCell>
+                <StyledTableCell>350</StyledTableCell>
               </TableRow>
               <TableRow>
                 <StyledTableCell>Tyrael's Might</StyledTableCell>
-                <StyledTableCell>1155</StyledTableCell>
+                <StyledTableCell>1000</StyledTableCell>
               </TableRow>
             </TableBody>
           </StyledTable>
-          <BottomText>
-            The values have been slightly increased across the board so that
-            each item has a value of 1 or more. <br />
-            Some items were so common compared to Tyrael's that they would round
-            down to 0.
-          </BottomText>
         </div>
       </DialogContent>
     </Dialog>
@@ -115,10 +110,3 @@ const TitleText = styled(Typography)`
     margin-top: 10px;
   }
 `;
-
-const BottomText = styled(Typography)`
-  && {
-    margin-top: 10px;
-    font-size: 1em;
-  }
-`;

client/src/areas/party/home/PartyExplanation.tsx

@@ -25,7 +25,7 @@ export const PartyExplanation: FC = () => {
         Simply create a Holy Grail Party above and invite your friends! <br />
         The party will automatically keep track of each member's grail progress
         as they enter new items. <br />
-        Compare your progress with a simple table of all users' grails in your
+        Compare your progress with a simple table of all members' grails in your
         party. <br />
         <br />
         Also introducing ItemScore! A way to compare grail progress based on the
@@ -43,7 +43,5 @@ export const PartyExplanation: FC = () => {
 };
 
 const RootContainer = styled.div`
-  width: 700px;
-  margin: auto;
-  padding-top: 50px;
+  margin: 50px 50px auto 100px;
 `;

client/src/common/definitions/api/IPartyApiModel.ts

@@ -1,5 +1,4 @@
 import { IPartyData } from "../union/IPartyData";
-import { IPartySettings } from "../union/IPartySettings";
 
 export interface IPartyApiModel {
   address: string;
@@ -8,5 +7,4 @@ export interface IPartyApiModel {
   userlist: string[];
   pendingUserlist: string[];
   token: string;
-  settings: IPartySettings;
 }

client/src/common/definitions/union/IPartyAreaData.ts

@@ -1,5 +1,4 @@
 import { IPartyData } from "./IPartyData";
-import { IPartySettings } from "./IPartySettings";
 import { IPartyUserData } from "./IPartyUserData";
 
 export interface IPartyAreaData {
@@ -8,5 +7,4 @@ export interface IPartyAreaData {
   data: IPartyData;
   users: IPartyUserData;
   token: string;
-  settings: IPartySettings;
 }

client/src/common/definitions/union/IPartyData.ts

@@ -8,13 +8,13 @@ export interface IUserData {
 }
 
 export interface IUserGrailData {
-  uniqueArmor?: ILBStatsData;
-  uniqueWeapons?: ILBStatsData;
-  uniqueOther?: ILBStatsData;
-  sets?: ILBStatsData;
+  uniqueArmor?: ICategoryStatsData;
+  uniqueWeapons?: ICategoryStatsData;
+  uniqueOther?: ICategoryStatsData;
+  sets?: ICategoryStatsData;
   itemScore?: number;
 }
 
-export interface ILBStatsData {
+export interface ICategoryStatsData {
   missing: number;
 }