trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-05-13 13:17:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: clearer selected personalities

Browse source
This commit is contained in:
trafficlunar 2026-04-06 14:22:10 +01:00
parent 307aefa894
commit 14c992a9ce
2 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/mii/instructions.tsx
View file

@ -41,7 +41,7 @@ function ColorPosition({ color }: { color: number }) {
if (color <= 7) { if (color <= 7) {
return ( return (
<span className="flex items-center"> <span className="flex items-center">
<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div> <div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
Color menu on left, <GridPosition index={color} cols={1} /> Color menu on left, <GridPosition index={color} cols={1} />
</span> </span>
); );
@ -49,7 +49,7 @@ function ColorPosition({ color }: { color: number }) {
if (color >= 108) { if (color >= 108) {
return ( return (
<span className="flex items-center"> <span className="flex items-center">
<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div> <div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
Outside color menu, <GridPosition index={color - 108} cols={2} /> Outside color menu, <GridPosition index={color - 108} cols={2} />
</span> </span>
); );
@ -57,7 +57,7 @@ function ColorPosition({ color }: { color: number }) {
return ( return (
<span className="flex items-center"> <span className="flex items-center">
<div className="size-5 rounded mr-1.5" style={{ backgroundColor: `#${COLORS[color]}` }}></div> <div className="size-5 rounded mr-1.5 shrink-0" style={{ backgroundColor: `#${COLORS[color]}` }}></div>
Color menu on right, <GridPosition index={color - 8} cols={10} /> Color menu on right, <GridPosition index={color - 8} cols={10} />
</span> </span>
); );
@ -88,7 +88,7 @@ function Section({ name, instructions, children, isSubSection }: SectionProps) {
const stretch = "stretch" in instructions ? instructions.stretch : undefined; const stretch = "stretch" in instructions ? instructions.stretch : undefined;
return ( return (
<div className={`p-3 ${isSubSection ? "not-first:mt-2 pt-0!" : "border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5"}`}> <div className={`p-3 w-max ${isSubSection ? "not-first:mt-2 pt-0!" : "border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5"}`}>
<h3 className="font-semibold text-xl text-amber-800 mb-1">{name}</h3> <h3 className="font-semibold text-xl text-amber-800 mb-1">{name}</h3>
<table className="w-full"> <table className="w-full">
@ -196,7 +196,7 @@ export default function MiiInstructions({ instructions }: Props) {
)} )}
{(height || weight || datingPreferences || voice || personality) && ( {(height || weight || datingPreferences || voice || personality) && (
<div className="pl-3 text-sm border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5 text-amber-950"> <div className="p-3 text-sm border-l-4 border-amber-400 bg-amber-100/50 rounded-r-lg py-2.5 text-amber-950 w-max">
<h3 className="font-semibold text-xl text-amber-800 mb-1">Misc</h3> <h3 className="font-semibold text-xl text-amber-800 mb-1">Misc</h3>
{height && ( {height && (

4
src/components/mii/personality-viewer.tsx
View file

@ -22,7 +22,7 @@ export default function PersonalityViewer({ data, onClick }: Props) {
const key = label.toLowerCase() as keyof typeof data; const key = label.toLowerCase() as keyof typeof data;
return ( return (
<div key={label} className="flex justify-center items-center gap-2"> <div key={label} className="flex justify-center items-center gap-2">
<span className="text-sm font-semibold w-24 shrink-0">{label}</span> <span className="text-sm w-24 shrink-0">{label}</span>
<span className="text-sm text-zinc-500 w-14 text-right">{left}</span> <span className="text-sm text-zinc-500 w-14 text-right">{left}</span>
<div className="flex gap-0.5"> <div className="flex gap-0.5">
{Array.from({ length: 8 }).map((_, i) => { {Array.from({ length: 8 }).map((_, i) => {
@ -43,7 +43,7 @@ export default function PersonalityViewer({ data, onClick }: Props) {
onClick={() => { onClick={() => {
if (onClick) onClick(key, i); if (onClick) onClick(key, i);
}} }}
className={`size-7 rounded-lg transition-opacity duration-100 border-orange-500 className={`size-7 rounded-lg transition-opacity duration-100 border-black/40
${colors[i]} ${data[key] === i ? "border-2 opacity-100" : "opacity-70"} ${onClick ? "cursor-pointer" : ""}`} ${colors[i]} ${data[key] === i ? "border-2 opacity-100" : "opacity-70"} ${onClick ? "cursor-pointer" : ""}`}
></button> ></button>
); );