move state and functions to commit component

This commit is contained in:
SamKry
2025-11-18 18:55:38 +01:00
parent 4ec03d7cdb
commit 04f8e66204
3 changed files with 100 additions and 132 deletions

View File

@@ -1,3 +1,5 @@
import { useState } from "react";
interface RevealProps {
revealMove: string;
setRevealMove: (v: string) => void;
@@ -11,8 +13,6 @@ interface RevealProps {
handlePlayerARevealed: () => void;
playerBRevealed: string;
handlePlayerBRevealed: () => void;
revealTimeLeft: string;
handleRevealTimeLeft: () => void;
}
export default function Reveal({
@@ -28,9 +28,18 @@ export default function Reveal({
handlePlayerARevealed,
playerBRevealed,
handlePlayerBRevealed,
revealTimeLeft,
handleRevealTimeLeft,
}: Readonly<RevealProps>) {
const [revealTimeLeft, setRevealTimeLeft] = useState<string>("");
const handleRevealTimeLeft = async () => {
if (!contract) return;
try {
const res = await contract.methods.revealTimeLeft().call();
setRevealTimeLeft(res.toString());
} catch (err: any) {
console.error("Failed to fetch revealTimeLeft: " + err.message);
}
};
return (
<div className="border p-4 rounded-lg">
<h2 className="font-semibold mb-2">reveal(string clearMove)</h2>
@@ -50,16 +59,36 @@ export default function Reveal({
</button>
<div className="mt-4 space-y-2">
<button onClick={handleBothRevealed} className="bg-gray-200 px-2 py-1 rounded">bothRevealed</button>
<button
onClick={handleBothRevealed}
className="bg-gray-200 px-2 py-1 rounded"
>
bothRevealed
</button>
<span className="ml-2 text-xs">{bothRevealed}</span>
<br />
<button onClick={handlePlayerARevealed} className="bg-gray-200 px-2 py-1 rounded">playerARevealed</button>
<button
onClick={handlePlayerARevealed}
className="bg-gray-200 px-2 py-1 rounded"
>
playerARevealed
</button>
<span className="ml-2 text-xs">{playerARevealed}</span>
<br />
<button onClick={handlePlayerBRevealed} className="bg-gray-200 px-2 py-1 rounded">playerBRevealed</button>
<button
onClick={handlePlayerBRevealed}
className="bg-gray-200 px-2 py-1 rounded"
>
playerBRevealed
</button>
<span className="ml-2 text-xs">{playerBRevealed}</span>
<br />
<button onClick={handleRevealTimeLeft} className="bg-gray-200 px-2 py-1 rounded">revealTimeLeft</button>
<button
onClick={handleRevealTimeLeft}
className="bg-gray-200 px-2 py-1 rounded"
>
revealTimeLeft
</button>
<span className="ml-2 text-xs">{revealTimeLeft}</span>
</div>
</div>