Allow addition of manual item notices

ui/core/components/gear_picker/gear_picker.tsx

@@ -1,5 +1,6 @@
 import { ref } from 'tsx-vanilla';
 
+import { MISSING_RANDOM_SUFFIX_WARNING } from '../../constants/item_notices';
 import { setItemQualityCssClass } from '../../css_utils';
 import { Player } from '../../player';
 import { ItemSlot, ItemType } from '../../proto/common';
@@ -139,18 +140,24 @@ export class ItemRenderer extends Component {
 
 	update(newItem: EquippedItem) {
 		const nameSpan = <span className="item-picker-name">{newItem.item.name}</span>;
+		const isEligibleForRandomSuffix = !!newItem.hasRandomSuffixOptions();
+		const hasRandomSuffix = !!newItem.randomSuffix;
 		this.nameElem.replaceChildren(nameSpan);
 		this.ilvlElem.textContent = newItem.item.ilvl.toString();
 
-		if (newItem.randomSuffix) {
+		if (hasRandomSuffix) {
 			nameSpan.textContent += ' ' + newItem.randomSuffix.name;
 		}
 
 		if (newItem.item.heroic) {
 			this.nameElem.appendChild(createHeroicLabel());
 		}
 
-		this.notice = new ItemNotice(this.player, { itemId: newItem.item.id });
+		this.notice = new ItemNotice(this.player, {
+			itemId: newItem.item.id,
+			additionalNoticeData: isEligibleForRandomSuffix && !hasRandomSuffix ? MISSING_RANDOM_SUFFIX_WARNING : undefined,
+		});
+
 		if (this.notice.hasNotice) {
 			this.nameContainerElem.appendChild(this.notice.rootElem);
 		}

ui/core/components/item_notice/item_notice.tsx

@@ -15,6 +15,7 @@ export type ItemNoticeData = {
 
 type ItemNoticeConfig = {
 	itemId: number;
+	additionalNoticeData?: JSX.Element;
 };
 
 // Keys are item counts for each set bonus (typically 2 and 4), values are the
@@ -26,11 +27,13 @@ export class ItemNotice extends Component {
 	itemId: number;
 	player: Player<any>;
 	tooltip: TippyInstance | null = null;
+	additionalNoticeData: ItemNoticeConfig['additionalNoticeData'];
 	constructor(player: Player<any>, config: ItemNoticeConfig) {
 		super(null, 'item-notice');
 		this.rootElem.classList.add('d-inline');
 		this.itemId = config.itemId;
 		this.player = player;
+		this.additionalNoticeData = config.additionalNoticeData;
 
 		if (this.hasNotice && this.template) this.rootElem.appendChild(this.template!);
 
@@ -41,21 +44,26 @@ export class ItemNotice extends Component {
 	}
 
 	get hasNotice() {
-		return ITEM_NOTICES.has(this.itemId);
+		return ITEM_NOTICES.has(this.itemId) || !!this.additionalNoticeData;
 	}
 
 	private get noticeContent() {
 		if (!this.hasNotice) return null;
 		const itemNotice = ITEM_NOTICES.get(this.itemId)!;
-		const specNotice = itemNotice[this.player.getSpec()];
-		return typeof specNotice === 'boolean' ? null : specNotice || itemNotice[Spec.SpecUnknown];
+		const specNotice = (
+			<>
+				{itemNotice?.[this.player.getSpec()]}
+				{this.additionalNoticeData}
+			</>
+		);
+
+		return typeof specNotice === 'boolean' ? null : specNotice || itemNotice?.[Spec.SpecUnknown];
 	}
 
 	private get template() {
 		if (!this.hasNotice) return null;
 		const tooltipContent = this.noticeContent?.cloneNode(true);
 		if (!tooltipContent) return null;
-
 		const noticeIconRef = ref<HTMLButtonElement>();
 		const template = <button ref={noticeIconRef} className="warning fa fa-exclamation-triangle fa-xl me-2"></button>;
 

ui/core/constants/item_notices.tsx

@@ -3,6 +3,8 @@ import { Spec } from '../proto/common';
 
 const WantToHelpMessage = () => <p className="mb-0">Want to help out by providing additional information? Contact us on our Discord!</p>;
 
+export const MISSING_RANDOM_SUFFIX_WARNING = <p className="mb-0">Please select a random suffix</p>;
+
 const MISSING_IMPLEMENTATION_WARNING = (
 	<>
 		<p className="fw-bold">This item is not implemented!</p>