UI improvements (1)

Author: Pseudonian

Pictures/reincarnated-monthly-sub.png

@@ -4236,6 +4236,21 @@ header #obtainiumDisplay { color: pink; }
     }
 }
 
+.transcendedBallerGradient {
+    --gradient-start: orchid;
+    --gradient-end: rgb(167, 65, 167);
+}
+
+.reincarnatedBallerGradient {
+    --gradient-start: green;
+    --gradient-end: greenyellow;
+}
+
+.ascendedBallerGradient {
+    --gradient-start: orange;
+    --gradient-end: yellow;
+}
+
 .singularityGradient {
     --gradient-start: gold;
     --gradient-end: lightgoldenrodyellow;
@@ -4928,14 +4943,19 @@ form input:hover {
     align-items: center;
 }
 
-.pseudoSubscriptionContainer > form {
+#manage-subscription-holder {
+    display: flex;
+    flex: row;
+}
+
+#manage-subscription-holder > form {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    margin-top: 10px;
+    margin: 5px;
 }
 
-.pseudoSubscriptionContainer > form > input[type="submit"] {
+#manage-subscription-holder > form > input[type="submit"] {
     border: 2px solid gold;
     width: 200px;
     height: 40px;
@@ -4956,7 +4976,7 @@ form input:hover {
 }
 
 .subscriptionContainer {
-    margin: 10px 10px 0 0;
+    margin: 0;
     border: 1px solid lightgoldenrodyellow;
     border: 2px solid gold;
     text-align: center;

Synergism.css

@@ -4491,6 +4491,7 @@ <h4 class="event-title" i18n="pseudoCoins.consumables.eventTitle"></h4>
       <div id="productContainer" class="pseudoUpgradeContainer">
       </div>
       <div id="subscriptionsContainer" class="pseudoSubscriptionContainer">
+        <div id="manage-subscription-holder"></div>
         <div id="sub-section-holder"></div>
       </div>
       <div id="upgradesContainer">

index.html

@@ -203,7 +203,7 @@ interface BonusTypes {
   quarks: number
 }
 
-type SubscriptionMetadata = {
+export type SubscriptionMetadata = {
   provider: 'paypal' | 'stripe' | 'patreon'
   tier: number
 } | null

src/Login.ts

@@ -5518,6 +5518,9 @@ window.addEventListener('load', async () => {
         url: './mockServiceWorker.js'
       }
     })
+    const response = await fetch('https://synergism.cc/api/v1/users/me')
+    const data = await response.json()
+    console.log(data)
   }
 
   const symbolsEnabled = localStorage.getItem('statSymbols')

src/Synergism.ts

@@ -304,7 +304,7 @@ export const findInsertionIndex = (target: number, array: number[]): number => {
 /**
  * @license {MIT}
  * https://github.com/nodejs/undici/blob/6301265a20868d077faae6d51f5f6cf57ac2ebfe/lib/web/infra/index.js#L121
- * 
+ *
  * I'm stealing my own code, fuck off
  */
 export function isomorphicDecode (input: Uint8Array) {

src/Utility.ts

@@ -4,6 +4,7 @@ import { cloudSaveHandlers } from './handlers/CloudSaveHandlers'
 import { messageHandlers } from './handlers/MessageHandlers'
 import { paymentHandlers } from './handlers/PaymentHandlers'
 import { consumeHandlers } from './websocket'
+import { paypalSubscriptionActive } from './handlers/SubscriptionHandlers'
 
 const GETHandlers = [
   http.get('https://synergism.cc/api/v1/quark-bonus', () => {
@@ -1170,8 +1171,8 @@ const PUTHandlers = [
 export const worker = setupWorker(
   http.get('https://synergism.cc/api/v1/users/me', () => {
     return HttpResponse.json({
-      personalBonus: 0,
-      globalBonus: 100,
+      personalBonus: 5,
+      globalBonus: 50,
       member: {
         user: {
           id: '267774648622645249',
@@ -1207,9 +1208,9 @@ export const worker = setupWorker(
       },
       accountType: 'discord',
       bonus: {
-        quarkBonus: 0
+        quarkBonus: 5
       },
-      subscription: null
+      subscription: paypalSubscriptionActive
     })
   }),
   ...GETHandlers,

src/mock/browser.ts

@@ -5,63 +5,63 @@ export const paymentHandlers: HttpHandler[] = [
     return HttpResponse.json([
       {
         'id': 'omega-monthly-sub',
-        'name': 'Tier 4 Subscription - The Omega Baller',
-        'description': '+2,000 PseudoCoins per month and +14% Quarks as a personal bonus!',
+        'name': 'The Omega Baller',
+        'description': 'The final subscription, giving the best perks available!',
         'price': 2000,
         'coins': 2000,
         'tier': 4,
         'subscription': true,
         'quarkBonus': 2,
         'features': [
-          '+2,000 PseudoCoins / month',
+          '+2,000 PseudoCoins / month ($20 Value!)',
           '+14% Personal Quark Bonus',
           '+2% to the Global Quark Bonus',
           '+9 Save Slots (10 total)'
         ]
       },
       {
         'id': 'ascended-monthly-sub',
-        'name': 'Tier 3 Subscription - The Ascended Baller',
-        'description': '+1,000 PseudoCoins per month and +9% Quarks as a personal bonus!',
+        'name': 'The Ascended Baller',
+        'description': 'Enjoy even more Quarks and Save Slots, on top of your monthly PseudoCoins!',
         'price': 1000,
         'coins': 1000,
         'tier': 3,
         'subscription': true,
         'quarkBonus': 1,
         'features': [
-          '+1,000 PseudoCoins / month',
+          '+1,000 PseudoCoins / month ($10 Value!)',
           '+9% Personal Quark Bonus',
           '+1% to the Global Quark Bonus',
           '+6 Save Slots (7 total)'
         ]
       },
       {
         'id': 'reincarnated-monthly-sub',
-        'name': 'Tier 2 Subscription - The Reincarnated Baller',
-        'description': '+600 PseudoCoins / month and +5% Quarks as a personal bonus!',
+        'name': 'The Reincarnated Baller',
+        'description': 'Higher tier Subscriptions have stronger additional perks!',
         'price': 600,
         'coins': 600,
         'tier': 2,
         'subscription': true,
         'quarkBonus': 0.6,
         'features': [
-          '+600 PseudoCoins / month',
+          '+600 PseudoCoins / month ($6 Value!)',
           '+5% Personal Quark Bonus',
           '+0.6% to the Global Quark Bonus',
           '+3 Save Slots (4 total)'
         ]
       },
       {
         'id': 'transcended-monthly-sub',
-        'name': 'Tier 1 Subscription - The Transcended Baller',
-        'description': 'Gain +300 PseudoCoins / month, and +2% Quarks as a personal bonus.',
+        'name': 'The Transcended Baller',
+        'description': 'Subscriptions give PseudoCoins equal to their dollar value, plus additional perks!',
         'price': 300,
         'coins': 300,
         'tier': 1,
         'subscription': true,
         'quarkBonus': 0.3,
         'features': [
-          '+300 PseudoCoins / month',
+          '+300 PseudoCoins / month ($3 Value!)',
           '+2% Personal Quark Bonus',
           '+0.3% to the Global Quark Bonus',
           '+1 Save Slot (2 total)'

src/mock/handlers/PaymentHandlers.ts

@@ -0,0 +1,21 @@
+interface Subscription {
+  provider: 'stripe' | 'patreon' | 'paypal'
+  tier: 1 | 2 | 3 | 4
+}
+
+export const paypalSubscriptionActive: Subscription = {
+  provider: 'paypal',
+  tier: 3
+}
+
+export const patreonSubscriptionActive: Subscription = {
+  provider: 'patreon',
+  tier: 2
+}
+
+export const stripeSubscriptionActive: Subscription = {
+  provider: 'stripe',
+  tier: 3
+}
+
+// Add handlers here