From 74cddfe652c603c7a93d0d0cf9b699ae5eb7eefb Mon Sep 17 00:00:00 2001 From: Vu Van Dung Date: Fri, 5 Apr 2024 22:31:20 +0800 Subject: [PATCH] add data Signed-off-by: Vu Van Dung --- .../walking-on-singapore-mrt-lines/data.json | 74 +++++++++++++++++++ .../walking-on-singapore-mrt-lines/map.tsx | 18 ++--- .../walking-on-singapore-mrt-lines/panel.tsx | 10 +++ 3 files changed, 92 insertions(+), 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 index 046cea3..6b565b6 100644 --- 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 index 8a94c83..46e43c8 100644 --- 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(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 index 892930d..0e97eab 100644 --- 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 🙏 +

(Posted on 2 April 2024)

); @@ -384,6 +385,15 @@ function SessionOverview({ line, session }: { line: Line; session: Session }) { ) : null}
+ {/* @ts-ignore */} + {session.underConstruction ? ( + <> +
+ This section of the MRT is not yet open +
+
+ + ) : null}
{session.description.split("\n\n").map((paragraph, i) => (

{paragraph}