mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-05-13 13:17:45 +00:00
Compare commits
1 commit
a0d06b5251
...
39c822cb69
| Author | SHA1 | Date | |
|---|---|---|---|
|
39c822cb69 |
4 changed files with 307 additions and 320 deletions
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
This is probably outdated.
|
||||
|
||||
Welcome to the TomodachiShare development guide! This project uses [pnpm](https://pnpm.io/) for package management, [Next.js](https://nextjs.org/) with the app router for the backend, [Vite with React](https://vite.dev/) for the frontend, [Prisma](https://prisma.io) for the database, [TailwindCSS](https://tailwindcss.com/) for styling, and [TypeScript](https://www.typescriptlang.org/) for type safety.
|
||||
Welcome to the TomodachiShare development guide! This project uses [pnpm](https://pnpm.io/) for package management, [Next.js](https://nextjs.org/) with the app router for the front-end and back-end, [Prisma](https://prisma.io) for the database, [TailwindCSS](https://tailwindcss.com/) for styling, and [TypeScript](https://www.typescriptlang.org/) for type safety.
|
||||
|
||||
## Getting started
|
||||
|
||||
|
|
@ -14,21 +14,21 @@ $ cd tomodachi-share
|
|||
$ pnpm install
|
||||
```
|
||||
|
||||
Prisma types are generated automatically, however, if you changed the schema or need to trigger a manual refresh:
|
||||
Prisma types are generated automatically, however, sometimes you might need to:
|
||||
|
||||
```bash
|
||||
# Generate Prisma client types
|
||||
$ pnpm --filter backend prisma generate
|
||||
$ pnpm prisma generate
|
||||
|
||||
# Or, if you've added new database properties
|
||||
$ pnpm --filter backend prisma migrate dev
|
||||
$ pnpm --filter backend prisma generate
|
||||
$ pnpm prisma migrate dev
|
||||
$ pnpm prisma generate
|
||||
```
|
||||
|
||||
I recommend opting out of Next.js' telemetry program but it is not a requirement.
|
||||
|
||||
```bash
|
||||
$ pnpm --filter backend exec next telemetry disable
|
||||
$ pnpm exec next telemetry disable
|
||||
```
|
||||
|
||||
## Environment variables
|
||||
|
|
@ -62,11 +62,10 @@ services:
|
|||
After starting the docker applications, apply TomodachiShare's database schema migrations.
|
||||
|
||||
```bash
|
||||
$ pnpm --filter backend prisma migrate dev
|
||||
$ pnpm prisma migrate dev
|
||||
```
|
||||
|
||||
After, in both the backend and frontend, make a copy of the `.env.example` file and rename it to `.env`.
|
||||
For the backend, the database variables should be pre-configured, but you'll need to fill in the rest of the variables.
|
||||
After, make a copy of the `.env.example` file and rename it to `.env`. The database variables should be pre-configured, but you'll need to fill in the rest of the variables.
|
||||
|
||||
For the `AUTH_SECRET`, run the following in the command line:
|
||||
|
||||
|
|
@ -75,7 +74,7 @@ $ pnpx auth secret
|
|||
```
|
||||
|
||||
> [!NOTE]
|
||||
> This command may put the secret in a file named `.env.local`, if that happens copy it and paste it into `backend/.env`
|
||||
> This command may put the secret in a file named `.env.local`, if that happens copy it and paste it into `.env`
|
||||
|
||||
Now, let's get the Discord and GitHub authentication set up. If you don't plan on editing any code associated with authentication, you likely only need to setup one of these services.
|
||||
|
||||
|
|
@ -85,16 +84,10 @@ For GitHub, navigate to your profile settings, then 'Developer Settings', and cr
|
|||
|
||||
Google is annoying so I'm not explaining it.
|
||||
|
||||
## Development Server
|
||||
|
||||
The frontend and backend need to be ran simulatenously, therefore you need two separate terminals.
|
||||
After configuring the environment variables, you can run a development server.
|
||||
|
||||
```bash
|
||||
# Terminal 1
|
||||
$ pnpm --filter backend dev
|
||||
|
||||
# Terminal 2
|
||||
$ pnpm --filter frontend dev
|
||||
$ pnpm dev
|
||||
```
|
||||
|
||||
## Building
|
||||
|
|
@ -103,10 +96,8 @@ It's a good idea to build the project locally before submitting a pull request.
|
|||
|
||||
```bash
|
||||
# Build the project
|
||||
$ pnpm --filter backend build
|
||||
$ pnpm --filter frontend build
|
||||
$ pnpm build
|
||||
|
||||
# Run the built version (Note: Vite likes to change the port when this happens, so you probably need to change both .env files)
|
||||
$ pnpm --filter backend start
|
||||
$ pnpm --filter frontend build
|
||||
# Run the built version
|
||||
$ pnpm start
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
VITE_BASE_URL="http://localhost:5173"
|
||||
VITE_API_URL="http://localhost:3000"
|
||||
VITE_ADMIN_USER_ID=1
|
||||
VITE_CONTRIBUTORS_USER_IDS=1
|
||||
|
|
@ -1,80 +1,80 @@
|
|||
import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
|
||||
import React, { useState } from "react";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
import HeadTab from "./tabs/head";
|
||||
import HairTab from "./tabs/hair";
|
||||
import EyebrowsTab from "./tabs/eyebrows";
|
||||
import EyesTab from "./tabs/eyes";
|
||||
import NoseTab from "./tabs/nose";
|
||||
import LipsTab from "./tabs/lips";
|
||||
import EarsTab from "./tabs/ears";
|
||||
import GlassesTab from "./tabs/glasses";
|
||||
import OtherTab from "./tabs/other";
|
||||
import MiscTab from "./tabs/misc";
|
||||
|
||||
interface Props {
|
||||
instructions: React.RefObject<SwitchMiiInstructions>;
|
||||
}
|
||||
|
||||
type Tab = "head" | "hair" | "eyebrows" | "eyes" | "nose" | "lips" | "ears" | "glasses" | "other" | "misc";
|
||||
|
||||
export const TAB_ICONS: Record<Tab, string> = {
|
||||
head: "mingcute:head-fill",
|
||||
hair: "mingcute:hair-fill",
|
||||
eyebrows: "material-symbols:eyebrow",
|
||||
eyes: "mdi:eye",
|
||||
nose: "mingcute:nose-fill",
|
||||
lips: "material-symbols-light:lips",
|
||||
ears: "ion:ear",
|
||||
glasses: "solar:glasses-bold",
|
||||
other: "mdi:sparkles",
|
||||
misc: "material-symbols:settings",
|
||||
};
|
||||
|
||||
export const TAB_COMPONENTS: Record<Tab, React.ComponentType<any>> = {
|
||||
head: HeadTab,
|
||||
hair: HairTab,
|
||||
eyebrows: EyebrowsTab,
|
||||
eyes: EyesTab,
|
||||
nose: NoseTab,
|
||||
lips: LipsTab,
|
||||
ears: EarsTab,
|
||||
glasses: GlassesTab,
|
||||
other: OtherTab,
|
||||
misc: MiscTab,
|
||||
};
|
||||
|
||||
export default function MiiEditor({ instructions }: Props) {
|
||||
const [tab, setTab] = useState<Tab>("head");
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-91 flex flex-col sm:flex-row bg-orange-100 border-2 border-orange-200 rounded-xl overflow-hidden">
|
||||
<div className="w-full flex flex-row sm:flex-col max-sm:max-h-9 sm:max-w-9">
|
||||
{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
type="button"
|
||||
onClick={() => setTab(t)}
|
||||
className={`size-full aspect-square flex justify-center items-center text-[1.35rem] cursor-pointer bg-orange-200 hover:bg-orange-300 transition-colors duration-75 ${tab === t ? "bg-orange-100!" : ""}`}
|
||||
>
|
||||
{/* ml because of border on left causing icons to look miscentered */}
|
||||
<Icon icon={TAB_ICONS[t]} className="-ml-0.5" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Keep all tabs loaded to avoid flickering */}
|
||||
{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => {
|
||||
const TabComponent = TAB_COMPONENTS[t];
|
||||
return (
|
||||
<div key={t} className={t === tab ? "grow relative p-3 min-h-0" : "hidden"}>
|
||||
<TabComponent instructions={instructions} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
import { type SwitchMiiInstructions } from "@tomodachi-share/shared";
|
||||
import React, { useState } from "react";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
import HeadTab from "./tabs/head";
|
||||
import HairTab from "./tabs/hair";
|
||||
import EyebrowsTab from "./tabs/eyebrows";
|
||||
import EyesTab from "./tabs/eyes";
|
||||
import NoseTab from "./tabs/nose";
|
||||
import LipsTab from "./tabs/lips";
|
||||
import EarsTab from "./tabs/ears";
|
||||
import GlassesTab from "./tabs/glasses";
|
||||
import OtherTab from "./tabs/other";
|
||||
import MiscTab from "./tabs/misc";
|
||||
|
||||
interface Props {
|
||||
instructions: React.RefObject<SwitchMiiInstructions>;
|
||||
}
|
||||
|
||||
type Tab = "head" | "hair" | "eyebrows" | "eyes" | "nose" | "lips" | "ears" | "glasses" | "other" | "misc";
|
||||
|
||||
export const TAB_ICONS: Record<Tab, string> = {
|
||||
head: "mingcute:head-fill",
|
||||
hair: "mingcute:hair-fill",
|
||||
eyebrows: "material-symbols:eyebrow",
|
||||
eyes: "mdi:eye",
|
||||
nose: "mingcute:nose-fill",
|
||||
lips: "material-symbols-light:lips",
|
||||
ears: "ion:ear",
|
||||
glasses: "solar:glasses-bold",
|
||||
other: "mdi:sparkles",
|
||||
misc: "material-symbols:settings",
|
||||
};
|
||||
|
||||
export const TAB_COMPONENTS: Record<Tab, React.ComponentType<any>> = {
|
||||
head: HeadTab,
|
||||
hair: HairTab,
|
||||
eyebrows: EyebrowsTab,
|
||||
eyes: EyesTab,
|
||||
nose: NoseTab,
|
||||
lips: LipsTab,
|
||||
ears: EarsTab,
|
||||
glasses: GlassesTab,
|
||||
other: OtherTab,
|
||||
misc: MiscTab,
|
||||
};
|
||||
|
||||
export default function MiiEditor({ instructions }: Props) {
|
||||
const [tab, setTab] = useState<Tab>("head");
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-91 flex flex-col sm:flex-row bg-orange-100 border-2 border-orange-200 rounded-xl overflow-hidden">
|
||||
<div className="w-full flex flex-row sm:flex-col max-sm:max-h-9 sm:max-w-9">
|
||||
{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
type="button"
|
||||
onClick={() => setTab(t)}
|
||||
className={`size-full aspect-square flex justify-center items-center text-[1.35rem] cursor-pointer bg-orange-200 hover:bg-orange-300 transition-colors duration-75 ${tab === t ? "bg-orange-100!" : ""}`}
|
||||
>
|
||||
{/* ml because of border on left causing icons to look miscentered */}
|
||||
<Icon icon={TAB_ICONS[t]} className="-ml-0.5" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Keep all tabs loaded to avoid flickering */}
|
||||
{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => {
|
||||
const TabComponent = TAB_COMPONENTS[t];
|
||||
return (
|
||||
<div key={t} className={t === tab ? "grow relative p-3" : "hidden"}>
|
||||
<TabComponent instructions={instructions} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,213 +1,213 @@
|
|||
import { useState } from "react";
|
||||
import type { MiiGender, SwitchMiiInstructions } from "@tomodachi-share/shared";
|
||||
import EnhancedSlider from "../enhanced-slider";
|
||||
import DatingPreferencesViewer from "../../../mii/dating-preferences";
|
||||
import VoiceViewer from "../../../mii/voice-viewer";
|
||||
import PersonalityViewer from "../../../mii/personality-viewer";
|
||||
|
||||
interface Props {
|
||||
instructions: React.RefObject<SwitchMiiInstructions>;
|
||||
}
|
||||
|
||||
export default function MiscTab({ instructions }: Props) {
|
||||
const [height, setHeight] = useState(instructions.current.height ?? 64);
|
||||
const [weight, setWeight] = useState(instructions.current.weight ?? 64);
|
||||
const [datingPreferences, setDatingPreferences] = useState<MiiGender[]>(instructions.current.datingPreferences ?? []);
|
||||
const [voice, setVoice] = useState({
|
||||
speed: instructions.current.voice.speed ?? 25,
|
||||
pitch: instructions.current.voice.pitch ?? 25,
|
||||
depth: instructions.current.voice.depth ?? 25,
|
||||
delivery: instructions.current.voice.delivery ?? 25,
|
||||
tone: instructions.current.voice.tone ?? 0,
|
||||
});
|
||||
const [birthday, setBirthday] = useState({
|
||||
day: instructions.current.birthday.day ?? (null as number | null),
|
||||
month: instructions.current.birthday.month ?? (null as number | null),
|
||||
age: instructions.current.birthday.age ?? (null as number | null),
|
||||
dontAge: instructions.current.birthday.dontAge,
|
||||
});
|
||||
const [personality, setPersonality] = useState({
|
||||
movement: instructions.current.personality.movement ?? -1,
|
||||
speech: instructions.current.personality.speech ?? -1,
|
||||
energy: instructions.current.personality.energy ?? -1,
|
||||
thinking: instructions.current.personality.thinking ?? -1,
|
||||
overall: instructions.current.personality.overall ?? -1,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="font-bold text-xl">Misc</h1>
|
||||
|
||||
<div className="grow h-full overflow-y-auto pb-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Body</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<EnhancedSlider
|
||||
label="Height"
|
||||
value={height}
|
||||
onChange={(v) => {
|
||||
setHeight(v);
|
||||
instructions.current.height = v;
|
||||
}}
|
||||
min={0}
|
||||
max={128}
|
||||
mid={64}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<EnhancedSlider
|
||||
label="Weight"
|
||||
value={weight}
|
||||
onChange={(v) => {
|
||||
setWeight(v);
|
||||
instructions.current.weight = v;
|
||||
}}
|
||||
min={0}
|
||||
max={128}
|
||||
mid={64}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Dating Preferences</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<DatingPreferencesViewer
|
||||
data={datingPreferences}
|
||||
onChecked={(e, gender) => {
|
||||
setDatingPreferences((prev) => {
|
||||
const updated = e.target.checked ? (prev.includes(gender) ? prev : [...prev, gender]) : prev.filter((p) => p !== gender);
|
||||
instructions.current.datingPreferences = updated;
|
||||
return updated;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Voice</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<VoiceViewer
|
||||
data={voice}
|
||||
onChange={(v, label) => {
|
||||
setVoice((p) => ({ ...p, [label]: v }));
|
||||
instructions.current.voice[label as keyof typeof voice] = v;
|
||||
}}
|
||||
onClickTone={(i) => {
|
||||
setVoice((p) => ({ ...p, tone: i }));
|
||||
instructions.current.voice.tone = i;
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Birthday</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label htmlFor="day" className="text-xs">
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="day"
|
||||
min={1}
|
||||
max={31}
|
||||
className="pill input text-sm py-1! px-3! w-full"
|
||||
value={birthday.day ?? undefined}
|
||||
onChange={(e) => {
|
||||
setBirthday((p) => ({ ...p, day: e.target.valueAsNumber }));
|
||||
instructions.current.birthday.day = e.target.valueAsNumber;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="month" className="text-xs">
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="month"
|
||||
min={1}
|
||||
max={12}
|
||||
className="pill input text-sm py-1! px-3! w-full"
|
||||
value={birthday.month ?? undefined}
|
||||
onChange={(e) => {
|
||||
setBirthday((p) => ({ ...p, month: e.target.valueAsNumber }));
|
||||
instructions.current.birthday.month = e.target.valueAsNumber;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="age" className="text-xs">
|
||||
Age
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="age"
|
||||
min={1}
|
||||
max={1000}
|
||||
className="pill input text-sm py-1! px-3! w-full"
|
||||
value={birthday.age ?? undefined}
|
||||
onChange={(e) => {
|
||||
setBirthday((p) => ({ ...p, age: e.target.valueAsNumber }));
|
||||
instructions.current.birthday.age = e.target.valueAsNumber;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-1.5 col-span-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="dontAge"
|
||||
className="checkbox"
|
||||
checked={birthday.dontAge}
|
||||
onChange={(e) => {
|
||||
setBirthday((p) => ({ ...p, dontAge: e.target.checked }));
|
||||
instructions.current.birthday.dontAge = e.target.checked;
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="dontAge" className="text-sm select-none">
|
||||
Don't Age
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-2 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Personality</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<PersonalityViewer
|
||||
data={personality}
|
||||
onClick={(key, i) => {
|
||||
setPersonality((p) => {
|
||||
const updated = { ...p, [key]: i };
|
||||
instructions.current.personality = updated;
|
||||
return updated;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
import { useState } from "react";
|
||||
import type { MiiGender, SwitchMiiInstructions } from "@tomodachi-share/shared";
|
||||
import EnhancedSlider from "../enhanced-slider";
|
||||
import DatingPreferencesViewer from "../../../mii/dating-preferences";
|
||||
import VoiceViewer from "../../../mii/voice-viewer";
|
||||
import PersonalityViewer from "../../../mii/personality-viewer";
|
||||
|
||||
interface Props {
|
||||
instructions: React.RefObject<SwitchMiiInstructions>;
|
||||
}
|
||||
|
||||
export default function MiscTab({ instructions }: Props) {
|
||||
const [height, setHeight] = useState(instructions.current.height ?? 64);
|
||||
const [weight, setWeight] = useState(instructions.current.weight ?? 64);
|
||||
const [datingPreferences, setDatingPreferences] = useState<MiiGender[]>(instructions.current.datingPreferences ?? []);
|
||||
const [voice, setVoice] = useState({
|
||||
speed: instructions.current.voice.speed ?? 25,
|
||||
pitch: instructions.current.voice.pitch ?? 25,
|
||||
depth: instructions.current.voice.depth ?? 25,
|
||||
delivery: instructions.current.voice.delivery ?? 25,
|
||||
tone: instructions.current.voice.tone ?? 0,
|
||||
});
|
||||
const [birthday, setBirthday] = useState({
|
||||
day: instructions.current.birthday.day ?? (null as number | null),
|
||||
month: instructions.current.birthday.month ?? (null as number | null),
|
||||
age: instructions.current.birthday.age ?? (null as number | null),
|
||||
dontAge: instructions.current.birthday.dontAge,
|
||||
});
|
||||
const [personality, setPersonality] = useState({
|
||||
movement: instructions.current.personality.movement ?? -1,
|
||||
speech: instructions.current.personality.speech ?? -1,
|
||||
energy: instructions.current.personality.energy ?? -1,
|
||||
thinking: instructions.current.personality.thinking ?? -1,
|
||||
overall: instructions.current.personality.overall ?? -1,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="font-bold text-xl">Misc</h1>
|
||||
|
||||
<div className="grow h-full overflow-y-auto pb-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Body</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<EnhancedSlider
|
||||
label="Height"
|
||||
value={height}
|
||||
onChange={(v) => {
|
||||
setHeight(v);
|
||||
instructions.current.height = v;
|
||||
}}
|
||||
min={0}
|
||||
max={128}
|
||||
mid={64}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<EnhancedSlider
|
||||
label="Weight"
|
||||
value={weight}
|
||||
onChange={(v) => {
|
||||
setWeight(v);
|
||||
instructions.current.weight = v;
|
||||
}}
|
||||
min={0}
|
||||
max={128}
|
||||
mid={64}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Dating Preferences</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<DatingPreferencesViewer
|
||||
data={datingPreferences}
|
||||
onChecked={(e, gender) => {
|
||||
setDatingPreferences((prev) => {
|
||||
const updated = e.target.checked ? (prev.includes(gender) ? prev : [...prev, gender]) : prev.filter((p) => p !== gender);
|
||||
instructions.current.datingPreferences = updated;
|
||||
return updated;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Voice</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<VoiceViewer
|
||||
data={voice}
|
||||
onChange={(v, label) => {
|
||||
setVoice((p) => ({ ...p, [label]: v }));
|
||||
instructions.current.voice[label as keyof typeof voice] = v;
|
||||
}}
|
||||
onClickTone={(i) => {
|
||||
setVoice((p) => ({ ...p, tone: i }));
|
||||
instructions.current.voice.tone = i;
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-1.5 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Birthday</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label htmlFor="day" className="text-xs">
|
||||
Day
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="day"
|
||||
min={1}
|
||||
max={31}
|
||||
className="pill input text-sm py-1! px-3! w-full"
|
||||
value={birthday.day ?? undefined}
|
||||
onChange={(e) => {
|
||||
setBirthday((p) => ({ ...p, day: e.target.valueAsNumber }));
|
||||
instructions.current.birthday.day = e.target.valueAsNumber;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="month" className="text-xs">
|
||||
Month
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="month"
|
||||
min={1}
|
||||
max={12}
|
||||
className="pill input text-sm py-1! px-3! w-full"
|
||||
value={birthday.month ?? undefined}
|
||||
onChange={(e) => {
|
||||
setBirthday((p) => ({ ...p, month: e.target.valueAsNumber }));
|
||||
instructions.current.birthday.month = e.target.valueAsNumber;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="age" className="text-xs">
|
||||
Age
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="age"
|
||||
min={1}
|
||||
max={1000}
|
||||
className="pill input text-sm py-1! px-3! w-full"
|
||||
value={birthday.age ?? undefined}
|
||||
onChange={(e) => {
|
||||
setBirthday((p) => ({ ...p, age: e.target.valueAsNumber }));
|
||||
instructions.current.birthday.age = e.target.valueAsNumber;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-1.5 col-span-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="dontAge"
|
||||
className="checkbox"
|
||||
checked={birthday.dontAge}
|
||||
onChange={(e) => {
|
||||
setBirthday((p) => ({ ...p, dontAge: e.target.checked }));
|
||||
instructions.current.birthday.dontAge = e.target.checked;
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="dontAge" className="text-sm select-none">
|
||||
Don't Age
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-2 mb-2">
|
||||
<hr className="grow border-zinc-300" />
|
||||
<span>Personality</span>
|
||||
<hr className="grow border-zinc-300" />
|
||||
</div>
|
||||
|
||||
<PersonalityViewer
|
||||
data={personality}
|
||||
onClick={(key, i) => {
|
||||
setPersonality((p) => {
|
||||
const updated = { ...p, [key]: i };
|
||||
instructions.current.personality = updated;
|
||||
return updated;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue