From 9793d075777f9cc380826f61d02a8b16b8eb7df9 Mon Sep 17 00:00:00 2001 From: arjanjohan Date: Mon, 29 Apr 2024 17:13:38 +0200 Subject: [PATCH] finished --- README.md | 27 ++++++++-------- packages/nextjs/components/FightDisplay.tsx | 34 +++++++++++++++------ 2 files changed, 38 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 842a062..1b1cdf1 100644 --- a/README.md +++ b/README.md @@ -11,10 +11,6 @@ ## Partner Bounties -### Ankr - -This project uses Ankr RPC to deploy the game smart contracts. See the hardhat config file [here](https://github.com/arjanjohan/scroll-fighter/blob/1784b9fefb680b3d1a046fe318004f25a14a7aad/packages/hardhat/hardhat.config.ts#L106). - ### Aztec A contract written in Noir is used to verify the validity of the challenger's committed strategy. By providing a proof generated by Noir, the game smart contract can use the on-chain verifier to ensure the strategy is valid. The Noir verifier checks if the fighter exists and if the moves are valid. @@ -22,32 +18,37 @@ A contract written in Noir is used to verify the validity of the challenger's co - [Noir circuit](https://github.com/arjanjohan/scroll-fighter/blob/33e5e043bd6b3beb35e60fb84cbf66c5dde24264/packages/noir/circuits/src/main.nr) - [UltraVerifier on Scroll Sepolia](https://sepolia.scrollscan.com/address/0x06cA44b817F9172e1BaB3a8e8a36020AeC6D7e8d#code) +### Sindri + +Scroll Fighter uses Sindri to generate proofs using their API. + +- [Sindri configuration](https://github.com/arjanjohan/scroll-fighter/tree/33e5e043bd6b3beb35e60fb84cbf66c5dde24264/packages/noir) +- [Sindri frontend intregation](https://github.com/arjanjohan/scroll-fighter/blob/2f9f2b9487f9a2df05dee49a2c94bd32b3fa2c13/packages/nextjs/components/GameForm.tsx#L154) + ### The Graph -A subgraph is created to query created games on the ScrollFighterV2 contract. +A subgraph is created to query created games on the ScrollFighter contract. - [Subgraph code](https://github.com/arjanjohan/scroll-fighter/tree/main/packages/graph). - [Subgraph endpoint](https://api.studio.thegraph.com/query/72991/scrollfighter/version/latest) -### Sindri - -Scroll Fighter uses Sindri to generate proofs using their API. +### Ankr -- [Sindri configuration](https://github.com/arjanjohan/scroll-fighter/tree/33e5e043bd6b3beb35e60fb84cbf66c5dde24264/packages/noir) -- [Sindri frontend intregation](https://github.com/arjanjohan/scroll-fighter/blob/2f9f2b9487f9a2df05dee49a2c94bd32b3fa2c13/packages/nextjs/components/GameForm.tsx#L154) +This project uses Ankr RPC to deploy the game smart contracts. See the hardhat config file [here](https://github.com/arjanjohan/scroll-fighter/blob/1784b9fefb680b3d1a046fe318004f25a14a7aad/packages/hardhat/hardhat.config.ts#L106). ## Next steps Due to the limited time, I could not complete everything I set out to do. Additional features that I plan to add are: -- Overview of current games, using The Graph to query existing games. -- Create open games (anyone can join/accept) +- Create a new page with overview of all games, using The Graph to query existing games. +- Allow challengers to start open games (anyone can join/accept) +- Complete and polish up game display animations ## Links - [Vercel deployment](https://scrollfighter.vercel.app/) - [Presentation slides](https://docs.google.com/presentation/d/1IYbLM9cwdpbuSvShZCdJoJ4JEDa683sMTGp3Bh6K79o/edit?usp=sharing) -- [Presentation video]() +- [Presentation video](https://www.loom.com/share/bf35511f16b140e98bf324ac79085769?sid=247ee967-9e0c-4594-88cf-a2f3587ee6b9) - [Dorahacks BUILD](https://dorahacks.io/buidl/11485) - [GitHub](https://github.com/arjanjohan/scroll-fighter) diff --git a/packages/nextjs/components/FightDisplay.tsx b/packages/nextjs/components/FightDisplay.tsx index eca7bcf..c41939b 100644 --- a/packages/nextjs/components/FightDisplay.tsx +++ b/packages/nextjs/components/FightDisplay.tsx @@ -24,6 +24,8 @@ export const FightDisplay: React.FC = () => { const [showRoundAnnouncement, setShowRoundAnnouncement] = useState(false); const [gameLoaded, setGameLoaded] = useState(false); const [gameId, setGameId] = useState(""); + const [playerOneHealth, setPlayerOneHealth] = useState(0); + const [playerTwoHealth, setPlayerTwoHealth] = useState(0); const contractName = "ScrollFighter"; const { data: deployedContractData } = useDeployedContractInfo(contractName); @@ -69,8 +71,8 @@ export const FightDisplay: React.FC = () => { setShowRoundAnnouncement(false); setTimeout(() => { playRound(round + 1); - }, 3000); // Duration of action before next round starts - }, 2000); // Duration to show round announcement + }, 2000); // Duration of action before next round starts + }, 1000); // Duration to show round announcement } else { setPlayFight(false); // End the fight } @@ -78,6 +80,9 @@ export const FightDisplay: React.FC = () => { useEffect(() => { if (playFight) { + setPlayerOneHealth(Number(fighters.find(f => f.id === Number(gameData?.fighterIds[0]))!.health)); + setPlayerTwoHealth(Number(fighters.find(f => f.id === Number(gameData?.fighterIds[1]))!.health)); + playRound(0); } }, [playFight]); @@ -92,6 +97,10 @@ export const FightDisplay: React.FC = () => { setGameLoaded(true); } console.log("Game data", gameData); + if (gameData) { + // setPlayerOneHealth(Number(fighters.find(f => f.id === Number(gameData?.fighterIds[0]))!.health)); + // setPlayerTwoHealth(Number(fighters.find(f => f.id === Number(gameData?.fighterIds[1]))!.health)); + } }, [gameId, gameData, isGameLoading]); return ( @@ -154,8 +163,8 @@ export const FightDisplay: React.FC = () => { backgroundColor: "red", height: "10px", width: `${ - // (100 * Number(gameData.currentHealth[0])) / - fighters.find(f => f.id === Number(gameData.fighterIds[0]))!.health * 5 + (40 * Number(playerOneHealth)) / + fighters.find(f => f.id === Number(gameData.fighterIds[0]))!.health }%`, margin: "0 10px", }} @@ -165,8 +174,8 @@ export const FightDisplay: React.FC = () => { backgroundColor: "red", height: "10px", width: `${ - // (100 * Number(gameData.currentHealth[1])) / - fighters.find(f => f.id === Number(gameData.fighterIds[1]))!.health * 5 + (40 * Number(playerTwoHealth)) / + fighters.find(f => f.id === Number(gameData.fighterIds[1]))!.health }%`, margin: "0 10px", }} @@ -206,13 +215,18 @@ export const FightDisplay: React.FC = () => { )} - {gameData && ( + {gameLoaded && gameData && Number(gameData.fighterIds[0]) != 0 && Number(gameData.fighterIds[1]) != 0 && (
-

Results: {gameData?.winner}

- Wagered Amount: {gameData.wageredAmount.toString()} ETH +

+ Winner: {gameData?.winner == gameData?.players[0] && "PLAYER ONE"} + {gameData?.winner == gameData?.players[1] && "PLAYER TWO"} + {gameData?.winner == "0x0000000000000000000000000000000000000000" && "DRAW"} +

+

+ Wagered Amount: {(gameData.wageredAmount / BigInt(10n ** 18n)).toString()} +

)}{" "} - {/* other parts of the component */}{" "} );