Skip to content

Commit 3f52a90

Browse files
authored
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).
1 parent 6bf9fcb commit 3f52a90

File tree

4 files changed

+20
-7
lines changed

4 files changed

+20
-7
lines changed

src/app/Utils.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,19 @@ export function generateColor() {
5151
return Math.floor(Math.random() * 16777215)
5252
}
5353

54+
function intToUnsigned(n: number) {
55+
n |= 0; // Force to signed 32-bit integer
56+
return n < 0 ? n + 0x100000000 : n;
57+
}
58+
59+
export function intToHexRgb(c: number | undefined) {
60+
return c ? '#' + (c & 0xFFFFFF).toString(16).padStart(6, '0') : '#000000';
61+
}
62+
63+
export function intToDisplayHexRgb(c: number | undefined) {
64+
return c ? '#' + intToUnsigned(c).toString(16).toUpperCase().padStart(6, '0') : '#000000';
65+
}
66+
5467
export function htmlEncode(str: string) {
5568
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
5669
.replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\//g, '&#x2F;')

src/app/components/ItemTooltip.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { MobEffectInstance, NbtTag } from 'deepslate'
22
import { ItemStack, NbtCompound, NbtList, PotionContents } from 'deepslate'
33
import { Identifier } from 'deepslate/core'
44
import type { ResolvedItem } from '../services/ResolvedItem.js'
5-
import { makeDescriptionId, mergeTextComponentStyles } from '../Utils.js'
5+
import { intToDisplayHexRgb, makeDescriptionId, mergeTextComponentStyles } from '../Utils.js'
66
import { TextComponent } from './TextComponent.jsx'
77

88
interface Props {
@@ -107,7 +107,7 @@ export function ItemTooltip({ item, advanced, resolver }: Props) {
107107
<EnchantmentsTooltip data={item.get('enchantments', tag => tag)} />
108108
)}
109109
{item.showInTooltip('dyed_color') && (advanced
110-
? <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' }} />
110+
? <TextComponent component={{ translate: 'item.color', with: [intToDisplayHexRgb(item.get('dyed_color', tag => tag.isCompound() ? tag.getNumber('rgb') : tag.getAsNumber()))], color: 'gray' }} />
111111
: <TextComponent component={{ translate: 'item.dyed', color: 'gray' }} />
112112
)}
113113
{item.getLore().map((component) =>

src/app/components/ItemTooltip1204.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useLocale } from '../contexts/Locale.jsx'
55
import { useVersion } from '../contexts/Version.jsx'
66
import { useAsync } from '../hooks/useAsync.js'
77
import { getLanguage, getTranslation } from '../services/Resources.js'
8-
import { message } from '../Utils.js'
8+
import { intToDisplayHexRgb, message } from '../Utils.js'
99
import { TextComponent } from './TextComponent.jsx'
1010

1111
interface Props {
@@ -107,7 +107,7 @@ export function ItemTooltip1204({ item, advanced }: Props) {
107107
})}
108108
{item.tag.hasCompound('display') && <>
109109
{shouldShow(item, 'dye') && item.tag.getCompound('display').hasNumber('color') && (advanced
110-
? <TextComponent component={{ translate: 'item.color', with: [`#${item.tag.getCompound('display').getNumber('color').toString(16).padStart(6, '0')}`], color: 'gray' }} />
110+
? <TextComponent component={{ translate: 'item.color', with: [intToDisplayHexRgb(item.tag.getCompound('display').getNumber('color'))], color: 'gray' }} />
111111
: <TextComponent component={{ translate: 'item.dyed', color: 'gray' }} />)}
112112
{lore.map((component) => <TextComponent component={component} base={{ color: 'dark_purple', italic: true }} />)}
113113
</>}

src/app/components/generator/McdocRenderer.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
1414
import config from '../../Config.js'
1515
import { useLocale } from '../../contexts/Locale.jsx'
1616
import { useFocus } from '../../hooks/useFocus.js'
17-
import { generateColor, hexId, randomInt, randomSeed } from '../../Utils.js'
17+
import { generateColor, hexId, intToHexRgb, randomInt, randomSeed } from '../../Utils.js'
1818
import { Btn } from '../Btn.jsx'
1919
import { ItemDisplay } from '../ItemDisplay.jsx'
2020
import { Octicon } from '../Octicon.jsx'
@@ -196,7 +196,7 @@ function StringHead({ type, optional, excludeStrings, node, ctx }: Props<StringT
196196

197197
const onRandomColor = useCallback(() => {
198198
const color = generateColor()
199-
onChangeValue('#' + (color.toString(16).padStart(6, '0') ?? '000000'))
199+
onChangeValue(intToHexRgb(color))
200200
}, [onChangeValue])
201201

202202
return <>
@@ -341,7 +341,7 @@ function NumericHead({ type, node, ctx }: Props<NumericType>) {
341341
return <>
342342
<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()}} />
343343
{colorKind && <>
344-
<input class="short-input" type="color" value={'#' + (nodeValue?.toString(16).padStart(6, '0') ?? '000000')} onChange={(e) => onChangeColor((e.target as HTMLInputElement).value)} />
344+
<input class="short-input" type="color" value={intToHexRgb(nodeValue)} onChange={(e) => onChangeColor((e.target as HTMLInputElement).value)} />
345345
<button class="tooltipped tip-se" aria-label={locale('generate_new_color')} onClick={onRandomColor}>{Octicon.sync}</button>
346346
</>}
347347
{random && <>

0 commit comments

Comments
 (0)