{"size": 3847, "ext": "js", "max_stars_repo_path": "src/components/Home.js", "max_stars_repo_name": "gideonchrapko/RyanWCCDrops", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Home.js", "max_issues_repo_name": "gideonchrapko/RyanWCCDrops", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Home.js", "max_forks_repo_name": "gideonchrapko/RyanWCCDrops", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.1700680272, "max_line_length": 134, "alphanum_fraction": 0.570054588}
import { Vector3 } from 'three'
import React, { Suspense, useEffect, useState } from 'react';
import { Canvas, useFrame } from '@react-three/fiber'
import { SpotLight, Html } from '@react-three/drei'
import { useDrag } from 'react-use-gesture'

import Controls from '../components3D/Controls';
import Objects from '../components3D/Objects';
import Loading from '../lottie/Loading';
import Swipe from '../lottie/Swipe';
import Header from './Header';
import Footer from './Footer';

import Left from '../images/arrowLeft.png';
import Right from '../images/arrowRight.png';

const vec = new Vector3()

function MovingSpot(props) {
  const [light, set] = useState()
  const [z, setZ] = useState()

  useEffect(() => {
    const z = document.documentElement.clientWidth / 150
	if (z >= 6) {
		setZ(2.9)
	} if (z <= 6) {
		setZ(4.5)
	}
},[]) 

console.log(z, "inside of the moving spot")

  useFrame((state) => {
	light.target.position.lerp(vec.set(state.mouse.x / 5, -0.5, `${z}`), 1)
  })

  return (
	<group position={[0.09, 0.09, 0]}>
	  <SpotLight ref={set} castShadow penumbra={1} distance={10} angle={0.3} attenuation={6} anglePower={5} intensity={4.5} {...props} />
      {light && <primitive object={light.target} />}
    </group>
  )
}

const Home = () => {
	const [lottieControl, setLottieControl] = useState()
	const [rotation, setRotation] = useState([0, 0, 0])
    const [dragRot, setDragRot] = useState({ x: 0})
	const [z, setZ] = useState()

	useEffect(() => {
	  const z = document.documentElement.clientWidth / 150
	  if (z >= 6) {
		  setZ(2.9)
	  } if (z <= 6) {
		  setZ(4.5)
	  }
  },[]) 

	const bind = useDrag((params) => {
        setDragRot({ x: params.offset[0] })
		setLottieControl(true)
      })

      useEffect(() => {
        const rotationSpeed = dragRot.x / 120
        const RotDistance = rotationSpeed / 2.094395
        const intRot = Math.floor(RotDistance)
        rotation[1] = intRot * 2.094395
        setRotation([...rotation])
      },[dragRot])

	const handleClickLeft = () => {
		rotation[1] += 2 * Math.PI / 3
		setRotation([...rotation]);
	};

	const handleClickRight = () => {
		rotation[1] -= 2 * Math.PI / 3
		setRotation([...rotation]);
	};

	return (
		<div>
			<Header/>
			<div
				style={{ 
					marginRight: "0px", 
					top: "50vh", 
					position: "fixed", 
					zIndex: "9",
				 }}
			>
				<img
					src={Right}
					alt="right"
					onClick={handleClickRight}
					onPointerDown={() => setLottieControl(true)}
					className="arrowR"
				/>
				<img
					src={Left}
					alt="left"
					onClick={handleClickLeft}
					onPointerDown={() => setLottieControl(true)}
					className="arrowL"
				/>
			</div>
			{!lottieControl ?
				<Swipe /> 
				:
				<span></span>
			}
				<Canvas shadows dpr={[1, 2]} camera={{ position: [0, 0, -2], fov: 50, near: 1, far: 20 }}>
					<color attach="background" args={['black']} {...bind()}/>
					<pointLight position={[0, 0, 0]} intensity={1.5} color={'#0074ff'} />
					<fog attach="fog" args={['black', 1, 16]} />
					<MovingSpot z={z} color="#b00c3f" position={[-1.9, 2, `${z}`]} />
      				<MovingSpot z={z} color="#0083ff" position={[1.9, 2, `${z}`]} />
					<Controls />
					<Suspense fallback={<Html center><Loading/></Html>}>
						<group rotation={[0, -0.55, 0]} position={[0, 0, 6]} scale={0.5}>
							<Objects rotation={rotation} />
						</group>
					</Suspense>
					<mesh 
						receiveShadow position={[0, -1.7, 0]} 
						rotation-x={-Math.PI / 2} {...bind()} 
					>
						<planeGeometry args={[50, 50]} />
						<meshPhongMaterial color="#5e5e5e" />
					</mesh>
					<mesh 
						receiveShadow position={[0, 0, 20]} 
						rotation-y={Math.PI / 1} {...bind()} 
					>
						<planeGeometry args={[50, 50]} />
						<meshPhongMaterial color="#000000" />
					</mesh>
				</Canvas>
			<Footer />
		</div>
	)
}

export default Home