refactor: Refactor CounterCard.tsx

Refactored CounterCard.tsx to improve code readability and maintainability.
This commit is contained in:
Ayase Minori 2023-12-06 11:08:18 +00:00
parent 6e3c933fda
commit 3d55a46850

View file

@ -132,7 +132,9 @@ export default function Counter(props: SharedProps) {
handleClick(); handleClick();
break; break;
default: default:
console.warn("WARN: Attempted to interact while the socket is not ready!"); console.warn(
"WARN: Attempted to interact while the socket is not ready!",
);
break; break;
} }
}; };
@ -192,7 +194,9 @@ export default function Counter(props: SharedProps) {
}; };
useEffect(() => { useEffect(() => {
let ws = new WebSocket(globalThis.window.location.href.replace("http", "ws")); let ws = new WebSocket(
globalThis.window.location.href.replace("http", "ws"),
);
setSocketState(1); setSocketState(1);
handleWSEvents(ws); handleWSEvents(ws);
@ -233,14 +237,9 @@ 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">
{!clickThresholdSurpassed() && socketState === 1 && ( {!clickThresholdSurpassed() && socketState === 1
<Button id="ctr-btn" onClick={onClick}>Squish that kuru~</Button> ? <Button id="ctr-btn" onClick={onClick}>Squish that kuru~</Button>
)} : <p class="px-6 pt-4 pb-2 text-gray-100">Please wait...</p>}
{socketState !== 1 && (
<p class="px-6 pt-4 pb-2 text-gray-100">
Please wait...
</p>
)}
{clickThresholdSurpassed() && ( {clickThresholdSurpassed() && (
<p class="text-red-600 font-bold"> <p class="text-red-600 font-bold">
Too many squishes! Wait until {INTERVAL_TIME_SECONDS - intervalTime} Too many squishes! Wait until {INTERVAL_TIME_SECONDS - intervalTime}