leftfieldlabs · Jeremboo · Nov 20, 2023 · Nov 27, 2023 · Nov 27, 2023 · Nov 27, 2023
diff --git a/.gitignore b/.gitignore
@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+
+build/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,13 +2,24 @@
   "name": "countdown",
   "version": "0.1.0",
   "private": true,
+  "homepage": "http://jeremieboulay.fr/LFL-assessment",
   "dependencies": {
+    "@nanostores/react": "^0.7.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "4.0.0",
+    "@types/jest": "^29.5.10",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "gsap": "^3.12.2",
+    "nanostores": "^0.9.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "three": "^0.158.0",
+    "troika-three-text": "^0.49.0",
+    "typescript": "^5.3.2",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
@@ -34,5 +45,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@tweakpane/core": "^2.0.1",
+    "@types/three": "^0.158.3",
+    "i": "^0.3.7",
+    "npm": "^10.2.4",
+    "tweakpane": "^4.0.1"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>LFL Webgl Assessment</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "LFL Webgl Assessment",
+  "name": "LFL Webgl Assessment",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/App.js b/src/App.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,20 @@
+import './App.css';
+import './style/Countdown.css';
+import './style/Webgl.css';
+
+// import Countdown from './components/Countdown';
+import Webgl from 'components/Webgl';
+
+function App() {
+  return (
+    <div className="App">
+        {/* <Countdown /> */}
+        <Webgl />
+      <p className="f">
+        <a target="_blank" href="http://www.jeremieboulay.fr" rel="noreferrer">@Jeremboo</a><br /> ┗|｀O´|┛
+      </p>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/components/Countdown.jsx b/src/components/Countdown.jsx
diff --git a/src/components/Countdown.tsx b/src/components/Countdown.tsx
@@ -0,0 +1,34 @@
+import { useStore } from '@nanostores/react';
+
+import { timeLeft } from '../store/countdown';
+import { addLeadingZeros } from '../utils/index';
+
+
+export default function Countdown() {
+
+  const countDown = useStore(timeLeft);
+
+  return (
+    <div className="Countdown">
+        <span className="countdown-col">
+          <strong>{addLeadingZeros(countDown.days)}</strong>
+          <span>{countDown.days === 1 ? 'Day' : 'Days'}</span>
+        </span>
+
+        <span className="countdown-col">
+          <strong>{addLeadingZeros(countDown.hours)}</strong>
+          <span>Hours</span>
+        </span>
+
+        <span className="countdown-col">
+          <strong>{addLeadingZeros(countDown.min)}</strong>
+          <span>Min</span>
+        </span>
+
+        <span className="countdown-col">
+          <strong>{addLeadingZeros(countDown.sec)}</strong>
+          <span>Sec</span>
+        </span>
+      </div>
+  );
+}
diff --git a/src/components/Webgl.tsx b/src/components/Webgl.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useRef } from "react";
+import { useStore } from '@nanostores/react';
+
+import { windowSize } from "../store/windowSize";
+import WebglApp from '../webgl/index';
+
+
+export default function Webgl() {
+  const $windowSize = useStore(windowSize);
+
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const webglRef = useRef<WebglApp | null>(null);
+
+  useEffect(() => {
+    if (canvasRef.current && webglRef.current == null) {
+      webglRef.current = new WebglApp(canvasRef.current);
+      webglRef.current.load().then(() => {
+        webglRef.current.start();
+      }).catch((e) => {
+        console.error('ERROR:', e);
+      });
+    }
+
+    return () => {
+      webglRef.current?.dispose();
+    };
+  }, []);
+
+  useEffect(() => {
+    webglRef.current?.resize($windowSize.width, $windowSize.height);
+  }, [$windowSize]);
+
+  return <canvas ref={canvasRef} className="Webgl"></canvas>;
+}
diff --git a/src/data/index.ts b/src/data/index.ts
@@ -0,0 +1,10 @@
+
+export const END_DATE = '2024-05-01T00:00:00';
+
+export const COLORS = [
+  "#FCBC05",
+  "#4385F5",
+  "#E5443F",
+  "#34A853",
+  "#EDEDED"
+];
diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,16 @@
+
+
+:root {
+  --color-main: #202124;
+  --color-secondary: #4385F5;
+  --color-background: #EDEDED;
+}
 body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--color-background);
+  transition: background-color 0.5s;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -7,7 +19,34 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+body::after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(ellipse at 100% 0, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 50%,rgba(255, 255, 255, 0.3) 115%);
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+.f {
+  position: fixed;
+  bottom: 5px;
+  right: 15px;
+  font-family: 'Arial';
+  font-size: 0.7rem;
+  color: var(--color-main);
+  text-align: center;
+}
+
+a {
+  font-size: 0.8rem;
+  color: var(--color-secondary);
+}
diff --git a/src/index.js → src/index.tsx b/src/index.js → src/index.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+import { StrictMode } from 'react';
+import reportWebVitals from 'reportWebVitals';
+import { createRoot } from 'react-dom/client';
 
-ReactDOM.render(
-  <React.StrictMode>
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/src/store/countdown.ts b/src/store/countdown.ts
@@ -0,0 +1,15 @@
+import { atom, onMount } from 'nanostores';
+import { END_DATE } from '../data';
+import { calculateCountdown } from '../utils/index';
+
+export const timeLeft = atom(calculateCountdown(END_DATE));
+
+onMount(timeLeft, () => {
+  let interval = setInterval(() => {
+    timeLeft.set(calculateCountdown(END_DATE));
+  }, 1000);
+  return () => {
+    clearInterval(interval);
+  };
+});
+
diff --git a/src/store/mouseMove.ts b/src/store/mouseMove.ts
@@ -0,0 +1,13 @@
+import { atom, onMount } from 'nanostores';
+
+export const mousePosition = atom({ x: window.innerWidth * 0.5, y: window.innerHeight * 0.5 });
+
+onMount(mousePosition, () => {
+  const handleMouseMove = (e) => {
+    mousePosition.set({ x: e.clientX, y: e.clientY });
+  };
+  document.body.addEventListener('mousemove', handleMouseMove);
+  return () => {
+    document.body.removeEventListener('mousemove', handleMouseMove);
+  };
+});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -102,3 +102,6 @@ dist

		# TernJS port file
		.tern-port


		build/