Sui 猜大小游戏前端设计

最新推荐文章于 2024-09-11 14:54:26 发布

stom698

最新推荐文章于 2024-09-11 14:54:26 发布

阅读量962

点赞数 26

分类专栏： # 如何在学习的同时获取奖励？sui move星航计划文章标签：游戏前端 web3 学习方法区块链智能合约学习

本文链接：https://blog.csdn.net/baicai1hao/article/details/136684147

版权

如何在学习的同时获取奖励？sui move星航计划专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.1 前言

上一篇已经简单的做了一个有了基本可玩性的框架，本文尝试在其基础上进行后端合约优化并且设计前端。

**1.2 前端设计
**

根据上一篇猜大小游戏合约也尝试先设计一个基础的前端交互界面**。
**

先创建个链接钱包的模板

#创建模板
pnpm create @mysten/dapp --template react-client-dapp
#安装依赖
pnpm install @mysten/sui.js @mysten/dapp-kit @tanstack/react-query

然后新建constants.ts文件，新增packageid

export const SICBOGAME_PACKAGE_ID = "0x4047ca9d7990e25abe3dea249e54eb5ed079212dd976f1ccc30700a96d01608f";

然后创建前端交互creategame.tsx文件，通过猜小和猜大按钮来发起交易然后通过queryEvents来获取交易返回信息

import {
    useSignAndExecuteTransactionBlock,
    useSuiClient,
  } from "@mysten/dapp-kit";
import { TransactionBlock } from "@mysten/sui.js/transactions";
import { Button, Flex, Heading } from "@radix-ui/themes";
import { SICBOGAME_PACKAGE_ID } from "./constants";  
  
export function Creategame({ 
    onCreated,
}:{
    onCreated: (id: string) => void;
 }) {
    const { mutate: signAndExecute } = useSignAndExecuteTransactionBlock();
    const client = useSuiClient();

    const executeMoveCall = (method: "small" | "large") => {
        const txb = new TransactionBlock();

        if (method === "small") {
        txb.moveCall({
            arguments: [txb.pure.u64(0)],
            target: `${SICBOGAME_PACKAGE_ID}::sicbogame::create_game`,
        });
        } else {
        txb.moveCall({
            arguments: [txb.pure.u64(1)],
            target: `${SICBOGAME_PACKAGE_ID}::sicbogame::create_game`,
        });
        }

        signAndExecute(
        {
            transactionBlock: txb,
            options: {
            showEffects: true,
            showObjectChanges: true,
            },
        },
        {
            onSuccess: (tx) => {
                client.
                    queryEvents({
                        query:{Transaction:tx.digest}
                    }).then(PaginatedEvents=> {
                        const events = JSON.stringify(PaginatedEvents.data[0].parsedJson);
                        const result = JSON.parse(events)['msg'];
                    
                        if (result.length > 0) {
                          onCreated(result)
                        } else {
                          onCreated('No events found for the given criteria.');
                        }
                      })
                      .catch(error => { 
                        console.error('Error querying events:', error);
                      });
            },
        },
        );
    };

    

    return (
        <>
        <Heading size="3">Game Start</Heading>

        <Flex direction="column" gap="2">
            <Flex direction="row" gap="2">
            <Button onClick={() => executeMoveCall("small")}>
                猜小
            </Button>
            <Button onClick={() => executeMoveCall("large")}>
                猜大
            </Button>
            </Flex>
        </Flex>
        </>
    );
}

然后修改新建QueryDigest.tsx，返回猜选的结果


export function QueryDigest({ id }: { id: string }) {

  // 展示本次交易obeject中的内容。
  return (
    <div>
      <h3>Game Result:</h3>
      <ul>
        { id }
      </ul>
    </div>
  );
}

修改一下App.tsx文件

import { ConnectButton, useCurrentAccount } from "@mysten/dapp-kit";
import { Box, Container, Flex, Heading } from "@radix-ui/themes";
import { WalletStatus } from "./WalletStatus";
import { useState } from "react";
import { isValidSuiObjectId } from "@mysten/sui.js/utils";
import { QueryDigest } from "./QueryDigest";
import { Creategame } from "./creategame";

function App() {
  const currentAccount = useCurrentAccount();
  const [counterId, setCounter] = useState(() => {
    const hash = window.location.hash.slice(1);
    return isValidSuiObjectId(hash) ? hash : null;
  });
  return (
    <>
      <Flex
        position="sticky"
        px="4"
        py="2"
        justify="between"
        style={{
          borderBottom: "1px solid var(--gray-a2)",
        }}
      >
        <Box>
          <Heading>SICBOGAME</Heading>
        </Box>

        <Box>
          <ConnectButton />
        </Box>
      </Flex>
      <Container>
        <Container
          mt="5"
          pt="2"
          px="4"
          style={{ background: "var(--gray-a2)", minHeight: 500 }}
        >
          <WalletStatus />
          {currentAccount ? (
            counterId ? (
              <QueryDigest id={counterId} />
            ) : (
              <Creategame
                onCreated={(id) => {
                  window.location.hash = id;
                  setCounter(id);
                }}
              />
            )
          ) : (
            <Heading>Please connect your wallet</Heading>
          )}
        </Container>
      </Container>
    </>
  );
}

export default App;

然后运行