configuration page updated

COVISART · Apr 8, 2024 · 09ac034 · 09ac034
1 parent e03e2c5
commit 09ac034
Show file tree

Hide file tree

Showing 9 changed files with 32,524 additions and 16,430 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/covisart/Product.js b/src/covisart/Product.js
@@ -4,18 +4,16 @@ import { PhoneOutlined, CheckCircleTwoTone } from '@ant-design/icons';
 
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import SectionTitle from "../elements/sectionTitle/SectionTitle";
-import { ColorSelection } from './Selections/ColorSelection'
 import { AccessorySelection } from './Selections/AccessorySelection'
 import { PayloadSelection } from './Selections/PayloadSelection'
 import { useSnapshot } from 'valtio'
 import { state } from './store'
-import Configuration from './Configuration'
-import Simulator from './Simulator';
 import { Order, PingAPI, LocalOrder } from './system/OrderRequest';
 import ReactGA from "react-ga4";
 
 import { ReactCountryDropdown } from 'react-country-dropdown'
 import 'react-country-dropdown/dist/index.css'
+import StaticImageSimulator from './StaticImageSimulator';
 
 const Product = () => {
     const [selectedTab, setSelectedTab] = useState(0);
@@ -87,7 +85,7 @@ const Product = () => {
                     <div className="row row--30 align-items-center">
                         <div className="col-lg-6 mt_md--40 mt_sm--40">
                             <div style={{ position: "relative" }}>
-                                <Simulator />
+                                <StaticImageSimulator />
                             </div>
                         </div>
                         <div className="col-lg-6 mt_md--40 mt_sm--40" >
@@ -128,11 +126,13 @@ const Product = () => {
                                                             <button>Accessory</button>
                                                         </div>
                                                     </Tab>
-                                                    <Tab tabfor="3">
+                                                    {
+                                                        /*<Tab tabfor="3">
                                                         <div className="rn-tab-button">
                                                             <button>Motors</button>
                                                         </div>
-                                                    </Tab>
+                                                    </Tab>*/
+                                                    }
                                                     <Tab tabfor="4">
                                                         <div>
                                                             <div className="rn-tab-button">
@@ -172,7 +172,9 @@ const Product = () => {
                                                 <TabPanel tabid="2">
                                                     <div className="rn-tab-content">
                                                         <div className="inner" style={{ justifyContent: "flex-end", alignItems: "center", flexDirection: "column", display: "flex" }}>
-                                                            <p>You can only add one accessory on same time, there are <a style={{ color: 'red' }}>2</a> accessories available.</p>
+                                                            {
+                                                                //<p>You can only add one accessory on same time, there are <a style={{ color: 'red' }}>2</a> accessories available.</p>
+                                                            }
                                                             <div style={{ justifyContent: "space-evenly", alignItems: "center", flexDirection: "row", display: "flex" }}>
                                                                 <AccessorySelection />
                                                             </div>
@@ -183,16 +185,18 @@ const Product = () => {
                                                         </div>
                                                     </div>
                                                 </TabPanel>
-                                                <TabPanel tabid="3">
-                                                    <div className="rn-tab-content">
-                                                        <div className="inner" style={{ justifyContent: "flex-end", alignItems: "center", flexDirection: "column", display: "flex" }}>
-                                                            <p>Required motors applied with pre configured payload selection. If you want more motor power, please <a style={{ color: 'red' }} href='https://covisart.com.tr/contacts/' target='_blank'>contact</a> with us. </p>
-                                                            <div className="pricing-footer">
-                                                                <a className="btn-default btn-border" onClick={() => setSelectedTab((selectedTab + 1) % tabCount)}>Finish</a>
+                                                {
+                                                    /*<TabPanel tabid="3">
+                                                        <div className="rn-tab-content">
+                                                            <div className="inner" style={{ justifyContent: "flex-end", alignItems: "center", flexDirection: "column", display: "flex" }}>
+                                                                <p>Required motors applied with pre configured payload selection. If you want more motor power, please <a style={{ color: 'red' }} href='https://covisart.com.tr/contacts/' target='_blank'>contact</a> with us. </p>
+                                                                <div className="pricing-footer">
+                                                                    <a className="btn-default btn-border" onClick={() => setSelectedTab((selectedTab + 1) % tabCount)}>Finish</a>
+                                                                </div>
                                                             </div>
                                                         </div>
-                                                    </div>
-                                                </TabPanel>
+                                                    </TabPanel>*/
+                                                }
                                                 <TabPanel tabid="4">
                                                     <div className="rn-tab-content">
                                                         <Table columns={columns} dataSource={

diff --git a/src/covisart/Simulator.js b/src/covisart/Simulator.js
@@ -1,12 +1,10 @@
-import { useRef, Suspense } from 'react'
-import { Canvas, useThree } from '@react-three/fiber'
-import { useGLTF, Stage, Grid, OrbitControls, Html, ContactShadows, MeshDiscardMaterial, useProgress } from '@react-three/drei'
+import { Suspense } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { Stage, Grid, OrbitControls, Html, useProgress } from '@react-three/drei'
 import { EffectComposer, Bloom } from '@react-three/postprocessing'
-import { Model } from './models/NGS_GLT_V2'
 import { Ngs_GLT } from './models/NGS_GLT'
-import { useControls } from 'leva'
 import { state } from './store'
-import { Effects } from './Effects'
+
 function Loader() {
   const { progress } = useProgress()
   return <Html center>{progress} % loaded</Html>
@@ -18,6 +16,8 @@ export default function Simulator() {
 
   return (
     <div>
+      <div style={{backgroundImage: `url(${process.env.PUBLIC_URL}/covisart/ngs/grey.webp)`}}></div>
+
       <Canvas
         style={{ height: "100vh" }}
         frameloop="demand"
@@ -27,7 +27,6 @@ export default function Simulator() {
             <Ngs_GLT url="/covisart/models/NGS_GLT_V2-transformed.glb" />
           </Stage>
         </Suspense>
-
         <Grid
           renderOrder={-1}
           position={[-0.17, -1.32, 0]}

diff --git a/src/covisart/StaticImageSimulator.js b/src/covisart/StaticImageSimulator.js
@@ -0,0 +1,21 @@
+import { Html, useProgress } from '@react-three/drei'
+import { useSnapshot } from 'valtio'
+import { state } from './store'
+
+function Loader() {
+    const { progress } = useProgress()
+    return <Html center>{progress} % loaded</Html>
+}
+export default function StaticImageSimulator() {
+    const snap = useSnapshot(state)
+    return (
+        <div
+            className="bg_image"
+            style={{ backgroundImage: `url(${process.env.PUBLIC_URL}/covisart/images/ngs/grey.webp)`, height: '90vh' }}>
+            <img
+                src={`/covisart/images/ngs/${snap.accessory}.webp`}
+                className="bg_image"
+                style={{ height: '84vh' }}/>
+        </div>
+    )
+}
diff --git a/src/covisart/models/NGS_GLT.jsx b/src/covisart/models/NGS_GLT.jsx
@@ -110,4 +110,4 @@ export function map(current, in_min, in_max, out_min, out_max) {
   const mapped= ((current - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
   return clamp(mapped, out_min, out_max);
 }
-useGLTF.preload('/covisart/models/NGS_GLT_V2-transformed.glb')
+//useGLTF.preload('/covisart/models/NGS_GLT_V2-transformed.glb')
diff --git a/src/covisart/store.js b/src/covisart/store.js
@@ -9,8 +9,8 @@ const state = proxy({
   ordered: false,
   sizes: ["450", "850"],
   size: '450',
-  accessories:['JustSim','RaceSeat', 'cockpit' ],
-  accessory:'JustSim',
+  accessories:['JustSim','RaceSeat'],
+  accessory:'RaceSeat',
   colors: ['grey','black', 'blue', 'goldenrod', 'azure', 'lightslategray' ],
   decals: ['react', 'three2', 'pmndrs'],
   color: 'black',

diff --git a/src/elements/about/AboutThree.js b/src/elements/about/AboutThree.js
@@ -2,7 +2,6 @@ import React from 'react';
 import {Link} from "react-router-dom";
 import { FiArrowRight } from "react-icons/fi";
 import AccordionOne from '../accordion/AccordionOne';
-import ScrollAnimation from "react-animate-on-scroll";
 
 const AbouThree = () => {
     return (

diff --git a/src/elements/counterup/CounterUpOne.js b/src/elements/counterup/CounterUpOne.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import CountUp from 'react-countup';
 import TrackVisibility from "react-on-screen";
-import ScrollAnimation from "react-animate-on-scroll";
-
 
 const Data = [
     {