Merge pull request #627 from Pseudo-Corp/merch

Merch

Synergism.css

@@ -4236,3 +4236,101 @@ form input:hover {
     max-height: fit-content;
     margin: auto;
 }
+
+#merchContainer {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#merchContainer > a {
+    text-decoration: none;
+    margin-top: 10px;
+    border: 2px solid purple;
+    min-width: 150px;
+    text-align: center;
+}
+
+#merchContainer > a:hover {
+    background-color: var(--hover-color);
+}
+
+#merchContainer > #slideshows {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
+    margin-top: 10px;
+}
+
+.slideshow-container {
+    max-width: 1000px;
+    position: relative;
+    margin: auto;
+}
+
+.slideshow-container .slide {
+    display: none;
+}
+
+.slideshow-container .prev,
+.slideshow-container .next {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    width: auto;
+    margin-top: -22px;
+    padding: 16px;
+    color: black;
+    font-weight: bold;
+    font-size: 18px;
+    transition: 0.6s ease;
+    border-radius: 0 3px 3px 0;
+    user-select: none;
+}
+
+.slideshow-container .next {
+    right: 0;
+    border-radius: 3px 0 0 3px;
+}
+
+.slideshow-container .prev:hover,
+.slideshow-container .next:hover {
+    background-color: rgba(0 0 0 / 80%);
+}
+
+.slideshow-container .text {
+    color: black;
+    background-color: #e3e3e3;
+    width: max-content;
+    font-weight: bold;
+    padding: 8px 12px;
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+}
+
+.slideshow-container .pageNumber {
+    color: black;
+    font-size: 12px;
+    padding: 8px 12px;
+    position: absolute;
+    top: 0;
+}
+
+.slideshow-container .active {
+    background-color: #717171;
+    display: block;
+}
+
+.slideshow-container .fade {
+    animation-name: fade;
+    animation-duration: 1.5s;
+}
+
+@keyframes fade {
+    from { opacity: 0.4; }
+    to { opacity: 1; }
+}

index.html

@@ -4693,6 +4693,11 @@ <h1>Artists</h1>
             style="background-color: #fa3e3e; border-radius: 2px; color: white; padding: 1px 3px; font-size: 10px; position: absolute; top: 0; right: 0; display: none;"
           ></span>
         </span>
+        <button
+          id="cartSubTab4"
+          style="border: 2px solid white"
+          i18n="tabs.pseudocoins.merch"
+        ></button>
       </div>
       <div id="productContainer" class="pseudoUpgradeContainer">
       </div>
@@ -4747,6 +4752,10 @@ <h1 id="pCoinUpgradeName">Welcome to the PseudoShop!</h1>
           <button id="closeCart" type="button">Close</button>
         </div>
       </div>
+      <div id="merchContainer">
+        <a href="https://merch.synergism.cc">Go to Merch Site</a>
+        <div id="slideshows"></div>
+      </div>
     </div>
 </body>
 </html>

src/BlueberryUpgrades.ts

@@ -10,8 +10,8 @@ import { format, player } from './Synergism'
 import type { Player } from './types/Synergism'
 import { Alert, Confirm, Prompt } from './UpdateHTML'
 import { visualUpdateAmbrosia } from './UpdateVisuals'
-import { Globals as G } from './Variables'
 import { assert } from './Utility'
+import { Globals as G } from './Variables'
 
 export type blueberryUpgradeNames =
   | 'ambrosiaTutorial'

src/PseudoCoinUpgrades.ts

@@ -190,7 +190,7 @@ export const displayPCoinEffect = (name: PseudoCoinUpgradeNames, level: number)
 }
 
 export const showCostAndEffect = (name: PseudoCoinUpgradeNames) => {
-  switch(name) {
+  switch (name) {
     case 'INSTANT_UNLOCK_1':
       return {
         cost: 'Cost: 400 PseudoCoins',
@@ -252,4 +252,4 @@ export const showCostAndEffect = (name: PseudoCoinUpgradeNames) => {
         effect: 'Effect: 2x/3x Add Code Cap'
       }
   }
-}
+}

src/Tabs.ts

@@ -293,6 +293,11 @@ const subtabInfo: Record<Tabs, SubTab> = {
           return isLoggedIn() || !prod
         },
         buttonID: 'cartSubTab3'
+      },
+      {
+        subTabID: 'merchContainer',
+        unlocked: true,
+        buttonID: 'cartSubTab4'
       }
     ]
   }

src/purchases/CartTab.ts

@@ -6,6 +6,7 @@ import { Alert } from '../UpdateHTML'
 import { createDeferredPromise, type DeferredPromise, memoize } from '../Utility'
 import { setEmptyProductMap } from './CartUtil'
 import { clearCheckoutTab, toggleCheckoutTab } from './CheckoutTab'
+import { clearMerchSubtab, toggleMerchSubtab } from './MerchTab'
 import { clearProductPage, toggleProductPage } from './ProductSubtab'
 import { clearUpgradeSubtab, toggleUpgradeSubtab } from './UpgradesSubtab'
 
@@ -19,7 +20,8 @@ export type Product = {
 const cartSubTabs = {
   Coins: 0,
   Upgrades: 1,
-  Checkout: 2
+  Checkout: 2,
+  Merch: 3
 } as const
 
 const tab = document.getElementById('pseudoCoins')!
@@ -83,6 +85,7 @@ class CartTab {
     clearProductPage()
     clearUpgradeSubtab()
     clearCheckoutTab()
+    clearMerchSubtab()
 
     switch (player.subtabNumber) {
       case cartSubTabs.Coins:
@@ -102,6 +105,9 @@ class CartTab {
           }
         })
         break
+      case cartSubTabs.Merch:
+        toggleMerchSubtab()
+        break
     }
   }
 }

src/purchases/MerchTab.ts

@@ -0,0 +1,131 @@
+import { memoize } from '../Utility'
+
+interface Merch {
+  id: string
+  name: string
+  slug: string
+  description: string
+  state: {
+    type: string
+  }
+  access: {
+    type: string
+  }
+  images: {
+    id: string
+    url: string
+    width: number
+    height: number
+  }[]
+  variants: {
+    id: string
+    name: string
+    sku: string
+    unitPrice: { value: number; currency: string }
+    attributes: {
+      description: string
+      color: { name: string; swatch: string }
+      size: { name: string }
+    }
+    stock: { type: string }
+    weight: { value: number; unit: string }
+    dimensions: {
+      length: number
+      width: number
+      height: number
+      unit: string
+    }
+    images: {
+      id: string
+      url: string
+      width: number
+      height: number
+    }[]
+  }[]
+  createdAt: string
+  updatedAt: string
+}
+
+const tab = document.querySelector<HTMLElement>('#pseudoCoins > #merchContainer')!
+
+const initializeMerchSubtab = memoize(() => {
+  ;(async () => {
+    const response = await fetch('https://synergism.cc/api/merch/products')
+    const merch = await response.json() as Merch[]
+
+    for (let i = 0; i < merch.length; i++) {
+      const slideshow = document.createElement('div')
+      slideshow.classList.add('slideshow-container')
+
+      for (let j = 0; j < merch[i].variants.length; j++) {
+        const variant = merch[i].variants[j]
+
+        const slide = document.createElement('div')
+        slide.classList.add('slide', 'fade')
+
+        const pageNumber = document.createElement('div')
+        pageNumber.classList.add('pageNumber')
+        pageNumber.textContent = `${j + 1}/${merch[i].variants.length}`
+
+        const img = document.createElement('img')
+        img.src = variant.images[j].url
+        img.width = img.height = 400
+
+        const text = document.createElement('div')
+        text.classList.add('text')
+        text.textContent = variant.name
+
+        slideshow.appendChild(slide)
+        slide.appendChild(pageNumber)
+        slide.appendChild(img)
+        slide.appendChild(text)
+      }
+
+      const prev = document.createElement('a')
+      prev.classList.add('prev')
+      prev.textContent = String.fromCharCode(Number.parseInt('10094'))
+
+      const next = document.createElement('a')
+      next.classList.add('next')
+      next.textContent = String.fromCharCode(Number.parseInt('10095'))
+
+      if (merch[i].variants.length > 1) {
+        let slideIndex = 0
+        const slides = slideshow.getElementsByClassName('slide')
+
+        prev.addEventListener('click', () => {
+          slides.item(slideIndex)?.classList.remove('active')
+
+          if (--slideIndex < 0) slideIndex = slides.length - 1
+
+          slides.item(slideIndex)?.classList.add('active')
+        })
+
+        next.addEventListener('click', () => {
+          slides.item(slideIndex)?.classList.remove('active')
+
+          if (++slideIndex > slides.length - 1) slideIndex = 0
+
+          slides.item(slideIndex)?.classList.add('active')
+        })
+      }
+
+      slideshow.appendChild(prev)
+      slideshow.appendChild(next)
+
+      slideshow.querySelector('.slide')!.classList.add('active')
+
+      tab.querySelector('#slideshows')!.appendChild(slideshow)
+    }
+  })()
+})
+
+export const toggleMerchSubtab = () => {
+  initializeMerchSubtab()
+
+  tab.style.display = 'flex'
+}
+
+export const clearMerchSubtab = () => {
+  tab.style.display = 'none'
+}

src/purchases/UpgradesSubtab.ts

@@ -1,7 +1,12 @@
 import i18next from 'i18next'
 import { z } from 'zod'
 import { DOMCacheGetOrSet } from '../Cache/DOM'
-import { displayPCoinEffect, type PseudoCoinUpgradeNames, showCostAndEffect, updatePCoinCache } from '../PseudoCoinUpgrades'
+import {
+  displayPCoinEffect,
+  type PseudoCoinUpgradeNames,
+  showCostAndEffect,
+  updatePCoinCache
+} from '../PseudoCoinUpgrades'
 import { Alert } from '../UpdateHTML'
 import { memoize } from '../Utility'
 
@@ -131,7 +136,7 @@ async function purchaseUpgrade (upgrades: Map<number, UpgradesList>) {
   }
 }
 
-export const initializeUpgradeSubtab = memoize(() => {
+const initializeUpgradeSubtab = memoize(() => {
   ;(async () => {
     const response = await fetch('https://synergism.cc/stripe/upgrades')
     const upgradesList = await response.json() as UpgradesResponse

translations/en.json

@@ -2482,7 +2482,8 @@
     },
     "pseudocoins": {
         "buy": "Purchase Coins",
-        "upgrades": "Buy Upgrades"
+        "upgrades": "Buy Upgrades",
+        "merch": "Purchase Merch"
     }
   },
   "offlineProgress": {

translations/source.json

@@ -2482,7 +2482,8 @@
       },
       "pseudocoins": {
           "buy": "Purchase Coins",
-          "upgrades": "Buy Upgrades"
+          "upgrades": "Buy Upgrades",
+          "merch": "Purchase Merch"
       }
   },
   "offlineProgress": {