Finished Technical Assessment from Kristopher Sorensen

.vscode/tjs.code-snippets

@@ -0,0 +1,187 @@
+{
+	// ALL SNIPETS FOR R3F and REACT
+	"Basic r3f scene": {
+		"scope": "javascript,typescript,react,typescriptreact",
+		"prefix": "tjs",
+		"body": [
+			"import React from 'react';",
+			"import * as three from 'three';",
+			"import { Plane } from '@react-three/drei';",
+			"import { useThree } from '@react-three/fiber';\n",
+			"const $1 = () => {\n",
+			"\t$0\n",
+			"\treturn(",
+			"\t\t<mesh position={[0,0,0]} >",
+			"\t\t\t<Plane>",
+			"\t\t\t\t<meshBasicMaterial color={'red'} />",
+			"\t\t\t</Plane>",
+			"\t\t</mesh>",
+			"\t)",
+			"}\n",
+			"export default $1;",
+		],
+		"description": "Basic r3f scene"
+	},
+	"r3f canvas scene": {
+		"scope": "javascript,typescript,react,typescriptreact",
+		"prefix": "tjc",
+		"body": [
+			"import React, {Suspense} from 'react';",
+			"import * as three from 'three';",
+			"import { Loader } from '@react-three/drei';",
+			"import { Canvas } from '@react-three/fiber';\n",
+			"import $2 from './$2'\n",
+			"const $1 = () => {\n",
+			"\t$0\n",
+			"\treturn(",
+			"\t\t<div style={{ width: '100%', height: '100vh', position: 'fixed', top: 0, left: 0, outline: 'none' }} >",
+			"\t\t\t<Canvas >",
+			"\t\t\t\t<Suspense fallback={<Loader />}>",
+			"\t\t\t\t\t <$2/>",
+			"\t\t\t\t</Suspense>",
+			"\t\t\t</Canvas>",
+			"\t\t</div>",
+			"\t)",
+			"}\n",
+			"export default $1;",
+		],
+		"description": "r3f canvas scene"
+	},
+	"useFrame": {
+		"scope": "javascript,typescript,react,typescriptreact",
+		"prefix": "uf",
+		"body": [
+			"$2useFrame(($1) => {",
+			"\t$0",
+			"})"
+		],
+		"description": "useFrame"
+	},
+	"useEffect": {
+		"scope": "javascript,typescript,react,typescriptreact",
+		"prefix": "ue",
+		"body": [
+			"$3useEffect(() => {",
+			"\t$0",
+			"}${1:,[$2]})"
+		],
+		"description": "useEffect"
+	},
+	"shader r3f component": {
+		"scope": "javascript,typescript,react,typescriptreact",
+		"prefix": "tsc",
+		"body": [
+			"import React from 'react';",
+			"import * as three from 'three';",
+			"import { Plane } from '@react-three/drei';",
+			"import { extend, useThree } from '@react-three/fiber';\n",
+			"import $2 from '../../shaders/$3'\n",
+			"extend({ $2 })\n",
+			"const $1 = () => {\n",
+			"\tconst { viewport } = useThree()\n",
+			"\treturn (",
+			"\t\t<mesh position={[0,0,0]} >",
+			"\t\t\t<Plane args={[ viewport.width, viewport.heigh ]}>",
+			"\t\t\t\t<$4$2/>",
+			"\t\t\t</Plane>",
+			"\t\t</mesh>",
+			"\t)",
+			"}\n\n",
+			"export default $1;"
+		],
+		"description": "shader r3f component"
+	},
+	"React component": {
+		"scope": "javascript,typescript,react,typescriptreact",
+		"prefix": "rc",
+		"body": [
+			"import React from 'react';\n\n",
+			"const $1 = () => {\n\n",
+			"\treturn (",
+			"\t\t<div>",
+			"\t\t\t$2",
+			"\t\t</div>",
+			"\t)",
+			"}\n\n",
+			"export default $1;"
+		],
+		"description": "React component"
+	},
+	"shader component": {
+		"scope": "javascript,typescript,react,typescriptreact",
+		"prefix": "sc",
+		"body": [
+			"import * as three from 'three';",
+			"import { shaderMaterial } from '@react-three/drei';;",
+			"import glsl from 'babel-plugin-glsl/macro.js';\n\n",
+			"const $1 = shaderMaterial(\n",
+			"\t{ $2 },\n",
+			"\t// Vertex Shader",
+			"\t glsl`",
+			"\t\tvarying vec2 vuv;\n",
+			"\t\tvoid main(){\n",
+			"\t\t\tvec4 modelPosition = modelMatrix * vec4(position, 1.0);\n",
+			"\t\t\t$3\n",
+			"\t\t\t// Final",
+			"\t\t\tvec4 viewPosition = viewMatrix * modelPosition;",
+			"\t\t\tvec4 projectedPosition = projectionMatrix * viewPosition;",
+			"\t\t\tgl_Position = projectedPosition;\n",
+			"\t\t\t// Props",
+			"\t\t\tvuv = uv;",
+			"\t}`,\n",
+			"\t// Fragment Shader",
+			"\t glsl`",
+			"\t\tvarying vec2 vuv;",
+			"\t\tvoid main(){\n",
+			"\t\t\tvec2 xy = vuv -.5;\n",
+			"\t\t\t$4\n",
+			"\t\t\tvec3 col = vec3(1.,0.,0.);\n",
+			"\t\t\t// Final",
+			"\t\t\tgl_FragColor = vec4(col, 1.);",
+			"\t}`\n",
+			");\n\n",
+			"export default $1;"
+		],
+		"description": "shader component"
+	},
+	"useState": {
+		"scope": "javascript,typescript,react,typescriptreact",
+		"prefix": "us",
+		"body": [
+			"const [$1,set$2] = $4useState($3)$0"
+		],
+		"description": "useState"
+	},
+	"useRef": {
+		"scope": "javascript,typescript,react,typescriptreact",
+		"prefix": "ur",
+		"body": [
+			"const $1 = $2useRef($3)$0"
+		],
+		"description": "useRef"
+	},
+	"console.log()": {
+		"scope": "javascript,typescript,react,typescriptreact",
+		"prefix": "cl",
+		"body": [
+			"console.log(`${1:Here}`,$2)$0"
+		],
+		"description": "console.log()"
+	},
+	"useControls": {
+		"scope": "javascript,typescript,react,typescriptreact",
+		"prefix": "uc",
+		"body": [
+			" const $1 = $7useControls({ $2: { value: $3, min: ${4:0}, max: ${5:1}, step: ${6:.001}}, $8 });$0"
+		],
+		"description": "useControls"
+	},
+	"useControls add": {
+		"scope": "javascript,typescript,react,typescriptreact",
+		"prefix": "ac",
+		"body": [
+			"\n$1: { value: $2, min: ${3:0}, max: ${4:1}, step: ${5:.001}}, $6"
+		],
+		"description": "useControls"
+	},
+}

frontend/.eslintrc.js

@@ -48,6 +48,7 @@ module.exports = {
       files: '*.ts',
       parserOptions: {
         project: tsconfigs,
+        tsconfigRootDir: __dirname / frontend / tsconfig
       },
       rules: ruleOverrides,
     },

frontend/package.json

@@ -13,9 +13,14 @@
     "test:ci": "NODE_ENV=test jest --ci --reporters jest-silent-reporter"
   },
   "dependencies": {
-    "next": "12.1.6",
+    "@react-three/drei": "^9.32.1",
+    "@react-three/fiber": "^8.8.2",
+    "babel-plugin-glsl": "^1.0.0",
+    "gsap": "^3.11.1",
+    "next": "^12.1.6",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "three": "^0.144.0"
   },
   "devDependencies": {
     "@types/jest": "28.1.3",

frontend/src/pages/CanvasComponent.tsx

@@ -0,0 +1,21 @@
+import React, { Suspense } from 'react';
+import * as three from 'three';
+import { Loader } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+
+import GlowingOrbs from './GlowingOrbs';
+
+const CanvasComponent = () => {
+
+    return (
+        <div style={ { width: '100%', height: '100vh', position: 'fixed', top: 0, left: 0, outline: 'none' } } >
+            <Canvas >
+                <Suspense fallback={ <Loader /> }>
+                    <GlowingOrbs />
+                </Suspense>
+            </Canvas>
+        </div >
+    );
+};
+
+export default React.memo(CanvasComponent);

frontend/src/pages/Component.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import Portal from './util/Portal';
+import Modal from './Modal';
+import CanvasComponent from './CanvasComponent';
+import gsap from 'gsap';
+
+const OpenBtnStyles = {
+    background: "none",
+    color: "white",
+    padding: ".8rem",
+    fontSize: "1rem",
+    fontWeight: "bold",
+    border: '1.7px solid #aaa',
+    borderRadius: "9px",
+    fontFamily: '"Lucida Console", "Courier New", monospace',
+    top: '50%',
+    left: '50%',
+    position: "relative",
+    transform: "translate(-50%, -50%)",
+    maxWidth: '80%',
+    textShadow: '1px 1px 2px #000, 1px 1px 5px #ccc',
+
+} as React.CSSProperties;
+
+const ContainerStyles = {
+    position: "relative",
+    width: "100%",
+    height: "100vh",
+    margin: 0,
+    padding: 0
+} as React.CSSProperties;
+
+
+const Component = () => {
+
+    const [modalOpen, setModalOpen] = useState<boolean>(false);
+    const [hovered, setHovered] = useState(false);
+    const btn = useRef(null);
+
+    useEffect(() => {
+        const body = document.querySelector('body');
+        if(body !== null) {
+            body.style.overflow = modalOpen ? 'hidden' : 'auto';
+        }
+    }, [modalOpen]);
+
+    const handleHover = () => {
+        if(btn.current === null) return;
+        if(!hovered) {
+            gsap.to(btn.current["style"], {
+                color: 'black',
+                background: 'white',
+                textShadow: 'none',
+                duration: 1.5,
+            });
+        } else {
+            gsap.to(btn.current["style"], {
+                color: 'white',
+                background: 'black',
+                duration: 1,
+            });
+        }
+        setHovered(!hovered);
+    };
+
+    return (
+        <>
+            <CanvasComponent />
+            <div style={ ContainerStyles }>
+                <button
+                    ref={ btn }
+                    onMouseEnter={ handleHover }
+                    onMouseLeave={ handleHover }
+                    style={ OpenBtnStyles }
+                    type="button"
+                    onClick={ () => setModalOpen(true) }
+                >click me</button>
+                <Portal selector='#portal'>
+                    <Modal open={ modalOpen } closeModal={ () => setModalOpen(false) }><h2 style={ { textAlign: 'center' } } >Hello Contra Team!!</h2></Modal>
+                </Portal>
+            </div>
+
+        </ >
+
+    );
+};
+
+export default Component;