add data

Signed-off-by: Vu Van Dung <me@joulev.dev>
joulev · Apr 5, 2024 · 74cddfe · 74cddfe
1 parent 8fe733a
commit 74cddfe
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 10 deletions.
diff --git a/src/app/blogs/walking-on-singapore-mrt-lines/data.json b/src/app/blogs/walking-on-singapore-mrt-lines/data.json
@@ -1005,6 +1005,80 @@
           { "lng": 103.8686236, "lat": 1.2803425 },
           { "lng": 103.8689132, "lat": 1.2807983 }
         ]
+      },
+      {
+        "time": "2024-04-05T18:34:00+08:00",
+        "distance": 7.91,
+        "pace": 10.47,
+        "kcal": 445,
+        "description": "The first session on under-construction sections of the MRT system. As expected, a… lot of things were under construction and it was quite hard to get past some sections that should have been easy to breeze over. Especially around Marine Parade MRT – there were construction zones everywhere; was the station even completed as reported by the news yet?\n\nGBTB East was magnificent as ever, but at the same time, crowded as ever. They were putting up illustrations of the future memorial, it looks really nice – more green space!\n\nMeyer Road was really quiet, perhaps one of the most peaceful and quiet roads that the MRT system directly goes through. There were barely anyone or anything on the road except some cars passing by. While that may sound chill, to my unpleasant surprise there wasn’t any convenience stores either. I heavily depended on these stores to stay hydrated, so not a single drop of water from GBTB MRT until Marine Parade MRT really fried my throat. Bring enough water guys.",
+        "start": "TE22 Gardens by the Bay",
+        "end": "TE26 Marine Parade",
+        "via": null,
+        "underConstruction": true,
+        "coordinates": [
+          { "lng": 103.8689658, "lat": 1.2808037 },
+          { "lng": 103.8696528, "lat": 1.2819621 },
+          { "lng": 103.870313, "lat": 1.2814151 },
+          { "lng": 103.8710483, "lat": 1.2803049 },
+          { "lng": 103.8737749, "lat": 1.2822946 },
+          { "lng": 103.8709464, "lat": 1.2852926 },
+          { "lng": 103.8690669, "lat": 1.2880492 },
+          { "lng": 103.8681974, "lat": 1.2895938 },
+          { "lng": 103.8671025, "lat": 1.2922324 },
+          { "lng": 103.8663833, "lat": 1.2946028 },
+          { "lng": 103.868108, "lat": 1.2949246 },
+          { "lng": 103.8679416, "lat": 1.2956165 },
+          { "lng": 103.8692405, "lat": 1.2967266 },
+          { "lng": 103.8694874, "lat": 1.2968982 },
+          { "lng": 103.8697504, "lat": 1.296968 },
+          { "lng": 103.8699995, "lat": 1.2969894 },
+          { "lng": 103.8731116, "lat": 1.297043 },
+          { "lng": 103.8747808, "lat": 1.2971128 },
+          { "lng": 103.8753712, "lat": 1.2965335 },
+          { "lng": 103.8759616, "lat": 1.297102 },
+          { "lng": 103.8762246, "lat": 1.2972254 },
+          { "lng": 103.8765788, "lat": 1.2972951 },
+          { "lng": 103.8780012, "lat": 1.2974774 },
+          { "lng": 103.8812161, "lat": 1.2977456 },
+          { "lng": 103.8815489, "lat": 1.2977456 },
+          { "lng": 103.8827834, "lat": 1.2979548 },
+          { "lng": 103.8835509, "lat": 1.2979762 },
+          { "lng": 103.8859017, "lat": 1.2978314 },
+          { "lng": 103.8868654, "lat": 1.2978475 },
+          { "lng": 103.8873002, "lat": 1.2978207 },
+          { "lng": 103.8910948, "lat": 1.296968 },
+          { "lng": 103.8951193, "lat": 1.298239 },
+          { "lng": 103.8954208, "lat": 1.2983731 },
+          { "lng": 103.8957053, "lat": 1.2986573 },
+          { "lng": 103.8968432, "lat": 1.2990864 },
+          { "lng": 103.897031, "lat": 1.2992741 },
+          { "lng": 103.8977019, "lat": 1.2990595 },
+          { "lng": 103.897455, "lat": 1.2998586 },
+          { "lng": 103.8973799, "lat": 1.3007543 },
+          { "lng": 103.8971598, "lat": 1.3014783 },
+          { "lng": 103.8969881, "lat": 1.3016874 },
+          { "lng": 103.8970257, "lat": 1.3018376 },
+          { "lng": 103.8988881, "lat": 1.3023095 },
+          { "lng": 103.9003426, "lat": 1.3029477 },
+          { "lng": 103.9004983, "lat": 1.3028566 },
+          { "lng": 103.9008471, "lat": 1.3019234 },
+          { "lng": 103.9014858, "lat": 1.3007274 },
+          { "lng": 103.9015502, "lat": 1.3005934 },
+          { "lng": 103.9015395, "lat": 1.3003574 },
+          { "lng": 103.9016093, "lat": 1.3001697 },
+          { "lng": 103.9017896, "lat": 1.3000463 },
+          { "lng": 103.9020257, "lat": 1.3000195 },
+          { "lng": 103.9022217, "lat": 1.3001456 },
+          { "lng": 103.9023048, "lat": 1.3003279 },
+          { "lng": 103.9023344, "lat": 1.3005102 },
+          { "lng": 103.9035737, "lat": 1.3013067 },
+          { "lng": 103.9051062, "lat": 1.3024838 },
+          { "lng": 103.9055355, "lat": 1.3019502 },
+          { "lng": 103.905953, "lat": 1.3023042 },
+          { "lng": 103.9056429, "lat": 1.302819 },
+          { "lng": 103.905871, "lat": 1.3029906 }
+        ]
       }
     ]
   },

diff --git a/src/app/blogs/walking-on-singapore-mrt-lines/map.tsx b/src/app/blogs/walking-on-singapore-mrt-lines/map.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { GoogleMap, Polyline, useJsApiLoader } from "@react-google-maps/api";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { env } from "~/env.mjs";
 
@@ -67,9 +67,14 @@ function MapPolyline({
   const thinFillAreaPolylineRef = useRef<google.maps.Polyline | null>(null);
 
   const { activeSession, setActiveSession, setPanelIsExpanded } = useActiveSession();
+
+  const session = useMemo(() => data[lineIndex].sessions[sessionIndex], [lineIndex, sessionIndex]);
+
   const lineIsActive = activeSession.lineIndex === lineIndex;
   const isActive = lineIsActive && activeSession.sessionIndex === sessionIndex;
   const isOutlined = lineIndex === 4 && sessionIndex === 6; // Changi Airport branch
+  // @ts-ignore
+  const isUnderConstruction: boolean = session.underConstruction;
   const [isHover, setIsHover] = useState(false);
 
   const onHoverEnter = useCallback(() => setIsHover(true), []);
@@ -94,7 +99,7 @@ function MapPolyline({
           : lineIsActive
             ? 9997
             : lineZIndex[data[lineIndex].lineCode as keyof typeof lineZIndex],
-      strokeOpacity: 1,
+      strokeOpacity: !isActive && !isHover && isUnderConstruction ? 0.5 : 1,
       strokeWeight: 3,
     });
     if (!thinFillAreaPolylineRef.current) return;
@@ -106,14 +111,7 @@ function MapPolyline({
       strokeOpacity: 1,
       strokeWeight: 1,
     });
-  }, [
-    isActive,
-    isHover,
-    lineIsActive,
-    activeSession.lineIndex,
-    data[lineIndex].colour,
-    data[lineIndex].lineCode,
-  ]);
+  }, [isActive, isHover, lineIsActive, activeSession.lineIndex, lineIndex, isUnderConstruction]);
 
   useEffect(() => refreshStyling(), [refreshStyling]);
 

diff --git a/src/app/blogs/walking-on-singapore-mrt-lines/panel.tsx b/src/app/blogs/walking-on-singapore-mrt-lines/panel.tsx
@@ -280,6 +280,7 @@ function Overview() {
             bridges 🙏
           </li>
         </ul>
+        <p className="text-text-secondary text-sm">(Posted on 2 April 2024)</p>
       </div>
     </ScrollArea>
   );
@@ -384,6 +385,15 @@ function SessionOverview({ line, session }: { line: Line; session: Session }) {
         ) : null}
       </div>
       <hr />
+      {/* @ts-ignore */}
+      {session.underConstruction ? (
+        <>
+          <div className="p-6 text-center bg-bg-darker text-text-secondary">
+            This&nbsp;section&nbsp;of&nbsp;the&nbsp;MRT is&nbsp;not&nbsp;yet&nbsp;open
+          </div>
+          <hr />
+        </>
+      ) : null}
       <div className="prose p-6">
         {session.description.split("\n\n").map((paragraph, i) => (
           <p key={i}>{paragraph}</p>