From c4b7fa9b4c5c5f497a4e0cbbb37ec3a7cce573c1 Mon Sep 17 00:00:00 2001
From: pxseu <57842793+pxseu@users.noreply.github.com>
Date: Sun, 4 Jul 2021 23:49:54 +0200
Subject: [PATCH] fix: use import statement

---
 package.json       |   1 +
 src/renderCard.tsx | 142 ++++++++++++++++++++++++++++++---------------
 yarn.lock          |   5 ++
 3 files changed, 100 insertions(+), 48 deletions(-)

diff --git a/package.json b/package.json
index b328852..08456e9 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "styled-components": "^5.3.0"
   },
   "devDependencies": {
+    "@types/escape-html": "^1.0.1",
     "@types/image-to-base64": "^2.1.0",
     "@types/react": "17.0.11",
     "eslint": "7.28.0",
diff --git a/src/renderCard.tsx b/src/renderCard.tsx
index 83e83fd..b54eff9 100644
--- a/src/renderCard.tsx
+++ b/src/renderCard.tsx
@@ -4,9 +4,8 @@ import { Badges } from "../public/assets/badges/BadgesEncoded";
 import { getFlags } from "./getFlags";
 import * as LanyardTypes from "./LanyardTypes";
 import { encodeBase64 } from "./toBase64";
-import { blue, green, gray, gold, red } from "./defaultAvatars"
-
-let escape = require('escape-html');
+import { blue, green, gray, gold, red } from "./defaultAvatars";
+import escape from "escape-html";
 
 type Parameters = {
     theme?: string;
@@ -18,7 +17,6 @@ type Parameters = {
 };
 
 const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<string> => {
-
     let avatarBorderColor: string = "#747F8D",
         userStatus: string = "",
         avatarExtension: string = "webp",
@@ -49,31 +47,33 @@ 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=256`);
+        avatar = await encodeBase64(
+            `https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${body.data.discord_user.avatar}.${avatarExtension}?size=256`
+        );
     } else {
-        let lastDigit = Number(body.data.discord_user.discriminator.substr(-1))
+        let lastDigit = Number(body.data.discord_user.discriminator.substr(-1));
         if (lastDigit >= 5) {
-            lastDigit -= 5
+            lastDigit -= 5;
         }
         // the default avatar that discord uses depends on the last digit of the user's discriminator
         switch (lastDigit) {
-            case 1: 
+            case 1:
                 avatar = gray;
                 break;
-            case 2: 
+            case 2:
                 avatar = green;
                 break;
-            case 3: 
+            case 3:
                 avatar = gold;
                 break;
-            case 4: 
+            case 4:
                 avatar = red;
                 break;
             default:
                 avatar = blue;
         }
     }
-    
+
     switch (body.data.discord_status) {
         case "online":
             avatarBorderColor = "#43B581";
@@ -118,8 +118,9 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                             display: flex;
                             flex-direction: row;
                             padding-bottom: 5px;
-                            border-bottom: solid 0.5px ${theme === "dark" ? "hsl(0, 0%, 100%, 10%)" : "hsl(0, 0%, 0%, 10%)"
-        };
+                            border-bottom: solid 0.5px ${
+                                theme === "dark" ? "hsl(0, 0%, 100%, 10%)" : "hsl(0, 0%, 0%, 10%)"
+                            };
                         ">
                             <div style="
                                 display: flex;
@@ -155,12 +156,18 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                         font-size: 1.15rem;
                                         margin: 0 5px 0 0;
                                     ">
-                                    ${escape(body.data.discord_user.username)}${discrim !== "hide" ? 
-                                    `<span style="color: ${theme === "dark" ? "#ccc" : "#666"}; font-weight: lighter;">#${body.data.discord_user.discriminator}</span>`
-                                    : "" }
+                                    ${escape(body.data.discord_user.username)}${
+        discrim !== "hide"
+            ? `<span style="color: ${theme === "dark" ? "#ccc" : "#666"}; font-weight: lighter;">#${
+                  body.data.discord_user.discriminator
+              }</span>`
+            : ""
+    }
                                     </h1>
 
-                                    ${flags.map(v => `
+                                    ${flags
+                                        .map(
+                                            v => `
                                         <img src="data:image/png;base64,${Badges[v]}" style="
                                             width: 20px; 
                                             height: 20px; 
@@ -168,9 +175,13 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                             top: 50%; 
                                             transform: translate(0%, -50%);
                                             margin: 0 0 0 4px;
-                                        " />`).join("")}
+                                        " />`
+                                        )
+                                        .join("")}
                                 </div>
-                                ${userStatus.length > 0 && hideStatus !== "true" ? `
+                                ${
+                                    userStatus.length > 0 && hideStatus !== "true"
+                                        ? `
                                     <h1 style="
                                         font-size: 0.9rem;
                                         margin-top: 16px;
@@ -180,8 +191,12 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                         white-space: nowrap;
                                         text-overflow: ellipsis;
                                     ">
-                                    ${body.data.activities[0].emoji && body.data.activities[0].emoji.id ? `
-                                        <img src="data:image/png;base64,${await encodeBase64(`https://cdn.discordapp.com/emojis/${body.data.activities[0].emoji.id}.${statusExtension}`)}" 
+                                    ${
+                                        body.data.activities[0].emoji && body.data.activities[0].emoji.id
+                                            ? `
+                                        <img src="data:image/png;base64,${await encodeBase64(
+                                            `https://cdn.discordapp.com/emojis/${body.data.activities[0].emoji.id}.${statusExtension}`
+                                        )}" 
                                         style="
                                             width: 15px; 
                                             height: 15px; 
@@ -189,18 +204,23 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                             top: 10px; 
                                             transform: translate(0%, -50%);
                                             margin: 0 2px 0 0;
-                                        " />` : ``
+                                        " />`
+                                            : ``
                                     }
-                                    ${body.data.activities[0].emoji && !body.data.activities[0].emoji.id
-                                        ? body.data.activities[0].emoji.name + " " + escape(userStatus)
-                                        : escape(userStatus)
+                                    ${
+                                        body.data.activities[0].emoji && !body.data.activities[0].emoji.id
+                                            ? body.data.activities[0].emoji.name + " " + escape(userStatus)
+                                            : escape(userStatus)
                                     }
-                                </h1>` : ``
+                                </h1>`
+                                        : ``
                                 }
                             </div>
                         </div>
 
-                        ${activity ? `
+                        ${
+                            activity
+                                ? `
                             <div style="
                                 display: flex;
                                 flex-direction: row;
@@ -214,31 +234,44 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                     width: auto;
                                     height: auto;
                                 ">
-                                ${activity.assets && activity.assets.large_image ? `
-                                    <img src="data:image/png;base64,${await encodeBase64(`https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.large_image}.webp`)}" 
+                                ${
+                                    activity.assets && activity.assets.large_image
+                                        ? `
+                                    <img src="data:image/png;base64,${await encodeBase64(
+                                        `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="data:image/png;base64,${await encodeBase64(`https://lanyard-profile-readme.vercel.app/assets/unknown.png`)}" style="
+                                    `
+                                        : `
+                                    <img src="data:image/png;base64,${await encodeBase64(
+                                        `https://lanyard-profile-readme.vercel.app/assets/unknown.png`
+                                    )}" style="
                                         width: 70px; 
                                         height: 70px; 
                                         margin-top: 4px;
                                         filter: invert(100);
                                     "/>
-                                `}
-                                ${activity.assets && activity.assets.small_image ? `
-                                    <img src="data:image/png;base64,${await encodeBase64(`https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp`)}" 
+                                `
+                                }
+                                ${
+                                    activity.assets && activity.assets.small_image
+                                        ? `
+                                    <img src="data:image/png;base64,${await encodeBase64(
+                                        `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="
@@ -247,7 +280,9 @@ 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="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;
@@ -258,7 +293,9 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                         height: 15px;
                                         margin: 7px 0;
                                     ">${activity.name}</p>
-                                    ${activity.details ? `
+                                    ${
+                                        activity.details
+                                            ? `
                                         <p style="
                                             color: ${theme === "dark" ? "#ccc" : "#777"};
                                             overflow: hidden;
@@ -267,14 +304,19 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                             text-overflow: ellipsis;
                                             height: 15px;
                                             margin: 7px 0;
-                                        ">${activity.details}</p>` : ``
+                                        ">${activity.details}</p>`
+                                            : ``
                                     }
                                 </div>
                             </div>
-                            ` : ``
+                            `
+                                : ``
                         }
 
-            ${body.data.listening_to_spotify === true && body.data.activities[Object.keys(body.data.activities).length - 1].type === 2 ? `
+            ${
+                body.data.listening_to_spotify === true &&
+                body.data.activities[Object.keys(body.data.activities).length - 1].type === 2
+                    ? `
                 <div style="
                     display: flex;
                     flex-direction: row;
@@ -297,7 +339,9 @@ 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" ? "#1CB853" : "#0d943d"}; margin-bottom: 15px;">LISTENING TO SPOTIFY...</p> 
+                        <p style="font-size: 0.75rem; font-weight: bold; color: ${
+                            theme === "dark" ? "#1CB853" : "#0d943d"
+                        }; margin-bottom: 15px;">LISTENING TO SPOTIFY...</p> 
                         <p style="
                             height: 15px; 
                             color: ${theme === "dark" ? "#fff" : "#000"}; 
@@ -319,10 +363,12 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                         ">By ${escape(body.data.spotify.artist)}</p>
                     </div>
                 </div>
-            ` : ``
-        }
-            ${!activity && body.data.listening_to_spotify === false
-            ? `<div style="
+            `
+                    : ``
+            }
+            ${
+                !activity && body.data.listening_to_spotify === false
+                    ? `<div style="
                     display: flex;
                     flex-direction: row;
                     height: 150px;
@@ -338,8 +384,8 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                         I'm not currently doing anything!
                     </p>
                 </div>`
-            : ``
-        }
+                    : ``
+            }
 
                     </div>
                 </foreignObject>
diff --git a/yarn.lock b/yarn.lock
index c2c4201..29825ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -271,6 +271,11 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz#023d72a5c4531b4ce204528971700a78a85a0c50"
   integrity sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA==
 
+"@types/escape-html@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-1.0.1.tgz#b19b4646915f0ae2c306bf984dc0a59c5cfc97ba"
+  integrity sha512-4mI1FuUUZiuT95fSVqvZxp/ssQK9zsa86S43h9x3zPOSU9BBJ+BfDkXwuaU7BfsD+e7U0/cUUfJFk3iW2M4okA==
+
 "@types/hoist-non-react-statics@*":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"