feat: implement state, timestamp and party

src/renderCard.tsx

@@ -13,9 +13,24 @@ type Parameters = {
     animated?: string;
     hideDiscrim?: string;
     hideStatus?: string;
+    hideTimestamp?: string;
     borderRadius?: string;
 };
 
+const elapsedTime = (timestamp: any) => {
+    let startTime = timestamp;
+    let endTime = Date.now();
+    let totalSeconds = (endTime - startTime) / 1000;
+
+    let hours = Math.floor(totalSeconds / 3600);
+    let minutes = Math.floor((totalSeconds % 3600) / 60);
+    let seconds = Math.floor((totalSeconds % 3600) % 60);
+
+    return `${hours >= 1 ? ("0" + hours).slice(-2) + ":" : ""}${("0" + minutes).slice(-2)}:${("0" + seconds).slice(
+        -2
+    )}`;
+};
+
 const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<string> => {
     let avatarBorderColor: string = "#747F8D",
         userStatus: string = "",
@@ -26,17 +41,14 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
         theme = "dark",
         discrim = "show",
         hideStatus = "false",
+        hideTimestamp = "false",
         borderRadius = "10px";
 
     if (body.data.activities[0]?.emoji?.animated) statusExtension = "gif";
     if (body.data.discord_user.avatar && body.data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif";
-    if (
-        body.data.activities.length > 0 &&
-        body.data.activities[Object.keys(body.data.activities).length - 1].type === 0
-    )
-        activity = body.data.activities[Object.keys(body.data.activities).length - 1];
     if (params.animated === "false") avatarExtension = "webp";
     if (params.hideStatus === "true") hideStatus = "true";
+    if (params.hideTimestamp === "true") hideTimestamp = "true";
     if (params.hideDiscrim === "true") discrim = "hide";
     if (params.theme === "light") {
         backgroundColor = "#eee";
@@ -48,7 +60,9 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
     let avatar: String;
     if (body.data.discord_user.avatar) {
         avatar = await encodeBase64(
-            `https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${body.data.discord_user.avatar}.${avatarExtension}?size=${avatarExtension === "gif" ? "128" : "256"}`
+            `https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${
+                body.data.discord_user.avatar
+            }.${avatarExtension}?size=${avatarExtension === "gif" ? "128" : "256"}`
         );
     } else {
         let lastDigit = Number(body.data.discord_user.discriminator.substr(-1));
@@ -94,6 +108,15 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
     if (body.data.activities[0] && body.data.activities[0].state && body.data.activities[0].type === 4)
         userStatus = body.data.activities[0].state;
 
+    if (body.data.activities[0] && body.data.activities[0].state && body.data.activities[0].type === 4)
+        userStatus = body.data.activities[0].state;
+
+    // filter only type 0
+    const activities = body.data.activities.filter(activity => activity.type === 0);
+
+    // take the highest one
+    activity = Array.isArray(activities) ? activities[0] : activities;
+
     return `
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="410px" height="218px">
                 <foreignObject x="0" y="0" width="410" height="218">
@@ -280,9 +303,6 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                     line-height: 1;
                                     width: 279px;
                                 ">
-                                    <p style="font-size: 0.75rem; font-weight: bold; color: ${
-                                        theme === "dark" ? "#7289DA" : "#334da6"
-                                    }; margin-bottom: 15px;">PLAYING A GAME...</p> 
                                     <p style="
                                         color: ${theme === "dark" ? "#fff" : "#000"};
                                         font-size: 0.85rem;
@@ -307,6 +327,38 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                         ">${activity.details}</p>`
                                             : ``
                                     }
+                                    ${
+                                        activity.state
+                                            ? `
+                                        <p style="
+                                            color: ${theme === "dark" ? "#ccc" : "#777"};
+                                            overflow: hidden;
+                                            white-space: nowrap;
+                                            font-size: 0.85rem;
+                                            text-overflow: ellipsis;
+                                            height: 15px;
+                                            margin: 7px 0;
+                                        ">${activity.state}${
+                                                  activity.party
+                                                      ? `(${activity.party.size[0]} of ${activity.party.size[1]})`
+                                                      : ""
+                                              }</p>`
+                                            : ``
+                                    }
+                                    ${
+                                        activity.timestamps && hideTimestamp !== "true"
+                                            ? `
+                                        <p style="
+                                            color: ${theme === "dark" ? "#ccc" : "#777"};
+                                            overflow: hidden;
+                                            white-space: nowrap;
+                                            font-size: 0.85rem;
+                                            text-overflow: ellipsis;
+                                            height: 15px;
+                                            margin: 7px 0;
+                                        ">${elapsedTime(new Date(activity.timestamps.start).getTime())} elapsed</p>`
+                                            : ``
+                                    }
                                 </div>
                             </div>
                             `