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 e9feba1..b017f75 100644 --- a/src/app/blogs/walking-on-singapore-mrt-lines/map.tsx +++ b/src/app/blogs/walking-on-singapore-mrt-lines/map.tsx @@ -64,17 +64,11 @@ function MapPolyline({ sessionIndex: number; }) { const polylineRef = useRef(null); - 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 - (lineIndex === 7 && sessionIndex === 3); // JRL East branch const [isHover, setIsHover] = useState(false); const onHoverEnter = useCallback(() => setIsHover(true), []); @@ -100,46 +94,23 @@ function MapPolyline({ ? 9997 : lineZIndex[data[lineIndex].lineCode as keyof typeof lineZIndex], strokeOpacity: 1, - strokeWeight: 3, - }); - if (!thinFillAreaPolylineRef.current) return; - thinFillAreaPolylineRef.current.setOptions({ - strokeColor: "black", - zIndex: lineIsActive - ? 9998 - : lineZIndex[data[lineIndex].lineCode as keyof typeof lineZIndex] + 1, - strokeOpacity: 1, - strokeWeight: 1, + strokeWeight: 2, }); }, [isActive, isHover, lineIsActive, activeSession.lineIndex, lineIndex]); useEffect(() => refreshStyling(), [refreshStyling]); return ( - <> - { - polylineRef.current = polyline; - refreshStyling(); - }} - path={coordinates} - onMouseOver={onHoverEnter} - onMouseOut={onHoverLeave} - onClick={onClick} - /> - {isOutlined ? ( - { - thinFillAreaPolylineRef.current = polyline; - refreshStyling(); - }} - path={coordinates} - onMouseOver={onHoverEnter} - onMouseOut={onHoverLeave} - onClick={onClick} - /> - ) : null} - + { + polylineRef.current = polyline; + refreshStyling(); + }} + path={coordinates} + onMouseOver={onHoverEnter} + onMouseOut={onHoverLeave} + onClick={onClick} + /> ); } @@ -209,7 +180,7 @@ export const WalkingMap = memo(function WalkingMap() { disableDefaultUI: true, styles: mapStyles, backgroundColor: "#161b2c", - // backgroundColor: "transparent", + keyboardShortcuts: false, }} onClick={onClick} onZoomChanged={collapsePanel} 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 6ca43e7..a090c63 100644 --- a/src/app/blogs/walking-on-singapore-mrt-lines/panel.tsx +++ b/src/app/blogs/walking-on-singapore-mrt-lines/panel.tsx @@ -1,7 +1,7 @@ "use client"; import Image from "next/image"; -import { Fragment, memo, useMemo } from "react"; +import { Fragment, memo, useEffect, useMemo } from "react"; import { ChevronDown, ChevronLeft, ChevronRight, Construction, Home } from "~/components/icons"; import { Button, LinkButton } from "~/components/ui/button"; @@ -491,6 +491,18 @@ function SessionPrevNextButton({ next }: { next?: boolean }) { if (newIndex > max) return 0; return newIndex; }, [activeSession.lineIndex, activeSession.sessionIndex, next]); + + useEffect(() => { + function handleKeyPress(event: KeyboardEvent) { + if ((event.key === "ArrowLeft" && !next) || (event.key === "ArrowRight" && next)) { + event.preventDefault(); + setActiveSession({ sessionIndex: targetSessionIndex }); + } + } + document.addEventListener("keydown", handleKeyPress); + return () => document.removeEventListener("keydown", handleKeyPress); + }, [next, setActiveSession, targetSessionIndex]); + return (