mirror of
https://github.com/sr229/kuru-kuru.git
synced 2024-09-20 04:10:33 +00:00
Rate Limit Kuru Squash (#19)
* Rate Limit Kuru Squash * Remove console.log * Update the THRESHOLD_CLICKS to 30 * Improve the timeout algorithm
This commit is contained in:
parent
4b6fe1c5f3
commit
e6558e0824
1 changed files with 31 additions and 1 deletions
|
@ -51,8 +51,37 @@ export default function Counter(props: SharedProps) {
|
||||||
const [timer, setTimer] = useState(0);
|
const [timer, setTimer] = useState(0);
|
||||||
const ipc = new BroadcastChannel("counterIpc");
|
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 = () => {
|
const onClick = () => {
|
||||||
setInternalCount(internalCount + 1);
|
setInternalCount(internalCount + 1);
|
||||||
|
setClicksInInterval(clicksInInterval + 1);
|
||||||
setCount(count + 1);
|
setCount(count + 1);
|
||||||
animateMascot();
|
animateMascot();
|
||||||
|
|
||||||
|
@ -187,7 +216,8 @@ export default function Counter(props: SharedProps) {
|
||||||
<p class="text-gray-100">Times the kuru was squished~</p>
|
<p class="text-gray-100">Times the kuru was squished~</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="px-6 pt-4 pb-2">
|
<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>
|
||||||
<div class="px-6 pt-4 pb-2 text-white">
|
<div class="px-6 pt-4 pb-2 text-white">
|
||||||
<p>
|
<p>
|
||||||
|
|
Loading…
Reference in a new issue