From 64751a6c52cac7d9f30f8cf995f047b83db86bf6 Mon Sep 17 00:00:00 2001
From: JenniferJa <102393847+JenniferJa@users.noreply.github.com>
Date: Mon, 12 Feb 2024 19:41:47 -0700
Subject: [PATCH] car parts blink red, or orange (#57)

* Add textures to car graphic

* Added basic stuff for car indication flashing

Co-authored-by: JenniferJa <JenniferJa@users.noreply.github.com>

---------

Co-authored-by: ideen1 <ibanijamali@gmail.com>
Co-authored-by: JenniferJa <JenniferJa@users.noreply.github.com>
---
 .../HeroMolecules/CarGraphicComponent.tsx     | 70 ++++++++++++++++++-
 .../CarMolecules/CarModelComponent.tsx        |  7 +-
 package-lock.json                             | 17 +++++
 package.json                                  |  5 ++
 4 files changed, 95 insertions(+), 4 deletions(-)
 create mode 100644 package-lock.json
 create mode 100644 package.json

diff --git a/app/src/renderer/code/components/molecules/HeroMolecules/CarGraphicComponent.tsx b/app/src/renderer/code/components/molecules/HeroMolecules/CarGraphicComponent.tsx
index 3be06699..595bf107 100644
--- a/app/src/renderer/code/components/molecules/HeroMolecules/CarGraphicComponent.tsx
+++ b/app/src/renderer/code/components/molecules/HeroMolecules/CarGraphicComponent.tsx
@@ -1,13 +1,72 @@
-/* eslint-disable react/no-unknown-property */
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import * as THREE from "three";
 
 import { CarModelComponent } from "@/components/molecules/HeroMolecules/CarMolecules/CarModelComponent";
 import { RoadComponent } from "@/components/molecules/HeroMolecules/CarMolecules/RoadComponent";
 import { ContactShadows, OrbitControls } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
+import * as TWEEN from "@tweenjs/tween.js";
+
+export enum IndicationStates {
+  RED,
+  ORANGE,
+  CLEAR,
+}
+
+export type IndicationLocations = {
+  leftMotor: IndicationStates;
+  rightMotor: IndicationStates;
+  battery: IndicationStates;
+  solarPanel: IndicationStates;
+};
+
+type IndicationTriggerList = {
+  // TODO: Add indication triggers
+};
 
 function CarGraphicComponent(props: any) {
   const [isClear, changeClear] = useState(false);
+  const [indications, setIndications] = useState<IndicationLocations>({
+    leftMotor: IndicationStates.CLEAR,
+    rightMotor: IndicationStates.CLEAR,
+    battery: IndicationStates.CLEAR,
+    solarPanel: IndicationStates.CLEAR,
+  });
+
+  const errorMaterial = new THREE.MeshStandardMaterial({
+    color: 0xff0000,
+    transparent: true,
+    opacity: 0.8,
+  });
+
+  const warningMaterial = new THREE.MeshStandardMaterial({
+    color: 0xffa500,
+    transparent: true,
+    opacity: 0.8,
+  });
+
+  const initialIntensity = 0.1;
+  const targetIntensity = 0.8;
+  const duration = 500;
+
+  const tween = new TWEEN.Tween({ intensity: initialIntensity })
+    .to({ intensity: targetIntensity }, duration)
+    .easing(TWEEN.Easing.Quadratic.InOut)
+
+    .onUpdate(({ intensity }) => {
+      errorMaterial.opacity = intensity;
+      warningMaterial.opacity = intensity;
+    })
+    .yoyo(true)
+    .start()
+    .repeat(Infinity);
+
+  // Setup the animation loop.
+  function animate(time: number) {
+    tween.update(time);
+    requestAnimationFrame(animate);
+  }
+  animate(1);
 
   return (
     <>
@@ -18,7 +77,12 @@ function CarGraphicComponent(props: any) {
           shadow-mapSize={[512, 512]}
           castShadow
         />
-        <CarModelComponent isClear={isClear} />
+        <CarModelComponent
+          isClear={isClear}
+          errorMaterial={errorMaterial}
+          warningMaterial={warningMaterial}
+          indications={indications}
+        />
         <RoadComponent speed={7} size={15} />
         <ContactShadows
           position={[0, 0, 0]}
diff --git a/app/src/renderer/code/components/molecules/HeroMolecules/CarMolecules/CarModelComponent.tsx b/app/src/renderer/code/components/molecules/HeroMolecules/CarMolecules/CarModelComponent.tsx
index 3c111220..bb343977 100644
--- a/app/src/renderer/code/components/molecules/HeroMolecules/CarMolecules/CarModelComponent.tsx
+++ b/app/src/renderer/code/components/molecules/HeroMolecules/CarMolecules/CarModelComponent.tsx
@@ -4,6 +4,8 @@ import { type GLTF } from "three-stdlib";
 
 import { useGLTF } from "@react-three/drei";
 
+import { IndicationLocations, IndicationStates } from "../CarGraphicComponent";
+
 type HeliosCar = GLTF & {
   nodes: {
     Plane: THREE.Mesh;
@@ -147,6 +149,9 @@ type HeliosCar = GLTF & {
 
 type CarModelComponentProps = {
   isClear: boolean;
+  errorMaterial: THREE.MeshStandardMaterial;
+  warningMaterial: THREE.MeshStandardMaterial;
+  indications: IndicationLocations;
 };
 
 export function CarModelComponent(props: CarModelComponentProps) {
@@ -567,7 +572,7 @@ export function CarModelComponent(props: CarModelComponentProps) {
         castShadow
         receiveShadow
         geometry={nodes.Shape_IndexedFaceSet050.geometry}
-        material={materials["Shape.050"]}
+        material={props.warningMaterial}
         position={[-31.75, 0, -2872.13]}
         rotation={[Math.PI / 2, 0, -Math.PI]}
       />
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..63dd5bbc
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,17 @@
+{
+  "name": "Helios-Telemetry",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@tweenjs/tween.js": "^23.1.1"
+      }
+    },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.1",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.1.tgz",
+      "integrity": "sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw=="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..309e527c
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@tweenjs/tween.js": "^23.1.1"
+  }
+}