网站制作评价标准,现在做一个网站最少要多少钱,口碑好的网站建设收费,怎么样做英文网站初始化项目以及通过dapp-kit连接钱包的部分就不再赘述#xff0c;具体可以点击查看#xff0c;如果篇幅当中遇到了一些未添加的依赖项#xff0c;直接通过pnpm add -D name一般都可以解决。
一#xff1a;链上网络切换
这里提供一个最简单的切换方式#xff0c;…初始化项目以及通过dapp-kit连接钱包的部分就不再赘述具体可以点击查看如果篇幅当中遇到了一些未添加的依赖项直接通过pnpm add -D name一般都可以解决。
一链上网络切换
这里提供一个最简单的切换方式不需要放置下拉框也不需要添加任何其它更多的设置只需要在调用SuiClientProvider的时候增加一个参数onNetworkChange{(network) setNetwork(network)}它的作用是当Sui钱包插件改变链上网络的时候触发setNetwork方法并将新的链上网络传入设置。
function App() {const queryClient new QueryClient();const [network, setNetwork] React.useState(testnet);const networks {testnet: { url: getFullnodeUrl(testnet) },mainnet: { url: getFullnodeUrl(mainnet) },};return (divQueryClientProvider client{queryClient}SuiClientProvider networks{networks} network{network as keyof typeof networks} onNetworkChange{(network) setNetwork(network)}WalletProviderdiv classNameConnectButtonConnectButton //divMineClearance /FeedBack //WalletProvider/SuiClientProvider/QueryClientProvider/div);
}二游戏区域
首先是一个开始游戏的按钮它的运行逻辑要在连接钱包之后因为后面与链上的交互都需要事先明确“我是谁”。
function MineClearance() {const account useCurrentAccount();const StartGame () {document.getElementById(NotConnect)!.hidden true;if (!account) {document.getElementById(NotConnect)!.hidden false;return;}// console.log(Connected);return;};return (div classNameGamediv classNameStartButtonButton variantcontained onClick{StartGame}Game/Buttonbr/bri idNotConnect hidden{true}Please Connect First!!!/i/divdiv idCheckerboardDrawCheckerboard //div/div);
}其次我们来考虑扫雷区域该如何进行描绘很自然联想到它是由一个又一个小方块依次拼接而成的而mui正好又提供了一系列的ButtonGroup所以问题就简化成了如何通过循环进行处理这些个按钮包括放置、点击以及后续得到反馈后实时更改按钮状态等等。本篇只涉及放置以及最基本的点击逻辑而链上调用以及反馈信息处理等部分将留到下一篇文章。
function DrawCheckerboard() {const clickBoard (event: any) {const r event.target.getAttribute(button-key)const l event.target.parentElement.getAttribute(button-key);console.log((${r}, ${l}));let str1 event.currentTarget.innerHTML.split(, 1)[0];const str2 event.currentTarget.innerHTML.substring(str1.length);str1 str1 x ? 1 : x;const str str1.concat(str2);console.log(str);event.currentTarget.innerHTML str;event.target.disabled true;HiddenFeedBack();ShowFeedBack(circular_progress);// ShowFeedBack(success_alert);// ShowFeedBack(encourage_alert);// ShowFeedBack(failure_alert);}const childboard [];let i 1;while (i MaxRow) {childboard.push(Button key{i} button-key{i} sizelarge onClick{clickBoard} sx{{width: 1px}}nbsp;/Button);i 1;}const checkerboard [];let j 1;while (j MaxList) {checkerboard.push(ButtonGroup orientationvertical aria-labelVertical button group variantoutlined key{j} button-key{j}{childboard}/ButtonGroup);j 1;}return (Box{checkerboard}/Box);
}三提示信息
mui提供了加载等待、成功失败提示等ui选择我们直接选取其中的一些进行调用目的是当后续实现了链上调用后的信息反馈包括但不限于游戏成功、游戏失败等提示信息。
这些信息出现的位置应当是游戏区域下方而且若非特殊需求应当一次只出现一个其它的都应该隐藏这里就需要令写函数对这系列的div标签进行统一管理。
function FeedBack() {return (div classNameFeedBackdiv idcircular_progress hidden{true}CircularProgress //divdiv idsuccess_alert classNameSuccessAlert hidden{true}Alert variantoutlined severitysuccessCongratulations on your successful mine clearance!/Alert/divdiv idencourage_alert classNameEncourageAlert hidden{true}Alert variantoutlined severityinfoFortunately you didnt touch a landmine, please consider your next step!/Alert/divdiv idfailure_alert classNameFailureAlert hidden{true}Alert variantoutlined severityerrorUnfortunately, the minesweeper failed!/Alert/div/div);
}function ShowFeedBack(id: string) {// document.getElementById(id)!.hidden false;if (id circular_progress)document.getElementById(id)!.hidden false;elsedocument.getElementById(id)!.style.display inline-flex;
}function HiddenFeedBack() {document.getElementById(circular_progress)!.hidden true;// document.getElementById(success_alert)!.hidden true;// document.getElementById(encourage_alert)!.hidden true;// document.getElementById(failure_alert)!.hidden true;document.getElementById(success_alert)!.style.display none;document.getElementById(encourage_alert)!.style.display none;document.getElementById(failure_alert)!.style.display none;
}这里的实现方式多样呈现的只是其中一种也绝非是最优解毕竟自己看着都有点累赘后面可能会视情况更改。
四其它
完整代码可以点击查看下面是几张实际运行图。 五加入组织共同进步
Sui 中文开发群(TG) M o v e \mathit{Move} Move 语言学习交流群: 79489587
