feat: 髪色の変更もDBに保存されるように

tuatmcc · Nov 4, 2024 · 5fa3771 · 5fa3771
1 parent 243fd4f
commit 5fa3771
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 27 deletions.
diff --git a/app/components/ModelConfig.tsx b/app/components/ModelConfig.tsx
@@ -9,43 +9,65 @@ interface ModelConfigProps {
 	characterSetting: CharacterSetting;
 	onModelSelect?: (model: Model) => void;
 	onAccessorySelect?: (accessory: Accessory) => void;
+	onHairColorChange?: (color: string) => void;
 }
 
 export function ModelConfig({
 	characterSetting,
 	onModelSelect,
 	onAccessorySelect,
+	onHairColorChange,
 }: ModelConfigProps) {
 	return (
-		<div className="mx-auto w-full max-w-screen-sm sm:px-4">
-			<div className="flex justify-between">
-				{MODEL_LIST.map((model) => (
-					<label key={model}>
-						<input
-							type="radio"
-							name="model"
-							value={model}
-							checked={model === characterSetting.character}
-							onChange={() => onModelSelect?.(model)}
-						/>
-						<span>{model}</span>
-					</label>
-				))}
+		<div className="mx-auto grid w-full max-w-screen-sm gap-y-4 px-4">
+			<div className="flex gap-4">
+				<span className="flex-shrink-0">モデル:</span>
+				<div className="flex flex-grow flex-wrap justify-between gap-2">
+					{MODEL_LIST.map((model) => (
+						<label key={model}>
+							<input
+								type="radio"
+								name="model"
+								value={model}
+								checked={model === characterSetting.character}
+								onChange={() => onModelSelect?.(model)}
+							/>
+							<span>{model}</span>
+						</label>
+					))}
+				</div>
 			</div>
 
-			<div className="flex justify-between">
-				{ACCESSORY_LIST.map((accessory) => (
-					<label key={accessory}>
-						<input
-							type="radio"
-							name="accessory"
-							value={accessory}
-							checked={accessory === characterSetting.accessory}
-							onChange={() => onAccessorySelect?.(accessory)}
-						/>
-						<span>{accessory}</span>
-					</label>
-				))}
+			<div className="flex gap-4">
+				<span className="flex-shrink-0">アクセサリー:</span>
+				<div className="flex flex-grow flex-wrap justify-between gap-2">
+					{ACCESSORY_LIST.map((accessory) => (
+						<label key={accessory}>
+							<input
+								type="radio"
+								name="accessory"
+								value={accessory}
+								checked={accessory === characterSetting.accessory}
+								onChange={() => onAccessorySelect?.(accessory)}
+							/>
+							<span>{accessory}</span>
+						</label>
+					))}
+				</div>
+			</div>
+
+			<div>
+				<label className="flex gap-4">
+					<span className="flex-shrink-0">髪の色:</span>
+					<input
+						type="color"
+						value={characterSetting.hair}
+						onChange={(e) => {
+							// TODO: 色の更新処理が頻繁に呼び出されてしまうため、debounceする
+							onHairColorChange?.(e.target.value);
+						}}
+					/>
+				</label>
 			</div>
 
 			{/* モデル選択ボタン */}

diff --git a/app/routes/_auth.edit.tsx b/app/routes/_auth.edit.tsx
@@ -25,6 +25,13 @@ export default function Page(): ReactNode {
 		});
 	};
 
+	const handleHairColorChange = (color: string) => {
+		updateCharacterSetting({
+			...myProfile.characterSetting,
+			hair: color,
+		});
+	};
+
 	return (
 		<div className="min-h-dvh w-full" style={{ viewTransitionName: "main" }}>
 			<main className="grid w-full gap-y-4">
@@ -33,6 +40,7 @@ export default function Page(): ReactNode {
 					characterSetting={myProfile.characterSetting}
 					onModelSelect={handleModelSelect}
 					onAccessorySelect={handleAccessorySelect}
+					onHairColorChange={handleHairColorChange}
 				/>
 			</main>
 		</div>