Fix converting colors with alpha to hex RGB (#705)

Convert negative integers to unsigned integers. Truncate the alpha from colors before passing them to the HTML color picker, since it doesn't allow alpha values (and they'd be in the wrong place if it did).

Author: AjaxGb

src/app/Utils.ts

@@ -51,6 +51,19 @@ export function generateColor() {
 	return Math.floor(Math.random() * 16777215)
 }
 
+function intToUnsigned(n: number) {
+	n |= 0; // Force to signed 32-bit integer
+	return n < 0 ? n + 0x100000000 : n;
+}
+
+export function intToHexRgb(c: number | undefined) {
+	return c ? '#' + (c & 0xFFFFFF).toString(16).padStart(6, '0') : '#000000';
+}
+
+export function intToDisplayHexRgb(c: number | undefined) {
+	return c ? '#' + intToUnsigned(c).toString(16).toUpperCase().padStart(6, '0') : '#000000';
+}
+
 export function htmlEncode(str: string) {
 	return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
 		.replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\//g, '&#x2F;')

src/app/components/ItemTooltip.tsx

@@ -2,7 +2,7 @@ import type { MobEffectInstance, NbtTag } from 'deepslate'
 import { ItemStack, NbtCompound, NbtList, PotionContents } from 'deepslate'
 import { Identifier } from 'deepslate/core'
 import type { ResolvedItem } from '../services/ResolvedItem.js'
-import { makeDescriptionId, mergeTextComponentStyles } from '../Utils.js'
+import { intToDisplayHexRgb, makeDescriptionId, mergeTextComponentStyles } from '../Utils.js'
 import { TextComponent } from './TextComponent.jsx'
 
 interface Props {
@@ -107,7 +107,7 @@ export function ItemTooltip({ item, advanced, resolver }: Props) {
 			<EnchantmentsTooltip data={item.get('enchantments', tag => tag)} />
 		)}
 		{item.showInTooltip('dyed_color') && (advanced
-			? <TextComponent component={{ translate: 'item.color', with: [`#${item.get('dyed_color', tag => tag.isCompound() ? tag.getNumber('rgb') : tag.getAsNumber())?.toString(16).padStart(6, '0')}`], color: 'gray' }} />
+			? <TextComponent component={{ translate: 'item.color', with: [intToDisplayHexRgb(item.get('dyed_color', tag => tag.isCompound() ? tag.getNumber('rgb') : tag.getAsNumber()))], color: 'gray' }} />
 			: <TextComponent component={{ translate: 'item.dyed', color: 'gray' }} />
 		)}
 		{item.getLore().map((component) =>

src/app/components/ItemTooltip1204.tsx

@@ -5,7 +5,7 @@ import { useLocale } from '../contexts/Locale.jsx'
 import { useVersion } from '../contexts/Version.jsx'
 import { useAsync } from '../hooks/useAsync.js'
 import { getLanguage, getTranslation } from '../services/Resources.js'
-import { message } from '../Utils.js'
+import { intToDisplayHexRgb, message } from '../Utils.js'
 import { TextComponent } from './TextComponent.jsx'
 
 interface Props {
@@ -107,7 +107,7 @@ export function ItemTooltip1204({ item, advanced }: Props) {
 		})}
 		{item.tag.hasCompound('display') && <>
 			{shouldShow(item, 'dye') && item.tag.getCompound('display').hasNumber('color') && (advanced
-				? <TextComponent component={{ translate: 'item.color', with: [`#${item.tag.getCompound('display').getNumber('color').toString(16).padStart(6, '0')}`], color: 'gray' }} />
+				? <TextComponent component={{ translate: 'item.color', with: [intToDisplayHexRgb(item.tag.getCompound('display').getNumber('color'))], color: 'gray' }} />
 				: <TextComponent component={{ translate: 'item.dyed', color: 'gray' }} />)}
 			{lore.map((component) => <TextComponent component={component} base={{ color: 'dark_purple', italic: true }} />)}
 		</>}

src/app/components/generator/McdocRenderer.tsx

@@ -14,7 +14,7 @@ import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
 import config from '../../Config.js'
 import { useLocale } from '../../contexts/Locale.jsx'
 import { useFocus } from '../../hooks/useFocus.js'
-import { generateColor, hexId, randomInt, randomSeed } from '../../Utils.js'
+import { generateColor, hexId, intToHexRgb, randomInt, randomSeed } from '../../Utils.js'
 import { Btn } from '../Btn.jsx'
 import { ItemDisplay } from '../ItemDisplay.jsx'
 import { Octicon } from '../Octicon.jsx'
@@ -196,7 +196,7 @@ function StringHead({ type, optional, excludeStrings, node, ctx }: Props<StringT
 
 	const onRandomColor = useCallback(() => {
 		const color = generateColor()
-		onChangeValue('#' + (color.toString(16).padStart(6, '0') ?? '000000'))
+		onChangeValue(intToHexRgb(color))
 	}, [onChangeValue])
 
 	return <>
@@ -341,7 +341,7 @@ function NumericHead({ type, node, ctx }: Props<NumericType>) {
 	return <>
 		<input class="short-input" type="number" value={value} onInput={(e) => setValue((e.target as HTMLInputElement).value)} onBlur={onCommitValue} onSubmit={onCommitValue} onKeyDown={(e) => {if (e.key === 'Enter') onCommitValue()}} />
 		{colorKind && <>
-			<input class="short-input" type="color" value={'#' + (nodeValue?.toString(16).padStart(6, '0') ?? '000000')} onChange={(e) => onChangeColor((e.target as HTMLInputElement).value)} />
+			<input class="short-input" type="color" value={intToHexRgb(nodeValue)} onChange={(e) => onChangeColor((e.target as HTMLInputElement).value)} />
 			<button class="tooltipped tip-se" aria-label={locale('generate_new_color')} onClick={onRandomColor}>{Octicon.sync}</button>
 		</>}
 		{random && <>