research/statebuddy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

traffic light timer: nice glow effect

Browse source
This commit is contained in:
Joeri Exelmans 2025-10-31 15:31:49 +01:00
parent 0689808703
commit 39b286bffe
1 changed files with 5 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/App/Plant/TrafficLight/TrafficLight.tsx
View file

@ -57,6 +57,9 @@ export const TrafficLight = memo(function TrafficLight({state, speed, raiseUIEve
.hidden { .hidden {
opacity: 0; opacity: 0;
} }
text.timer {
text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
}
`}</style> `}</style>
<svg width={200} height='auto' viewBox="0 0 424 791"> <svg width={200} height='auto' viewBox="0 0 424 791">
<image xlinkHref={imgBackground} width={424} height={791}/> <image xlinkHref={imgBackground} width={424} height={791}/>
@ -66,8 +69,8 @@ export const TrafficLight = memo(function TrafficLight({state, speed, raiseUIEve
<image className={greenOn ? "" : "hidden"} xlinkHref={imgGreenOverlay} width={424} height={791}/> <image className={greenOn ? "" : "hidden"} xlinkHref={imgGreenOverlay} width={424} height={791}/>
{timerValue >= 0 && <> {timerValue >= 0 && <>
<rect x={300} y={678} width={110} height={80} fill="black" /> <rect x={300} y={676} width={108} height={84} fill="black" />
<text x={400} y={750} fontFamily="digital-font" fontSize={100} fill={timerGreen ? "#59ae8b" : "#f9172e"} textAnchor="end">{timerValue}</text> <text x={400} y={750} className="timer" fontFamily="digital-font" fontSize={100} fill={timerGreen ? "#59ae8b" : "#f9172e"} textAnchor="end">{timerValue}</text>
</>} </>}
</svg> </svg>
<br/> <br/>