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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/839685.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Obsidian Git 多端同步

2023年6月&#xff0c;某云笔记限制了免费用户最多同时登录 2 台设备&#xff0c;想要增加设备数量需要付费开通会员。之后我一直想找一款合适的笔记本软件&#xff0c;年底尝试了Obsidian&#xff0c;断断续续摸索了好几天终于成功了。将那时的笔记拿来分享一下。 相关地址&am…

FPGA搭积木之按键消抖(改进版)

目录 1.前言 2.回顾之前的设计 3.基于读者思路的设计 4.ModelSim仿真 1.前言 昨天分享的关于FPGA对机械按键消抖的设计&#xff0c;有读者指出了其中的不足&#xff0c;并给出了他的思路。今天就读者的设计思路&#xff0c;来再做一个按键消抖模块。这个程序大概是大学的时…

亚马逊、eBay、沃尔玛、OZON、速卖通等平台自养号攻略,助力测评补单

当前&#xff0c;跨境电商面临着巨大的挑战&#xff0c;其运营环境日益变得错综复杂。然而&#xff0c;这种复杂性可以归结为两个核心元素&#xff1a;买与刷。商家们通过进行买卖交易或补单操作&#xff0c;旨在增加销售、提升产品排名&#xff0c;并进而增强产品的权重。 销…

docker-如何将容器外的脚本放入容器内,将容器内的脚本放入容器外

文章目录 前言docker-如何将容器外的脚本放入容器内&#xff0c;将容器内的脚本放入容器外、1. docker 如何将容器外的脚本放入容器内1.1. 验证 2. 将容器内的脚本放入容器外 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&…

VMware Workstation 虚拟机安装 ubuntu 24.04 server 详细教程 服务器安装图形化界面

1 阿里云下载 ubuntu-releases安装包下载_开源镜像站-阿里云 2 打开vmware,新建虚拟机 3 选择下载的镜像,开始安装 3 光驱这里修改下 4 重新启动&#xff0c;安装图形化界面 #更新软件包列表 sudo apt-get update #安装Ubuntu图形桌面 sudo apt install ubuntu-desktop 5 安…

【调试笔记-20240524-Linux-扩展 OpenWrt-23.05 发行版 EXT4 镜像文件大小】

调试笔记-系列文章目录 调试笔记-20240524-Linux-扩展 OpenWrt-23.05 发行版 EXT4 镜像文件大小 文章目录 调试笔记-系列文章目录调试笔记-20240524-Linux-扩展 OpenWrt-23.05 发行版 EXT4 镜像文件大小 前言一、调试环境操作系统&#xff1a;Ubuntu 22.04.4 LTS工作环境调试目…

【SD-WAN】香港企业进入粤港澳大湾区所面临的机遇和挑战

粤港澳大湾区发展及规划是中国其中一个主点发展战略&#xff0c;具备完整的多元化产业结构&#xff0c;城市之间建立强大的经济互补性&#xff0c;是国际性湾区和世界级城市群。因此&#xff0c;大湾区近年吸引了不少香港的创新及科技企业前往发展投资及设立据点扩展业务。本文…

增强版 Kimi:AI 驱动的智能创作平台,实现一站式内容生成(图片、PPT、PDF)!

前言 基于扣子 Coze 零代码平台&#xff0c;我们从零到一轻松实现了专属 Bot 机器人的搭建。 AI 大模型&#xff08;LLM&#xff09;、智能体&#xff08;Agent&#xff09;、知识库、向量数据库、知识图谱&#xff0c;RAG&#xff0c;AGI 的不同形态愈发显现&#xff0c;如何…

SpringBoot中注解@RestController | @ResponseBody | @Controller

ResponseBody 可以修饰类和方法 Controller 和 RestController 只能修饰类 RestController 告诉Spring&#xff0c;帮我们管理这个代码&#xff0c;我们后续访问时&#xff0c;才能访问到 RequestMapping 路由映射&#xff0c;可以修饰方法&#xff0c;也可以修饰类 访问地址…

【Linux网络编程】IO多种转接之Reactor

Reactor 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603; 基于上一篇epoll的学习&#xff0c;现在我们也知道epoll的工作模式有两种&#xff0c…

【UE5.1 多线程 异步】“Async Blueprints Extension”插件使用记录

目录 一、异步生成Actor示例 二、异步计算示例 参考视频 首先需要在商城中下载“Async Blueprints Extension”插件 一、异步生成Actor示例 2. 创建一个线程类&#xff0c;这里要指定父类为“LongAsyncTask”、“InfiniteAsyncTask”、“ShortAsyncTask”中的一个 在线程类…

el-table 实现嵌套表格的思路及完整功能代码

要实现的需求是这样的&#xff1a; 本来我是用 el-table 的 :span-method 方法实现的&#xff0c;但发现合并起来有问题&#xff0c;跟我的需求差距有些大&#xff0c;于是我想到了嵌套表格。但是嵌套完之后的样子也是很奇怪&#xff1a; 不要气馁&#xff0c;思路还是对的&a…

基于文心智能体平台打造专属情感类陪伴智能体【情绪价值提供者】

文章目录 一、文心智能体平台介绍二、文心智能体平台注册三、智能体介绍四、智能体创建过程4.1 基础配置4.2 高级配置4.3 预览调优4.4 公开发布 五、智能体使用心得六、智能体分享方式七、参考链接 一、文心智能体平台介绍 文心智能体平台是百度推出的基于文心大模型的智能体&…

计算机毕业设计 | springboot药品库存追踪与管理系统 药店管理(附源码)

1&#xff0c;绪论 1.1 背景调研 如今药品调价频繁&#xff0c;且品种繁多&#xff0c;增加了药品销售定价的难度。药品来货验收登记中的审查有效期环节容易出错&#xff0c;错收过期或有效期不足的药品。 手工模式下的药品库存难以及时掌握&#xff0c;虽然采取了每日进行缺…

Flask CORS: 解决跨域资源共享问题的利器

文章目录 安装和启用 CORS配置 CORS拓展 在本文中&#xff0c;我们介绍了如何使用 Flask-CORS 扩展来解决跨域问题。Flask-CORS 是一个方便的工具&#xff0c;可以帮助我们轻松地实现跨域资源共享支持。 安装和启用 CORS 要开始使用 Flask-CORS&#xff0c;我们需要先安装它。…

机器学习模型可视化分析和诊断神器Yellowbrick

大家好&#xff0c;机器学习(ML)作为人工智能的核心&#xff0c;近来得到巨大应用&#xff0c;ML是使计算机能够在无需显式编程的情况下进行学习和预测或决策。ML算法通过学习历史数据模式&#xff0c;来对新的未见数据做出明智的预测或决策。然而&#xff0c;构建和训练ML模型…

静态代理和动态代理

静态代理 代理接口 public interface Person {public String wakeUp(String name);public String lunch(String name); }被代理对象 public class Student implements Person{Overridepublic String wakeUp(String name) {System.out.println(name"星期一早上8点上班&a…

什么是 UUID,uuid

文章目录 一、是什么二、为什么三、怎么用 标题&#xff1a;深入探讨UUID&#xff1a;全球唯一标识符的秘密 一、是什么 在当今数字化时代&#xff0c;唯一标识符&#xff08;UUID&#xff09;在计算机科学领域扮演着重要的角色。UUID是一种用于标识信息的唯一字符串&#xff0…

【intel CPU】三代牙膏的对比

1、PC处理器的选择 制程工艺 传说的“intel7”,感觉就像老婆饼&#xff0c;并不是7nm。 2、12代到13代其实应该归为一代&#xff0c;那就是大核心不行就堆小核心 3、所以智能踢掉有小核的&#xff1b; 3.1、CPU规格 3.2 内存规格 3.3 封装规格 其他都是一样的&#xff1b; …

彩色进度条(C语言版本)

.h文件 #include<stdio.h> #include<windows.h>#define NUM 101 #define LOAD_UP 50 #define LOAD_DOWN 60 #define SLEEP_SLOW 300 #define SLEEP_FAST 70 版本1&#xff1a;&#xff08;初始版&#xff09; //v1 #include "progress.h" int main() …