New UI Framework

[kenchendesign]

@solofandy 单独建一个issue来track你的新UI。既然你重写了前端，那可以麻烦你看看是否可以实现这个排版呢？

改成这样主要为了能更清楚地显示计算条件，同时用图标来显示龙比较统一

[solofandy]

这个比现在做的demo要简单很多，弹出来的详情是最难的，晚上就能上线

[b1ueb1ues]

如果需要原始数据结构做一些调整我可以配合

[kenchendesign]

那真是太棒辣！期待一下。 速度上现在瓶颈在哪里呢？第一次打开却是有点慢，实在不行我们可以加一个loader

[kenchendesign]

蓝大把condition格式优化下呗？hp70改成HP > 70%之类

[b1ueb1ues]

哦 这个是应该, 现在界面已经不需要那么省空间了.

[solofandy]

Hi all, 已经发布上去了。 https://f-dl-sim.herokuapp.com/ 已知的问题：1 DPS第二行忘记加鼠标移上去的提示了

2. 顶部和整个页面布局需要重新设计一下
3. 建议找个更好看的的英文字体 https://fonts.google.com/

有什么建议和要求就直接这个issue里面说，我回头想下代码怎么给你们（主要是你们能编译测试）

[solofandy]

速度上现在瓶颈在哪里呢？第一次打开却是有点慢，实在不行我们可以加一个loader

发布在heroku美国的节点上了，中国访问过去速度太慢了，第一次大概要加载1M左右的 js 代码，做个loader会漂亮很多

[kenchendesign]

很赞！！！ 罗列一下一些可以再改进的地方：

1. Font Family用这个stack：-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif 不用Google的字库可以进一步减少加载时间

2. 图表配色用这个array：#228be6,#40c057,#fab005,#f76707,#e64980,#15aabf,#7950f2,#fa5252,#74b816,#12b886,#1864ab,#2b8a3e,#e67700,#d9480f,#a61e4d,#0b7285,#5f3dc4,#c92a2a,#5c940d,#087f5b

3. 每个人两条bar看起来有点乱，把第二条（没有condition的那条）设成opacity: 0.3吧

4. 龙的图片pic目录下已经有了，可以加在护符边上吗？（缺Vayu的图，我贴在这里了）

5. Tooltip的渐入渐出效果有点烦人，有option可以把transition的时间改成0吗？

6. 图标hover的时候不需要阴影，tooltip作为反馈就够了。鼠标需要变成pointer

7. 人物头像、护符、龙的图片hover的时候最好能显示名字

8. 中英文toggle做起来麻烦吗？

9. 顶部布局我有个新的想法，如下图：

   

[solofandy]

2. 图表配色用这个array： #228be6,#40c057,#fab005,#f76707,#e64980,#15aabf,#7950f2,#fa5252,#74b816,#12b886,#1864ab,#2b8a3e,#e67700,#d9480f,#a61e4d,#0b7285,#5f3dc4,#c92a2a,#5c940d,#087f5b

最好把名字对照表也给我，更准确，我现在准备按照csv文件里面的顺序做出来

8. 中英文toggle做起来麻烦吗？

不麻烦，前端框架自带功能，但是要研究一下

另外，下一版上线要明天下午左右

[solofandy]

Hi all, 最新版本放上去了，https://f-dl-sim.herokuapp.com/

• [x] 复选checkbox是不是添加全选、反选(toggle)的功能
• [x] legend 是不是像filter这种能够做条件筛选

vayu的图放到当前站点上吧，我所有图都是链到当前站点上的 [破涕为笑.jpg]

[kenchendesign]

你也太快了八～ 👍 Vayu的图我加了。

回答你的问题：

1. 全选可以有，反选感觉too much，在小标题右边（右对其）加个Select all的链接吧 见最新的comment

2. Legend做成checkbox我觉得可以有

Feedback：

1. 配色没来得及给你，我贴在下面了 atk > #228be6 s1 > #40c057 s2 > #fab005 s3 > #f76707 bleed > #e64980 force_strike > #15aabf team_buff > #7950f2 (其他乱七八糟的全都暂时给#12b886吧)
2. loading的时候白色的overlay透明度调低一点吧，0.5这样，转的圈圈可以不要（因为每次位置不一样有点烦人）
3. 现在sidebar和content的padding有点挤，四周全都加到30px吧（头像和左边缘的距离，说明文字和右边缘的距离，sidebar内容和左边缘的距离，等等），星级那里一行放不下就分三行吧
4. sidebar顶上的“DPS Sim @b1ueb1ues.github.io”替换成现在UI左上角的logo加名字吧
5. sidebar最后可以加一个section叫About，里面可以丢一些credit和links（这个等全部做完了再考虑放什么也可以）
6. 有个bug，tooltip现在似乎有个hide delay，看看能不能去掉？
7. 人物图片和龙护符的图片垂直改成居中吧，现在有点奇怪。另外在人的右边加一个20px的margin，现在有点挤
8. Condition里的字感觉垂直居中就可以了，不需要像我图里那样专门向上对齐

[kenchendesign]

编辑了一通，现在停手了

[kenchendesign]

加一项： 我觉得filter应该像购物网站那样，默认全都不选，全都不选的时候=全选 然后不需要在每个section加select all，只需要在最上面加一个Reset all

[solofandy]

更新了

• [x] copyright和about
• [x] 改进tooltip

@b1ueb1ues condition和description 进一步更新下就更好了

[kenchendesign]

吊吊吊，现在看起来舒服多了！ Filter那边的reset和all有点counter intuitive，可以试试我上面说的那样？

我觉得filter应该像购物网站那样，默认全都不选，全都不选的时候效果等于全选 当选上任意一个的时候标题旁边加一个Reset

[solofandy]

剩Tooltip和mobile页面的问题了 开个branch，我来提交代码？

github.io 应该只是静态http服务器，要把编译好的页面一并提交才行 坏笑.jpg

[kenchendesign]

PR就交给 @b1ueb1ues 啦（非码农这块真的不熟），我周末抽空画一下mobile UI的设计 还有一些别的微调我等会儿发在这里

[kenchendesign]

@solofandy 等等，我发现你误解我说的filter逻辑了。 应该是这样：

1) 默认初始状态：checkbox全不选，但是此时所有角色都显示

2. 当选择其中一个checkbox：此时只显示刀角色

3. 多选：此时只显示刀和剑的角色

4. 全选：此时显示所有角色

所以别的逻辑都没错就是要改一下初始默认情况。

另外"Reset"的“R”要大写。

[kenchendesign]

我做了个新的logo，把现在的换掉吧，文字自带了，另外左对齐不要居中 URL和原来一样文件名改成logo-new.png 尺寸不要太大，width设一个240px吧

[kenchendesign]

细节的Feedback

• [ ] 1. html的title改成DPS Simulator for Dragalia Lost

• [ ] 2. "Reset" links默认不需要下划线，hover上去再加下划线。下面的About，Feedback等等链接同理

• [ ] 3. About的那些链接改成左对齐边栏，来保持和上面的filter的统一排版。另外底部加20px的padding，现在太挤了

• [ ] 4. .aside的宽度增加20px

• [ ] 5. .el-table__body-wrapper加一个20px的padding-top和padding-bottom

• [ ] 6. 中英文呼唤的链接我觉得可以加在About那边，变成四个链接： About, Feedback, Wrymprints, 中文 中文模式下则变成 关于, 反馈, 护符对照表, English

• [ ] 7. Legend那里的名字需要首字母大写

• [ ] 8. Tooltip里的所有文字也是同理，首字母大写（s1改成S1），_全部替换为空格，人物名称里的_换成!（例如“G_Cleo”应该改成“G!Cleo”）

• [ ] 9. Mobile效果做好了你看下实现难度 原图在这里：

（想说真的没想到side project也可以做到这么精美，真的很感谢你的耐心和付出@solofandy）

[solofandy]

现在主体是现有table组件，不太合乎我自己的要求(我想要做到两个方向的scrollbar以及想要修正tooltip)，正在重写。

上面的问题我会今天晚上修改好

[b1ueb1ues]

剩Tooltip和mobile页面的问题了 开个branch，我来提交代码？

github.io 应该只是静态http服务器，要把编译好的页面一并提交才行 坏笑.jpg

你自己开个仓库呗， 我在原有github.io开个文件夹放编译后的页面

[kenchendesign]

编辑了，新加了mobile的设计 @b1ueb1ues 不要懒啦蓝大快去改condition和comment文字啦，格式按照“HP > 70% & Always in buff zone”这样来

[b1ueb1ues]

我不是再懒啦。 我在重构模拟器以适应组队模拟还有很多优化内容。。。

[kenchendesign]

啊那我错了，组队模拟是什么吊东西！

[solofandy]

@b1ueb1ues 好的 @kenchendesign 我更新了一版，你看下， 接下来我做mobile啦

[kenchendesign]

哇塞好棒！我觉得这个产品可以拿出卖了 lol

几个细节：

• [ ] 护符的tooltip里的_没有替换成空格

• [ ] 非condition的dps的数值颜色需要浅一些，改成#aaaaaa。统一起见，table header的字的颜色也改成#aaaaaa吧

• [ ] 有个bug如下图

  

• [ ] logo左对齐

• [ ] tooltip不需要阴影

• [ ] Bug：Special点了会报错

• [ ] Bug：Rarity的Reset link样式不对

• [ ] Bug：没有condition的那条现在跟conditional的一样

[solofandy]

手机界面我也放上去了，测测看? 上面bug解决了大部分

[kenchendesign]

厉害！手机端大致可以用了！现在最大问题是sidebar划出来以后里面的内容没法滚。

[solofandy]

是sidebar里面的要滚动吧？

[kenchendesign]

对的

[solofandy]

@b1ueb1ues 代码我放到这里了 https://github.com/solofandy/dlsim-vue
连接都指向到 /dl-sim/blablabla dlsim-vue-20190911.tar.gz 做了个release 测试下？

[kenchendesign]

我发布上去了！哇塞感动一万年，新UI真好用！

[kenchendesign]

关于移动端的Feedback来了：

• [ ] header要做成position: fixed，这样不管scroll到哪里都可以点开边栏

• [ ] 现在有些密集，距离改进建议如下图（共5处要改的地方）：

  

• [ ] 边栏里Class和About不需要空那么多，40px就够了看了下原来你做了position: absolute呀，我觉得其实就顺着Class往下就好了，没必要贴底

• [ ] Elemtn这里有个排版的小尴尬如下图

  

• [ ] Bug：最底下一个人显示不出来

• [ ] 桌面端logo和legend之间的距离太大了，“the-brand”的padding只需要padding-top我觉得就差不多够了

[solofandy]

修掉bug了 另外改了html里面js css的加载路径，现在能够放到任意目录里面去了（而不是只能在/） dlsim-vue-20190912.tar.gz

[b1ueb1ues]

bug report @solofandy 切换ex的时候会出bug 表格的krdb是有顺序的 /dl-sim/180/data_dk.csv:1 Failed to load resource: the server responded with a status of 404 () /dl-sim/180/data_dkr.csv:1 Failed to load resource: the server responded with a status of 404 () /dl-sim/180/data_dk.csv:1 Failed to load resource: the server responded with a status of 404 () 4/dl-sim/180/data_dr.csv:1 Failed to load resource: the server responded with a status of 404 ()

[b1ueb1ues]

需要一个显示全部输出明细的鼠标位置, 不然有些占比非常小的分类非常不容易点到 @kenchendesign

[solofandy]

修掉了 dlsim-vue-20190913.zip

在总数字那里做个tooltip显示明细怎么样，pc和手机都可以兼容，逻辑也比较通顺

[kenchendesign]

我觉得简化吧，正好现在就显示一个tooltip，里面横向显示明细。一会儿回家给你个mock。

[solofandy]

再做一纯表格版本应对硬核要求怎么样?现在偏向这么区别开用户要求

[b1ueb1ues]

表格版本不必了
硬核用户直接就去跑模拟器了 如果真说什么硬核需求 那就是单角色可以点开

[kenchendesign]

我的想法是这样：

然后有个细节需要修一下：

另外移动端的comment文字没有改成#aaaaaa

[b1ueb1ues]

没有unconditional dps的角色下面那个条方便隐藏掉么

[kenchendesign]

我觉得可以把数字去掉就好了

[solofandy]

没问题，我先把数字隐藏掉吧 vue最大的好处是html代码可编程

[solofandy]

dl-sim-vue-20190916.zip 小修补，主要是js和css文件名去掉了hash标识

[kenchendesign]

@solofandy 我有一个新的想法，可以在sidebar上面加一个section叫做Latest updates，里面可以从github的api读取master branch最新的三个commit和时间，可以方便大家看最近一次更新是什么时候以及更新了什么

[solofandy]

好的，大概画个图

[kenchendesign]

图来啦 @solofandy

[solofandy]

@kenchendesign 先发布到这里了 https://f-dl-sim.herokuapp.com/ 不好意思最近有点忙， Lastest updates 那里右边放个see more的超链接怎么样