mirror of
https://github.com/samsonjs/spirit-tracker.git
synced 2026-03-25 09:25:51 +00:00
UX Improvements
This commit is contained in:
Brennan Wilkes (Text Groove)
parent
8531eba4e3
commit
1216ec7fe0
1 changed files with 177 additions and 160 deletions
|
|
@ -2,7 +2,27 @@ function normalizeId(s) {
|
|||
return String(s || "").toLowerCase().replace(/[^a-z0-9]+/g, "");
|
||||
}
|
||||
|
||||
// Your pinned colors (exact / “roughly right”)
|
||||
// Map normalized store *labels* to canonical ids used by OVERRIDES
|
||||
const ALIASES = {
|
||||
strathliquor: "strath",
|
||||
vesselliquor: "vessel",
|
||||
tudorhouse: "tudor",
|
||||
coopworldofwhisky: "coop",
|
||||
|
||||
kensingtonwinemarket: "kensingtonwinemarket",
|
||||
gullliquor: "gullliquor",
|
||||
legacyliquor: "legacyliquor",
|
||||
vintagespirits: "vintagespirits",
|
||||
kegncork: "kegncork",
|
||||
|
||||
// short forms
|
||||
gull: "gullliquor",
|
||||
legacy: "legacyliquor",
|
||||
vintage: "vintagespirits",
|
||||
kwm: "kensingtonwinemarket",
|
||||
};
|
||||
|
||||
// Your pinned colors
|
||||
const OVERRIDES = {
|
||||
strath: "#76B7FF",
|
||||
bsw: "#E9DF7A",
|
||||
|
|
@ -13,8 +33,8 @@ function normalizeId(s) {
|
|||
legacyliquor: "#7B4A12",
|
||||
vintagespirits: "#E34A2C",
|
||||
|
||||
craftcellars: "#E31B23", // bright red
|
||||
maltsandgrains: "#A67C52", // faded brown
|
||||
craftcellars: "#E31B23",
|
||||
maltsandgrains: "#A67C52",
|
||||
|
||||
// aliases
|
||||
gull: "#6B0F1A",
|
||||
|
|
@ -23,14 +43,12 @@ function normalizeId(s) {
|
|||
kwm: "#F2C200",
|
||||
};
|
||||
|
||||
// High-contrast qualitative palette (distinct hues).
|
||||
// (Avoids whites/blacks/yellows that clash w/ your overrides by filtering below.)
|
||||
// High-contrast qualitative palette
|
||||
const PALETTE = [
|
||||
"#1F77B4", "#FF7F0E", "#2CA02C", "#D62728", "#9467BD",
|
||||
"#8C564B", "#E377C2", "#7F7F7F", "#17BECF", "#BCBD22",
|
||||
"#AEC7E8", "#FFBB78", "#98DF8A", "#FF9896", "#C5B0D5",
|
||||
"#C49C94", "#F7B6D2", "#C7C7C7", "#9EDAE5", "#DBDB8D",
|
||||
// extras to reduce wrap risk
|
||||
"#393B79", "#637939", "#8C6D31", "#843C39", "#7B4173",
|
||||
"#3182BD", "#31A354", "#756BB1", "#636363", "#E6550D",
|
||||
];
|
||||
|
|
@ -39,13 +57,18 @@ function normalizeId(s) {
|
|||
return [...new Set(arr)];
|
||||
}
|
||||
|
||||
function canonicalId(s) {
|
||||
const id = normalizeId(s);
|
||||
return ALIASES[id] || id;
|
||||
}
|
||||
|
||||
function buildUniverse(base, extra) {
|
||||
const a = Array.isArray(base) ? base : [];
|
||||
const b = Array.isArray(extra) ? extra : [];
|
||||
return uniq([...a, ...b].map(normalizeId).filter(Boolean));
|
||||
return uniq([...a, ...b].map(canonicalId).filter(Boolean));
|
||||
}
|
||||
|
||||
// Default known ids (keeps mapping stable even if a page only sees a subset)
|
||||
// Keep mapping stable even if page sees a subset
|
||||
const DEFAULT_UNIVERSE = buildUniverse(Object.keys(OVERRIDES), [
|
||||
"bcl",
|
||||
"bsw",
|
||||
|
|
@ -78,7 +101,7 @@ function normalizeId(s) {
|
|||
const used = new Set();
|
||||
const map = new Map();
|
||||
|
||||
// pin overrides first
|
||||
// Pin overrides first
|
||||
for (const id of universe) {
|
||||
const c = OVERRIDES[id];
|
||||
if (c) {
|
||||
|
|
@ -87,7 +110,7 @@ function normalizeId(s) {
|
|||
}
|
||||
}
|
||||
|
||||
// filter palette to avoid exact collisions with overrides (and keep white reserved for Vessel)
|
||||
// Filter palette to avoid collisions and keep white/black reserved
|
||||
const palette = PALETTE
|
||||
.map((c) => String(c).toUpperCase())
|
||||
.filter((c) => !used.has(c) && c !== "#FFFFFF" && c !== "#111111");
|
||||
|
|
@ -95,10 +118,7 @@ function normalizeId(s) {
|
|||
let pi = 0;
|
||||
for (const id of universe) {
|
||||
if (map.has(id)) continue;
|
||||
if (pi >= palette.length) {
|
||||
// If you ever exceed palette size, just reuse (rare). Still deterministic.
|
||||
pi = 0;
|
||||
}
|
||||
if (pi >= palette.length) pi = 0;
|
||||
const c = palette[pi++];
|
||||
map.set(id, c);
|
||||
used.add(c);
|
||||
|
|
@ -108,7 +128,7 @@ function normalizeId(s) {
|
|||
}
|
||||
|
||||
export function storeColor(storeKeyOrLabel, colorMap) {
|
||||
const id = normalizeId(storeKeyOrLabel);
|
||||
const id = canonicalId(storeKeyOrLabel);
|
||||
if (!id) return "#7F7F7F";
|
||||
|
||||
const forced = OVERRIDES[id];
|
||||
|
|
@ -119,7 +139,6 @@ function normalizeId(s) {
|
|||
if (c) return c;
|
||||
}
|
||||
|
||||
// fallback: deterministic but not “no conflicts”
|
||||
return PALETTE[(id.length + id.charCodeAt(0)) % PALETTE.length];
|
||||
}
|
||||
|
||||
|
|
@ -147,11 +166,12 @@ function normalizeId(s) {
|
|||
}
|
||||
|
||||
function rgbToHex({ r, g, b }) {
|
||||
const h = (x) => clamp(Math.round(x), 0, 255).toString(16).padStart(2, "0");
|
||||
const h = (x) =>
|
||||
clamp(Math.round(x), 0, 255).toString(16).padStart(2, "0");
|
||||
return `#${h(r)}${h(g)}${h(b)}`;
|
||||
}
|
||||
|
||||
// lighten by mixing with white (amount 0–1)
|
||||
// Lighten by mixing with white (0–1)
|
||||
export function lighten(hex, amount = 0.25) {
|
||||
const rgb = hexToRgb(hex);
|
||||
if (!rgb) return hex;
|
||||
|
|
@ -161,6 +181,3 @@ function normalizeId(s) {
|
|||
b: rgb.b + (255 - rgb.b) * amount,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in a new issue