mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-03-28 19:23:15 +00:00
fix: color defaults, qr code not showing in carousel, color picker responsiveness (again)
This commit is contained in:
parent
1e30bcad69
commit
a5e5d0557e
8 changed files with 12 additions and 12 deletions
|
|
@ -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}`),
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
|
|
@ -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];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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 (
|
||||||
|
|
|
||||||
|
|
@ -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 && (
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue