Rate Limit Kuru Squash (#19)

* Rate Limit Kuru Squash

* Remove console.log

* Update the THRESHOLD_CLICKS to 30

* Improve the timeout algorithm

islands/CounterCard.tsx

@@ -51,8 +51,37 @@ export default function Counter(props: SharedProps) {
   const [timer, setTimer] = useState(0);
   const ipc = new BroadcastChannel("counterIpc");
 
+  const THRESHOLD_CLICKS = 30; // Maximum number of clicks in an interval
+  const INTERVAL_TIME_SECONDS = 60 * 0.5; // Every 30 seconds
+  const [clicksInInterval, setClicksInInterval] = useState(0);
+  const [intervalTime, setIntervalTime] = useState(0);
+
+  const clickThresholdSurpassed = () => {
+    return clicksInInterval >= THRESHOLD_CLICKS;
+  }
+
+  useEffect(() => {
+    if (clickThresholdSurpassed()) {
+      // Setup a timer
+      const intervalId = setTimeout(() => {
+      
+        // Update interval time
+        setIntervalTime(prevTime => prevTime + 1);
+  
+        // Reset interval if expired
+        if (intervalTime >= INTERVAL_TIME_SECONDS) {
+          setIntervalTime(0);
+          setClicksInInterval(0);
+        }
+      }, 1000 * 1);
+
+      return () => { clearInterval(intervalId) }
+    }
+  }, [clicksInInterval, intervalTime]);
+
   const onClick = () => {
     setInternalCount(internalCount + 1);
+    setClicksInInterval(clicksInInterval + 1);
     setCount(count + 1);
     animateMascot();
 
@@ -187,7 +216,8 @@ export default function Counter(props: SharedProps) {
         <p class="text-gray-100">Times the kuru was squished~</p>
       </div>
       <div class="px-6 pt-4 pb-2">
-        <Button id="ctr-btn" onClick={onClick}>Squish that kuru~</Button>
+        {!clickThresholdSurpassed() && <Button id="ctr-btn" onClick={onClick}>Squish that kuru~</Button>}
+        {clickThresholdSurpassed() && <p class="text-red-600 font-bold">Too many squishes! Wait until {INTERVAL_TIME_SECONDS - intervalTime} seconds.</p>}
       </div>
       <div class="px-6 pt-4 pb-2 text-white">
         <p>