位置: IT常识 - 正文

【实战与杂谈】如何复活一个开源网站-游戏王卡片生成器(实战到底究竟是什么意思啊)

编辑:rootadmin
【实战与杂谈】如何复活一个开源网站-游戏王卡片生成器 1. 杂谈 

推荐整理分享【实战与杂谈】如何复活一个开源网站-游戏王卡片生成器(实战到底究竟是什么意思啊),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:实战好吗,实战是什么,实战到底究竟是什么意思啊,实战到底究竟是什么意思啊,实战是什么,实战是什么,实战是什么,实战的解释,内容如对您有帮助,希望把文章链接给更多的朋友!

作为一名十多年游戏王玩家,学生时代玩的是PSP和PS2上的游戏,到毕业后使用YGOPRO同步新卡片进行联网对战,再到现在约到线下进行实体卡片游戏。有些卡片价格太贵,因此我们对于这些卡在未购买之前都会自己打印出来暂时游玩。这里不得不提国内的制卡小工具游戏王卡片生成器。

 比较遗憾的是该网站即将下线。

值得庆幸的是作者对网站的更新一直以https://github.com/kooriookami/tools-vue的形式进行保存,本篇博文也是记录博主如何一步一步实现在本地运行起开源项目的经过。 

2. 分析

一般拿到一个开源项目我们可以通过ReadMe了解到他很多相关内容,通过ReadMe可以知道该项目是一个vue开发的前后端分离项目。跟着指引步骤运行项目,非常顺利运行了项目,在本地运行会发现以下问题

3. 解决

这里要介绍杂谈中提到的ygopro,他是一款开源的由国人Fluorohydride(圆神)自制的游戏王决斗系统。在国内我们一般使用萌卡所维护的版本,因此后续的讨论我们都会以萌卡的github项目进行分析。

3.1 获取数据3.1.1 卡片明细数据

在查看萌卡的项目中的我重点关注标题为YGO的仓库,其中ygopro-database这个仓库,引起我的注意。通过查看他的ReadMe我们可以知道这个项目就是用来管理我们的卡片信息内容。

Some databases of ygopro.

They are for now just for test.

切换到dump分支可以看到通过仓库提供了databases对应数据SQL脚本,这里省下了我很多时间去寻找如何提取数据库文件的卡片数据明细。

这里说一下我在github学习开源项目的另外一个方式就是查看issue,一般在项目上遇到问题都可以在issue进行提问,我在issue中发现这样的提问请问下数据库cdb文件是从哪里获取的,在里面我知道ygo的数据库文件可以通过DataEditorX来提取数据的明细。

3.1.2  卡片插画数据

通过查看源码还有网站公告中我们可以知道ygoprodeck这个网站,他提供了图片API可以进行查看下载。

3.2 功能复现3.2.1 自建API【实战与杂谈】如何复活一个开源网站-游戏王卡片生成器(实战到底究竟是什么意思啊)

通过chrome的开发工具,我们可以知道对应操作下会触发什么样的API请求,那剩下就是分析请求的返回内容与我们手头上的内容进行关联。得益于2.1.1获取到的SQL脚本,我们知道了我们数据收属性结构。

卡片明细表

记录了卡片各内基础信息

CREATE TABLE datas( id integer primary key, ot integer, alias integer, setcode integer, type integer, atk integer, def integer, level integer, race integer, attribute integer, category integer);

卡片描述表

记录卡片的效果信息

CREATE TABLE texts( id integer primary key, name text, desc text, str1 text, str2 text, str3 text, str4 text, str5 text, str6 text, str7 text, str8 text, str9 text, str10 text, str11 text, str12 text, str13 text, str14 text, str15 text, str16 text);

有了图片还有数据信息,只要我们构建API去读取内容即可,详细可以查看我的api项目。

3.2.2 项目本身修改修改目标API

在main.js我们可以配置数据获取api根目录

// 接口请求地址配置if (process.env.NODE_ENV === 'production') { // 上线环境 app.config.globalProperties.baseURL = 'http://127.0.0.1:8080/api';//https://tools.kooriookami.top/api} else { // 本地环境 app.config.globalProperties.baseURL = 'http://127.0.0.1:8080/api';}适配简体中文YGOPRO数据

使用自己提供的API的时候会发现当我们查看的是灵摆类的卡片的时候不能正常展示内容,我尝试分析加载数据。我们能发现在网站中加载的灵摆数据json中他们的卡片描述有【Pendulum Effect】、【Monster Effect】

{ "data": { "name": "终焉龙 混沌帝", "atk": 3000, "def": 2500, "attribute": 32, "desc": "←1 【Pendulum Effect】 1→\r\n这个卡名的灵摆效果1回合只能使用1次。\r\n①:支付1000基本分,以除外的1只自己的龙族怪兽为对象才能发动。这张卡破坏,那只怪兽加入手卡。\r\n【Monster Effect】\r\n这张卡不能通常召唤。「终焉龙 混沌帝」1回合1次在把自己墓地的光属性和暗属性的怪兽各1只除外的场合才能从手卡·额外卡组特殊召唤。\r\n①:1回合1次,把基本分支付一半才能发动。额外怪兽区域以外的自己场上的卡全部送去墓地,选最多有送去墓地的数量的对方场上的卡送去墓地。那之后,给与对方送去对方墓地的数量×300伤害。\r\n②:特殊召唤的表侧表示的这张卡从场上离开的场合回到卡组最下面。", "id": 4538826, "level": 16842760, "race": 8192, "type": 50331681 }, "message": "success", "status": 200}

再查看源码,源码也是使用【Pendulum Effect】、【Monster Effect】来数据的提取,因此要根据简体中文YGOPRO数据进行定制化修改。

export function parsePendulumScale(data) { if (parseType(data) === 'pendulum') { let list = data.desc.split('【Pendulum Effect】'); return parseInt(list[0]?.replace(/[^\d]/g, '')); } else { return 0; }}export function parsePendulumDescription(data, lang) { if (parseType(data) === 'pendulum') { let description = characterToHalf(data.desc).replace(/'''/g, '') .replace(/\r/g, '\n').replace(/(\n)\1*/g, '\n'); const list = description.split(/【Pendulum Effect】|【Monster Effect】|【Flavor Text】|【怪獸敘述】|【怪獸效果】|【怪獸描述】/).filter(item => item && item !== '\n'); if (lang === 'tc') { description = list[2]?.replace(/\d+→|\n/g, '') || ''; } else { description = list[1]?.replace(/\d+→|\n/g, '') || ''; } if (['jp', 'sc'].includes(lang)) { // 效果数字全角,卡名数字半角 description = numberToFull(description).replace(/(「.*?」)|(“.*?”)/g, s => numberToHalf(s)); } return description.trim(); } else { return ''; }}

 根据简体中文YGOPRO数据添加分割简体中文内容的字符

{ "data": { "name": "终焉龙 混沌帝", "atk": 3000, "def": 2500, "attribute": 32, "desc": "←1 【灵摆】 1→\r\n这个卡名的灵摆效果1回合只能使用1次。\r\n①:支付1000基本分,以除外的1只自己的龙族怪兽为对象才能发动。这张卡破坏,那只怪兽加入手卡。\r\n【怪兽效果】\r\n这张卡不能通常召唤。「终焉龙 混沌帝」1回合1次在把自己墓地的光属性和暗属性的怪兽各1只除外的场合才能从手卡·额外卡组特殊召唤。\r\n①:1回合1次,把基本分支付一半才能发动。额外怪兽区域以外的自己场上的卡全部送去墓地,选最多有送去墓地的数量的对方场上的卡送去墓地。那之后,给与对方送去对方墓地的数量×300伤害。\r\n②:特殊召唤的表侧表示的这张卡从场上离开的场合回到卡组最下面。", "id": 4538826, "level": 16842760, "race": 8192, "type": 50331681 }, "message": "success", "status": 200}export function parsePendulumScale(data) { if (parseType(data) === 'pendulum') { let list = data.desc.split('【灵摆】');//let list = data.desc.split('【Pendulum Effect】'); return parseInt(list[0]?.replace(/[^\d]/g, '')); } else { return 0; }}export function parsePendulumDescription(data, lang) { if (parseType(data) === 'pendulum') { let description = characterToHalf(data.desc).replace(/'''/g, '') .replace(/\r/g, '\n').replace(/(\n)\1*/g, '\n'); const list = description.split(/【Pendulum Effect】|【Monster Effect】|【灵摆】|【怪兽效果】|【Flavor Text】|【怪獸敘述】|【怪獸效果】|【怪獸描述】/).filter(item => item && item !== '\n'); if (lang === 'tc') { description = list[2]?.replace(/\d+→|\n/g, '') || ''; } else { description = list[1]?.replace(/\d+→|\n/g, '') || ''; } if (['jp', 'sc'].includes(lang)) { // 效果数字全角,卡名数字半角 description = numberToFull(description).replace(/(「.*?」)|(“.*?”)/g, s => numberToHalf(s)); } return description.trim(); } else { return ''; }}能直加载卡片原画

因为运行成本的原因ygoprodeck提供卡片原画API无法进行外链了,我们通过通告知道还是可以通过ygoprodeck提供的api下载图片,通过自选图片上传来加载卡片原画

 通过添加debugger我们定位到\src\render\views\yugioh.js代码中这段代码负责加载图片

export function parseImage(data) { debugger; return '/';}

只要我们拥有自己的图片库,通过自己构建api即可,修改如下,关于如何批量去下载图片请自行在网络上进行查询。

export function parseImage(data) { return `http://127.0.0.1:8080/images/${data.id}`;}4. 效果

5. 感想

这次网站复活是一个很典型的开源项目应用样例,跳过了开源项目的选型(关于开源项目的选型可以阅读我之前的这篇博客记开源系统落地-我是如何在工作中应用ShardingSphere-JDBC),从使用开源项目,遇到问题如何解决,到最终符合自己的使用需求。

参考:ygocore版本&服务器介绍+操作方法+实用链接

https://github.com/mycard/ygopro-database

修改后代码:GitHub - tale2009/tools-vue

对应后端API:GitHub - tale2009/KenhoYUGIOHAPI

本文链接地址:https://www.jiuchutong.com/zhishi/297648.html 转载请保留说明!

上一篇:【vue】 vue-router安装和配置方法(vue $route)

下一篇:YOLOv7改进之二十二:涨点神器——引入递归门控卷积(gnConv)(yolox改进)

  • 年度所得税汇算清缴操作流程
  • 增值税普票可以开给个人吗
  • 咨询服务费预收率怎么算
  • 其他应收款款项性质有哪几种
  • 发票备注栏必须备注的有哪些
  • 金蝶未结账是否可以重新起账
  • 公司转账给法人用途写什么
  • 报废车辆残值收入交多少增值税
  • 写字楼出租可以给租户注册吗
  • 转让股权原值的相关资料
  • 差额征税进项如何抵扣
  • 企业会议费发票可否抵扣?
  • 营改增劳务派遣
  • 会计去报税流程
  • 企业的福利费如何使用
  • 福利费的进项税额转出
  • 跨区域预缴企业所得税
  • 高新企业国家补助收入怎么入账
  • 开发票有时间限制吗?
  • 1697509550
  • 零星工程实施流程
  • 购进虚假发票进项税转出的会计处理?
  • 计提代扣代缴个税
  • 联想g40开机屏幕一直闪
  • 政府与事业单位会计
  • eclipse 4.19
  • win10专业版问题
  • 如何通过路由器查看宽带账号密码
  • edge浏览器百度网盘插件
  • php数组实现原理
  • 期初留存收益包括
  • 可视化大屏技术
  • php 数组
  • 谷歌colab免费额度
  • spring boot 2.3.0
  • python 构建
  • 残保金工资总额是计提还是实发
  • 小规模纳税人直接从农户购入农产品要交增值税吗
  • 对外捐赠的会计处理企业会计准则和小企业会计准则
  • phpcms程序
  • mysql怎么截取字段
  • 坏账准备计提比例一般是多少
  • 个税手续费返还计入哪个科目
  • 资产处置损益是当期损益吗
  • 融资租赁担保余值例题
  • 金蝶软件修改凭证
  • ubuntu20.04vim
  • access字符型数据
  • 省市县三级联动工作机制
  • 购入固定资产印花税税目是什么
  • 收到外币收入怎么处理
  • 广告类的公司
  • 车船使用税和印花税谁交
  • 以前年度损益调整在利润表中怎么填
  • 银行保函会计处理
  • 房地产业营改增税收政策与企业应对策略课后测试
  • 预付账款可以开发票吗
  • 股东投入的资金在现金流量表中如何提现
  • 企业代扣的个人所得税款收入属于哪个会计科目
  • 应缴纳房产税的房产
  • 年末待处理财产损益有余额怎么办
  • 直接成本包括哪些
  • 银行凭证怎么记账
  • win xp 添加网络打印机
  • Vista下以真正的管理员登陆的设置方法
  • 如何关闭safari
  • 手动ghost恢复
  • 如何创作图文并茂的图片
  • vnc远程桌面linux
  • WIN7系统怎么安装 注音输入法
  • mtask.exe - mtask是什么进程 有什么用
  • windows10x预览版
  • linux如何使用vim编写程序
  • label控件的作用
  • shell脚本如何注释
  • JavaScript实现Base64编码转换
  • unity工程文件怎么弄
  • javascript快速入门
  • 上海税务发票自动抵扣
  • 深圳拖欠工资举报网站
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设