trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-06-28 14:44:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: #10

Browse source 
Fixes/adds:
- ability to edit instructions
- center indicator on range inputs
- birthdays
This commit is contained in:
trafficlunar 2026-03-27 18:15:09 +00:00
parent 540480b665
commit 1e1c38ffc0
19 changed files with 344 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -113,7 +113,7 @@ function Section({ name, instructions, children, isSubSection }: SectionProps) {
export default function MiiInstructions({ instructions }: Props) {
if (Object.keys(instructions).length === 0) return null;
const { head, hair, eyebrows, eyes, nose, lips, ears, glasses, other, height, weight, datingPreferences, voice, personality } = instructions;
const { head, hair, eyebrows, eyes, nose, lips, ears, glasses, other, height, weight, birthday, datingPreferences, voice, personality } = instructions;
return (
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-3 max-h-96 overflow-y-auto">
@ -122,7 +122,15 @@ export default function MiiInstructions({ instructions }: Props) {
Instructions
</h2>
{head && <Section name="Head" instructions={head}></Section>}
{head && (
<Section name="Head" instructions={head}>
{head.skinColor && (
<TableCell label="Skin Color">
<ColorPosition color={head.skinColor} />
</TableCell>
)}
</Section>
)}
{hair && (
<Section name="Hair" instructions={hair}>
{hair.subColor && (
@ -196,7 +204,10 @@ export default function MiiInstructions({ instructions }: Props) {
<label htmlFor="height" className="w-16">
Height
</label>
<input id="height" type="range" min={0} max={100} step={1} disabled value={height} />
<div className="relative h-5 flex justify-center items-center">
<input id="height" type="range" min={0} max={128} step={1} disabled value={height} />
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
</div>
</div>
)}
{weight && (
@ -204,7 +215,23 @@ export default function MiiInstructions({ instructions }: Props) {
<label htmlFor="weight" className="w-16">
Weight
</label>
<input id="weight" type="range" min={0} max={100} step={1} disabled value={weight} />
<div className="relative h-5 flex justify-center items-center">
<input id="weight" type="range" min={0} max={128} step={1} disabled value={weight} />
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
</div>
</div>
)}
{birthday && (
<div className="pl-2 not-nth-2:mt-4">
<h4 className="font-semibold text-xl text-amber-800 mb-1">Birthday</h4>
<table className="w-full">
<tbody>
{birthday.day && <TableCell label="Day">{birthday.day}</TableCell>}
{birthday.month && <TableCell label="Month">{birthday.month}</TableCell>}
{birthday.age && <TableCell label="Age">{birthday.age}</TableCell>}
{birthday.dontAge && <TableCell label="Don't Age">{birthday.dontAge ? "Yes" : "No"}</TableCell>}
</tbody>
</table>
</div>
)}
{datingPreferences && (

31
src/components/mii/voice-viewer.tsx
View file

@ -15,23 +15,26 @@ export default function VoiceViewer({ data, onClick, onClickTone }: Props) {
return (
<div className="flex flex-col gap-1">
{VOICE_SETTINGS.map((label) => (
<div key={label} className="flex gap-3">
<div key={label} className="relative flex gap-3">
<label htmlFor={label} className="text-sm w-14">
{label}
</label>
<input
type="range"
name={label}
className="grow"
min={0}
max={100}
step={1}
value={data[label as keyof typeof data] ?? 50}
disabled={!onClick}
onChange={(e) => {
if (onClick) onClick(e, label);
}}
/>
<div className="relative h-5 flex justify-center items-center">
<input
type="range"
name={label}
className="grow z-10"
min={0}
max={50}
step={1}
value={data[label as keyof typeof data] ?? 25}
disabled={!onClick}
onChange={(e) => {
if (onClick) onClick(e, label);
}}
/>
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
</div>
</div>
))}