diff --git a/src/app/modules/components/category_selector.module.tsx b/src/app/modules/components/category_selector.module.tsx index 41aa030..f7b6b4b 100644 --- a/src/app/modules/components/category_selector.module.tsx +++ b/src/app/modules/components/category_selector.module.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from "react" import { Category } from "@/app/interfaces" import { CategoryEl } from "@/app/modules/components/card.module"; import style from "@/app/styles/category_selector.module.css"; -import NextImage from 'next/image'; import style_workshop from "@/app/styles/workshop/page.module.css"; import IconSvg from '@/app/resources/icon.svg'; @@ -50,7 +49,9 @@ const CategorySelector = ({ enabledCategories, allCategories, onChange }: Catego

Выбранные категории:

- {categoriesEnabled.length > 0 ? categoriesEnabled :

Категории не выбраны

} + {categoriesEnabled.length > 0 ? categoriesEnabled : +

Категории не выбраны

+ }

diff --git a/src/app/modules/components/skinView.module.tsx b/src/app/modules/components/skinView.module.tsx index 5ca834f..b94252d 100644 --- a/src/app/modules/components/skinView.module.tsx +++ b/src/app/modules/components/skinView.module.tsx @@ -104,4 +104,4 @@ const SkinView3D = ({ SKIN, CAPE, className, slim, id, width, height, pose, back } -export default SkinView3D; \ No newline at end of file +export default SkinView3D; diff --git a/src/app/modules/components/slider.module.tsx b/src/app/modules/components/slider.module.tsx new file mode 100644 index 0000000..b137e3a --- /dev/null +++ b/src/app/modules/components/slider.module.tsx @@ -0,0 +1,80 @@ +import Style from '@/app/styles/slider.module.css'; +import { useEffect, useState } from 'react'; + + +const Slider = ({ initial, range, onChange }: { initial: number, range: number, onChange(val: number): void }) => { + const [position, setPosition] = useState(0); + const [lastVal, setLastVal] = useState(0); + const [isDragging, setIsDragging] = useState(false); + + const calcPosition = (range: number, y: number, ival?: number) => { + const rect = document.getElementById('track').getBoundingClientRect(); + const realRange = (rect.height - 16) / range; + const value = ival ?? Math.min(Math.max(Math.floor((y - rect.top) / realRange), 0), range); + const val = (value * realRange) / rect.height * 100; + return { position: Math.min(val, ((rect.height - 16) / rect.height) * 100), value: value } + } + + const mouseDown = (event: any) => { + setIsDragging(true); + document.body.style.userSelect = 'none'; + const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY; + const position = calcPosition(range, clientY); + setPosition(position.position); + if (position.value !== lastVal) { + onChange(position.value); + setLastVal(position.value); + } + } + + const mouseMove = (event: any) => { + const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY; + const position = calcPosition(range, clientY); + setPosition(position.position); + if (position.value !== lastVal) { + onChange(position.value); + setLastVal(position.value); + } + } + + const mouseUp = () => { + setIsDragging(false); + document.body.style.userSelect = 'auto'; + } + + useEffect(() => { + setPosition(calcPosition(range, 0, initial).position); + }, []) + + return ( + <> + {isDragging && +
+ } +
+
+
+ + ) +} + +export default Slider; \ No newline at end of file diff --git a/src/app/styles/slider.module.css b/src/app/styles/slider.module.css new file mode 100644 index 0000000..4cf1871 --- /dev/null +++ b/src/app/styles/slider.module.css @@ -0,0 +1,24 @@ +.track { + width: 0.5rem; + border-radius: 5px; + border: 1px var(--main-element-color) solid; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + margin-left: .5rem; + margin-right: .5rem; +} + +.thumb { + background-image: url('../workshop/[id]/pepe.png'); + background-size: contain; + background-position: center center; + background-repeat: no-repeat; + width: 24px; + height: 16px; + position: relative; + border-radius: 3px; + cursor: pointer; + transition: top 150ms; +} \ No newline at end of file diff --git a/src/app/workshop/[id]/bandage_engine.module.tsx b/src/app/workshop/[id]/bandage_engine.module.tsx index 6bf695c..6aed005 100644 --- a/src/app/workshop/[id]/bandage_engine.module.tsx +++ b/src/app/workshop/[id]/bandage_engine.module.tsx @@ -211,14 +211,6 @@ class Client { this.rerender(); } - updatePositionSlider() { - const value = document.getElementById('position') as HTMLInputElement; - if (!value) return; - const height = this.pepe_canvas.height; - value.max = (12 - height).toString(); - value.value = this.position.toString(); - } - //-----------RENDER------------- rerender(render_original: boolean = true, download?: boolean) { diff --git a/src/app/workshop/[id]/client_code.tsx b/src/app/workshop/[id]/client_code.tsx index 72a42b9..fd5fdb8 100644 --- a/src/app/workshop/[id]/client_code.tsx +++ b/src/app/workshop/[id]/client_code.tsx @@ -28,6 +28,7 @@ import Link from 'next/link'; import { CSSTransition } from 'react-transition-group'; import { IconDownload, IconPlus, IconChevronDown, IconUser, IconEdit, IconX, IconCheck } from '@tabler/icons-react'; +import Slider from '@/app/modules/components/slider.module'; const body_part: readonly { value: number, label: String }[] = [ @@ -64,6 +65,7 @@ export default function Home({ data }: { data: Interfaces.Bandage }) { const [randomColor, setRandomColor] = useState(""); const [loadExpanded, setLoadExpanded] = useState(false); + const [rangeProps, setRangeProps] = useState<{ max: number, value: number }>({ max: 8, value: 4 }); const client = useRef(); @@ -104,7 +106,7 @@ export default function Home({ data }: { data: Interfaces.Bandage }) { client.current.pepe_canvas = pepe_canvas; client.current.lining_canvas = lining_canvas; client.current.position = 6 - Math.floor(height / 2); - client.current.updatePositionSlider(); + setRangeProps({ value: client.current.position, max: (12 - client.current.pepe_canvas.height) }); client.current.colorable = data.categories.some(val => val.id.toString() === process.env.NEXT_PUBLIC_COLORABLE_ID); const randomColor = getRandomColor(); setRandomColor(randomColor); @@ -234,16 +236,10 @@ export default function Home({ data }: { data: Interfaces.Bandage }) {
}
- client.current?.setParams({ position: Number((evt.target as HTMLInputElement).value) }) - } + client.current?.setParams({ position: val })} />
client.current?.setParams({ first_layer: val })}