crt-component

package.json

@@ -9,14 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@next/font": "^13.4.12",
     "@types/node": "20.2.5",
     "@types/p5": "^1.6.2",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
     "@types/three": "^0.154.0",
     "eslint": "8.41.0",
     "eslint-config-next": "13.4.4",
-    "lucide-react": "^0.260.0",
     "next": "13.4.4",
     "p5": "^1.6.0",
     "react": "18.2.0",

src/app/page.tsx

@@ -1,17 +1,27 @@
 "use client";
+import React, {useState} from 'react';
 import styles from '../css/page.module.css';
 import  Terminal  from '@/components/Terminal';
 import Typewriter from '@/components/Typewriter';
 import Model from '@/components/Model';
-import Controls from '@/components/Controls'
-import localFont from 'next/font/local';
+import Controls from '@/components/Controls';
+import Image from 'next/image'
 
-const dotFont = localFont({ src: './e-dot-digital-7.ttf' })
+var enableCrt:boolean = true;
 
 export default function Home() {
+
+  const [currentCrt, setCrt] = useState(false)
+  var scanlines = currentCrt ? styles.scanlines : styles.hidden;
+  var scanner = currentCrt ? styles.scanner : styles.hidden;
+  var bright = currentCrt ? styles.bright : styles.main;
+
+
   return (
-    <main className={styles.main}>
-      <Typewriter text={'  Front-End Developer'}/> {/* TODO What is wrong with the position 1? */}
+    <main className={bright}>
+      <span className={scanner}></span>
+      <Image src="/scanlines.jpg" width={500} height={500} className={scanlines} alt="image" />
+      <Typewriter text={'F ront-End Developer'}/> {/* TODO What is wrong with the position 1? */}
       <div className={styles.grid}>
             <Terminal/>
             <section className={styles.column}>
@@ -20,7 +30,7 @@ export default function Home() {
                 </article>
                 <article className={styles.bars}></article>
                 <article className={styles.controls}>
-                    <Controls/>
+                    <Controls changeState={(currentCrt) => setCrt(currentCrt)} />
                 </article>
             </section>
       </div>

src/components/Controls.tsx

@@ -1,18 +1,30 @@
-import React, {useState, useEffect, useRef} from 'react';
-import localFont from 'next/font/local';
+import React, { useState } from 'react';
 import styles from '../css/controls.module.css';
 
-const dotFont = localFont({ src: '../app/e-dot-digital-7.ttf' })
+interface ControlsProps {
+  changeState: (newValue: boolean) => void;
+}
 
-const Controls = () => {
+const Controls: React.FC<ControlsProps> = ({ changeState }) => {
+  const [crt, setCrt] = useState(false);
 
-    return (
-      <section className={styles.container}>
-          <input className={styles.checkbox} type="checkbox" />
-          <input className={styles.checkbox} type="checkbox" />
-          <input className={styles.checkbox} type="checkbox" />
-      </section>
-    )
+  const handleChange = () => {
+    const newValue = !crt;
+    setCrt(newValue);
+    changeState(newValue);
+  };
+
+  return (
+    <section className={styles.container}>
+      <input
+        className={styles.checkbox}
+        type="checkbox"
+        checked={crt}
+        onChange={handleChange}
+      />
+      <label htmlFor="">CRT Controls</label>
+    </section>
+  );
 };
 
 export default Controls;

src/components/Model.tsx

@@ -13,15 +13,16 @@ const AsciiCube = () => {
     camera.position.z = 5;
 
     const geometry = new THREE.BoxGeometry(1, 1, 1);
-    const material = new THREE.MeshBasicMaterial({ color: 0xffffff, /* transparent: true  */});
-    const cube = new THREE.Mesh(geometry, material);
-    scene.add(cube);
+    const edges = new THREE.EdgesGeometry(geometry);
+    const material = new THREE.LineBasicMaterial({ color: 0xffffff });
+    const wireframe = new THREE.LineSegments(edges, material);
+    scene.add(wireframe);
 
     const animate = () => {
       requestAnimationFrame(animate);
 
-      cube.rotation.x += 0.01;
-      cube.rotation.y += 0.01;
+      wireframe.rotation.x += 0.01;
+      wireframe.rotation.y += 0.01;
 
       renderer.render(scene, camera);
     };