From c2c307ffe99231a285becadb7db1ec287511d8e9 Mon Sep 17 00:00:00 2001
From: Conrad <conradwcrawford@gmail.com>
Date: Fri, 18 Jun 2021 22:51:13 -0400
Subject: [PATCH] add activity + unknown activity

---
 public/assets/unknown.png | Bin 0 -> 1928 bytes
 src/renderCard.tsx        | 125 +++++++++++++++++++++++++++++++-------
 2 files changed, 104 insertions(+), 21 deletions(-)
 create mode 100644 public/assets/unknown.png

diff --git a/public/assets/unknown.png b/public/assets/unknown.png
new file mode 100644
index 0000000000000000000000000000000000000000..f70713cefe812c5a93eb920acbc6f951fdf545c5
GIT binary patch
literal 1928
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
O0000<MNUMnLSTZ3osp3M

literal 0
HcmV?d00001

diff --git a/src/renderCard.tsx b/src/renderCard.tsx
index 9dd9a08..d231b0c 100644
--- a/src/renderCard.tsx
+++ b/src/renderCard.tsx
@@ -7,11 +7,13 @@ type Parameters = {
 }
 
 const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
-    //create svg, foreign object almost everything lol
-
+    
     let avatarBorderColor: string = "#747F8D";
     let userStatus: string = "";
     let avatarExtension: string = "webp";
+    let activity: any = false;
+
+    if(body.data.activities[Object.keys(body.data.activities).length - 1].type === 0) activity = body.data.activities[Object.keys(body.data.activities).length - 1];
 
     if(body.data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif";
     if(params.animated === "false") avatarExtension = "webp";
@@ -35,19 +37,20 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
 
     if(body.data.activities[0] && body.data.activities[0].type === 4) userStatus = body.data.activities[0].state;
 
-    console.log(flags);
+    console.log(Object.keys(body.data.activities).length);
 
     return `
             <svg width="400px" height="218px">
+
                 <foreignObject>
                     <div xmlns="http://www.w3.org/1999/xhtml" style="
                         position: absolute;
                         width: 400px;
                         height: 200px;
                         inset: 0;
-                        background-color: #000;
+                        background-color: #1a1c1f;
                         color: #fff;
-                        font-family: Century Gothic;
+                        font-family: 'Century Gothic';
                         font-size: 16px;
                         display: flex;
                         flex-direction: column;
@@ -55,18 +58,19 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
                         border-radius: 10px;
                     ">
                         <div style="
-                            position: relative;
                             width: 400px;
                             height: 100px;
                             inset: 0;
                             display: flex;
                             flex-direction: row;
+                            padding-bottom: 5px;
                             border-bottom: solid 0.5px #333;
                         ">
                             <div style="
                                 display: flex;
                                 flex-direction: row;
-                                height: auto;
+                                height: 80px;
+                                width: 80px;
                             ">
                                 <img src="https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${body.data.discord_user.avatar}.${avatarExtension}?size=2048" style="
                                     border: solid 3px ${avatarBorderColor};
@@ -74,13 +78,14 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
                                     width: 50px;
                                     height: 50px;
                                     position: relative;
-                                    top: 10px;
-                                    left: 10px;
+                                    top: 50%;
+                                    left: 50%;
+                                    transform: translate(-50%, -50%);
                                 "/>
                             </div>
                             <div style="
-                                margin-left: 1.75rem;
-                                height: 75px;
+                                height: 80px;
+                                width: 240px;
                             ">
                                 <div style="
                                     display: flex;
@@ -126,17 +131,35 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
                                 </h1>
 
                             </div>
+                            <a style="
+                                position: relative;
+                                top: 50%;
+                                width: 30px;
+                                height: 15px;
+                                transform: translate(0, -50%);
+                                background-color: #3BA55D;
+                                color: #fff;
+                                text-align: center;
+                                text-decoration: none;
+                                border-radius: 5px;
+                                font-size: 0.75rem;
+                                padding: 5px 10px;
+                            " 
+                            href="https://discord.com/users/${body.data.discord_user.id}">
+                                ADD
+                            </a>
                         </div>
 
-                        ${body.data.spotify ? 
+                        ${body.data.spotify && !body.data.activities[1] ? 
 
                             `
                             <div style="
                                 display: flex;
                                 flex-direction: row;
-                                height: 100px;
+                                height: 120px;
                                 margin-left: 15px;
                                 font-size: 0.75rem;
+                                padding-top: 18px;
                             ">
                                 <img src="${body.data.spotify.album_art_url}" style="
                                     width: 80px; 
@@ -144,23 +167,83 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
                                     border: solid 0.5px #222;
                                     border-radius: 10px; 
                                     margin-right: 15px;
-                                
                                 "/>
 
                                 <div style="
                                     color: #999;
-                                    line-height: 0.9rem;
-                                    margin-top: -5px;
+                                    line-height: 0.5rem;
                                 ">
+                                    <p style="font-size: 0.7rem; color: #1CB853; margin-bottom: 20px;">LISTENING NOW...</p> 
                                     <p style="color: #fff; font-weight: bold;">${body.data.spotify.song}</p>
-                                    <p>by <span style="color: #fff">${body.data.spotify.artist}</span></p>
-                                    <p style="font-style: italic;">on <span style="color: #e6e6e6">${body.data.spotify.album}</span></p> 
+                                    <p style="color: #ccc">${body.data.spotify.artist}</p>
                                 </div>
                             </div>
                             `
                         
-                        : `
+                        : ``}
+
+                        ${activity ? 
+                            
+                            `
                             <div style="
+                                display: flex;
+                                flex-direction: row;
+                                height: 120px;
+                                margin-left: 15px;
+                                font-size: 0.75rem;
+                                padding-top: 18px;
+                            ">
+                                <div style="
+                                    margin-right: 15px; 
+                                    width: auto;
+                                    height: auto;
+                                ">
+                                ${activity.assets > 0 ? 
+                                    `
+                                    <img src="https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.large_image}.webp" style="
+                                        width: 80px; 
+                                        height: 80px; 
+                                        border: solid 0.5px #222;
+                                        border-radius: 10px; 
+                                    "/>
+                                    `
+                                : `
+                                    <img src="/assets/unknown.png" style="
+                                        width: 80px; 
+                                        height: 80px; 
+                                        filter: invert(100);
+                                    "/>
+                                `}
+
+                                ${activity.assets ? 
+                                    `<img src="https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp" style="
+                                        width: 30px;
+                                        height: 30px;
+                                        border-radius: 50%;
+                                        margin-left: -26px;
+                                        margin-bottom: -8px;
+                                    "/>`
+                                : ``}
+
+                                </div>
+                                <div style="
+                                    color: #999;
+                                    line-height: 0.5rem;
+                                ">
+                                    <p style="font-size: 0.7rem; color: #7289DA; margin-bottom: 20px;">PLAYING A GAME...</p> 
+                                    <p style="color: #fff; font-weight: bold;">${activity.name}</p>
+                                    ${activity.details ? 
+                                        `<p style="color: #ccc">${activity.details}</p>`
+                                    : ``}
+                                   
+                                </div>
+                            </div>
+                            `
+                        
+                        : ``}
+
+                        ${!activity && !body.data.listening_to_spotify === false ? 
+                            `<div style="
                                 display: flex;
                                 flex-direction: row;
                                 height: 150px;
@@ -175,8 +258,8 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
                                 ">
                                     I'm not currently doing anything!
                                 </p>
-                            </div>
-                        `}
+                            </div>`
+                        : ``}
 
                     </div>
                 </foreignObject>