Skip to content

PyMonar/hs-collection

Repository files navigation

HS-Collection

JavaScript Style Guide

1. 需求

1.1 概述

  • 收集 - 记录卡牌收集情况,支持多种检索方式
  • 成就 - 通过上传截图记录达成成就
  • 心得 - 存档心得与攻略
  • 套牌 - 存档套牌

1.2 详细需求

1.2.1 收集

主要记录炉石收集中缺失的卡牌,便于集中查看和管理,可以迅速确定扩展包收集的程度,方便合成卡牌。

主要以图片的形式进行展示,支持添加、修改和删除缺失卡牌,可以根据条件(年度、扩展包、名称、稀有度、收集情况、合成意向)进行检索缺失卡牌。

添加和修改卡牌以模态框的形式。

1.2.2 成就

主要通过上传截图、展示截图的方式来展示成就达成情况,例如5000胜记录点、德鲁伊金色头像获取、一包三橙等情况的截图。截图按照时间顺序排列展示。可支持简单搜索(标签与文本)。

添加和修改成就以模态框形式。另外成就列表页采用缩略图形式,每行展示4-5张,有分页。

1.2.3 心得

类似博客系统,用于发布和存档炉石心得、攻略等。支持富文本编辑。支持简单搜索(标签和文本)。

心得首页是列表形式,有分页,每页20条目。新增、编辑和查看界面均为独立页面。

1.2.4 套牌

主要用于存档套牌。套牌主要包括两部分:套牌代码和套牌截图。套牌可以有“喜欢”功能以及推荐度打分。收集的套牌可以进行编辑删除操作,可以通过检索条件进行检索。

套牌列表页面根据职业分9个标签页。列表条目hover可以预览套牌截图,并且有复制代码的快捷按钮。列表界面有分页。新增和编辑采用模态框的方式。

1.2.5 系统

背景图案可采用官网风格,带视差。

搜索功能提供简单搜索和高级搜索,默认简单搜索,高级搜索可以点击按钮呼出。

空格或点击缩略图可以进行图片预览。

心得列表页可提供瀑布流展示模式(增强功能,后续实现)。

2. 设计

2.1 模型设计

2.1.1 卡牌模型

模型名称:Card

数据库表名:card

字段名称 字段 类型 说明
主键 id String
卡牌名称 name String
所属年度 year int 枚举类型
扩展包 expansion int 枚举类型
游戏模式 game_type int 枚举类型
稀有度 rarity int 枚举类型
卡牌归属 card_class int 枚举类型
卡牌类别 card_type int 枚举类型
收集情况 count int 0-2之间
合成意向 intention int 0-5之间
卡牌图片 url String 图片存储位置

2.1.2 成就模型

模型名称:Achievement

数据库表名:achievement

字段名称 字段 类型 说明
主键 id String
成就名称 name String
成就截图 url String 图片存储位置
上传时间 date Date 成就完成时间

成就需要关联标签,所以设置成就标签子表: achievement_tag

字段名称 字段 类型 说明
主键 id String
成就id achievement_id String 外键
标签id tag_id String 外键

2.1.3 心得模型

模型名称:Summary

数据库表名:summary

字段名称 字段 类型 说明
主键 id String
标题 title String
作者 author String
内容 content Text 大文本,带格式化信息
发布时间 date Date

心得需要关联标签,所以设置心得标签子表: summary_tag

字段名称 字段 类型 说明
主键 id String
心得id summary_id String 外键
标签id tag_id String 外键

2.1.4 套牌模型

模型名称:Deck

数据库表名:deck

字段名称 字段 类型 说明
主键 id String
套牌名称 name String
套牌代码 code String 官方生成的代码
套牌截图 url String 图片存储位置
所属年度 year int 枚举类型
游戏模式 game_type int 枚举类型
套牌归属 deck_class int 枚举类型
是否喜欢 like int 0:非喜欢,1:喜欢
推荐度 score int 0-5分
说明 comment String

套牌需要关联标签,所以设置套牌标签子表: deck_tag

字段名称 字段 类型 说明
主键 id String
套牌id deck_id String 外键
标签id tag_id String 外键

2.1.5 标签模型(系统预置)

模型名称:Tag

数据库表名:tag

字段名称 字段 类型 说明
主键 id String
标签名称 name String 2-5个字
标签类别 type String achievement/summary/deck
标签说明 comment String hover显示简短说明
标签颜色 color String 存储颜色rgb值,用于页面标签颜色显示

2.1.6 枚举类型(系统预置)

枚举可以统一存放入一张表中,通过type字段区分。

  • 所属年度:YEAR
枚举字段 枚举名称 枚举值 说明
ANCIENT 史前 0 海怪年之前
MONSTAER 海怪年 1 2016.4-2017.3
MAMMOTH 猛犸年 2 2017.4-2018.3
RAVEN 渡鸦年 3 2018.4-2019.3
  • 扩展包:EXPANSION
枚举字段 枚举名称 枚举值 说明
CLASSIC 经典 0 2014.3
NAXX 纳克萨玛斯 1 2014.7
GVG 地精大战侏儒 2 2014.11
BLACKROCK 黑石山的火焰 3 2015.4
TGT 冠军的试炼 4 2015.8
EXPLORERS 探险者协会 5 2015.12
OLDGODS 上古之神的低语 6 2016.4
KARAZHAN 卡拉赞之夜 7 2016.8
GADGETZAN 龙争虎斗加基森 8 2016.12
UNGORO 勇闯安戈洛 9 2017.4
KNIGHTS 冰封王座的骑士 10 2017.8
KOBOLDS 狗头人与地下世界 11 2017.12
  • 游戏模式:GAME_TYPE
枚举字段 枚举名称 枚举值 说明
STANDARD 标准 0
WILD 狂野 1
  • 稀有度:RARITY
枚举字段 枚举名称 枚举值 说明
BASIC 基础 0
COMMON 普通 1
RARE 稀有 2
EPIC 史诗 3
LEGENDARY 传说 4
  • 职业:CARD_CLASS
枚举字段 枚举名称 枚举值 说明
NEUTRAL 中立 0
ZS 战士 1
LR 猎人 2
SM 萨满 3
DZ 盗贼 4
FS 法师 5
XD 德鲁伊 6
QS 骑士 7
MS 牧师 8
SS 术士 9
  • 卡牌类别:CARD_TYPE
枚举字段 枚举名称 枚举值 说明
SPELL 法术 0
MINION 随从 1
WEAPON 武器 2
HERO 英雄 3

2.2 API设计

2.2.1 收集API

1.获取所有卡牌信息

参数项 参数值
url /collection/query_all
method get

请求参数

{
    name: '',
    year: 0
}

返回结果

{
    status: 1,
    data: []
}

2.获取单张卡牌信息

参数项 参数值
url /collection/query/:id
method get

请求参数

返回结果

{
    status: 1,
    data: {}
}

3.新增卡牌

4.编辑卡牌

5.删除卡牌

2.2.2 成就API

1.查询所有成就列表

2.查询单个成就

3.新增成就

4.编辑成就

5.删除成就

2.2.3 心得API

1.查询所有心得列表

2.查询单个心得

3.新增心得

4.编辑心得

5.删除心得

2.2.4 套牌API

1.查询所有套牌列表

2.查询单个套牌

3.新增套牌

4.编辑套牌

5.删除套牌

2.2.5 枚举API

1.获取年度信息

参数项 参数值
url /enum/year
method get

请求参数:无

返回结果

{
    status: 1,
    data: [{
        id: 'ANCIENT',
        name: '史前',
        code: 0,
        comment:'2014.4-2016.4'
    }, {
        id: 'MONSTAER',
        name: '海怪年',
        code: 1,
        comment:'2016.4-2017.4'
    }, {
        id: 'MAMMOTH',
        name: '猛犸年',
        code: 2,
        comment:'2017.4-2018.4'
    }, {
        id: 'RAVEN',
        name: '渡鸦年',
        code: 3,
        comment:'2018.4-2019.4'
    }]
}

2.获取扩展包信息

参数项 参数值
url /enum/expansion
method get

参数与结果同年度信息。

3.获取游戏模式信息

参数项 参数值
url /enum/game_type
method get

参数与结果同年度信息。

4.获取稀有度信息

参数项 参数值
url /enum/rarity
method get

参数与结果同年度信息。

5.获取职业类别信息

参数项 参数值
url /enum/card_class
method get

参数与结果同年度信息。

6.获取卡牌类别信息

参数项 参数值
url /enum/card_type
method get

参数与结果同年度信息。

2.3 错误处理

3. 技术栈

本工程拟全部采用Javascript语言开发。

  • DB: MongoDB
  • Server End: Koa.js
  • Front End: Vue.js + ElementUI

About

Records of Monar's HearthStone Collection

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published