{Array.from({ length: 6 }).map((_, i) => (
diff --git a/src/components/submit-form/mii-editor/enhanced-slider.tsx b/src/components/submit-form/mii-editor/enhanced-slider.tsx
new file mode 100644
index 0000000..3b1b86d
--- /dev/null
+++ b/src/components/submit-form/mii-editor/enhanced-slider.tsx
@@ -0,0 +1,78 @@
+import { Icon } from "@iconify/react";
+
+interface SliderProps {
+ label: string;
+ value: number;
+ onChange: (value: number) => void;
+ min?: number;
+ max?: number;
+ mid?: number;
+ step?: number;
+ className?: string;
+}
+
+export default function EnhancedSlider({ label, value, onChange, min = 0, max = 128, mid = 64, step = 1, className = "" }: SliderProps) {
+ const handleChange = (newValue: number) => {
+ const clampedValue = Math.min(max, Math.max(min, newValue));
+ onChange(clampedValue);
+ };
+
+ const nudge = (direction: number) => {
+ const newValue = value + direction * step;
+ handleChange(newValue);
+ };
+
+ const displayValue = value - mid;
+ const displayText = displayValue > 0 ? `+${displayValue}` : displayValue.toString();
+ const percentage = ((value - min) / (max - min)) * 100;
+
+ return (
+
+
+
{label}
+
+ {displayText}
+
+
+
+
+
+
+ {/* Tick mark at center */}
+
+
+
handleChange(e.target.valueAsNumber)}
+ className="w-full px-0.5 h-2 bg-orange-200 rounded-lg appearance-none cursor-pointer focus:outline-0"
+ style={{
+ background: `linear-gradient(to right, #fb923c 0%, #fb923c ${percentage}%, #fed7aa ${percentage}%, #fed7aa 100%)`,
+ }}
+ />
+
+
+
+
+
+ );
+}
diff --git a/src/components/submit-form/mii-editor/tabs/misc.tsx b/src/components/submit-form/mii-editor/tabs/misc.tsx
index 2cfaf1d..31aece1 100644
--- a/src/components/submit-form/mii-editor/tabs/misc.tsx
+++ b/src/components/submit-form/mii-editor/tabs/misc.tsx
@@ -1,17 +1,16 @@
import { useState } from "react";
import { MiiGender } from "@prisma/client";
-
import DatingPreferencesViewer from "@/components/mii/dating-preferences";
import VoiceViewer from "@/components/mii/voice-viewer";
import PersonalityViewer from "@/components/mii/personality-viewer";
-
+import EnhancedSlider from "@/components/submit-form/mii-editor/enhanced-slider";
import { SwitchMiiInstructions } from "@/types";
interface Props {
instructions: React.RefObject
;
}
-export default function HeadTab({ instructions }: Props) {
+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(instructions.current.datingPreferences ?? []);
@@ -50,47 +49,31 @@ export default function HeadTab({ instructions }: Props) {
@@ -122,9 +105,9 @@ export default function HeadTab({ instructions }: Props) {
{
- setVoice((p) => ({ ...p, [label]: e.target.valueAsNumber }));
- instructions.current.voice[label as keyof typeof voice] = e.target.valueAsNumber;
+ onChange={(v, label) => {
+ setVoice((p) => ({ ...p, [label]: v }));
+ instructions.current.voice[label as keyof typeof voice] = v;
}}
onClickTone={(i) => {
setVoice((p) => ({ ...p, tone: i }));