ui: character_stats cleanup

- avoid recreating new picker every click Signed-off-by: jarves <jarveson@gmail.com>
vigo2 · Oct 5, 2023 · 450f0ac · 450f0ac
1 parent c9083ad
commit 450f0ac
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 27 deletions.
diff --git a/ui/core/components/character_stats.tsx b/ui/core/components/character_stats.tsx
@@ -103,13 +103,10 @@ export class CharacterStats extends Component {
 			let bonusStatValue = bonusStats.getStat(stat);
 
 			if (bonusStatValue == 0) {
-				valueElem.classList.remove('text-success', 'text-danger');
 				valueElem.classList.add('text-white');
 			} else if (bonusStatValue > 0) {
-				valueElem.classList.remove('text-white', 'text-danger');
 				valueElem.classList.add('text-success');
 			} else if (bonusStatValue < 0) {
-				valueElem.classList.remove('text-white', 'text-success');
 				valueElem.classList.add('text-danger');
 			}
 
@@ -240,32 +237,27 @@ export class CharacterStats extends Component {
 			</a>
 		);
 
-		let popover = Popover.getOrCreateInstance(link, {
+		let popover: Popover | null = null;
+
+		let picker = new NumberPicker(null, this.player, {
+			label: `Bonus ${statName}`,
+			extraCssClasses: ['mb-0'],
+			changedEvent: (player: Player<any>) => player.bonusStatsChangeEmitter,
+			getValue: (player: Player<any>) => player.getBonusStats().getStat(stat),
+			setValue: (eventID: EventID, player: Player<any>, newValue: number) => {
+				const bonusStats = player.getBonusStats().withStat(stat, newValue);
+				player.setBonusStats(eventID, bonusStats);
+				popover?.hide();
+			},
+		});
+
+		popover = new Popover(link, {
 			customClass: 'bonus-stats-popover',
 			placement: 'right',
 			fallbackPlacement: ['left'],
 			sanitize: false,
-			content: 
-				<div className='input-root number-picker-root mb-0'>
-					<label className='form-label'>Bonus Health</label>
-					<input type='text' className='form-control number-picker-input' value={this.player.getBonusStats().getStat(stat)} />
-				</div>,
-		});
-
-		link.addEventListener('shown.bs.popover', (event) => {
-			let popoverBody = document.querySelector('.popover.bonus-stats-popover .popover-body') as HTMLElement;
-			popoverBody.innerHTML = '';
-			let picker = new NumberPicker(popoverBody, this.player, {
-				label: `Bonus ${statName}`,
-				extraCssClasses: ['mb-0'],
-				changedEvent: (player: Player<any>) => player.bonusStatsChangeEmitter,
-				getValue: (player: Player<any>) => player.getBonusStats().getStat(stat),
-				setValue: (eventID: EventID, player: Player<any>, newValue: number) => {
-					const bonusStats = player.getBonusStats().withStat(stat, newValue);
-					player.setBonusStats(eventID, bonusStats);
-					popover.hide();
-				},
-			});
+			html:true,
+			content: picker.rootElem,
 		});
 
 		return link as HTMLElement;

diff --git a/ui/core/components/input.tsx b/ui/core/components/input.tsx
@@ -47,7 +47,7 @@ export abstract class Input<ModObject, T, V = T> extends Component {
 
 	readonly changeEmitter = new TypedEvent<void>();
 
-	constructor(parent: HTMLElement, cssClass: string, modObject: ModObject, config: InputConfig<ModObject, T, V>) {
+	constructor(parent: HTMLElement | null, cssClass: string, modObject: ModObject, config: InputConfig<ModObject, T, V>) {
 		super(parent, 'input-root', config.rootElem);
 		this.inputConfig = config;
 		this.modObject = modObject;

diff --git a/ui/core/components/number_picker.ts b/ui/core/components/number_picker.ts
@@ -16,7 +16,7 @@ export class NumberPicker<ModObject> extends Input<ModObject, number> {
 	private float: boolean;
 	private positive: boolean;
 
-	constructor(parent: HTMLElement, modObject: ModObject, config: NumberPickerConfig<ModObject>) {
+	constructor(parent: HTMLElement | null, modObject: ModObject, config: NumberPickerConfig<ModObject>) {
 		super(parent, 'number-picker-root', modObject, config);
 		this.float = config.float || false;
 		this.positive = config.positive || false;