Some UI QoL updates for APL, and reduce spacing between items

wowsims · Jul 11, 2023 · d61dc09 · d61dc09
1 parent 40e5c72
commit d61dc09
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 7 deletions.
diff --git a/ui/core/components/individual_sim_ui/apl_values.ts b/ui/core/components/individual_sim_ui/apl_values.ts
@@ -70,15 +70,41 @@ export class APLValuePicker extends Input<Player<any>, APLValue | undefined> {
 			getValue: (player: Player<any>) => this.getSourceValue()?.value.oneofKind,
 			setValue: (eventID: EventID, player: Player<any>, newValue: APLValueType) => {
 				const sourceValue = this.getSourceValue();
-				if (sourceValue?.value.oneofKind == newValue) {
+				const oldValue = sourceValue?.value.oneofKind;
+				if (oldValue == newValue) {
 					return;
 				}
 
 				if (newValue) {
 					const factory = valueTypeFactories[newValue];
-					const obj: any = { oneofKind: newValue };
+					let obj: any = { oneofKind: newValue };
 					obj[newValue] = factory.newValue();
 					if (sourceValue) {
+						// Some pre-fill logic when swapping types.
+						if (oldValue && this.valuePicker) {
+							if (newValue == 'not') {
+								(obj[newValue] as APLValueNot).val = this.makeAPLValue(oldValue, this.valuePicker.getInputValue());
+							} else if (sourceValue.value.oneofKind == 'not' && sourceValue.value.not.val?.value.oneofKind == newValue && !['and', 'or'].includes(newValue)) {
+								obj = sourceValue.value.not.val.value;
+							} else if (newValue == 'and') {
+								if (sourceValue.value.oneofKind == 'or') {
+									(obj[newValue] as APLValueAnd).vals = sourceValue.value.or.vals;
+								} else {
+									(obj[newValue] as APLValueAnd).vals = [this.makeAPLValue(oldValue, this.valuePicker.getInputValue())];
+								}
+							} else if (newValue == 'or') {
+								if (sourceValue.value.oneofKind == 'and') {
+									(obj[newValue] as APLValueOr).vals = sourceValue.value.and.vals;
+								} else {
+									(obj[newValue] as APLValueOr).vals = [this.makeAPLValue(oldValue, this.valuePicker.getInputValue())];
+								}
+							} else if (sourceValue.value.oneofKind == 'and' && sourceValue.value.and.vals?.[0]?.value.oneofKind == newValue) {
+								obj = sourceValue.value.and.vals[0].value;
+							} else if (sourceValue.value.oneofKind == 'or' && sourceValue.value.or.vals?.[0]?.value.oneofKind == newValue) {
+								obj = sourceValue.value.or.vals[0].value;
+							}
+						}
+
 						sourceValue.value = obj;
 					} else {
 						const newSourceValue = APLValue.create();
@@ -131,6 +157,15 @@ export class APLValuePicker extends Input<Player<any>, APLValue | undefined> {
 		}
 	}
 
+	private makeAPLValue(type: APLValueType, implVal: any): APLValue {
+		if (!type) {
+			return APLValue.create();
+		}
+		const obj: any = { oneofKind: type };
+		obj[type] = implVal;
+		return APLValue.create({value: obj});
+	}
+
 	private updateValuePicker(newValueType: APLValueType) {
 		const valueType = this.currentType;
 		if (newValueType == valueType) {

diff --git a/ui/core/components/list_picker.ts b/ui/core/components/list_picker.ts
@@ -196,8 +196,8 @@ export class ListPicker<ModObject, ItemType> extends Input<ModObject, Array<Item
 			const copyButtonTooltip = Tooltip.getOrCreateInstance(copyButton);
 
 			copyButton.addEventListener('click', event => {
-				const newList = this.config.getValue(this.modObject)
-				newList.push(this.config.copyItem(newList[index]));
+				const newList = this.config.getValue(this.modObject).slice();
+				newList.splice(index, 0, this.config.copyItem(newList[index]));
 				this.config.setValue(TypedEvent.nextEventID(), this.modObject, newList);
 				copyButtonTooltip.hide();
 			});

diff --git a/ui/scss/core/components/individual_sim_ui/_apl_rotation_picker.scss b/ui/scss/core/components/individual_sim_ui/_apl_rotation_picker.scss
@@ -19,7 +19,9 @@
 
 		>* > .list-picker-item-container {
 			background-color: rgba(21, 23, 30, 0.8);
-			padding: 5px;
+			border: 1px solid var(--bs-primary) !important;
+			padding: 0 5px 0 1px;
+			margin: 0 0 5px 0;
 
 			>.list-picker-item {
 				flex-grow: 1;
@@ -49,7 +51,7 @@
 	display: flex;
 	align-items: center;
 	flex-direction: row;
-	margin: 5px;
+	margin: 2px;
 
 	&> :not(:last-child) {
 		margin-right: map.get($spacers, 2);
@@ -66,7 +68,7 @@
 
 .apl-action-picker-root, .apl-value-picker-root {
 	flex-direction: row;
-	margin: 2px;
+	margin: 0;
 
 	.input-root {
 		margin: 0;