mirror of
https://github.com/averel10/crypto_clash.git
synced 2026-03-12 19:08:11 +01:00
339 lines
13 KiB
TypeScript
339 lines
13 KiB
TypeScript
import { useState, useEffect } from "react";
|
||
import Web3 from "web3";
|
||
import { Button } from "./Button";
|
||
import { GameDetails } from "./GameModal";
|
||
import { showSuccessToast, showErrorToast } from "@/app/lib/toast";
|
||
|
||
interface RevealProps {
|
||
account: string;
|
||
contract: any;
|
||
config: Config | null;
|
||
web3: Web3 | null;
|
||
setStatus: (status: string) => void;
|
||
selectedMove: string | null;
|
||
secret: string;
|
||
gameDetails: GameDetails | null;
|
||
whoAmI: "player1" | "player2" | "";
|
||
}
|
||
|
||
type MoveName = "Rock" | "Paper" | "Scissors";
|
||
|
||
const MOVES: Record<string, { name: MoveName; icon: string }> = {
|
||
"1": { name: "Rock", icon: "✊" },
|
||
"2": { name: "Paper", icon: "✋" },
|
||
"3": { name: "Scissors", icon: "✌️" },
|
||
};
|
||
|
||
const OUTCOMES: Record<number, { name: string; emoji: string; color: string }> =
|
||
{
|
||
0: { name: "None", emoji: "❓", color: "gray" },
|
||
1: { name: "You Won!", emoji: "🏆", color: "green" },
|
||
2: { name: "You Lost", emoji: "😢", color: "red" },
|
||
3: { name: "Draw", emoji: "🤝", color: "yellow" },
|
||
};
|
||
|
||
export default function Reveal({
|
||
account,
|
||
contract,
|
||
config,
|
||
web3,
|
||
setStatus,
|
||
selectedMove,
|
||
secret,
|
||
gameDetails,
|
||
whoAmI,
|
||
}: Readonly<RevealProps>) {
|
||
const [loading, setLoading] = useState(false);
|
||
const [selfRevealed, setSelfRevealed] = useState(false);
|
||
const [opponentRevealed, setOpponentRevealed] = useState(false);
|
||
const [bothRevealed, setBothRevealed] = useState(false);
|
||
const [outcome, setOutcome] = useState<number>(0);
|
||
|
||
const clearMove = selectedMove && secret ? `${selectedMove}-${secret}` : "";
|
||
|
||
// Check game status on mount
|
||
useEffect(() => {
|
||
const setStateFromGameDetails = () => {
|
||
if (!gameDetails) return;
|
||
const playerARevealed = Number(gameDetails.playerA.move) !== 0;
|
||
const playerBRevealed = Number(gameDetails.playerB.move) !== 0;
|
||
|
||
setSelfRevealed(
|
||
(whoAmI === "player1" && playerARevealed) ||
|
||
(whoAmI === "player2" && playerBRevealed)
|
||
);
|
||
setOpponentRevealed(
|
||
(whoAmI === "player1" && playerBRevealed) ||
|
||
(whoAmI === "player2" && playerARevealed)
|
||
);
|
||
setBothRevealed(playerARevealed && playerBRevealed);
|
||
if(bothRevealed){
|
||
if(Number(gameDetails.outcome) === 1 && whoAmI === "player1") setOutcome(1);
|
||
else if(Number(gameDetails.outcome) === 2 && whoAmI === "player2") setOutcome(1);
|
||
else if(Number(gameDetails.outcome) === 1 && whoAmI === "player2") setOutcome(2);
|
||
else if(Number(gameDetails.outcome) === 2 && whoAmI === "player1") setOutcome(2);
|
||
else setOutcome(3);
|
||
}
|
||
};
|
||
|
||
setStateFromGameDetails();
|
||
}, [gameDetails, contract, account, whoAmI]);
|
||
|
||
const handleReveal = async () => {
|
||
if (!contract || !web3 || !account || !clearMove) return;
|
||
setLoading(true);
|
||
try {
|
||
const tx = contract.methods.reveal(gameDetails?.returnGameId, clearMove);
|
||
const gas = await tx.estimateGas({ from: account });
|
||
const result = await (globalThis as any).ethereum.request({
|
||
method: "eth_sendTransaction",
|
||
params: [
|
||
{
|
||
from: account,
|
||
to: config?.GAME_CONTRACT_ADDRESS,
|
||
data: tx.encodeABI(),
|
||
gas: web3.utils.toHex(gas),
|
||
chainId: web3.utils.toHex(await web3.eth.net.getId()),
|
||
},
|
||
],
|
||
});
|
||
showSuccessToast("Reveal tx sent: " + result);
|
||
} catch (err: any) {
|
||
showErrorToast("Reveal failed: " + err.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleGetOutcome = async () => {
|
||
if (!contract || !web3 || !account) return;
|
||
setLoading(true);
|
||
try {
|
||
const tx = contract.methods.getOutcome(gameDetails?.returnGameId);
|
||
const gas = await tx.estimateGas({ from: account });
|
||
const result = await (globalThis as any).ethereum.request({
|
||
method: "eth_sendTransaction",
|
||
params: [
|
||
{
|
||
from: account,
|
||
to: config?.GAME_CONTRACT_ADDRESS,
|
||
data: tx.encodeABI(),
|
||
gas: web3.utils.toHex(gas),
|
||
chainId: web3.utils.toHex(await web3.eth.net.getId()),
|
||
},
|
||
],
|
||
});
|
||
showSuccessToast("Claim tx sent: " + result);
|
||
} catch (err: any) {
|
||
console.error(err);
|
||
showErrorToast("Claim failed: " + err.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const outcomeData = OUTCOMES[outcome] || OUTCOMES[0];
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Your Move Section - Hidden when both revealed */}
|
||
{!bothRevealed && (
|
||
<div className="border p-6 rounded-lg bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-700 dark:to-slate-800">
|
||
<h2 className="font-semibold text-lg mb-4 text-slate-900 dark:text-white">
|
||
Your Move
|
||
</h2>
|
||
{selectedMove ? (
|
||
<div className="flex items-center justify-center gap-4">
|
||
<div className="flex flex-col items-center">
|
||
<span className="text-6xl mb-2">{MOVES[selectedMove].icon}</span>
|
||
<span className="font-semibold text-lg">
|
||
{MOVES[selectedMove].name}
|
||
</span>
|
||
</div>
|
||
<div className="text-3xl text-slate-400">→</div>
|
||
<div className="bg-white dark:bg-slate-600 p-4 rounded-lg">
|
||
<p className="text-xs text-slate-600 dark:text-slate-300 mb-1">
|
||
Clear Move:
|
||
</p>
|
||
<code className="text-sm font-mono text-slate-700 dark:text-slate-200">
|
||
{clearMove}
|
||
</code>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<p className="text-center text-slate-600 dark:text-slate-400">
|
||
No move selected yet
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Game Status Section - Hidden when both revealed */}
|
||
{!bothRevealed && (
|
||
<div className="grid grid-cols-3 gap-4">
|
||
<div
|
||
className={`p-4 rounded-lg text-center ${
|
||
selfRevealed
|
||
? "bg-green-50 dark:bg-green-900"
|
||
: "bg-slate-100 dark:bg-slate-700"
|
||
}`}
|
||
>
|
||
<p className="text-2xl mb-1">{selfRevealed ? "✅" : "⏳"}</p>
|
||
<p className="text-xs font-semibold text-slate-600 dark:text-slate-300">
|
||
Me
|
||
</p>
|
||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
|
||
{selfRevealed ? "Revealed" : "Waiting"}
|
||
</p>
|
||
</div>
|
||
<div
|
||
className={`p-4 rounded-lg text-center ${
|
||
opponentRevealed
|
||
? "bg-green-50 dark:bg-green-900"
|
||
: "bg-slate-100 dark:bg-slate-700"
|
||
}`}
|
||
>
|
||
<p className="text-2xl mb-1">{opponentRevealed ? "✅" : "⏳"}</p>
|
||
<p className="text-xs font-semibold text-slate-600 dark:text-slate-300">
|
||
Opponent
|
||
</p>
|
||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
|
||
{opponentRevealed ? "Revealed" : "Waiting"}
|
||
</p>
|
||
</div>
|
||
<div className="p-4 rounded-lg text-center bg-blue-50 dark:bg-blue-900">
|
||
<p className="text-sm font-mono text-slate-600 dark:text-slate-300">
|
||
⏱️
|
||
</p>
|
||
<p className="text-xs font-semibold text-slate-600 dark:text-slate-300">
|
||
Time Left
|
||
</p>
|
||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
|
||
{0}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Reveal Section - Hidden when both revealed */}
|
||
{!bothRevealed && (
|
||
<div className="border-2 border-blue-300 dark:border-blue-600 p-6 rounded-lg bg-blue-50 dark:bg-slate-700">
|
||
<h2 className="font-semibold text-lg mb-4 text-slate-900 dark:text-white">
|
||
Reveal Your Move
|
||
</h2>
|
||
<p className="text-sm text-slate-600 dark:text-slate-300 mb-4">
|
||
Submit your clear move and secret to the blockchain. This proves you
|
||
didn't cheat!
|
||
</p>
|
||
<Button
|
||
onClick={handleReveal}
|
||
disabled={loading || !account || !contract || !clearMove || selfRevealed}
|
||
variant="primary"
|
||
className="w-full py-3 text-lg"
|
||
>
|
||
{loading ? "Submitting..." : selfRevealed ? "✅ Revealed" : "Reveal Move"}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Winner Section - Only show if both revealed */}
|
||
{bothRevealed && (
|
||
<div className="space-y-4">
|
||
{/* Moves Comparison */}
|
||
<div className="border-2 border-slate-300 dark:border-slate-600 p-6 rounded-lg bg-slate-50 dark:bg-slate-800">
|
||
<h2 className="font-semibold text-lg mb-4 text-slate-900 dark:text-white text-center">
|
||
Final Moves
|
||
</h2>
|
||
<div className="flex items-center justify-center gap-8">
|
||
{/* Your Move (always on left) */}
|
||
<div className="flex flex-col items-center">
|
||
<span className="text-6xl mb-2">
|
||
{gameDetails && MOVES[String(whoAmI === "player1" ? gameDetails.playerA.move : gameDetails.playerB.move)]?.icon}
|
||
</span>
|
||
<span className="font-semibold text-slate-700 dark:text-slate-300">
|
||
You
|
||
</span>
|
||
<span className="text-sm text-slate-500 dark:text-slate-400">
|
||
{gameDetails && MOVES[String(whoAmI === "player1" ? gameDetails.playerA.move : gameDetails.playerB.move)]?.name}
|
||
</span>
|
||
</div>
|
||
|
||
{/* VS */}
|
||
<div className="flex flex-col items-center">
|
||
<span className="text-4xl text-slate-400 dark:text-slate-500">
|
||
VS
|
||
</span>
|
||
</div>
|
||
|
||
{/* Opponent Move (always on right) */}
|
||
<div className="flex flex-col items-center">
|
||
<span className="text-6xl mb-2">
|
||
{gameDetails && MOVES[String(whoAmI === "player1" ? gameDetails.playerB.move : gameDetails.playerA.move)]?.icon}
|
||
</span>
|
||
<span className="font-semibold text-slate-700 dark:text-slate-300">
|
||
Opponent
|
||
</span>
|
||
<span className="text-sm text-slate-500 dark:text-slate-400">
|
||
{gameDetails && MOVES[String(whoAmI === "player1" ? gameDetails.playerB.move : gameDetails.playerA.move)]?.name}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Outcome Section */}
|
||
<div
|
||
className={`border-2 p-6 rounded-lg text-center ${
|
||
outcomeData.color === "green"
|
||
? "border-green-400 bg-green-50 dark:bg-green-900 dark:border-green-600"
|
||
: outcomeData.color === "red"
|
||
? "border-red-400 bg-red-50 dark:bg-red-900 dark:border-red-600"
|
||
: outcomeData.color === "yellow"
|
||
? "border-yellow-400 bg-yellow-50 dark:bg-yellow-900 dark:border-yellow-600"
|
||
: "border-slate-400 bg-slate-100 dark:bg-slate-700 dark:border-slate-600"
|
||
}`}
|
||
>
|
||
<p
|
||
className={`text-6xl mb-3 ${
|
||
outcomeData.color === "green"
|
||
? "text-green-600 dark:text-green-400"
|
||
: outcomeData.color === "red"
|
||
? "text-red-600 dark:text-red-400"
|
||
: outcomeData.color === "yellow"
|
||
? "text-yellow-600 dark:text-yellow-400"
|
||
: "text-slate-600 dark:text-slate-400"
|
||
}`}
|
||
>
|
||
{outcomeData.emoji}
|
||
</p>
|
||
<h3
|
||
className={`text-2xl font-bold ${
|
||
outcomeData.color === "green"
|
||
? "text-green-700 dark:text-green-300"
|
||
: outcomeData.color === "red"
|
||
? "text-red-700 dark:text-red-300"
|
||
: outcomeData.color === "yellow"
|
||
? "text-yellow-700 dark:text-yellow-300"
|
||
: "text-slate-700 dark:text-slate-300"
|
||
}`}
|
||
>
|
||
{outcomeData.name}
|
||
</h3>
|
||
|
||
{/* Show Claim Coins button only on win or draw and if game is active */}
|
||
{(outcome === 1 || outcome === 3) && gameDetails?.isActive && (
|
||
<Button
|
||
onClick={handleGetOutcome}
|
||
disabled={loading || !account || !contract}
|
||
variant="primary"
|
||
className="mt-4 w-full py-3 text-lg"
|
||
>
|
||
{loading ? "Processing..." : "💰 Claim Coins"}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|