From a01a4e5334d1cba1565ffacb9a54fdc1efbb05bd Mon Sep 17 00:00:00 2001
From: Raymond0T <36683390+Raymond0T@users.noreply.github.com>
Date: Thu, 13 May 2021 16:55:04 -0700
Subject: [PATCH 1/2] Add files via upload

---
 App.js                 | 56 +++++++++++++++++++++---------------------
 Components/Lantern.css | 22 ++++++++++-------
 Components/Lantern.js  | 46 +++++++++++++++++++++++++++-------
 3 files changed, 78 insertions(+), 46 deletions(-)

diff --git a/App.js b/App.js
index 87b56ab..015d751 100644
--- a/App.js
+++ b/App.js
@@ -47,44 +47,44 @@ function App(){
   return (
     <div className="app"> 
       <div className="app__lightLeft__Side">
-        <Lantern posVert="14%" posHori="77%" color={option[color]} angle={45} showRay ={rayQueue[temp]}/>
-        <Lantern posVert="14%" posHori="74%" color={option[color]} angle={45} showRay ={rayQueue[temp]}/>
-        <Lantern posVert="14%" posHori="71%" color={option[color]} angle={45} showRay ={rayQueue[temp]}/>
-        <Lantern posVert="14%" posHori="68%" color={option[color]} angle={45} showRay ={rayQueue[temp]}/>
+        <Lantern posVert="12%" posHori="75%" color={option[color]} angle={45} />
+        <Lantern posVert="12%" posHori="72.5%" color={option[color]} angle={45} />
+        <Lantern posVert="12%" posHori="69.5%" color={option[color]} angle={45} />
+        <Lantern posVert="12%" posHori="66.5%" color={option[color]} angle={45} />
       </div> 
       <div className="app__lightLeft__Lower">
-        <Lantern posVert="14%" posHori="58.75%" color={option[color]}/>
-        <Lantern posVert="14%" posHori="55.75%" color={option[color]}/>
-        <Lantern posVert="14%" posHori="53%" color={option[color]}/>
-        <Lantern posVert="14%" posHori="50%" color={option[color]}/>
-        <Lantern posVert="14%" posHori="47%" color={option[color]}/>
+        <Lantern posVert="14%" posHori="58.75%" color={option[color]} angle={90}/>
+        <Lantern posVert="14%" posHori="55.75%" color={option[color]} angle={90}/>
+        <Lantern posVert="14%" posHori="53%" color={option[color]} angle={90}/>
+        <Lantern posVert="14%" posHori="50%" color={option[color]} angle={90}/>
+        <Lantern posVert="14%" posHori="47%" color={option[color]} angle={90}/>
       </div>
       <div className="app__lightLeft__Upper">
-        <Lantern posVert="8%" posHori="58.75%" color={option[color]}/>
-        <Lantern posVert="8%" posHori="55.75%" color={option[color]}/>
-        <Lantern posVert="8%" posHori="52.75%" color={option[color]}/>
-        <Lantern posVert="8%" posHori="50%" color={option[color]}/>
-        <Lantern posVert="8%" posHori="47%" color={option[color]}/>
+        <Lantern posVert="8%" posHori="58.75%" color={option[color]} angle={90}/>
+        <Lantern posVert="8%" posHori="55.75%" color={option[color]} angle={90}/>
+        <Lantern posVert="8%" posHori="52.75%" color={option[color]} angle={90}/>
+        <Lantern posVert="8%" posHori="50%" color={option[color]} angle={90}/>
+        <Lantern posVert="8%" posHori="47%" color={option[color]} angle={90}/>
       </div>
       <div className="app__lightRight__Side">
-        <Lantern posVert="14%" posHori="-7%" color={option[color]} angle={135}/>
-        <Lantern posVert="14%" posHori="-4%" color={option[color]} angle={135}/>
-        <Lantern posVert="14%" posHori="-1%" color={option[color]} angle={135}/>
-        <Lantern posVert="14%" posHori="2%" color={option[color]} angle={135}/>
+        <Lantern posVert="12%" posHori="-5%" color={option[color]} angle={135}/>
+        <Lantern posVert="12%" posHori="-2%" color={option[color]} angle={135}/>
+        <Lantern posVert="12%" posHori="1%" color={option[color]} angle={135}/>
+        <Lantern posVert="12%" posHori="4%" color={option[color]} angle={135}/>
       </div>
       <div className="app__lightRight__Lower">
-        <Lantern posVert="14%" posHori="23%" color={option[color]}/>
-        <Lantern posVert="14%" posHori="20%" color={option[color]}/>
-        <Lantern posVert="14%" posHori="17%" color={option[color]}/>
-        <Lantern posVert="14%" posHori="14%" color={option[color]}/>
-        <Lantern posVert="14%" posHori="12%" color={option[color]}/>
+        <Lantern posVert="14%" posHori="23%" color={option[color]} angle={90}/>
+        <Lantern posVert="14%" posHori="20%" color={option[color]} angle={90}/>
+        <Lantern posVert="14%" posHori="17%" color={option[color]} angle={90}/>
+        <Lantern posVert="14%" posHori="14%" color={option[color]} angle={90}/>
+        <Lantern posVert="14%" posHori="12%" color={option[color]} angle={90}/>
       </div>
       <div className="app__lightRight__Upper">
-        <Lantern posVert="8%" posHori="23%" color={option[color]}/>
-        <Lantern posVert="8%" posHori="20%" color={option[color]}/>
-        <Lantern posVert="8%" posHori="17%" color={option[color]}/>
-        <Lantern posVert="8%" posHori="14%" color={option[color]}/>
-        <Lantern posVert="8%" posHori="11%" color={option[color]}/>
+        <Lantern posVert="8%" posHori="23%" color={option[color]} angle={90}/>
+        <Lantern posVert="8%" posHori="20%" color={option[color]} angle={90}/>
+        <Lantern posVert="8%" posHori="17%" color={option[color]} angle={90}/>
+        <Lantern posVert="8%" posHori="14%" color={option[color]} angle={90}/>
+        <Lantern posVert="8%" posHori="11%" color={option[color]} angle={90}/>
       </div>
     {/*
       <ReactPlayer 
diff --git a/Components/Lantern.css b/Components/Lantern.css
index 98b4fd6..d129942 100644
--- a/Components/Lantern.css
+++ b/Components/Lantern.css
@@ -12,22 +12,26 @@
   height: 50px;
   filter: blur(1px);
 }
+.lantern__sideGlare{
+  width: 50px;
+  height: 50px;
+  filter: blur(1px);
+}
 /*
 filter: invert(43%) sepia(81%) saturate(1412%) hue-rotate(200deg) brightness(98%) contrast(96%) drop-shadow(0 0 1rem blue);
 */
-.lantern__ray{
-  display:block;
+.lantern__ray, .lantern__rainbow{
   width: 30%;
   height: 2%;
   position: fixed;
-  -webkit-transform: perspective(100px) rotate(90deg) rotateY(120deg);
-
 }
 
-/*
+
+
+
 @media(prefers-reduced-motion: no-preference){
-  .lantern__ray{
-    animation: rainbow 40s ease-in-out infinite;
+  .lantern__rainbow{
+    animation: rainbow 60s ease-in-out infinite;
   }
 }
 
@@ -42,9 +46,9 @@ filter: invert(43%) sepia(81%) saturate(1412%) hue-rotate(200deg) brightness(98%
     -webkit-transform: perspective(100px)  rotate(90deg) rotateY(80deg);
   }
 }
-*/
+
 @media(prefers-reduced-motion: no-preference){
-  .lantern__glare{
+  .lantern__glare, .lantern__sideGlare{
     animation: shining 4s infinite linear;
   }
 }
diff --git a/Components/Lantern.js b/Components/Lantern.js
index 96cbceb..aca93e9 100644
--- a/Components/Lantern.js
+++ b/Components/Lantern.js
@@ -2,7 +2,7 @@ import React, {useState, useEffect} from 'react';
 import './Lantern.css';
 import Glare from'../images/glare.png';
 
-function Lantern({posVert, posHori, color, showRay, angle}){
+function Lantern({posVert, posHori, color, angle}){
 
     let match= {
         1: 'c7750a',
@@ -12,26 +12,54 @@ function Lantern({posVert, posHori, color, showRay, angle}){
         150: '0b96d6',
         250: 'b10ed1'
     }
+    
+    
+    const rayQueue = ['none','none','none','none','none','none','none','none','none','none','none','none','none','none','none'];
+    const sideRayQueue = ['none','none','block','none','block','none','block','none','block','none','block','none','block','none','none','none'];
+    const time = [10,50000,20000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000];
 
-    let change = match[color];
+    // 50se, 30 sec
+    //let [angle, setAngle] = useState(0);
+    
+    let [flash, setFlash] = useState(0);
+
+    useEffect(()=>{
+
+        if(flash === time.length - 1){
+            let interval_id = setTimeout(()=>{
+                setFlash(flash= 0); 
+            },time[flash])
+            return()=>{
+                clearInterval(interval_id);
+            }
+        }
+
+        else if(flash < time.length){
+            let interval_id = setTimeout(()=>{
+                console.log(flash + ' check ' + time[flash]);
+                setFlash(flash+=1);
+            }, time[flash])
+            return()=>{
+                clearInterval(interval_id);
+            }
+        }
+    },[flash])
 
     return(
         <div className="lantern">
-            <div className="lantern__bulb">
+            <div className="lantern__bulb" style={{display: angle===90 ? rayQueue[flash] : sideRayQueue[flash]}}>
                 <img
                     className="lantern__glare"
-                    
                     src={Glare}
                     style={{
-                        display: showRay,
-                        filter: `invert(43%) sepia(81%) saturate(1412%) hue-rotate(${color}deg) brightness(98%) contrast(96%) drop-shadow(0 0 1rem blue)`,}}
+                        filter: `invert(43%) sepia(81%) saturate(1412%) hue-rotate(${color}deg) brightness(98%) contrast(96%) drop-shadow(0 0 1rem blue)`}}
                     alt=""
                 />
-                <div className="lantern__ray" style={{
-                    display: showRay,
+                <div className={(flash !== 2) ? "lantern__ray" : "lantern__rainbow"} style={{
+                    display: (angle===90) ? rayQueue[flash] : sideRayQueue[flash],
                     top:posVert,
                     right:posHori, 
-                    background: `linear-gradient(to right, #${change} 1%, transparent)`, 
+                    background: `linear-gradient(to right, #${match[color]} 1%, transparent)`, 
                     transform:`perspective(100px) rotate(${angle}deg) rotateY(120deg)`}}>
                 </div>
             </div>

From cd1450e81eed857698217bc4740966a7c95cdb10 Mon Sep 17 00:00:00 2001
From: Raymond0T <36683390+Raymond0T@users.noreply.github.com>
Date: Mon, 17 May 2021 15:47:59 -0700
Subject: [PATCH 2/2] Add files via upload

---
 App.js                 |  2 +-
 Components/Lantern.css | 10 ++++++++--
 Components/Lantern.js  | 10 +++++-----
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/App.js b/App.js
index 015d751..84b20f1 100644
--- a/App.js
+++ b/App.js
@@ -14,7 +14,7 @@ function App(){
 
   const option = [1,24,55,85,150,250];
   const rayQueue = ['none','block','block'];
-  const time = [14000,3000,20,20,20,20,20,20,20,20,20,20,20,20,20,4000,5000,4000,5000,4000,5000,6000,20,20,20,20,20,20,20,20,20,20,20,20,20,5000,5000,5000,5000,5000,5000,29000,4000,5000,4000,5000,4000,5000,4000,5000,4000,5000,4000,5000,4000,5000,5000,6000];
+  const time = [14000,3000,20,20,20,20,20,20,20,20,20,20,20,20,20,4000,5000,4000,5000,4000,5000,6000,30000,29000,4000,5000,4000,5000,4000,5000,4000,5000,4000,5000,4000,5000,4000,5000,5000,6000];
   let [color, setColor] = useState(0);
   let [temp, setTemp] = useState(0);
 
diff --git a/Components/Lantern.css b/Components/Lantern.css
index d129942..0090200 100644
--- a/Components/Lantern.css
+++ b/Components/Lantern.css
@@ -31,7 +31,7 @@ filter: invert(43%) sepia(81%) saturate(1412%) hue-rotate(200deg) brightness(98%
 
 @media(prefers-reduced-motion: no-preference){
   .lantern__rainbow{
-    animation: rainbow 60s ease-in-out infinite;
+    animation: rainbow 140s ease-in-out infinite;
   }
 }
 
@@ -39,8 +39,14 @@ filter: invert(43%) sepia(81%) saturate(1412%) hue-rotate(200deg) brightness(98%
   0%{
     -webkit-transform: perspective(100px)  rotate(90deg) rotateY(80deg);
   }
+  25%{
+    -webkit-transform: perspective(100px)  rotate(90deg) rotateY(120deg);
+  }
   50%{
-    -webkit-transform: perspective(100px)  rotate(90deg) rotateY(160deg);
+    -webkit-transform: perspective(100px)  rotate(90deg) rotateY(175deg);
+  }
+  75%{
+    -webkit-transform: perspective(100px)  rotate(90deg) rotateY(120deg);
   }
   100%{
     -webkit-transform: perspective(100px)  rotate(90deg) rotateY(80deg);
diff --git a/Components/Lantern.js b/Components/Lantern.js
index aca93e9..56b68c0 100644
--- a/Components/Lantern.js
+++ b/Components/Lantern.js
@@ -13,10 +13,10 @@ function Lantern({posVert, posHori, color, angle}){
         250: 'b10ed1'
     }
     
-    
-    const rayQueue = ['none','none','none','none','none','none','none','none','none','none','none','none','none','none','none'];
-    const sideRayQueue = ['none','none','block','none','block','none','block','none','block','none','block','none','block','none','none','none'];
-    const time = [10,50000,20000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000];
+    let matchUp = match[color];
+    const rayQueue = ['none','none','block','none','none','none','none','none','none','none','none','none','block','none','none','none','none','none','block','none','none','none','none','none','block','none','none','none','none','none','none','none'];
+    const sideRayQueue = ['none','none','block','none','block','none','block','none','block','none','block','none','block','none','block','none','block','none','block','none','block','none','block','none','block','none','block','none','block','none','block','none'];
+    const time = [10,49000,32000,1000,1000,2000,2000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000];
 
     // 50se, 30 sec
     //let [angle, setAngle] = useState(0);
@@ -36,8 +36,8 @@ function Lantern({posVert, posHori, color, angle}){
 
         else if(flash < time.length){
             let interval_id = setTimeout(()=>{
-                console.log(flash + ' check ' + time[flash]);
                 setFlash(flash+=1);
+                console.log(flash + ' check ' + time[flash]);
             }, time[flash])
             return()=>{
                 clearInterval(interval_id);