Skip to content

Commit 084f9d1

Browse files
autofix-ci[bot]autofix-ci[bot]
authored
ci: apply automated fixes
1 parent 908e561 commit 084f9d1

2 files changed

Lines changed: 150 additions & 83 deletions

File tree

‎src/components/shop/ShopHero3D.tsx‎

Lines changed: 88 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import * as React from 'react'
22
import * as THREE from 'three'
33
import { Canvas, useFrame, useThree } from '@react-three/fiber'
4-
import {
5-
Decal,
6-
Environment,
7-
useGLTF,
8-
useTexture,
9-
} from '@react-three/drei'
4+
import { Decal, Environment, useGLTF, useTexture } from '@react-three/drei'
105
import { easing } from 'maath'
116

127
type ShopHero3DProps = {
@@ -32,19 +27,51 @@ export function ShopHero3D({ isDark = false }: ShopHero3DProps) {
3227
const images = isDark ? BRAND_IMAGES.dark : BRAND_IMAGES.light
3328

3429
// Debug overrides — these feed into the scene when DEBUG is on
35-
const [debugDecal, setDebugDecal] = React.useState({ x: 0.17, y: 0.09, z: 0.1 })
36-
const [debugDecalRot, setDebugDecalRot] = React.useState({ x: 0, y: 0.785, z: 0 }) // 0.785 ≈ π*0.25
30+
const [debugDecal, setDebugDecal] = React.useState({
31+
x: 0.17,
32+
y: 0.09,
33+
z: 0.1,
34+
})
35+
const [debugDecalRot, setDebugDecalRot] = React.useState({
36+
x: 0,
37+
y: 0.785,
38+
z: 0,
39+
}) // 0.785 ≈ π*0.25
3740
const [debugScale, setDebugScale] = React.useState(0.05)
38-
const [debugShirtPos, setDebugShirtPos] = React.useState({ x: -0.06, y: -0.05, z: 0 })
39-
const [debugShirtRot, setDebugShirtRot] = React.useState({ x: 0, y: -0.45, z: 0.02 })
41+
const [debugShirtPos, setDebugShirtPos] = React.useState({
42+
x: -0.06,
43+
y: -0.05,
44+
z: 0,
45+
})
46+
const [debugShirtRot, setDebugShirtRot] = React.useState({
47+
x: 0,
48+
y: -0.45,
49+
z: 0.02,
50+
})
4051

4152
const debugValues = DEBUG
4253
? {
43-
decal: [debugDecal.x, debugDecal.y, debugDecal.z] as [number, number, number],
44-
decalRotation: [debugDecalRot.x, debugDecalRot.y, debugDecalRot.z] as [number, number, number],
54+
decal: [debugDecal.x, debugDecal.y, debugDecal.z] as [
55+
number,
56+
number,
57+
number,
58+
],
59+
decalRotation: [debugDecalRot.x, debugDecalRot.y, debugDecalRot.z] as [
60+
number,
61+
number,
62+
number,
63+
],
4564
scale: debugScale,
46-
shirtPos: [debugShirtPos.x, debugShirtPos.y, debugShirtPos.z] as [number, number, number],
47-
shirtRot: [debugShirtRot.x, debugShirtRot.y, debugShirtRot.z] as [number, number, number],
65+
shirtPos: [debugShirtPos.x, debugShirtPos.y, debugShirtPos.z] as [
66+
number,
67+
number,
68+
number,
69+
],
70+
shirtRot: [debugShirtRot.x, debugShirtRot.y, debugShirtRot.z] as [
71+
number,
72+
number,
73+
number,
74+
],
4875
}
4976
: null
5077

@@ -78,11 +105,46 @@ export function ShopHero3D({ isDark = false }: ShopHero3DProps) {
78105
<div className="absolute top-2 right-2 z-50 bg-black/80 text-white text-[10px] p-3 rounded-lg flex flex-col gap-2 max-h-[95%] overflow-y-auto w-56 font-mono">
79106
<div className="font-bold text-xs mb-1">Decal Editor</div>
80107

81-
<SliderGroup label="Decal Pos" value={debugDecal} onChange={setDebugDecal} min={-0.3} max={0.3} step={0.005} />
82-
<SliderGroup label="Decal Rot" value={debugDecalRot} onChange={setDebugDecalRot} min={-3.14} max={3.14} step={0.01} />
83-
<SliderRow label="Scale" value={debugScale} onChange={setDebugScale} min={0.01} max={0.4} step={0.005} />
84-
<SliderGroup label="Shirt Pos" value={debugShirtPos} onChange={setDebugShirtPos} min={-0.2} max={0.2} step={0.005} />
85-
<SliderGroup label="Shirt Rot" value={debugShirtRot} onChange={setDebugShirtRot} min={-1.5} max={1.5} step={0.01} />
108+
<SliderGroup
109+
label="Decal Pos"
110+
value={debugDecal}
111+
onChange={setDebugDecal}
112+
min={-0.3}
113+
max={0.3}
114+
step={0.005}
115+
/>
116+
<SliderGroup
117+
label="Decal Rot"
118+
value={debugDecalRot}
119+
onChange={setDebugDecalRot}
120+
min={-3.14}
121+
max={3.14}
122+
step={0.01}
123+
/>
124+
<SliderRow
125+
label="Scale"
126+
value={debugScale}
127+
onChange={setDebugScale}
128+
min={0.01}
129+
max={0.4}
130+
step={0.005}
131+
/>
132+
<SliderGroup
133+
label="Shirt Pos"
134+
value={debugShirtPos}
135+
onChange={setDebugShirtPos}
136+
min={-0.2}
137+
max={0.2}
138+
step={0.005}
139+
/>
140+
<SliderGroup
141+
label="Shirt Rot"
142+
value={debugShirtRot}
143+
onChange={setDebugShirtRot}
144+
min={-1.5}
145+
max={1.5}
146+
step={0.01}
147+
/>
86148

87149
<button
88150
type="button"
@@ -218,7 +280,11 @@ function Scene({
218280
color="#e8e0f0"
219281
/>
220282

221-
<RotatingShirt images={images} isDark={isDark} debugOverride={debugOverride} />
283+
<RotatingShirt
284+
images={images}
285+
isDark={isDark}
286+
debugOverride={debugOverride}
287+
/>
222288
</>
223289
)
224290
}
@@ -405,7 +471,8 @@ function RotatingShirt({
405471

406472
// In debug mode, use overrides directly; otherwise use placement presets
407473
const activeDecalPos = debugOverride?.decal ?? [...placement.decal]
408-
const activeDecalRot = debugOverride?.decalRotation ?? (placement.decalRotation ?? [0, 0, 0])
474+
const activeDecalRot =
475+
debugOverride?.decalRotation ?? placement.decalRotation ?? [0, 0, 0]
409476
const activeScale = debugOverride?.scale ?? placement.scale
410477
const activeShirtPos = debugOverride?.shirtPos ?? placement.shirtPos
411478
const activeShirtRot = debugOverride?.shirtRot ?? placement.shirtRot

‎src/routes/shop.index.tsx‎

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -107,69 +107,69 @@ function ShopIndex() {
107107
</div>
108108

109109
<div className="flex flex-col max-w-6xl mx-auto w-full gap-8 p-4 md:p-8">
110-
<header className="flex flex-wrap items-end justify-between gap-4">
111-
<div>
112-
<h1 className="text-3xl font-black">All Products</h1>
113-
<p className="text-sm mt-2 text-gray-600 dark:text-gray-400">
114-
{products.length}
115-
{hasNextPage ? '+' : ''}{' '}
116-
{products.length === 1 ? 'product' : 'products'}
117-
</p>
118-
</div>
119-
<label className="flex items-center gap-2 text-sm">
120-
<span className="text-gray-600 dark:text-gray-400">Sort by</span>
121-
<select
122-
value={sortId}
123-
onChange={(e) => {
124-
// Cast is safe: the select only emits ids from SORT_OPTIONS
125-
// which align with the valibot search schema.
126-
const nextId = e.target.value as ValidSortId
127-
// Default sort omits the search param entirely for a clean URL
128-
navigate({
129-
to: '/shop',
130-
search: nextId === 'BEST_SELLING' ? {} : { sort: nextId },
131-
})
132-
}}
133-
className="px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 text-sm"
134-
>
135-
{SORT_OPTIONS.map((opt) => (
136-
<option key={sortOptionId(opt)} value={sortOptionId(opt)}>
137-
{opt.label}
138-
</option>
139-
))}
140-
</select>
141-
</label>
142-
</header>
110+
<header className="flex flex-wrap items-end justify-between gap-4">
111+
<div>
112+
<h1 className="text-3xl font-black">All Products</h1>
113+
<p className="text-sm mt-2 text-gray-600 dark:text-gray-400">
114+
{products.length}
115+
{hasNextPage ? '+' : ''}{' '}
116+
{products.length === 1 ? 'product' : 'products'}
117+
</p>
118+
</div>
119+
<label className="flex items-center gap-2 text-sm">
120+
<span className="text-gray-600 dark:text-gray-400">Sort by</span>
121+
<select
122+
value={sortId}
123+
onChange={(e) => {
124+
// Cast is safe: the select only emits ids from SORT_OPTIONS
125+
// which align with the valibot search schema.
126+
const nextId = e.target.value as ValidSortId
127+
// Default sort omits the search param entirely for a clean URL
128+
navigate({
129+
to: '/shop',
130+
search: nextId === 'BEST_SELLING' ? {} : { sort: nextId },
131+
})
132+
}}
133+
className="px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 text-sm"
134+
>
135+
{SORT_OPTIONS.map((opt) => (
136+
<option key={sortOptionId(opt)} value={sortOptionId(opt)}>
137+
{opt.label}
138+
</option>
139+
))}
140+
</select>
141+
</label>
142+
</header>
143143

144-
{products.length === 0 ? (
145-
<div className="text-center py-24 text-gray-500">
146-
No products yet. Check back soon!
147-
</div>
148-
) : (
149-
<>
150-
<section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
151-
{products.map((product, i) => (
152-
<ProductCard
153-
key={product.id}
154-
product={product}
155-
loading={i < 8 ? 'eager' : 'lazy'}
156-
/>
157-
))}
158-
</section>
159-
{hasNextPage ? (
160-
<div className="flex justify-center py-6">
161-
<button
162-
type="button"
163-
onClick={() => loadMore.mutate()}
164-
disabled={loadMore.isPending}
165-
className="px-6 py-3 rounded-lg border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
166-
>
167-
{loadMore.isPending ? 'Loading…' : 'Load more'}
168-
</button>
169-
</div>
170-
) : null}
171-
</>
172-
)}
144+
{products.length === 0 ? (
145+
<div className="text-center py-24 text-gray-500">
146+
No products yet. Check back soon!
147+
</div>
148+
) : (
149+
<>
150+
<section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
151+
{products.map((product, i) => (
152+
<ProductCard
153+
key={product.id}
154+
product={product}
155+
loading={i < 8 ? 'eager' : 'lazy'}
156+
/>
157+
))}
158+
</section>
159+
{hasNextPage ? (
160+
<div className="flex justify-center py-6">
161+
<button
162+
type="button"
163+
onClick={() => loadMore.mutate()}
164+
disabled={loadMore.isPending}
165+
className="px-6 py-3 rounded-lg border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
166+
>
167+
{loadMore.isPending ? 'Loading…' : 'Load more'}
168+
</button>
169+
</div>
170+
) : null}
171+
</>
172+
)}
173173
</div>
174174
</div>
175175
)

0 commit comments

Comments
 (0)