From 4b0d0eb15579d1b9dcfcc17fe698824b56de1835 Mon Sep 17 00:00:00 2001
From: dodoels <cys0919@gmail.com>
Date: Mon, 18 Nov 2024 22:33:09 -0500
Subject: [PATCH] add unequip all gems button to gem summary

---
 .../components/individual_sim_ui/gem_summary.ts   | 15 +++++++++++++++
 ui/scss/shared/_gems.scss                         | 10 +++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/ui/core/components/individual_sim_ui/gem_summary.ts b/ui/core/components/individual_sim_ui/gem_summary.ts
index e0a971e246..2d47109bdf 100644
--- a/ui/core/components/individual_sim_ui/gem_summary.ts
+++ b/ui/core/components/individual_sim_ui/gem_summary.ts
@@ -4,6 +4,7 @@ import { Player } from '../../player';
 import { UIGem as Gem } from '../../proto/ui.js';
 import { ActionId } from '../../proto_utils/action_id';
 import { SimUI } from '../../sim_ui';
+import { TypedEvent } from '../../typed_event';
 import { ContentBlock } from '../content_block';
 
 interface GemSummaryData {
@@ -26,6 +27,20 @@ export class GemSummary extends Component {
 			header: { title: 'Gem Summary' },
 		});
 		player.gearChangeEmitter.on(() => this.updateTable());
+
+		const headerElement = this.container.headerElement;
+		if (headerElement) {
+			const unequipButton = document.createElement('button');
+			unequipButton.innerHTML = `<i class="fas fa-times me-1"></i> Unequip All Gems`;
+			unequipButton.classList.add('btn', 'btn-sm', 'btn-link', 'gem-reset-button');
+			unequipButton.id = 'unequip-all-gems-btn';
+			unequipButton.onclick = () => this.unequipAllGems();
+			headerElement.appendChild(unequipButton);
+		}
+	}
+
+	private unequipAllGems() {
+		this.player.setGear(TypedEvent.nextEventID(), this.player.getGear().withoutGems());
 	}
 
 	private updateTable() {
diff --git a/ui/scss/shared/_gems.scss b/ui/scss/shared/_gems.scss
index 2e9c50d880..c59cac9d97 100644
--- a/ui/scss/shared/_gems.scss
+++ b/ui/scss/shared/_gems.scss
@@ -4,7 +4,7 @@
   position: relative;
   width: var(--gem-width);
   height: var(--gem-width);
-  
+
   &:not(:last-child) {
     margin-right: 1px;
   }
@@ -30,3 +30,11 @@
   height: 100%;
   inset: 0;
 }
+
+.gem-reset-button {
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	padding: 0;
+	color: #ef9eaa;
+}