Skip to content

Commit 2c0d1ab

Browse files
DylanBPYDylanBPY
authored
Merge pull request #10 from awesumdude42/main
POSE SECTION IS BASICALLY DONE, IDT THERES ANYTHING ELSE TO ADD
2 parents da3fb65 + 603c398 commit 2c0d1ab

2 files changed

Lines changed: 96 additions & 28 deletions

File tree

‎src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function Home() {
99
orientation="horizontal"
1010
className="min-h-full max-w-md rounded-lg border min-w-full"
1111
>
12-
<ResizablePanel defaultSize="25%" maxSize="30%" minSize="23%">
12+
<ResizablePanel defaultSize="25%" maxSize="30%" minSize="17%">
1313
<span>
1414
<PoseControls/>
1515
</span>

‎src/components/pose-controls.tsx‎

Lines changed: 95 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function PoseControls() {
1919

2020
const newPose: Pose = {
2121
id: `pose-${Date.now()}`, // Unique timestamp ensures no duplicate IDs
22-
name: `Pose ${nextNumber}`,
22+
name: `Pose-${nextNumber}`,
2323
x: 0,
2424
y: 0,
2525
heading: 0,
@@ -56,22 +56,31 @@ export default function PoseControls() {
5656
<div className=" flex text-white" key={pose.id}>
5757
<Accordion type="single" collapsible defaultValue="item-1" className="w-full" >
5858
<AccordionItem value="item-1">
59-
<AccordionTrigger>
60-
<div className="flex w-full flex-row gap-2 mr-2">
61-
<Input
62-
id={pose.id}
63-
type="text"
64-
placeholder="Pose Name"
65-
defaultValue={pose.name}
66-
className="w-fit transition-colors mr-2 focus-visible:border-red-500 focus-visible:ring-red-500"
67-
onClick={(e) => e.stopPropagation()}
68-
/>
69-
<Separator orientation="vertical"/>
70-
<Button className="w-5 bg-[#11111] hover:bg-[#11111]" onClick={()=>deletePose(pose.id)}>
71-
<CircleMinus color="#C00000"/>
72-
</Button>
73-
</div>
74-
</AccordionTrigger>
59+
<div className="flex flex-row w-full">
60+
<AccordionTrigger>
61+
<div className="flex w-fit flex-row gap-2 mr-2">
62+
<Input
63+
id={pose.id}
64+
type="text"
65+
placeholder="Pose Name"
66+
defaultValue={pose.name}
67+
className="transition-colors mr-2 focus-visible:border-red-500 focus-visible:ring-red-500"
68+
onClick={(e) => e.stopPropagation()}
69+
onChange={(e)=>updatePose(pose.id,{name:e.target.value})}
70+
onKeyDown={(e) => {
71+
if (e.key === " ") {
72+
e.preventDefault();
73+
}
74+
}}
75+
/>
76+
77+
</div>
78+
</AccordionTrigger>
79+
80+
<Button className=" ml-2 mt-2 bg-[#11111] hover:bg-[#11111]" onClick={()=>deletePose(pose.id)}>
81+
<CircleMinus color="#C00000"/>
82+
</Button>
83+
</div>
7584
<AccordionContent className="flex h-full">
7685
<div className="flex flex-col gap-2 ">
7786

@@ -84,11 +93,25 @@ export default function PoseControls() {
8493
id="x-input"
8594
type="number"
8695
placeholder="X"
96+
min={-70.5}
97+
max={70.5}
98+
onClick={()=>{
99+
if(pose.x == 0){
100+
updatePose(pose.id,{x:""})
101+
}
102+
}
103+
}
87104
className="w-20 h-7 transition-colors focus-visible:border-red-500 focus-visible:ring-red-500"
88-
value={pose.x === 0 ? "" : pose.x}
105+
value={pose.x}
89106
onChange={(e) => {
90107
const val = e.target.value;
91-
updatePose(pose.id, { x: val === "" || val === "-" ? 0 : Number(val) });
108+
updatePose(pose.id, { x: Number(val) });
109+
110+
if(Number(val)>=70.5){
111+
updatePose(pose.id,{x:70.5})
112+
}else if(Number(val)<=-70.5){
113+
updatePose(pose.id,{x:-70.5})
114+
}
92115
}}
93116
/>
94117
</Field>
@@ -98,13 +121,28 @@ export default function PoseControls() {
98121
</FieldLabel>
99122
<Input
100123
id="y-input"
124+
min={-70.5}
125+
max={70.5}
101126
type="number"
102127
placeholder="Y"
103128
className="w-20 h-7 transition-colors focus-visible:border-red-500 focus-visible:ring-red-500"
104-
value={pose.y === 0 ? "" : pose.y}
129+
value={pose.y}
130+
onClick={()=>{
131+
if(pose.y == 0){
132+
updatePose(pose.id,{y:""})
133+
}
134+
}
135+
}
105136
onChange={(e) => {
106137
const val = e.target.value;
107-
updatePose(pose.id, { y: val === "" || val === "-" ? 0 : Number(val) });
138+
updatePose(pose.id, { y: Number(val) });
139+
140+
if(Number(val)>=70.5){
141+
updatePose(pose.id,{y:70.5})
142+
}else if(Number(val)<=-70.5){
143+
updatePose(pose.id,{y:-70.5})
144+
}
145+
108146
}}
109147
/>
110148
</Field>
@@ -119,11 +157,25 @@ export default function PoseControls() {
119157
id="heading-input"
120158
type="number"
121159
placeholder="Heading"
160+
min={0}
161+
max={360}
122162
className="w-20 h-7 transition-colors focus-visible:border-red-500 focus-visible:ring-red-500"
123-
value={pose.heading === 0 ? "" : pose.heading}
163+
value={pose.heading}
164+
onClick={()=>{
165+
if(pose.heading == 0){
166+
updatePose(pose.id,{heading:""})
167+
}
168+
}
169+
}
124170
onChange={(e) => {
125171
const val = e.target.value;
126-
updatePose(pose.id, { heading: val === "" || val === "-" ? 0 : Number(val) });
172+
updatePose(pose.id, { heading: Number(val) });
173+
174+
if(Number(val)>=360){
175+
updatePose(pose.id,{heading:360})
176+
}else if(Number(val)<=0){
177+
updatePose(pose.id,{heading:0})
178+
}
127179
}}
128180
/>
129181
</Field>
@@ -136,10 +188,23 @@ export default function PoseControls() {
136188
type="number"
137189
placeholder="Radius"
138190
disabled={!pose.arcPose}
139-
value={pose.radius === 0 ? "" : pose.radius}
191+
min={2}
192+
value={pose.radius}
193+
onClick={()=>{
194+
if(pose.radius == 2){
195+
updatePose(pose.id,{radius:""})
196+
}
197+
}
198+
}
140199
onChange={(e) => {
200+
141201
const val = e.target.value;
142-
updatePose(pose.id, { radius: val === "" || val === "-" ? 0 : Number(val) });
202+
updatePose(pose.id, { radius: Number(val) });
203+
if(Number(val)<=2 && pose.arcPose){
204+
updatePose(pose.id,{radius:2})
205+
}
206+
207+
143208
}}
144209
className="w-20 h-7 transition-all duration-300 ease-in-out focus-visible:border-red-500 focus-visible:ring-red-500 disabled:cursor-not-allowed disabled:opacity-40"
145210
/>
@@ -151,7 +216,10 @@ export default function PoseControls() {
151216
<Switch
152217
id="arc-pose"
153218
checked={pose.arcPose}
154-
onCheckedChange={(checked: boolean) => updatePose(pose.id, { arcPose: checked })}
219+
onCheckedChange={(checked: boolean) => {
220+
updatePose(pose.id, { arcPose: checked })
221+
updatePose(pose.id,{radius:0})
222+
}}
155223
/>
156224
<label htmlFor="arc-pose" className=" text-xs cursor-pointer select-none">
157225
Arc Pose
@@ -194,10 +262,10 @@ export default function PoseControls() {
194262
</AccordionContent>
195263
</AccordionItem>
196264
</Accordion>
197-
198265
</div>
199266
))}
200267
</ScrollArea>
268+
201269
</div>
202270
);
203271
}

0 commit comments

Comments
 (0)