Page embed (#90)

* page embed started

* lifeline values saved

* commit'

* commit

* commit

* making changes

* styling being fixed

* css for header added

* changes

* empty value bug fixed

* logs removed

* changes

* remove header bug

* changes

* color

* stacking and side-by-side ranges added, newsfeed bug fixed

* font sizes enlargened

* value font size modified

* font size for stacking made smaller

* unused css removed

* fullscreen logic uncommented

* fullscreen in App.tsx removed, comments removed

* trying to find bug

* infinite warning gone

* page embed fixed

* removed warnings

* removed dependency array warning

* added embed.html for testing

Co-authored-by: daniel-moon32 <[email protected]>

Author: sahilkamboj3

client/src/components/embed/ClockEmbed.tsx

@@ -39,6 +39,32 @@ const ClockContainer = styled.div`
   }
 `
 
+const Value = styled.div`
+  margin-left: 1vw;
+  @media only screen and (max-height: 700px) {
+    font-size: max(7vh, min(2.75rem, 12vw));
+  }
+
+  // code for stacking
+  @media only screen and (max-width: 1024px) {
+    font-size: max(5.5vh, min(2.25rem, 12.5vw));
+  }
+`
+
+const Unit = styled.div`
+  margin-left: 0.5vw;
+  @media only screen and (max-height: 700px) {
+    font-size: max(3.5vh, min(1.5rem, 5vw));
+    margin-bottom: -7.5vh;
+  }
+
+  // code for stacking
+  @media only screen and (max-width: 1024px) {
+    font-size: max(4vh, min(1.5rem, 5vw));
+    margin-bottom: -5vh;
+  }
+`
+
 function Clock({ timestamp, labels, flavor }: ModuleResInterface) {
   const [timeLeft, setTimeLeft] = useState(0)
   const [years, setYears] = useState('')
@@ -69,9 +95,9 @@ function Clock({ timestamp, labels, flavor }: ModuleResInterface) {
         themeColor={({ theme }) => theme.red}
       />
       <ClockSection>
-        <h3>{years ? years : '0'}</h3> <h2>YRS</h2>
-        <h3>{days ? days : '000'}</h3> <h2>DAYS</h2>
-        <h3>{time ? time : '00:00:00'}</h3>
+        <Value>{years ? years : '0'}</Value> <Unit>YRS</Unit>
+        <Value>{days ? days : '000'}</Value> <Unit>DAYS</Unit>
+        <Value>{time ? time : '00:00:00'}</Value>
       </ClockSection>
     </ClockContainer>
   )

client/src/components/embed/LifelineEmbed.tsx

@@ -97,12 +97,6 @@ function Lifeline({
     !value ? cleanedRate : value + cleanedRate,
   )
 
-  useEffect(() => {
-    if ((value !== 0 || cleanedRate !== 0) && llVal === 0) {
-      setLLVal(!value ? cleanedRate : value + cleanedRate)
-    }
-  }, [llVal, value, cleanedRate])
-
   /* update lifeline value within interval */
   useEffect(() => {
     const interval = setInterval(() => {
@@ -113,14 +107,9 @@ function Lifeline({
 
     return () => {
       clearInterval(interval)
-    }
-  })
-
-  useEffect(() => {
-    return () => {
       updateSavedValue(lifelineIndex, llVal)
     }
-  }, [updateSavedValue, lifelineIndex, llVal])
+  }, [cleanedRate, lifelineIndex, llVal, updateSavedValue])
 
   return (
     <Container>

client/src/components/embed/LifelinesEmbed.tsx

@@ -25,9 +25,9 @@ export default function LifelinesEmbed({
   const lifelineDisplayNum = displayNum
   const [lifelineIndex, setLifelineIndex] = useState<number>(0)
   const LIFELINE_DURATION = 2 // seconds displayed per lifeline
-  const [lifelineSavedValues, setLifelineSavedValues] = useState<
-    (number | undefined)[]
-  >(Array(lifelineDisplayNum)) // saved lifeline values after set time duration
+  const [lifelineSavedValues, setLifelineSavedValues] = useState<number[]>(
+    Array(lifelineDisplayNum).fill(0),
+  ) // saved lifeline values after set time duration
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -41,20 +41,19 @@ export default function LifelinesEmbed({
     }
   }, [lifelineDisplayNum])
 
-  useEffect(() => {
-    for (let i = 0; i < lifelineDisplayNum; i++) {
-      if (lifeLineData[i]) lifelineSavedValues[i] = lifeLineData[i]['initial']
-    }
-    setLifelineSavedValues([...lifelineSavedValues])
-  }, [lifeLineData, lifelineDisplayNum, lifelineSavedValues])
-
   /* used to update saved values to continue for next time duration */
   const updateSavedValue = (index: number, value: number) => {
     const newLifelineSavedValues = lifelineSavedValues
     newLifelineSavedValues[index] = value
     setLifelineSavedValues(newLifelineSavedValues)
   }
 
+  const returnValue = (lifelineIndex: number) => {
+    if (lifelineSavedValues[lifelineIndex] > 0)
+      return lifelineSavedValues[lifelineIndex]
+    return lifeLineData[lifelineIndex]['initial']
+  }
+
   return (
     <>
       {lifeLineData.slice(lifelineIndex, lifelineIndex + 1).map((module) => {
@@ -65,7 +64,7 @@ export default function LifelinesEmbed({
             lifelineIndex={lifelineIndex}
             title={returnFirstString(module['labels'])}
             module_type={toUpperCase(module['flavor'])}
-            value={lifelineSavedValues[lifelineIndex]}
+            value={returnValue(lifelineIndex)}
             unit={returnFirstString(module['unit_labels'])}
             rate={module['rate']}
             resolution={module['resolution']}

client/src/components/embed/embed.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html>
+<iframe src="http://localhost:3000/embed" style="width:1024px;" frameborder="0"></iframe>
+<body></body>
+</html>