- {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 }) {