0基础从前端到Web3 —— Mine Clearance Frontend(一)

2024-05-24 16:44

本文主要是介绍0基础从前端到Web3 —— Mine Clearance Frontend(一),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

初始化项目以及通过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 (<div><QueryClientProvider client={queryClient}><SuiClientProvider networks={networks} network={network as keyof typeof networks} onNetworkChange={(network) => setNetwork(network)}><WalletProvider><div className='ConnectButton'><ConnectButton /></div><MineClearance /><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 className='Game'><div className='StartButton'><Button variant="contained" onClick={StartGame}>Game</Button><br></br><i id="NotConnect" hidden={true}>Please Connect First!!!</i></div><div id='Checkerboard'><DrawCheckerboard /></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} size="large" onClick={clickBoard} sx={{width: "1px"}}>&nbsp;</Button>);i += 1;}const checkerboard = [];let j = 1;while (j <= MaxList) {checkerboard.push(<ButtonGroup orientation='vertical' aria-label='Vertical button group' variant='outlined' key={j} button-key={j}>{childboard}</ButtonGroup>);j += 1;}return (<Box>{checkerboard}</Box>);
}

三:提示信息

mui提供了加载等待、成功失败提示等ui选择,我们直接选取其中的一些进行调用,目的是当后续实现了链上调用后的信息反馈,包括但不限于游戏成功、游戏失败等提示信息。

这些信息出现的位置应当是游戏区域下方,而且若非特殊需求,应当一次只出现一个,其它的都应该隐藏,这里就需要令写函数对这系列的<div>标签进行统一管理。

function FeedBack() {return (<div className='FeedBack'><div id="circular_progress" hidden={true}><CircularProgress /></div><div id="success_alert" className='SuccessAlert' hidden={true}><Alert variant="outlined" severity="success">Congratulations on your successful mine clearance!</Alert></div><div id="encourage_alert" className='EncourageAlert' hidden={true}><Alert variant="outlined" severity="info">Fortunately you didn't touch a landmine, please consider your next step!</Alert></div><div id="failure_alert" className='FailureAlert' hidden={true}><Alert variant="outlined" severity="error">Unfortunately, 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

这篇关于0基础从前端到Web3 —— Mine Clearance Frontend(一)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/998963

相关文章

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染?基础示例使用逻辑与运算符(&&)使用条件语句列表中的条件渲染总结引言在现代

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

MySQL中my.ini文件的基础配置和优化配置方式

《MySQL中my.ini文件的基础配置和优化配置方式》文章讨论了数据库异步同步的优化思路,包括三个主要方面:幂等性、时序和延迟,作者还分享了MySQL配置文件的优化经验,并鼓励读者提供支持... 目录mysql my.ini文件的配置和优化配置优化思路MySQL配置文件优化总结MySQL my.ini文件

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE