upd

package.json

@@ -17,6 +17,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
+    "react-transition-group": "^4.4.5",
     "three": "^0.163.0",
     "three-stdlib": "^2.29.6",
     "zustand": "^4.5.2"
@@ -24,6 +25,7 @@
   "devDependencies": {
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "@types/react-transition-group": "^4.4.10",
     "@types/three": "^0.163.0",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",

src/index.css

@@ -13,3 +13,19 @@ body {
 .font-tenor {
   font-family: "Tenor Sans", sans-serif;
 }
+
+.entering {
+  opacity: 1;
+}
+
+.entered {
+  opacity: 1;
+}
+
+.exiting {
+  opacity: 0;
+}
+
+.exited {
+  opacity: 0;
+}

src/main.tsx

@@ -2,12 +2,17 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import VirtualTourPage from "./pages/VirtualTourPage.tsx";
+import Infra2Page from "./pages/Infra2Page.tsx";
 
 const router = createBrowserRouter([
   {
     path: "/virtual-tour",
     element: <VirtualTourPage />,
   },
+  {
+    path: "/infra2",
+    element: <Infra2Page />,
+  },
 ]);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(

src/pages/Infra2Page.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { Transition } from "react-transition-group";
+
+const rangeStart = 200;
+const rangeEnd = 850;
+const rangeStep = 50;
+const arrayLength = (rangeEnd - rangeStart) / rangeStep + 1; // 14
+
+function Infra2Page() {
+  const [selectedRange, setSelectedRange] = useState<number>(500);
+  const [loadedImages, setLoadedImages] = useState<number>(0);
+
+  function handleLoad() {
+    setLoadedImages((prev) => prev + 1);
+  }
+
+  return (
+    <div className="h-screen overflow-hidden">
+      {Array.from({ length: arrayLength }).map((_, index) => {
+        const currentRange = rangeStart + rangeStep * index;
+
+        return (
+          <img
+            key={index}
+            src={`/images/Infra/NKS_Infra_${currentRange}.jpg`}
+            alt=""
+            className={`absolute h-full w-full select-none pointer-events-none ${
+              currentRange === selectedRange ? "opacity-100" : "opacity-0"
+            }`}
+            onLoad={() => handleLoad()}
+          />
+        );
+      })}
+
+      <input
+        type="range"
+        min={rangeStart}
+        max={rangeEnd}
+        step={rangeStep}
+        className="absolute top-0 left-0"
+        value={selectedRange}
+        onChange={(e) => setSelectedRange(+e.target.value)}
+      />
+
+      {arrayLength !== loadedImages && (
+        <div className="absolute top-0 left-0 w-full h-full bg-neutral-950 flex items-center justify-center">
+          <h2 className="text-2xl font-tenor whitespace-nowrap">
+            Загрузка... {Math.round((100 / arrayLength) * loadedImages)} %
+          </h2>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Infra2Page;

yarn.lock

@@ -12,7 +12,7 @@
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.21.0":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
   integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
@@ -563,6 +563,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.10":
+  version "4.4.10"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
+  integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^18.2.66":
   version "18.2.73"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.73.tgz#0579548ad122660d99e00499d22e33b81e73ed94"
@@ -1010,6 +1017,14 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 draco3d@^1.4.1:
   version "1.5.7"
   resolved "https://registry.yarnpkg.com/draco3d/-/draco3d-1.5.7.tgz#94f9bce293eb8920c159dc91a4ce9124a9e899e0"
@@ -1834,7 +1849,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prop-types@^15.6.0:
+prop-types@^15.6.0, prop-types@^15.6.2:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -1901,6 +1916,16 @@ react-router@6.22.3:
   dependencies:
     "@remix-run/router" "1.15.3"
 
+react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react-use-measure@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"