add stripe subscriptions (#639)

* add stripe subscriptions

* use esbuild define

* Subscriptions Subtab

* fetch less

* add manage sub button

* fixup! workflow

* fixup! upgrade/downgrade sub

* fixup

* Prompts

* fixup

---------

Co-authored-by: Kevin Bunn <[email protected]>

.github/workflows/ci.yml

@@ -48,13 +48,13 @@ jobs:
             var { addedDiff: diff } = require('deep-object-diff');
             var { inspect } = require('util');
 
-            var source = JSON.parse(fs.readFileSync('./translations/source.json'));
+            var source = JSON.parse(fs.readFileSync('./translations/en.json'));
             var translations = fs.readdirSync('./translations')
               .map(f => path.join('./translations', f))
               .map(j => ({ path: j, json: JSON.parse(fs.readFileSync(j)) }));
 
             for (var json of translations) {
-              const added = diff(source, json.json)
+              var added = diff(source, json.json)
 
               if (Object.keys(added).length) {
                 console.log(inspect(added, undefined, 100, true), json.path)

.gitignore

@@ -11,3 +11,5 @@ package-lock.json
 Pictures/Thumbs.db
 Pictures/Splash/Thumbs.db
 Pictures/TransparentPics/Thumbs.db
+
+**/.DS_Store

Synergism.css

@@ -3995,17 +3995,53 @@ form input:hover {
     margin: 0 auto;
 }
 
+.pseudoSubscriptionContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.pseudoSubscriptionContainer > form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.pseudoSubscriptionContainer > form > input[type="submit"] {
+    border: 2px solid gold;
+    width: 200px;
+    height: 40px;
+}
+
+.pseudoSubscriptionContainer > #sub-section-holder {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+}
+
 .pseudoCoinContainer {
     margin: 10px 10px 0 0;
     border: 1px solid #ccc;
     border: 2px solid orchid;
     text-align: center;
 }
 
+.subscriptionContainer {
+    margin: 10px 10px 0 0;
+    border: 1px solid lightgoldenrodyellow;
+    border: 2px solid gold;
+    text-align: center;
+}
+
 #pseudoCoins > #productContainer > section > * > .pseudoCoinImage {
     margin-top: 8px;
 }
 
+.pseudoCoinSubImage {
+    height: 48px;
+    width: 48px;
+}
+
 .pseudoCoinText {
     width: 90%;
     height: 80px;
@@ -4017,8 +4053,18 @@ form input:hover {
     margin: 5px auto;
 }
 
+.pseudoSubscriptionText {
+    width: 100%;
+    height: 80px;
+    padding: 10px;
+    box-sizing: border-box;
+    text-align: center;
+    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
+    margin: 5px auto;
+}
+
 .pseudoCoinButton {
-    width: 50%;
+    width: 75%;
     padding: 10px;
     background-color: black;
     color: white;

index.html

@@ -4696,12 +4696,17 @@ <h1>Artists</h1>
         ></button>
         <button
           id="cartSubTab2"
+          style="border: 2px solid gold"
+          i18n="tabs.pseudocoins.subscriptions"
+        ></button>
+        <button
+          id="cartSubTab3"
           style="border: 2px solid cyan"
           i18n="tabs.pseudocoins.upgrades"
         ></button>
         <span style="position:relative">
           <button
-            id="cartSubTab3"
+            id="cartSubTab4"
             style="display: flex; align-items: center; justify-content: center; border: 2px solid cornflowerblue; width: 100%"
           >
             <p style="margin: 0">Checkout</p>
@@ -4713,13 +4718,16 @@ <h1>Artists</h1>
           ></span>
         </span>
         <button
-          id="cartSubTab4"
+          id="cartSubTab5"
           style="border: 2px solid white"
           i18n="tabs.pseudocoins.merch"
         ></button>
       </div>
       <div id="productContainer" class="pseudoUpgradeContainer">
       </div>
+      <div id="subscriptionsContainer" class="pseudoSubscriptionContainer">
+        <div id="sub-section-holder"></div>
+      </div>
       <div id="upgradesContainer">
         <div id="pseudoCoinAmounts">
             <img src="Pictures/PseudoShop/PseudoCoins.png" alt="PseudoCoins">

package.json

@@ -38,8 +38,8 @@
     "csslint": "npx stylelint Synergism.css",
     "csslint:fix": "npx stylelint Synergism.css --fix",
     "htmllint": "npx htmlhint index.html",
-    "build:esbuild": "npx esbuild src/Synergism.ts --bundle --minify --target=\"chrome58,firefox57,safari11,edge29\" --outfile=\"./dist/out.js\"",
-    "watch:esbuild": "npx esbuild src/Synergism.ts --bundle --minify --target=\"chrome58,firefox57,safari11,edge29\" --outfile=\"./dist/out.js\" --watch --sourcemap",
+    "build:esbuild": "npx esbuild src/Synergism.ts --bundle --minify --target=\"chrome58,firefox57,safari11,edge29\" --outfile=\"./dist/out.js\" --define:PROD=true",
+    "watch:esbuild": "npx esbuild src/Synergism.ts --bundle --minify --target=\"chrome58,firefox57,safari11,edge29\" --outfile=\"./dist/out.js\" --watch --sourcemap --define:PROD=false",
     "check:tsc": "npx -p typescript tsc",
     "watch:tsc": "npx -p typescript tsc --watch",
     "prepare": "husky install",

scripts/update-last-updated.js

@@ -26,14 +26,3 @@ try {
   console.error(e)
   process.exit(1)
 }
-
-try {
-  console.log('Update like prod, maaaan')
-  const config = readFileSync(`${__dirname}/../src/Config.ts`, 'utf-8')
-    .replace('const prod: boolean = false', 'const prod: boolean = true')
-
-  writeFileSync(`${__dirname}/../src/Config.ts`, config)
-} catch (e) {
-  console.log('maaaaaan that sucks!', e)
-  process.exit(1)
-}

src/Calculate.ts

@@ -2780,7 +2780,7 @@ export const calculateAscensionScore = () => {
     ? 1
     : 0
   bonusLevel += +player.singularityChallenges.oneChallengeCap.rewards.freeCorruptionLevel
-  
+
   // Init Arrays with challenge values :)
   const challengeScoreArrays1 = [0, 8, 10, 12, 15, 20, 60, 80, 120, 180, 300]
   const challengeScoreArrays2 = [0, 10, 12, 15, 20, 30, 80, 120, 180, 300, 450]

src/Config.ts

@@ -1,3 +1,5 @@
+declare const PROD: boolean | undefined
+
 export const version = '3.1.1 January 15, 2025 pt 1.4: The Bakery Update'
 
 /**
@@ -13,4 +15,4 @@ export const lastUpdated = new Date('##LAST_UPDATED##')
 /**
  * CHANGE THIS ONE INSTEAD
  */
-export const prod: boolean = false
+export const prod = typeof PROD === 'undefined' ? false : PROD

src/PseudoCoinUpgrades.ts

@@ -1,6 +1,7 @@
 import i18next from 'i18next'
 import { displayProperLoadoutCount } from './BlueberryUpgrades'
 import { corruptionLoadoutTableCreate, updateCorruptionLoadoutNames } from './Corruptions'
+import { CartTab } from './purchases/CartTab'
 import { format } from './Synergism'
 
 export type PseudoCoinUpgradeNames =
@@ -20,28 +21,6 @@ export type PseudoCoinUpgradeNames =
 export type PseudoCoinUpgrades = Record<PseudoCoinUpgradeNames, number>
 export type PseudoCoinUpgradeEffects = Record<PseudoCoinUpgradeNames, number>
 
-interface Upgrades {
-  upgradeId: number
-  maxLevel: number
-  name: string
-  description: string
-  internalName: string
-  level: number
-  cost: number
-}
-
-interface PlayerUpgrades {
-  level: number
-  upgradeId: number
-  internalName: PseudoCoinUpgradeNames
-}
-
-interface UpgradesResponse {
-  coins: number
-  upgrades: Upgrades[]
-  playerUpgrades: PlayerUpgrades[]
-}
-
 // TODO?: Something more robust to injections?
 
 export const PCoinUpgrades: PseudoCoinUpgrades = {
@@ -75,8 +54,7 @@ export const PCoinUpgradeEffects: PseudoCoinUpgradeEffects = {
 }
 
 export const initializePCoinCache = async () => {
-  const response = await fetch('https://synergism.cc/stripe/upgrades')
-  const upgradesList = await response.json() as UpgradesResponse
+  const upgradesList = await CartTab.fetchUpgrades()
 
   // Reset Cache
   for (const key of Object.keys(PCoinUpgrades)) {

src/SingularityChallenges.ts

@@ -347,8 +347,7 @@ export const singularityChallengeData: Record<
     singularityRequirement: (baseReq: number, completions: number) => {
       if (completions < 10) {
         return baseReq + 13 * completions
-      }
-      else {
+      } else {
         return baseReq + 13 * 9 + 10 * (completions - 9)
       }
     },

src/Statistics.ts

@@ -1,4 +1,5 @@
 import Decimal from 'break_infinity.js'
+import i18next from 'i18next'
 import { DOMCacheGetOrSet } from './Cache/DOM'
 import {
   calculateAllCubeMultiplier,
@@ -43,9 +44,8 @@ import {
 import { calculateSingularityDebuff } from './singularity'
 import { format, formatTimeShort, player } from './Synergism'
 import type { GlobalVariables } from './types/Synergism'
-import { Globals as G } from './Variables'
 import { sumContents } from './Utility'
-import i18next from 'i18next'
+import { Globals as G } from './Variables'
 
 const associated = new Map<string, string>([
   ['kMisc', 'miscStats'],
@@ -1780,7 +1780,7 @@ export const loadStatisticsAmbrosiaGeneration = () => {
     9: { acc: 4, desc: 'No Ambrosia Upgrades EXALT' },
     10: { acc: 4, desc: 'Cube Upgrade Cx26' },
     11: { acc: 4, desc: 'Cash-Grab ULTIMATE' },
-    12: { acc: 4, desc: 'Event Bonus' },
+    12: { acc: 4, desc: 'Event Bonus' }
   }
   for (let i = 0; i < arr.length; i++) {
     const statAGenMi = DOMCacheGetOrSet(`statAGenM${i + 1}`)

src/Tabs.ts

@@ -285,22 +285,29 @@ const subtabInfo: Record<Tabs, SubTab> = {
         },
         buttonID: 'cartSubTab1'
       },
+      {
+        subTabID: 'subscriptionContainer',
+        get unlocked () {
+          return isLoggedIn() || !prod
+        },
+        buttonID: 'cartSubTab2'
+      },
       {
         subTabID: 'upgradesContainer',
         unlocked: true,
-        buttonID: 'cartSubTab2'
+        buttonID: 'cartSubTab3'
       },
       {
         subTabID: 'cartContainer',
         get unlocked () {
           return isLoggedIn() || !prod
         },
-        buttonID: 'cartSubTab3'
+        buttonID: 'cartSubTab4'
       },
       {
         subTabID: 'merchContainer',
         unlocked: true,
-        buttonID: 'cartSubTab4'
+        buttonID: 'cartSubTab5'
       }
     ]
   }

src/UpdateVisuals.ts

@@ -1633,7 +1633,7 @@ export const visualUpdateAmbrosia = () => {
     }
   )
 
-  if (player.cubeUpgrades[76] > 0) { 
+  if (player.cubeUpgrades[76] > 0) {
     DOMCacheGetOrSet('cubeUpgradeThresholds').style.display = 'block'
     DOMCacheGetOrSet('cubeUpgradeThresholds').innerHTML = i18next.t(
       'ambrosia.cubeUpgradeThresholds',
@@ -1642,8 +1642,7 @@ export const visualUpdateAmbrosia = () => {
         percent: player.cubeUpgrades[76] * calculateNumberOfThresholds()
       }
     )
-  }
-  else {
+  } else {
     DOMCacheGetOrSet('cubeUpgradeThresholds').style.display = 'none'
   }
 
@@ -1656,8 +1655,7 @@ export const visualUpdateAmbrosia = () => {
         luck: format(Math.min(100, player.cubeUpgradeRedBarFilled / 50), 2, true)
       }
     )
-  }
-  else {
+  } else {
     DOMCacheGetOrSet('cubeUpgradeRedBarFills').style.display = 'none'
   }
 }