Advanture test

[aaronwmy]

基本信息

微信： 18627132748

FreeBe身份： freebe共识者

邮箱： 316207488@qq.com

任务 Issues

#1 移动组件任务
#2 钱包登录

实现描述

完成了两个主要功能：

1. 可移动组件：

• 支持键盘方向键控制移动
• 支持鼠标点击移动到指定位置
• 支持自动移动模式，可配置移动方向和速度
• 实现了位置状态的持久化存储

2. Web3钱包登录：

• 支持以太坊钱包登录
• 实现了基于签名的身份验证
• 使用 nonce 机制防止重放攻击
• 集成了速率限制防止暴力攻击
• 登录状态持久化

技术栈：

• Next.js
• TypeScript
• Prisma (数据持久化)
• TailwindCSS (样式)
• NextAuth.js (认证)
• ethers.js (Web3交互)
• Rate Limiter (安全限制)

实现思路：

1. 移动组件实现：

   • 使用 useState 管理组件位置状态
   • 通过 useEffect 监听键盘事件和点击事件
   • 使用 requestAnimationFrame 实现流畅的自动移动
   • 通过 debounce 优化位置更新的频率

2. 钱包登录实现：

   • 生成随机 nonce 并存储到数据库
   • 要求用户使用钱包对 nonce 进行签名
   • 服务端验证签名的有效性
   • 使用 NextAuth.js 管理会话状态

运行指南

1. 环境要求：

• Node.js 18.0.0 或更高版本
• MySQL 8.0 或更高版本
• MetaMask 或其他以太坊钱包

2. 安装依赖：
   npm install

3. 数据库配置：
   设置.env文件：DATABASE_URL="mysql://用户名:密码@localhost:3306/adventure_island"
   NextAuth配置
   NEXTAUTH_URL="http://localhost:3000"
   NEXTAUTH_SECRET="生成一个随机密钥"

4. 初始化数据库：
   npm run prisma:generate

5. 运行
   npm run dev

功能截图