Campaigns sans UI

Synergism.css

@@ -690,6 +690,11 @@ button.isEvent:hover {
     color: red;
 }
 
+#campaigntab {
+    border-color: red;
+    color: orange;
+}
+
 #traitstab {
     border-color: orange;
     color: red;
@@ -2880,6 +2885,55 @@ p#ascendHotKeys {
     color: white;
 }
 
+#campaigns {
+    justify-content: center;
+    align-items: start;
+    margin-top: 10px;
+}
+
+#campaignsMain {
+    width: 100%;
+    margin-top: 5%;
+    height: 50%;
+    justify-items: center;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
+#campaignsIcons {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    justify-items: center;
+    grid-area: 1 / 1 / 3 / 2;
+}
+
+#campaignIconGrid {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    grid-column-gap: 5px;
+    grid-row-gap: 5px;
+}
+
+#campaignsIcons p {
+    text-align: center;
+}
+
+#campaignsIcons img {
+    width: 48px;
+    height: 48px;
+    font-size: 0;
+    cursor: pointer;
+}
+
+#campaignsDescriptions { grid-area: 1 / 2 / 3 / 4; }
+
+#campaignsTokensInfo { grid-area: 3 / 1 / 4 / 4; }
+
 #traits {
     justify-content: center;
     align-items: start;

index.html

@@ -2807,6 +2807,22 @@
         </div>
     </div>
 
+    <div id="campaigns" style="display: none;">
+        <div id="campaignsFlavor" class="flex column">
+            <h2 id="campaignsIntroduction" class="tightText" i18n="campaigns.intro" style="color: red"></h1>
+            <h4 id="campaignsInfo1" class="tightText" i18n="campaigns.campaignInfo" style="color: orange"></h2>
+        </div>
+        <div id="campaignsMain">
+            <div id="campaignsIcons">
+                <p>Pick Your Campaign now!</p>
+                <div id = "campaignIconGrid"> 
+                </div>
+            </div>
+            <div id="campaignsDescriptions">TEST 2</div>
+            <div id="campaignsTokensInfo">TEST 3</div>
+        </div>
+    </div>
+
     <div id="traits" style="display: none;">
         <div id="corruptionStatsLoadouts" class="flex column">
             <span id="corrButtonRow" class="flex row center">

src/Campaign.ts

@@ -1,6 +1,8 @@
 import i18next from 'i18next'
 import { CorruptionLoadout, type Corruptions } from './Corruptions'
 import { player } from './Synergism'
+import { DOMCacheGetOrSet } from './Cache/DOM'
+import { IconSets } from './Themes'
 
 export type AscensionModifiers = 'GlobalSpeed'
 
@@ -10,38 +12,44 @@ export type CampaignModifiers = Partial<Record<AscensionModifiers, number>>
 export type CampaignKeys = 'test1' | 'test2' | 'test3'
 
 export interface ICampaignManagerData {
-  currentCampaign: CampaignKeys | undefined
-  campaigns: Record<CampaignKeys, ICampaignData>
+  currentCampaign?: CampaignKeys | undefined
+  campaigns?: Record<CampaignKeys, number>
 }
 
 export interface ICampaignData {
-  campaignLoadout: CampaignLoadout
+  campaignCorruptions: Partial<Corruptions>
   campaignModifiers: CampaignModifiers
   limit: number
   isMeta: boolean
-  c10Completions?: number
 }
 
 export class CampaignManager {
-  totalCampaignTokens: number
-  currentCampaign: Campaign | undefined
-  campaigns!: Record<CampaignKeys, Campaign>
-
-  constructor (campaignManagerData: ICampaignManagerData) {
-    for (const campaignKey of Object.keys(campaignManagerData.campaigns)) {
-      const key = campaignKey as keyof typeof campaignManagerData.campaigns
-      this.campaigns[key] = new Campaign(campaignDatas[key], key)
+  private totalCampaignTokens: number
+  private currentCampaign: Campaign | undefined
+  private campaigns!: Record<CampaignKeys, Campaign>
+
+  constructor (campaignManagerData?: ICampaignManagerData) {
+    this.campaigns = {} as Record<CampaignKeys, Campaign>
+    if (campaignManagerData !== undefined) {
+      for (const campaignKey of Object.keys(campaignDatas)) {
+        const key = campaignKey as keyof typeof campaignDatas
+        this.campaigns[key] = new Campaign(campaignDatas[key], key, campaignManagerData.campaigns?.[key])
+      }
+      const currentKey = campaignManagerData.currentCampaign
+      if (currentKey !== undefined) {
+        this.currentCampaign = this.campaigns[currentKey]
+        player.corruptions.used = new CorruptionLoadout(this.currentCampaign.campaignCorruptions)
+      } else {
+        this.currentCampaign = undefined
+      }
     }
-
-    const currentKey = campaignManagerData.currentCampaign
-
-    if (currentKey !== undefined) {
-      this.currentCampaign = this.campaigns[currentKey]
-      player.corruptions.used = this.currentCampaign.createUsableLoadout()
-    } else {
+    else {
+      for (const campaignKey of Object.keys(campaignDatas)) {
+        const key = campaignKey as keyof typeof campaignDatas
+        this.campaigns[key] = new Campaign(campaignDatas[key], key, 0)
+      }
       this.currentCampaign = undefined
     }
-
     this.totalCampaignTokens = this.computeTotalCampaignTokens()
   }
 
@@ -53,28 +61,43 @@ export class CampaignManager {
     }
     return sum
   }
+
+  get tokens () {
+    return this.totalCampaignTokens
+  }
+
+  get current () {
+    return this.currentCampaign
+  }
+
+  // Store as this in player
+  get c10Completions (): Record<CampaignKeys, number> {
+    return Object.fromEntries(
+      Object.entries(this.campaigns).map(([key, value]) => [key, value.c10Completions])
+    ) as Record<CampaignKeys, number>
+  }
 }
 
 export class Campaign {
   // Stored as variable out of scope
   name: string
   description: string
-  campaignLoadout: CampaignLoadout
+  campaignCorruptions: CampaignLoadout
   campaignModifiers: CampaignModifiers
   limit: number
   isMeta: boolean
 
   // Saved as a variable
   _c10Completions = 0
 
-  constructor (campaignData: ICampaignData, key: string) {
+  constructor (campaignData: ICampaignData, key: string, c10?: number) {
     this.name = i18next.t(`campaigns.data.${key}.name`)
     this.description = i18next.t(`campaigns.data.${key}.description`)
-    this.campaignLoadout = campaignData.campaignLoadout
+    this.campaignCorruptions = campaignData.campaignCorruptions
     this.campaignModifiers = campaignData.campaignModifiers
     this.limit = campaignData.limit
     this.isMeta = campaignData.isMeta
-    this._c10Completions = campaignData.c10Completions ?? 0
+    this._c10Completions = c10 ?? 0
   }
 
   public computeTokenValue = () => {
@@ -83,7 +106,7 @@ export class Campaign {
   }
 
   public createUsableLoadout = (): CorruptionLoadout => {
-    return new CorruptionLoadout(this.campaignLoadout)
+    return new CorruptionLoadout(this.campaignCorruptions)
   }
 
   public set c10Completions (value: number) {
@@ -96,7 +119,7 @@ export class Campaign {
 
 export const campaignDatas: Record<CampaignKeys, ICampaignData> = {
   test1: {
-    campaignLoadout: {
+    campaignCorruptions: {
       viscosity: 1
     },
     campaignModifiers: {
@@ -106,7 +129,7 @@ export const campaignDatas: Record<CampaignKeys, ICampaignData> = {
     limit: 10
   },
   test2: {
-    campaignLoadout: {
+    campaignCorruptions: {
       viscosity: 1,
       deflation: 1
     },
@@ -117,7 +140,7 @@ export const campaignDatas: Record<CampaignKeys, ICampaignData> = {
     limit: 15
   },
   test3: {
-    campaignLoadout: {
+    campaignCorruptions: {
       viscosity: 1,
       deflation: 1,
       dilation: 1
@@ -129,3 +152,14 @@ export const campaignDatas: Record<CampaignKeys, ICampaignData> = {
     limit: 20
   }
 }
+
+export const campaignTest = () => {
+  const campaignIconDiv = DOMCacheGetOrSet('campaignIconGrid')
+
+  for (let i = 0; i < 50; i++) {
+    const campaignIcon = document.createElement('img')
+    campaignIcon.classList.add('campaignIcon')
+    campaignIcon.src = `Pictures/${IconSets[player.iconSet][0]}/Quark.png`
+    campaignIconDiv.appendChild(campaignIcon)
+  }
+}

src/Corruptions.ts

@@ -6,6 +6,7 @@ import { toggleCorruptionLevel } from './Toggles'
 import { Alert, Prompt } from './UpdateHTML'
 import { getElementById, productContents, sumContents, validateNonnegativeInteger } from './Utility'
 import { Globals as G } from './Variables'
+import { PCoinUpgradeEffects } from './PseudoCoinUpgrades'
 
 export const convertInputToCorruption = (array: number[]): Corruptions => {
   return {
@@ -59,7 +60,6 @@ export class CorruptionLoadout {
 
   constructor (p: Partial<Corruptions>) {
     Object.assign(this.#levels, p)
-    console.log('test', this.#levels)
   }
 
   public setCorruptionLevels (corruptions: Partial<Corruptions>) {
@@ -569,15 +569,18 @@ export const corruptionLoadoutTableCreate = () => {
   zeroCell.title = i18next.t('corruptions.loadoutTable.zeroTitle')
 
   // Do the rest of the thing
-  for (let i = 0; i < corrSaves.length; i++) {
+  const allowedRows = 8 + PCoinUpgradeEffects.CORRUPTION_LOADOUT_SLOT_QOL
+  for (let i = 0; i < Math.min(corrSaves.length, allowedRows); i++) {
     const corrSave = corrSaves[i]
     const corrLoadout = corrSave?.loadout.loadout
+    const corrName = corrSave?.name
+
     const row = table.insertRow()
     // Title Cell
     const titleCell = row.insertCell()
     titleCell.className = `test${'Title'}`
     titleCell.title = i18next.t('corruptions.loadoutTable.otherRowTitle', { value: i + 1 })
-    console.log(corrLoadout)
+    titleCell.textContent = corrName
     for (const corr in corrLoadout) {
       const corrKey = corr as keyof Corruptions
       const cell = row.insertCell()

src/Synergism.ts

@@ -180,6 +180,7 @@ import { changeSubTab, changeTab, Tabs } from './Tabs'
 import { settingAnnotation, toggleIconSet, toggleTheme } from './Themes'
 import { clearTimeout, clearTimers, setInterval, setTimeout } from './Timers'
 import { playerUpdateVarSchema } from './saves/PlayerUpdateVarSchema'
+import { CampaignManager, campaignTest } from './Campaign'
 
 export const player: Player = {
   firstPlayed: new Date().toISOString(),
@@ -902,6 +903,8 @@ export const player: Player = {
     }),
     showStats: true
   },
+
+  campaigns: new CampaignManager(),
   /*prototypeCorruptions: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   usedCorruptions: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
   corruptionLoadouts: {
@@ -6392,6 +6395,7 @@ window.addEventListener('load', async () => {
   reloadShit()
 
   corruptionLoadoutTableCreate()
+  campaignTest()
 }, { once: true })
 
 window.addEventListener('unload', () => {

src/Tabs.ts

@@ -27,12 +27,13 @@ export enum Tabs {
   Research = 5,
   AntHill = 6,
   WowCubes = 7,
-  Corruption = 8,
-  Singularity = 9,
-  Settings = 10,
-  Shop = 11,
-  Event = 12,
-  Purchase = 13
+  Campaign = 8,
+  Corruption = 9,
+  Singularity = 10,
+  Settings = 11,
+  Shop = 12,
+  Event = 13,
+  Purchase = 14
 }
 
 /**
@@ -222,6 +223,7 @@ const subtabInfo: Record<Tabs, SubTab> = {
       }
     ]
   },
+  [Tabs.Campaign]: { subTabList: [] },
   [Tabs.Corruption]: {
     tabSwitcher: () => toggleCorruptionLoadoutsStats,
     subTabList: [
@@ -578,8 +580,13 @@ tabRow.appendButton(
     .setType(Tabs.WowCubes)
     .makeDraggable()
     .makeRemoveable(),
-  new $Tab({ class: 'chal11', id: 'traitstab', i18n: 'tabs.main.corruption' })
+  new $Tab({ class: 'chal11', id: 'campaigntab', i18n: 'tabs.main.campaign' })
     .setUnlockedState(() => player.challengecompletions[11] > 0)
+    .setType(Tabs.Campaign)
+    .makeDraggable()
+    .makeRemoveable(),
+  new $Tab({ class: 'chal14', id: 'traitstab', i18n: 'tabs.main.corruption' })
+    .setUnlockedState(() => player.challengecompletions[14] > 0)
     .setType(Tabs.Corruption)
     .makeDraggable()
     .makeRemoveable(),