Moved gem summary to below paper doll on gear tab.

Changes to be committed: modified: ui/core/components/gear_picker.tsx deleted: ui/core/components/gem_summary_action.ts modified: ui/core/individual_sim_ui.ts
wowsims · Nov 20, 2023 · 0da78e4 · 0da78e4
1 parent 70dbd8b
commit 0da78e4
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 64 deletions.
diff --git a/ui/core/components/gear_picker.tsx b/ui/core/components/gear_picker.tsx
@@ -113,6 +113,8 @@ export class GearPicker extends Component {
 		].map(slot => new ItemPicker(rightSide, simUI, player, slot));
 
 		this.itemPickers = leftItemPickers.concat(rightItemPickers).sort((a, b) => a.slot - b.slot);
+
+		const gemSummary = new GemSummary(leftSide, simUI, player);
 	}
 }
 
@@ -217,6 +219,63 @@ export class ItemRenderer extends Component {
 	}
 }
 
+export class GemSummary extends Component {
+	private readonly simUI: SimUI;
+	private readonly player: Player<any>;
+
+	private readonly tableBody: HTMLElement;
+
+	constructor(parent: HTMLElement, simUI: SimUI, player: Player<any>) {
+		super(parent, 'gem-summary-root');
+		this.simUI = simUI;
+		this.player = player;
+
+		const container = `
+			<hr />
+			<h5 class="modal-title">Currently Socketed Gems</h5>
+			<br />
+			<div class="gem-summary-table-container modal-scroll-table">
+				<table class="gem-summary-table" style="width: 100%">
+					<thead>
+						<tr>
+							<th>Gem Type</th>
+							<th style="text-align: right">
+								<span>Quantity</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody></tbody>
+				</table>
+			</div>
+		`;
+
+		this.rootElem.insertAdjacentHTML('afterbegin', container);
+		this.tableBody = this.rootElem.querySelector('.gem-summary-table tbody') as HTMLElement;
+		player.gearChangeEmitter.on(() => {
+			this.updateTable();
+		});
+	}
+
+	private updateTable() {
+		this.tableBody.innerHTML = ``;
+		const fullGemList = this.player.getGear().getAllGems(this.player.isBlacksmithing());
+		const gemCounts: Record<string, number> = {};
+
+		for (const gem of fullGemList) {
+			gemCounts[gem.name] = gemCounts[gem.name] ? gemCounts[gem.name] + 1 : 1;
+		}
+
+		for (const gemName of Object.keys(gemCounts)) {
+			const row = document.createElement('tr');
+			row.innerHTML = `
+				<td>${gemName}</td>
+				<td style="text-align: right">${gemCounts[gemName].toFixed(0)}</td>
+			`;
+			this.tableBody.appendChild(row);
+		}
+	}
+}
+
 export class ItemPicker extends Component {
 	readonly slot: ItemSlot;
 
@@ -1309,4 +1368,4 @@ export class ItemList<T> {
 		}
 		return <></>;
 	}
-}
+}
diff --git a/ui/core/components/gem_summary_action.ts b/ui/core/components/gem_summary_action.ts
diff --git a/ui/core/individual_sim_ui.ts b/ui/core/individual_sim_ui.ts
@@ -10,7 +10,6 @@ import { EncounterPickerConfig } from './components/encounter_picker';
 import { addRaidSimAction, RaidSimResultsManager } from './components/raid_sim_action';
 import { SavedDataConfig } from './components/saved_data_manager';
 import { addStatWeightsAction } from './components/stat_weights_action';
-import { addGemSummaryAction } from './components/gem_summary_action';
 
 import { BulkTab } from './components/individual_sim_ui/bulk_tab';
 import { GearTab } from './components/individual_sim_ui/gear_tab';
@@ -341,7 +340,6 @@ export abstract class IndividualSimUI<SpecType extends Spec> extends SimUI {
 	private addSidebarComponents() {
 		this.raidSimResultsManager = addRaidSimAction(this);
 		addStatWeightsAction(this, this.individualConfig.epStats, this.individualConfig.epPseudoStats, this.individualConfig.epReferenceStat);
-		addGemSummaryAction(this);
 
 		const characterStats = new CharacterStats(
 			this.rootElem.getElementsByClassName('sim-sidebar-footer')[0] as HTMLElement,