Lots of UI work for APL, all existing apl values implemented now

wowsims · Jul 1, 2023 · 09fd924 · 09fd924
1 parent 4a8ce75
commit 09fd924
Show file tree

Hide file tree

Showing 11 changed files with 378 additions and 143 deletions.
diff --git a/ui/core/components/individual_sim_ui/apl_actions.ts b/ui/core/components/individual_sim_ui/apl_actions.ts
@@ -27,21 +27,15 @@ export class APLActionPicker extends Input<Player<any>, APLAction> {
 	private currentType: APLActionType;
 	private actionPicker: Input<Player<any>, any>|null;
 
-	private readonly conditionPicker: Input<Player<any>, APLValue>;
+	private readonly conditionPicker: AplValues.APLValuePicker;
 
 	constructor(parent: HTMLElement, player: Player<any>, config: APLActionPickerConfig) {
 		super(parent, 'apl-action-picker-root', player, config);
 
 		this.conditionPicker = new AplValues.APLValuePicker(this.rootElem, this.modObject, {
 			changedEvent: (player: Player<any>) => player.rotationChangeEmitter,
-			getValue: (player: Player<any>) => {
-				const action = this.getSourceValue();
-				if (!action.condition) {
-					action.condition = APLValue.create();
-				}
-				return action.condition;
-			},
-			setValue: (eventID: EventID, player: Player<any>, newValue: APLValue) => {
+			getValue: (player: Player<any>) => this.getSourceValue().condition,
+			setValue: (eventID: EventID, player: Player<any>, newValue: APLValue|undefined) => {
 				this.getSourceValue().condition = newValue;
 				player.rotationChangeEmitter.emit(eventID);
 			},

diff --git a/ui/core/components/individual_sim_ui/apl_rotation_picker.ts b/ui/core/components/individual_sim_ui/apl_rotation_picker.ts
@@ -1,12 +1,13 @@
-import { EventID } from '../../typed_event.js';
+import { Tooltip } from 'bootstrap';
+
+import { EventID, TypedEvent } from '../../typed_event.js';
 import { Player } from '../../player.js';
 import { BooleanPicker } from '../boolean_picker.js';
 import { ListItemPickerConfig, ListPicker } from '../list_picker.js';
 import {
 	APLListItem,
 	APLAction,
 	APLRotation,
-	APLValue,
 } from '../../proto/apl.js';
 
 import { Component } from '../component.js';
@@ -34,7 +35,7 @@ export class APLRotationPicker extends Component {
 				action: {},
 			}),
 			copyItem: (oldItem: APLListItem) => APLListItem.clone(oldItem),
-			newItemPicker: (parent: HTMLElement, listPicker: ListPicker<Player<any>, APLListItem>, index: number, config: ListItemPickerConfig<Player<any>, APLListItem>) => new APLListItemPicker(parent, modPlayer, index, config),
+			newItemPicker: (parent: HTMLElement, listPicker: ListPicker<Player<any>, APLListItem>, index: number, config: ListItemPickerConfig<Player<any>, APLListItem>) => new APLListItemPicker(parent, modPlayer, config),
 			inlineMenuBar: true,
 		});
 
@@ -44,9 +45,8 @@ export class APLRotationPicker extends Component {
 
 class APLListItemPicker extends Input<Player<any>, APLListItem> {
 	private readonly player: Player<any>;
-	private readonly itemIndex: number;
 
-	private readonly hidePicker: Input<null, boolean>;
+	private readonly hidePicker: Input<Player<any>, boolean>;
 	private readonly actionPicker: APLActionPicker;
 
     private getItem(): APLListItem {
@@ -55,18 +55,17 @@ class APLListItemPicker extends Input<Player<any>, APLListItem> {
 		});
     }
 
-	constructor(parent: HTMLElement, player: Player<any>, itemIndex: number, config: ListItemPickerConfig<Player<any>, APLListItem>) {
-		super(parent, 'apl-list-item-picker-root', player, config);
+	constructor(parent: HTMLElement, player: Player<any>, config: ListItemPickerConfig<Player<any>, APLListItem>) {
+		super(parent, 'apl-list-item-picker-root', player, {
+			...config,
+			enableWhen: () => !this.getItem().hide,
+		});
 		this.player = player;
-		this.itemIndex = itemIndex;
 
-        this.hidePicker = new BooleanPicker(this.rootElem, null, {
-            label: 'Hide',
-            labelTooltip: 'Ignores this APL action.',
-            inline: true,
+        this.hidePicker = new HidePicker(ListPicker.getItemHeaderElem(this), player, {
             changedEvent: () => this.player.rotationChangeEmitter,
             getValue: () => this.getItem().hide,
-            setValue: (eventID: EventID, _: null, newValue: boolean) => {
+            setValue: (eventID: EventID, player: Player<any>, newValue: boolean) => {
                 this.getItem().hide = newValue;
 				this.player.rotationChangeEmitter.emit(eventID);
             },
@@ -103,3 +102,46 @@ class APLListItemPicker extends Input<Player<any>, APLListItem> {
 		this.actionPicker.setInputValue(newValue.action || APLAction.create());
 	}
 }
+
+class HidePicker extends Input<Player<any>, boolean> {
+	private readonly inputElem: HTMLElement;
+	private readonly iconElem: HTMLElement;
+	private tooltip: Tooltip;
+
+	constructor(parent: HTMLElement, modObject: Player<any>, config: InputConfig<Player<any>, boolean>) {
+		super(parent, 'hide-picker-root', modObject, config);
+
+		this.inputElem = ListPicker.makeActionElem('hide-picker-button', 'Enable/Disable', 'fa-eye');
+		this.iconElem = this.inputElem.childNodes[0] as HTMLElement;
+		this.rootElem.appendChild(this.inputElem);
+		this.tooltip = Tooltip.getOrCreateInstance(this.inputElem);
+
+		this.init();
+
+		this.inputElem.addEventListener('click', event => {
+			this.setInputValue(!this.getInputValue());
+			this.inputChanged(TypedEvent.nextEventID());
+		});
+	}
+
+	getInputElem(): HTMLElement {
+		return this.inputElem;
+	}
+
+	getInputValue(): boolean {
+		return this.iconElem.classList.contains('fa-eye-slash');
+	}
+
+	setInputValue(newValue: boolean) {
+		if (newValue) {
+			this.iconElem.classList.add('fa-eye-slash');
+			this.iconElem.classList.remove('fa-eye');
+			this.tooltip.setContent({'.tooltip-inner': 'Enable Action'});
+		} else {
+			this.iconElem.classList.add('fa-eye');
+			this.iconElem.classList.remove('fa-eye-slash');
+			//this.inputElem.setAttribute('data-bs-title', 'Disable Action');
+			this.tooltip.setContent({'.tooltip-inner': 'Disable Action'});
+		}
+	}
+}