inmake/nks-virtual-tour
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

animate distance circle

Browse Source
This commit is contained in:
zojgame
2024-04-11 11:37:32 +05:00
parent 7d38f02978
commit 1f4b5bb87e
5 changed files with 256 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DistanceCircle.tsx
+17 -11
View File
@@ -1,23 +1,29 @@
import { useLayoutEffect, useState } from "react";
interface DistanceCircleProps {
selectedRange: number;
}
const defaultScreenSize = 2150;
const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
const [screenWidth, setScreenWidth] = useState(0);
useLayoutEffect(() => {
const _screenWidth = window.innerWidth;
setScreenWidth(_screenWidth);
}, [setScreenWidth]);
return (
<svg
width="2160"
height="2160"
viewBox="0 0 2160 2160"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="absolute top-0 left-0 w-full h-full transition-all duration-300 ease-in-out"
>
<div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
<svg
className="transition-all duration-300 ease-in-out"
width={(0.8 * 1600 * selectedRange) / 850}
width={
((screenWidth / defaultScreenSize) * (0.8 * 1600 * selectedRange)) /
850
}
x={1080 - (0.8 * 1600 * selectedRange) / 1700}
y={0}
style={{ transition: "all .3s ease" }}
viewBox="0 0 1600 1600"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -46,7 +52,7 @@ const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
</radialGradient>
</defs>
</svg>
</svg>
</div>
);
};
src/components/InfrastructurePage/InfrastructureFilters.tsx
+9 -7
View File
@@ -34,7 +34,6 @@ const InfrastructureFilters = ({
const filteredMarks = marks.filter(
(mark) => mark.icon === filter && mark.distance <= selectedRange
);
console.log("filteredMarks", filteredMarks);
setFilteredMarks(filteredMarks);
}, [selectedRange, filter, marks, setFilteredMarks]);
@@ -42,9 +41,12 @@ const InfrastructureFilters = ({
return (
<>
<div>
<h2 className="font-tenor text-2xl mb-8">Инфраструктура</h2>
<h3 className="text-[18px] mb-5">Окружение:</h3>
<div className="flex flex-col gap-2 mb-8 border-b border-[#9595A2] pb-8">
{/* <h2 className="font-tenor 2xl:text-2xl text-xl 2xl:mb-8 mb-5"> */}
<h2 className="font-tenor text-xl mb-5">Инфраструктура</h2>
{/* <h3 className="text-[18px] 2xl:mb-5 mb-3">Окружение:</h3> */}
<h3 className="text-[18px] mb-3">Окружение:</h3>
{/* <div className="flex flex-col 2xl:gap-2 gap-[6px] 2xl:mb-8 mb-5 border-b border-[#9595A2] 2xl:pb-8 pb-5"> */}
<div className="flex flex-col 2xl:gap-2 gap-[6px] mb-5 border-b border-[#9595A2] pb-5">
{environments.map((env) => (
<button
data-set={env.type}
@@ -54,15 +56,15 @@ const InfrastructureFilters = ({
filter !== env.type
? "opacity-60 border-b-2 border-b-transparent"
: "border-b-2 border-b-[#0079C2]"
} flex gap-2 font-medium text-sm px-[2px] py-2 transition-all duration-300 ease-in-out`}
} flex gap-2 font-medium 2xl:text-sm xl:text-xs px-[2px] py-2 transition-all duration-300 ease-in-out`}
>
{env.icon}
<div>{env.label}</div>
</button>
))}
</div>
<div className="flex flex-col gap-2 border-b border-[#9595A2] pb-8">
<h3 className="text-[18px] mb-5">Транспорт:</h3>
<div className="flex flex-col gap-2 border-b border-[#9595A2] 2xl:pb-8 pb-5">
<h3 className="text-[18px] 2xl:mb-5 mb-3">Транспорт:</h3>
{transports.map((trans) => (
<button
data-set={trans.type}
src/components/MarksContainer.tsx
+2
View File
@@ -3,12 +3,14 @@ import MarkEducationIcon from "./icons/marks/MarkEducationIcon";
import MarkFoodIcon from "./icons/marks/MarkFoodIcon";
import MarkHeathyIcon from "./icons/marks/MarkHeathyIcon";
import MarkShopIcon from "./icons/marks/MarkShopIcon";
import { MarkSportIcon } from "./icons/marks/MarkSportIcon";
const markIcons: { [key: string]: React.ReactNode } = {
shop: <MarkShopIcon />,
food: <MarkFoodIcon />,
heathy: <MarkHeathyIcon />,
education: <MarkEducationIcon />,
sport: <MarkSportIcon />,
};
interface MarksContainerProps {
src/components/icons/marks/MarkSportIcon.tsx
+28
View File
@@ -0,0 +1,28 @@
const MarkSportIcon = () => {
return (
<svg
x={9.5}
y={9.5}
width="45"
height="45"
viewBox="0 0 45 45"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_177_12572)">
<path
d="M18.5222 26.4775L26.4772 18.5226M34.631 10.3688L36.6198 8.38002M8.37968 36.6201L10.3684 34.6314M18.5222 8.97656L24.8862 2.61267L42.3871 20.1136L36.0231 26.4775L18.5222 8.97656ZM2.61233 24.8865L8.97629 18.5226L26.4772 36.0235L20.1132 42.3874L2.61233 24.8865Z"
stroke="white"
stroke-width="2.8125"
stroke-linecap="square"
/>
</g>
<defs>
<clipPath id="clip0_177_12572">
<rect width="45" height="45" fill="white" />
</clipPath>
</defs>
</svg>
);
};
export { MarkSportIcon };
src/marks.json
+200
View File
@@ -350,5 +350,205 @@
"y": 1080,
"icon": "education",
"distance": 500
},
{
"id": "education_6",
"label": "Гимназия №9",
"x": 1620,
"y": 940,
"icon": "education",
"distance": 800
},
{
"id": "education_7",
"label": "УрФУ ИНЭУ",
"x": 1360,
"y": 1230,
"icon": "education",
"distance": 500
},
{
"id": "education_8",
"label": "Империя",
"x": 1320,
"y": 1280,
"icon": "education",
"distance": 500
},
{
"id": "education_9",
"label": "Гимназия №2",
"x": 1080,
"y": 1350,
"icon": "education",
"distance": 400
},
{
"id": "education_10",
"label": "Детский сад №472",
"x": 730,
"y": 1180,
"icon": "education",
"distance": 500
},
{
"id": "education_11",
"label": "Детский сад №251",
"x": 760,
"y": 1120,
"icon": "education",
"distance": 400
},
{
"id": "education_12",
"label": "Детский сад №252 Кораблик",
"x": 550,
"y": 1110,
"icon": "education",
"distance": 700
},
{
"id": "education_13",
"label": "Детский сад №414",
"x": 640,
"y": 1310,
"icon": "education",
"distance": 700
},
{
"id": "sport_1",
"label": "Clinch",
"x": 700,
"y": 1130,
"icon": "sport",
"distance": 500
},
{
"id": "sport_2",
"label": "Точка",
"x": 970,
"y": 1180,
"icon": "sport",
"distance": 250
},
{
"id": "sport_3",
"label": "Aversfit",
"x": 1160,
"y": 1220,
"icon": "sport",
"distance": 300
},
{
"id": "sport_4",
"label": "Локомотив-изумруд",
"x": 1260,
"y": 1320,
"icon": "sport",
"distance": 450
},
{
"id": "sport_5",
"label": "Powerhouse Gym",
"x": 1470,
"y": 1340,
"icon": "sport",
"distance": 700
},
{
"id": "sport_6",
"label": "Бассейн Дворца Молодежи",
"x": 1030,
"y": 1450,
"icon": "sport",
"distance": 550
},
{
"id": "sport_7",
"label": "Happy Gymnastic",
"x": 660,
"y": 1230,
"icon": "sport",
"distance": 600
},
{
"id": "sport_8",
"label": "Encore Fitness",
"x": 1100,
"y": 910,
"icon": "sport",
"distance": 250
},
{
"id": "sport_9",
"label": "Реформа",
"x": 1090,
"y": 790,
"icon": "sport",
"distance": 400
},
{
"id": "sport_10",
"label": "Topstretching",
"x": 1010,
"y": 820,
"icon": "sport",
"distance": 350
},
{
"id": "sport_11",
"label": "Динамо",
"x": 1410,
"y": 580,
"icon": "sport",
"distance": 850
},
{
"id": "sport_12",
"label": "ДИВС",
"x": 1050,
"y": 570,
"icon": "sport",
"distance": 650
},
{
"id": "sport_13",
"label": "New Fit",
"x": 1250,
"y": 990,
"icon": "sport",
"distance": 400
},
{
"id": "sport_14",
"label": "Облака",
"x": 1360,
"y": 1030,
"icon": "sport",
"distance": 450
},
{
"id": "sport_15",
"label": "Bright Fit",
"x": 1540,
"y": 1200,
"icon": "sport",
"distance": 700
},
{
"id": "sport_15",
"label": "Bright Fit",
"x": 1540,
"y": 1200,
"icon": "sport",
"distance": 700
},
{
"id": "sport_16",
"label": "Bright Fit",
"x": 1540,
"y": 1200,
"icon": "sport",
"distance": 700
}
]