Patreon login (#601)

* add patreon login

* update scopes

* add patreon login

* change logo

Synergism.css

@@ -3866,7 +3866,7 @@ img#singularityPerksIcon {
     padding-top: 10px;
 }
 
-#accountSubTab > div.scrollbarX > img#discord-logo {
+#accountSubTab > div.scrollbarX > img {
     /* A 1.3 width x height ratio */
     width: 96px;
     height: 72px;

src/Login.ts

@@ -52,7 +52,22 @@ interface RawMember {
 interface SynergismUserAPIResponse {
   personalBonus: number
   globalBonus: number
+  type: string
+}
+
+interface SynergismDiscordUserAPIResponse extends SynergismUserAPIResponse {
   member: RawMember | null
+  type: 'discord'
+}
+
+interface SynergismPatreonUserAPIResponse extends SynergismUserAPIResponse {
+  member: {
+    user: {
+      username: string | null
+    }
+    roles: string[]
+  }
+  type: 'patreon'
 }
 
 export async function handleLogin () {
@@ -67,7 +82,9 @@ export async function handleLogin () {
     return
   }
 
-  const { globalBonus, member, personalBonus } = await response.json() as SynergismUserAPIResponse
+  const { globalBonus, member, personalBonus, type } = await response.json() as
+    | SynergismDiscordUserAPIResponse
+    | SynergismPatreonUserAPIResponse
 
   player.worlds = new QuarkHandler({
     quarks: Number(player.worlds),
@@ -87,8 +104,15 @@ export async function handleLogin () {
     currentBonus.textContent +=
       ` You also receive an extra ${personalBonus}% bonus for being a Patreon member and/or boosting the Discord server! Multiplicative with global bonus!`
 
-    const user = member?.nick ?? member?.user?.username ?? member?.user?.global_name
-    const boosted = Boolean(member?.premium_since)
+    let user: string | null
+
+    if (type === 'discord') {
+      user = member?.nick ?? member?.user?.username ?? member?.user?.global_name ?? null
+    } else {
+      user = member.user.username
+    }
+
+    const boosted = type === 'discord' ? Boolean(member?.premium_since) : false
     const hasTier1 = member?.roles.includes(TRANSCENDED_BALLER) ?? false
     const hasTier2 = member?.roles.includes(REINCARNATED_BALLER) ?? false
     const hasTier3 = member?.roles.includes(ASCENDED_BALLER) ?? false
@@ -135,11 +159,10 @@ export async function handleLogin () {
       cloudSaveElement.addEventListener('click', saveToCloud)
       cloudSaveElement.style.cssText = 'border: 2px solid #5865F2; height: 25px; width: 150px;'
       cloudSaveElement.textContent = 'Save to Cloud ☁'
-    }
 
-    // loadCloudSaveElement.addEventListener('click', loadFromCloud)
-    loadCloudSaveElement.style.cssText = 'border: 2px solid #5865F2; height: 25px; width: 150px;'
-    loadCloudSaveElement.textContent = 'Load from Cloud ☽ [WIP]'
+      loadCloudSaveElement.style.cssText = 'border: 2px solid #5865F2; height: 25px; width: 150px;'
+      loadCloudSaveElement.textContent = 'Load from Cloud ☽ [WIP]'
+    }
 
     const cloudSaveParent = document.createElement('div')
     cloudSaveParent.style.cssText =
@@ -154,14 +177,23 @@ export async function handleLogin () {
     // User is not logged in
     subtabElement.innerHTML = `
       <img id="discord-logo" alt="Discord Logo" src="Pictures/discord-mark-blue.png" loading="lazy" />
-      <button value="Login" style="border: 2px solid #5865F2; height: 20px; width: 250px;">Login with Discord</button>
+      <button value="discord" style="border: 2px solid #5865F2; height: 20px; width: 250px;">Login with Discord</button>
+
+      <img id="patreon-logo" alt="Discord Logo" src="Pictures/patreon-logo.png" loading="lazy" />
+      <button value="patreon" style="border: 2px solid #ff5900; height: 20px; width: 250px;">Login with Patreon</button>
     `
 
-    subtabElement.querySelector('button[value="Login"]')?.addEventListener('click', () => {
+    subtabElement.querySelector('button[value="discord"]')?.addEventListener('click', () => {
       location.assign(
         'https://discord.com/oauth2/authorize?response_type=code&client_id=1124509674536972329&scope=guilds+guilds.members.read+identify&redirect_uri=https%3A%2F%2Fsynergism.cc%2Fdiscord%2Foauth%2F&prompt=consent'
       )
     })
+
+    subtabElement.querySelector('button[value="patreon"]')?.addEventListener('click', () => {
+      location.assign(
+        'https://www.patreon.com/oauth2/authorize?response_type=code&client_id=mARrL2U1X5TUvl6YoFbfIEmsouJ0eCuETeEbkG1-Wmm5eNko6gzWgOUCuyejpTpA&redirect_uri=https%3A%2F%2Fsynergism.cc%2Fpatreon%2Foauth%2F&scope=identity%20campaigns%20identity.memberships'
+      )
+    })
   }
 }