fix: color defaults, qr code not showing in carousel, color picker responsiveness (again)

This commit is contained in:
trafficlunar 2026-03-26 18:32:38 +00:00
parent 1e30bcad69
commit a5e5d0557e
8 changed files with 12 additions and 12 deletions

View file

@ -197,7 +197,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
<Carousel <Carousel
images={[ images={[
`/mii/${mii.id}/image?type=mii`, `/mii/${mii.id}/image?type=mii`,
...(platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : []), ...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : []),
...Array.from({ length: mii.imageCount }, (_, index) => `/mii/${mii.id}/image?type=image${index}`), ...Array.from({ length: mii.imageCount }, (_, index) => `/mii/${mii.id}/image?type=image${index}`),
]} ]}
/> />

View file

@ -64,7 +64,7 @@ export default function ColorPicker({ disabled, color, setColor, tab = "hair" }:
{isOpen && ( {isOpen && (
<div <div
className={`absolute inset-0 z-10 w-full p-0.5 bg-orange-100 rounded-lg transition-transform duration-500 overflow-x-auto className={`absolute inset-0 z-10 w-full p-0.5 bg-orange-100 rounded-lg transition-transform duration-500 overflow-x-auto flex
${isVisible ? "opacity-100" : "opacity-0"}`} ${isVisible ? "opacity-100" : "opacity-0"}`}
style={{ style={{
transition: isVisible transition: isVisible
@ -72,7 +72,7 @@ export default function ColorPicker({ disabled, color, setColor, tab = "hair" }:
: "transform 1000ms cubic-bezier(0.55, 0, 0.45, 1), opacity 300ms", : "transform 1000ms cubic-bezier(0.55, 0, 0.45, 1), opacity 300ms",
}} }}
> >
<div className="w-max flex items-center"> <div className="w-max flex items-center justify-center grow shrink-0">
<div className="mr-8 flex flex-col gap-0.5"> <div className="mr-8 flex flex-col gap-0.5">
{COLORS.slice(getExtraSlice().start, getExtraSlice().end).map((c, i) => { {COLORS.slice(getExtraSlice().start, getExtraSlice().end).map((c, i) => {
const actualIndex = i + getExtraSlice().start; const actualIndex = i + getExtraSlice().start;
@ -113,7 +113,7 @@ export default function ColorPicker({ disabled, color, setColor, tab = "hair" }:
))} ))}
</div> </div>
<button type="button" onClick={close} className="h-full w-16 ml-4 cursor-pointer transition-transform hover:scale-115 active:scale-90"> <button type="button" onClick={close} className="h-4/5 w-16 ml-4 cursor-pointer transition-transform hover:scale-115 active:scale-90">
<Icon icon={"tabler:chevron-right"} className="text-4xl" /> <Icon icon={"tabler:chevron-right"} className="text-4xl" />
</button> </button>
</div> </div>

View file

@ -8,7 +8,7 @@ interface Props {
} }
export default function EyebrowsTab({ instructions }: Props) { export default function EyebrowsTab({ instructions }: Props) {
const [color, setColor] = useState(0); const [color, setColor] = useState(3);
return ( return (
<> <>

View file

@ -21,7 +21,7 @@ export default function EyesTab({ instructions }: Props) {
const [tab, setTab] = useState(0); const [tab, setTab] = useState(0);
// One type/color state per tab // One type/color state per tab
const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(0)); const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(122));
const currentTab = TABS[tab]; const currentTab = TABS[tab];

View file

@ -8,8 +8,8 @@ interface Props {
} }
export default function GlassesTab({ instructions }: Props) { export default function GlassesTab({ instructions }: Props) {
const [ringColor, setRingColor] = useState(0); const [ringColor, setRingColor] = useState(133);
const [shadesColor, setShadesColor] = useState(0); const [shadesColor, setShadesColor] = useState(133);
return ( return (
<> <>

View file

@ -10,7 +10,7 @@ type Tab = "sets" | "bangs" | "back";
export default function HairTab({ instructions }: Props) { export default function HairTab({ instructions }: Props) {
const [tab, setTab] = useState<Tab>("sets"); const [tab, setTab] = useState<Tab>("sets");
const [color, setColor] = useState(0); const [color, setColor] = useState(3);
const [subColor, setSubColor] = useState<number | null>(null); const [subColor, setSubColor] = useState<number | null>(null);
const [subColor2, setSubColor2] = useState<number | null>(null); const [subColor2, setSubColor2] = useState<number | null>(null);
const [style, setStyle] = useState<number | null>(null); const [style, setStyle] = useState<number | null>(null);

View file

@ -8,7 +8,7 @@ interface Props {
} }
export default function LipsTab({ instructions }: Props) { export default function LipsTab({ instructions }: Props) {
const [color, setColor] = useState(0); const [color, setColor] = useState(128);
const [hasLipstick, setHasLipstick] = useState(false); const [hasLipstick, setHasLipstick] = useState(false);
return ( return (

View file

@ -23,7 +23,7 @@ export default function OtherTab({ instructions }: Props) {
const [isFlipped, setIsFlipped] = useState(false); const [isFlipped, setIsFlipped] = useState(false);
// One type/color state per tab // One type/color state per tab
const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(0)); const [colors, setColors] = useState<number[]>([0, 0, 0, 0, 0, 0, 139, 0]);
const currentTab = TABS[tab]; const currentTab = TABS[tab];
@ -60,7 +60,7 @@ export default function OtherTab({ instructions }: Props) {
</div> </div>
<div className="absolute inset-0 flex flex-col justify-center items-center"> <div className="absolute inset-0 flex flex-col justify-center items-center">
<ColorPicker disabled={tab === 0 || tab === 1} color={colors[tab]} setColor={setColor} /> <ColorPicker disabled={tab === 0 || tab === 1} color={colors[tab]} setColor={setColor} tab={tab === 6 ? "eyeliner" : "hair"} />
<NumberInputs target={instructions.current.other[currentTab.name]} /> <NumberInputs target={instructions.current.other[currentTab.name]} />
{tab === 3 && ( {tab === 3 && (