WorkSimplon/brief-07-front
WorkSimplon/brief-07-front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Revert "hero implemented first stape"

Browse Source 
This reverts commit ae8cd7f6b41b9d0b30eb63e2e4c74520e4e8a8bd.
This commit is contained in:
Mus9617 2024-06-07 14:19:56 +02:00
parent ae8cd7f6b4
commit 35dcff135f
5 changed files with 2 additions and 13045 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -67,7 +67,6 @@
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^18", "@types/react": "^18",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"@types/three": "^0.165.0",
"postcss": "^8", "postcss": "^8",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"typescript": "^5" "typescript": "^5"

12
src/app/page.tsx
View File

@ -1,17 +1,9 @@
import { Hero } from "@/components/hero";
import Image from "next/image"; import Image from "next/image";
export default function Home() { export default function Home() {
return ( return (
<main className="flex flex-col items-center justify-end h-full w-2/4"> <main className="flex flex-col items-center justify-between p-24">
<Hero> <h1>Hello world !</h1>
<h2 className="text-center text-xl md:text-4xl font-bold text-yellow-500 dark:text-white">
YELOBIT
</h2>
<p className="text-center text-base md:text-lg font-normal text-neutral-700 dark:text-neutral-200 max-w-md mt-2 mx-auto">
The Best CFD Exchange in The Market !
</p>
</Hero>
</main> </main>
); );
} }

423
src/components/hero.tsx
View File

@ -1,423 +0,0 @@
"use client";
import React from "react";
import { motion } from "framer-motion";
import dynamic from "next/dynamic";
const World = dynamic(() => import("@/components/ui/globe").then((m) => m.World), {
ssr: false,
});
export function Hero ({children}: { children: React.ReactNode }) {
const globeConfig = {
pointSize: 4,
globeColor: "#062056",
showAtmosphere: true,
atmosphereColor: "#FFFFFF",
atmosphereAltitude: 0.1,
emissive: "#062056",
emissiveIntensity: 0.1,
shininess: 0.9,
polygonColor: "rgba(255,255,255,0.7)",
ambientLight: "#38bdf8",
directionalLeftLight: "#ffffff",
directionalTopLight: "#ffffff",
pointLight: "#ffffff",
arcTime: 1000,
arcLength: 0.9,
rings: 1,
maxRings: 3,
initialPosition: { lat: 22.3193, lng: 114.1694 },
autoRotate: true,
autoRotateSpeed: 0.5,
};
const colors = ["#06b6d4", "#3b82f6", "#6366f1"];
const sampleArcs = [
{
order: 1,
startLat: -19.885592,
startLng: -43.951191,
endLat: -22.9068,
endLng: -43.1729,
arcAlt: 0.1,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 1,
startLat: 28.6139,
startLng: 77.209,
endLat: 3.139,
endLng: 101.6869,
arcAlt: 0.2,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 1,
startLat: -19.885592,
startLng: -43.951191,
endLat: -1.303396,
endLng: 36.852443,
arcAlt: 0.5,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 2,
startLat: 1.3521,
startLng: 103.8198,
endLat: 35.6762,
endLng: 139.6503,
arcAlt: 0.2,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 2,
startLat: 51.5072,
startLng: -0.1276,
endLat: 3.139,
endLng: 101.6869,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 2,
startLat: -15.785493,
startLng: -47.909029,
endLat: 36.162809,
endLng: -115.119411,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 3,
startLat: -33.8688,
startLng: 151.2093,
endLat: 22.3193,
endLng: 114.1694,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 3,
startLat: 21.3099,
startLng: -157.8581,
endLat: 40.7128,
endLng: -74.006,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 3,
startLat: -6.2088,
startLng: 106.8456,
endLat: 51.5072,
endLng: -0.1276,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 4,
startLat: 11.986597,
startLng: 8.571831,
endLat: -15.595412,
endLng: -56.05918,
arcAlt: 0.5,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 4,
startLat: -34.6037,
startLng: -58.3816,
endLat: 22.3193,
endLng: 114.1694,
arcAlt: 0.7,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 4,
startLat: 51.5072,
startLng: -0.1276,
endLat: 48.8566,
endLng: -2.3522,
arcAlt: 0.1,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 5,
startLat: 14.5995,
startLng: 120.9842,
endLat: 51.5072,
endLng: -0.1276,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 5,
startLat: 1.3521,
startLng: 103.8198,
endLat: -33.8688,
endLng: 151.2093,
arcAlt: 0.2,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 5,
startLat: 34.0522,
startLng: -118.2437,
endLat: 48.8566,
endLng: -2.3522,
arcAlt: 0.2,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 6,
startLat: -15.432563,
startLng: 28.315853,
endLat: 1.094136,
endLng: -63.34546,
arcAlt: 0.7,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 6,
startLat: 37.5665,
startLng: 126.978,
endLat: 35.6762,
endLng: 139.6503,
arcAlt: 0.1,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 6,
startLat: 22.3193,
startLng: 114.1694,
endLat: 51.5072,
endLng: -0.1276,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 7,
startLat: -19.885592,
startLng: -43.951191,
endLat: -15.595412,
endLng: -56.05918,
arcAlt: 0.1,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 7,
startLat: 48.8566,
startLng: -2.3522,
endLat: 52.52,
endLng: 13.405,
arcAlt: 0.1,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 7,
startLat: 52.52,
startLng: 13.405,
endLat: 34.0522,
endLng: -118.2437,
arcAlt: 0.2,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 8,
startLat: -8.833221,
startLng: 13.264837,
endLat: -33.936138,
endLng: 18.436529,
arcAlt: 0.2,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 8,
startLat: 49.2827,
startLng: -123.1207,
endLat: 52.3676,
endLng: 4.9041,
arcAlt: 0.2,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 8,
startLat: 1.3521,
startLng: 103.8198,
endLat: 40.7128,
endLng: -74.006,
arcAlt: 0.5,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 9,
startLat: 51.5072,
startLng: -0.1276,
endLat: 34.0522,
endLng: -118.2437,
arcAlt: 0.2,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 9,
startLat: 22.3193,
startLng: 114.1694,
endLat: -22.9068,
endLng: -43.1729,
arcAlt: 0.7,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 9,
startLat: 1.3521,
startLng: 103.8198,
endLat: -34.6037,
endLng: -58.3816,
arcAlt: 0.5,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 10,
startLat: -22.9068,
startLng: -43.1729,
endLat: 28.6139,
endLng: 77.209,
arcAlt: 0.7,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 10,
startLat: 34.0522,
startLng: -118.2437,
endLat: 31.2304,
endLng: 121.4737,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 10,
startLat: -6.2088,
startLng: 106.8456,
endLat: 52.3676,
endLng: 4.9041,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 11,
startLat: 41.9028,
startLng: 12.4964,
endLat: 34.0522,
endLng: -118.2437,
arcAlt: 0.2,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 11,
startLat: -6.2088,
startLng: 106.8456,
endLat: 31.2304,
endLng: 121.4737,
arcAlt: 0.2,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 11,
startLat: 22.3193,
startLng: 114.1694,
endLat: 1.3521,
endLng: 103.8198,
arcAlt: 0.2,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 12,
startLat: 34.0522,
startLng: -118.2437,
endLat: 37.7749,
endLng: -122.4194,
arcAlt: 0.1,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 12,
startLat: 35.6762,
startLng: 139.6503,
endLat: 22.3193,
endLng: 114.1694,
arcAlt: 0.2,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 12,
startLat: 22.3193,
startLng: 114.1694,
endLat: 34.0522,
endLng: -118.2437,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 13,
startLat: 52.52,
startLng: 13.405,
endLat: 22.3193,
endLng: 114.1694,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 13,
startLat: 11.986597,
startLng: 8.571831,
endLat: 35.6762,
endLng: 139.6503,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 13,
startLat: -22.9068,
startLng: -43.1729,
endLat: -34.6037,
endLng: -58.3816,
arcAlt: 0.1,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
{
order: 14,
startLat: -33.936138,
startLng: 18.436529,
endLat: 21.395643,
endLng: 39.883798,
arcAlt: 0.3,
color: colors[Math.floor(Math.random() * (colors.length - 1))],
},
];
return (
<div className="flex flex-row items-center justify-center py-20 h-screen md:h-auto relative w-full">
<div className="max-w-7xl mx-auto w-full relative overflow-hidden h-full md:h-[40rem] px-4">
<motion.div
initial={{
opacity: 0,
y: 20,
}}
animate={{
opacity: 1,
y: 0,
}}
transition={{
duration: 1,
}}
className="div"
>
{children}
</motion.div>
<div className="absolute w-full bottom-0 inset-x-0 h-40 pointer-events-none select-none z-40" />
<div className="absolute w-full -bottom-20 h-72 md:h-full z-10">
<World data={sampleArcs} globeConfig={globeConfig} />;
</div>
</div>
</div>
);
}

305
src/components/ui/globe.tsx
View File

@ -1,305 +0,0 @@
"use client";
import { useEffect, useRef, useState } from "react";
import { Color, Scene, Fog, PerspectiveCamera, Vector3 } from "three";
import ThreeGlobe from "three-globe";
import { useThree, Object3DNode, Canvas, extend } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import countries from "@/data/globe.json";
declare module "@react-three/fiber" {
interface ThreeElements {
threeGlobe: Object3DNode<ThreeGlobe, typeof ThreeGlobe>;
}
}
extend({ ThreeGlobe });
const RING_PROPAGATION_SPEED = 3;
const aspect = 1.2;
const cameraZ = 300;
type Position = {
order: number;
startLat: number;
startLng: number;
endLat: number;
endLng: number;
arcAlt: number;
color: string;
};
export type GlobeConfig = {
pointSize?: number;
globeColor?: string;
showAtmosphere?: boolean;
atmosphereColor?: string;
atmosphereAltitude?: number;
emissive?: string;
emissiveIntensity?: number;
shininess?: number;
polygonColor?: string;
ambientLight?: string;
directionalLeftLight?: string;
directionalTopLight?: string;
pointLight?: string;
arcTime?: number;
arcLength?: number;
rings?: number;
maxRings?: number;
initialPosition?: {
lat: number;
lng: number;
};
autoRotate?: boolean;
autoRotateSpeed?: number;
};
interface WorldProps {
globeConfig: GlobeConfig;
data: Position[];
}
let numbersOfRings = [0];
export function Globe({ globeConfig, data }: WorldProps) {
const [globeData, setGlobeData] = useState<
| {
size: number;
order: number;
color: (t: number) => string;
lat: number;
lng: number;
}[]
| null
>(null);
const globeRef = useRef<ThreeGlobe | null>(null);
const defaultProps = {
pointSize: 1,
atmosphereColor: "#ffffff",
showAtmosphere: true,
atmosphereAltitude: 0.1,
polygonColor: "rgba(255,255,255,0.7)",
globeColor: "#1d072e",
emissive: "#000000",
emissiveIntensity: 0.1,
shininess: 0.9,
arcTime: 2000,
arcLength: 0.9,
rings: 1,
maxRings: 3,
...globeConfig,
};
useEffect(() => {
if (globeRef.current) {
_buildData();
_buildMaterial();
}
}, [globeRef.current]);
const _buildMaterial = () => {
if (!globeRef.current) return;
const globeMaterial = globeRef.current.globeMaterial() as unknown as {
color: Color;
emissive: Color;
emissiveIntensity: number;
shininess: number;
};
globeMaterial.color = new Color(globeConfig.globeColor);
globeMaterial.emissive = new Color(globeConfig.emissive);
globeMaterial.emissiveIntensity = globeConfig.emissiveIntensity || 0.1;
globeMaterial.shininess = globeConfig.shininess || 0.9;
};
const _buildData = () => {
const arcs = data;
let points = [];
for (let i = 0; i < arcs.length; i++) {
const arc = arcs[i];
const rgb = hexToRgb(arc.color) as { r: number; g: number; b: number };
points.push({
size: defaultProps.pointSize,
order: arc.order,
color: (t: number) => `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${1 - t})`,
lat: arc.startLat,
lng: arc.startLng,
});
points.push({
size: defaultProps.pointSize,
order: arc.order,
color: (t: number) => `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${1 - t})`,
lat: arc.endLat,
lng: arc.endLng,
});
}
// remove duplicates for same lat and lng
const filteredPoints = points.filter(
(v, i, a) =>
a.findIndex((v2) =>
["lat", "lng"].every(
(k) => v2[k as "lat" | "lng"] === v[k as "lat" | "lng"]
)
) === i
);
setGlobeData(filteredPoints);
};
useEffect(() => {
if (globeRef.current && globeData) {
globeRef.current
.hexPolygonsData(countries.features)
.hexPolygonResolution(3)
.hexPolygonMargin(0.7)
.showAtmosphere(defaultProps.showAtmosphere)
.atmosphereColor(defaultProps.atmosphereColor)
.atmosphereAltitude(defaultProps.atmosphereAltitude)
.hexPolygonColor((e) => {
return defaultProps.polygonColor;
});
startAnimation();
}
}, [globeData]);
const startAnimation = () => {
if (!globeRef.current || !globeData) return;
globeRef.current
.arcsData(data)
.arcStartLat((d) => (d as { startLat: number }).startLat * 1)
.arcStartLng((d) => (d as { startLng: number }).startLng * 1)
.arcEndLat((d) => (d as { endLat: number }).endLat * 1)
.arcEndLng((d) => (d as { endLng: number }).endLng * 1)
.arcColor((e: any) => (e as { color: string }).color)
.arcAltitude((e) => {
return (e as { arcAlt: number }).arcAlt * 1;
})
.arcStroke((e) => {
return [0.32, 0.28, 0.3][Math.round(Math.random() * 2)];
})
.arcDashLength(defaultProps.arcLength)
.arcDashInitialGap((e) => (e as { order: number }).order * 1)
.arcDashGap(15)
.arcDashAnimateTime((e) => defaultProps.arcTime);
globeRef.current
.pointsData(data)
.pointColor((e) => (e as { color: string }).color)
.pointsMerge(true)
.pointAltitude(0.0)
.pointRadius(2);
globeRef.current
.ringsData([])
.ringColor((e: any) => (t: any) => e.color(t))
.ringMaxRadius(defaultProps.maxRings)
.ringPropagationSpeed(RING_PROPAGATION_SPEED)
.ringRepeatPeriod(
(defaultProps.arcTime * defaultProps.arcLength) / defaultProps.rings
);
};
useEffect(() => {
if (!globeRef.current || !globeData) return;
const interval = setInterval(() => {
if (!globeRef.current || !globeData) return;
numbersOfRings = genRandomNumbers(
0,
data.length,
Math.floor((data.length * 4) / 5)
);
globeRef.current.ringsData(
globeData.filter((d, i) => numbersOfRings.includes(i))
);
}, 2000);
return () => {
clearInterval(interval);
};
}, [globeRef.current, globeData]);
return (
<>
<threeGlobe ref={globeRef} />
</>
);
}
export function WebGLRendererConfig() {
const { gl, size } = useThree();
useEffect(() => {
gl.setPixelRatio(window.devicePixelRatio);
gl.setSize(size.width, size.height);
gl.setClearColor(0xffaaff, 0);
}, []);
return null;
}
export function World(props: WorldProps) {
const { globeConfig } = props;
const scene = new Scene();
scene.fog = new Fog(0xffffff, 400, 2000);
return (
<Canvas scene={scene} camera={new PerspectiveCamera(50, aspect, 180, 1800)}>
<WebGLRendererConfig />
<ambientLight color={globeConfig.ambientLight} intensity={0.6} />
<directionalLight
color={globeConfig.directionalLeftLight}
position={new Vector3(-400, 100, 400)}
/>
<directionalLight
color={globeConfig.directionalTopLight}
position={new Vector3(-200, 500, 200)}
/>
<pointLight
color={globeConfig.pointLight}
position={new Vector3(-200, 500, 200)}
intensity={0.8}
/>
<Globe {...props} />
<OrbitControls
enablePan={false}
enableZoom={false}
minDistance={cameraZ}
maxDistance={cameraZ}
autoRotateSpeed={1}
autoRotate={true}
minPolarAngle={Math.PI / 3.5}
maxPolarAngle={Math.PI - Math.PI / 3}
/>
</Canvas>
);
}
export function hexToRgb(hex: string) {
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function (m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
}
: null;
}
export function genRandomNumbers(min: number, max: number, count: number) {
const arr = [];
while (arr.length < count) {
const r = Math.floor(Math.random() * (max - min)) + min;
if (arr.indexOf(r) === -1) arr.push(r);
}
return arr;
}

12306
src/data/globe.json
View File

File diff suppressed because it is too large Load Diff