From bc63e5b0009a14fb21e9edddcc6b21961629b5a8 Mon Sep 17 00:00:00 2001
From: Joe <bioshazard@users.noreply.github.com>
Date: Sat, 28 Jun 2025 22:30:02 -0400
Subject: [PATCH] feat(timer): add start flash and warning

---
 src/components/Board.jsx | 18 +++++++++++++-----
 tailwind.config.js       |  9 +++++++++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/Board.jsx b/src/components/Board.jsx
index a1bbd7b..bf5c0f0 100644
--- a/src/components/Board.jsx
+++ b/src/components/Board.jsx
@@ -527,6 +527,7 @@ export default function Board(props) {
 
     const getTimerDiff = () => new Date(props.timer).getTime() - new Date().getTime()
     const [remainingMilliseconds, setRemainingMilliseconds] = useState( getTimerDiff() )
+    const [flash, setFlash] = useState(false)
 
     const mmss = () => {
       return [
@@ -538,23 +539,30 @@ export default function Board(props) {
     useEffect( () => {
       // If board time remaining is positive, init remaining state and interval countdown
       const diff = getTimerDiff()
-      // console.log("DIFF", diff)
       if(diff < 0) return
       setRemainingMilliseconds(diff)
 
-      // setRemainingSeconds()
       const countdownInterval = setInterval( () => {
         const diff = getTimerDiff()
         if(diff < 0) { clearInterval(countdownInterval) }
-        // console.log("REMAINING", diff)
         setRemainingMilliseconds(diff)
       }, 1000)
-      
+
       return () => clearInterval(countdownInterval)
     }, [])
 
+    useEffect(() => {
+      if(getTimerDiff() > 0) {
+        setFlash(true)
+        const t = setTimeout(() => setFlash(false), 1000)
+        return () => clearTimeout(t)
+      }
+    }, [props.timer])
+
+    const warning = remainingMilliseconds <= 10000 && remainingMilliseconds >= 1000
+
     return (
-      <div>
+      <div className={`${flash ? 'animate-flash-green' : ''} ${warning ? 'bg-red-200' : ''}`}> 
         {/* {props.timer} */}
         {remainingMilliseconds > 0 ? (
           <div className="flex gap-2 justify-center items-center">
diff --git a/tailwind.config.js b/tailwind.config.js
index 79f80c2..de4c9b4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,15 @@ export default {
       fontFamily: {
         sans: ['Inter', 'sans-serif'],
       },
+      keyframes: {
+        'flash-green': {
+          '0%': { backgroundColor: '#4ade80' },
+          '100%': { backgroundColor: 'transparent' },
+        },
+      },
+      animation: {
+        'flash-green': 'flash-green 1s ease-out',
+      },
     },
   },
   plugins: [],