penguin-statistics / frontend-v2

The frontend of the Penguin Statistics website.

Penguin Statistics - Frontend

This is the frontend project repository for the Penguin Statistics website.

Maintainers

This frontend project has mainly being maintained by the following contributors (in alphabetical order):

• AlvISsReimu
• GalvinGao

The full list of active contributors of the Penguin Statistics project can be found at the Team Members page of the website.

Configuration

Environment Variables

• NODE_ENV: development or production
• PENGUIN_PLATFORM: web or app
• PENGUIN_BUILDFROM: cf-pages, docker or undefined

How to contribute?

Our contribute guideline can be found at Penguin Developers. PRs are always more than welcome!

Supports

Thanks for the kindness support for this Open Source project from:

Contributors

This project is made possible by the following contributors. Contributions are always welcome!

frontend-v2's Issues

Should perform login on keyboard enter

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

URL

https://github.com/penguin-statistics/frontend-v2/blob/dev/src/components/AccountManager.vue#L74-L87

Steps to reproduce

1. Click the Login button
2. Enter the userId
3. Press enter on keyboard

What is expected?

Should perform the login method

What is actually happening?

Not performing the login method

Drop rate is not vertically centered

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

URL

http://localhost:8083/result/item/2001

Steps to reproduce

Go to either by item or by stage page on mobile phone, you'll see the grid of drop rate is not vertically centered.

What is expected?

Vertically center the drop rate and graph.

What is actually happening?

The class charts-data-wrapper is added to <td>, which makes padding-top and padding-bottom zero.
This issue was found because #11 makes each line higher.

Make item name clickable

What problem does this feature solve?

On result page (by item), can we also make item names clickable? It is good to show a small arrow when user moves the cursor above item names like what you design on result page (by stage).

What does the proposed API look like?

N/A

Item/Stage Statistics Preview

What problem does this feature solve?

It eliminates the complexity that navigation between pages bring. Also it allows the user to have a better flexibility of interacting with the dataset.

What does the proposed API look like?

Hover on item/stage shows the corresponding object's statistics directly in a popup

Travis-CI usually produce inefficient memory fatal error

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

URL

https://travis-ci.org/penguin-stats/frontend-v2 (literally yes)

Steps to reproduce

1. fire up a pull request
2. wait for Travis ci to build
3. Travis CI will be failed to build

What is expected?

It passes

What is actually happening?

It fails with FATAL ERROR: MarkCompactCollector: semi-space copy, fallback in old gen Allocation failed - JavaScript heap out of memory

---

Probably because the file sizes were too big.

掉落汇报的“左键增加 右键减少”实现

What problem does this feature solve?

旧版的用户习惯可以在新版上体现。

What does the proposed API look like?

与旧版的区别是，“左键增加，右键减少”的提示可加可不加。

Migrate ArkPlanner into frontend V2

What problem does this feature solve?

ArkPlanner is served here now. We want to merge it into frontend V2, so that the UI style will be unified.

What does the proposed API look like?

1. The new path could be "/planner" or "/plan".
2. Pay attention to the responsive design and UX. (60% users are using devices whose width are between 360px and 414px. A few users are using tablets between 768px and 834px.)
3. Add Item tree, and some new features if possible.

“团队成员”页面内容改动

What problem does this feature solve?

N/A

What does the proposed API look like?

页面更名为：贡献者
增加若干贡献者，修改贡献项目

上传撤销的实现

What problem does this feature solve?

允许用户撤销之前1次的汇报。

What does the proposed API look like?

撤销按钮，可否移到“掉落汇报”页面本身上？用户可能会认为底部提示信息右侧的按钮是用来关闭提示，导致误撤销。

Migrate old static pages to the new site

What problem does this feature solve?

Old static pages should migrate to the new site.

What does the proposed API look like?

The following pages can be merged into one page, and the proposed can be referenced to Apple's website (https://apple.com):
(Fade-in on scroll down and fade-out on scroll up. Example)
[ ] Contributing
[ ] Contact Us
[ ] Donate
[ ] Links

The following pages should be dedicated from the merged page in order to provide sufficient information to the user:
[ ] Change Log
[x] Members

友链内容修改

What problem does this feature solve?

N/A

What does the proposed API look like?

添加新友链

手机端团队成员页面组件拥挤

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

URL

http://localhost:8083/about/members

Steps to reproduce

iphoneX宽度下（375）由于站长联系方式过多导致名字和负责项目被挤压…

What is expected?

可以考虑把联系方式换一行？

What is actually happening?

N/A

i18n的完善

What problem does this feature solve?

N/A

What does the proposed API look like?

目前不需要翻译的：素材名、素材类别

Scroll to the top of page after routing

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

URL

https://penguin-stats.io

Steps to reproduce

1. Visit homepage under mobile view, scroll to the bottom
2. Open the menu, choose to see results by stage
3. After routing, we are still at the bottom of the page

What is expected?

We want instant scrolling to the top instead of smooth scrolling.

What is actually happening?

N/A

“版权信息”显示调整

What problem does this feature solve?

左下版权信息不明显，手机上点击后会直接跳转至cc页面从而无法看到tooltip。

What does the proposed API look like?

可以把cc标志直接换为“版权信息”，然后tooltip内放版权文字和cc标志。手机上，点“版权信息后”先别跳转，tooltip内部链接点了之后再跳转到cc的页面。

Cannot show entire opening time for event zones

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

URL

http://localhost:8083/result/stage

Steps to reproduce

Go to "by stage" to see the opening time of the event zone.

What is expected?

What about using tooltip to show opening time? Or show and hide info alternatively.

What is actually happening?

N/A

Dialog does not disappear after signing out

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

URL

https://penguin-stats.io/

Steps to reproduce

1. Sign out and click on confirm
2. The dialog does not disappear
   

What is expected?

The dialog should disappear after signing out.

What is actually happening?

N/A

Change the text on the lower right corner

What problem does this feature solve?

I'm feeling like using "企鹅物流数据统计" is better than "企鹅物流". After all, we are not Penguin Logistics lol

What does the proposed API look like?

N/A

Cursor style is not unified between "by stage" and "by item"

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

URL

http://localhost:8083/result/stage

Steps to reproduce

In the stats table of "by stage" the cursor becomes pointer in the entire table, while in "by item", the cursor becomes pointer only when the user moves cursor above the stage code.

What is expected?

We should unify this behavior. Let's fix "by stage" stats table so that the cursor will become pointer only when user moves cursor above the item image/name.

What is actually happening?

N/A

---

We can also add cursor: pointer to the small graph in the table, so that users may know they are clickable.

对于历史活动数据的处理

在“按作战查看”tab内，可以让用户选择当前开放作战以及历史活动；
在“按素材查看”tab内，只显示当前开放作战的掉落。

Limitation Bug

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

URL

https://penguin-stats.io/report

Steps to reproduce

以4-10为例，在普通掉落里，增加一个蓝装置掉落。此时额外掉落里的蓝装置加号变暗，只有常规掉落里的能再添加。

What is expected?

蓝装置范围是0~2，事实上是常规掉落里最大1个，额外里最大1个，但是在limitation里没有区分（也不准备区分，因为我们统计结果无视“常规、额外、罕见”）。
目前想出两种解决办法：

1. 增减掉落数时不设限制，汇报前检查limitation，有问题弹窗出提示（模仿旧版）
2. 之前的例子中，常规和额外的蓝装置的加号全都变为可用，意思是常规里2个蓝装置，或者1常规1额外都允许。

个人倾向第一种。

What is actually happening?

N/A

Item icon bugs

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

URL

http://localhost:8083/result/stage/main_3/main_03-02

Steps to reproduce

1. Sort the stats table by clicking on any header
2. Item icon will show weird sprite images
3. Furniture icon wil disappear
   

What is expected?

N/A

What is actually happening?

N/A

Change the default display of menu

What problem does this feature solve?

N/A

What does the proposed API look like?

1. Do not open the menu by default on mobile view
2. Make "Stats results" expanded by default (on any view)
   

Sorting is very slow on mobile phone when there are too many rows in the table

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

URL

http://localhost:8083/result/item/furni

Steps to reproduce

Click on any header to sort results for item "furni" using mobile phone. It takes too much time.

What is expected?

N/A

What is actually happening?

N/A

Report Drops by Screenshot Recognition | 截图识别上传

一些已有的讨论：
要综合考虑识别效率、准确率。
是前端识别，上传掉落数据，还是前端压缩并上传图片，后端识别？用户可能担心流量问题。

Server Statistics | 全站数据一览

1. 在部分页面上显示当前已使用用户总数，注册用户数，内部用户数等
2. 掉落查看页面，点击某关卡tab，显示这一关卡总上传用户量

• 提升用户对掉落数据了解以及所有数据可靠度信赖

刷图规划里是否可以给出多条推荐路线

就拿我要刷聚酸脂组来说，单纯的刷这个的话确实是给的规划里的2-6比较划算，但是事实上5-3里糖作为副产物高达84%的出率也非常可观，而相比之下带来的单位聚酸脂组消耗的理智只增加了一点点。
（其实这么看的话2-6也还有作战经验和赤金的副产物）
给这种规格外情况做个估值或许可以解决这个问题，但是我感觉直接给出多条推荐路线应该是更加可靠而且简单的实现方式

数据来源选择以及个人掉落结果查看

What problem does this feature solve?

v1已实现功能的移植。

What does the proposed API look like?

统计结果页面找个地方放一个toggle，可以切换数据来源（目前是全平台和个人），根据选择的数据来源显示对应的结果table。（个人掉落就可以不显示掉率趋势图了）

Failed to sign in automatically after reporting

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

URL

https://penguin-stats.io/report

Steps to reproduce

1. Report a drop record as an anonymous user (without userID)
2. Fail to sign in after reporting

What is expected?

The response will set userID in cookies if the submit is successful. We should use it to sign in.

What is actually happening?

N/A

Report History | 用户历史上传查看与管理

新tab“上传管理”，默认显示login component。
进入tab后发请求按userID查询上传源数据并返回（暂无其他筛选条件）。
表头：时间、作战、次数（目前都是1）、掉落、操作。
掉落一列内，显示为物品图标加掉落数（叠在图片右下角？），家具不显示图标。
操作一列内，目前只支持删除，暂定只能删除2小时之内的。
要加paginator。
更多筛选方式以后再加。

Clickable area of each step in stepper is too large on mobile view

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

URL

https://penguin-stats.io/result/stage

Steps to reproduce

1. Go to result (by stage) page on mobile phone
2. Select a zone and a stage
3. Click the area below "Step 1"
4. "Step 2" is clicked instead
   

What is expected?

The clickable area of "Step 2" shouldn't be so large.

What is actually happening?

alt-labels of the stepper will cause this issue under mobile view. We can disable this directive when mobile view is detected.

Report page should not be put at the second level in the menu

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

URL

https://penguin-stats.io/

Steps to reproduce

What is expected?

We should show "掉落汇报" without children menu items. Also, mdi-open-in-new icon should not be used for it.

What is actually happening?

N/A

拉取数据失败时弹出提示

What problem does this feature solve?

N/A

What does the proposed API look like?

N/A

item选择的进一步优化

What problem does this feature solve?

1. 不同长度的素材名会导致手机端显示不美观。
   
2. 每行3个素材会显得比较奇怪

What does the proposed API look like?

1. 考虑页面上不显示素材名，可以放在tooltip里显示。
2. 我们最好根据主流的设备宽度来进行调整。
   
   可以明显看出，360, 375, 414的width占绝大多数。由于目前的素材（除赤金、技能书、碳等）都是4个或2个一组，因此安排4个为一行是不错的选择。
   取360、414这两个上下限进行测试，在不显示itemName的情况下，.item-list-item-wrapper中min-width只能取61px或62px。
   不过这样做的前提是item排序要保证赤金、技能书、碳放到别的素材后面。我们可以提供多种排序方式供选择：仓库序、rarity序、默认顺序等

Double click on zone/stage/icon will jump to incorrect page

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

URL

https://penguin-stats.io/

Steps to reproduce

Report

1. In report page, double click on a zone. User will go to step 3 immediately without selecting any stage.
   
2. Go back to step 1 (In stepper, not in this doc. The same below), choose a zone with single click. Then double click (be fast!) on a stage. Nothing is shown below as if the stage was not selected.
   
3. Go back to step 1, double click on a zone. It will show the report page for the stage you selected previously.
   

Result (by stage)

The weird behavior is similar to report page.

Result (by item)

In result (by item) page, double click (be fast!) on an item. Nothing is shown below as if the item was not selected.

What is expected?

N/A

What is actually happening?

N/A

菜单里的“首页”永远是选中状态

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

URL

https://penguin-stats.io/

Steps to reproduce

点击菜单中的非“首页”条目，“首页”仍为选中状态的蓝色。

What is expected?

用户未在首页时，“首页”应为未选中状态。

What is actually happening?

N/A

Item and stage name will be returning into new lines on small screen devices in statistic tables

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

URL

https://penguin-stats-frontend.galvingao.now.sh/result/stage/main_1/main_01-05

Steps to reproduce

1. Navigate to the URL
2. Open DevTools of the browser
3. Resize the screen to let the width be smaller than 580px
4. Observe the text on the item

What is expected?

the text SHOULD NOT be returned into new lines

What is actually happening?

the text OCCURS TO returns into new lines

---

It seems the width of the particular field is not high enough. Adjustment is needed on such attribute.

Screenshot on such behavior, notice the red-boxed area:

Add trend graphs into result tables

What problem does this feature solve?

Users will be able to see the trend of drop rate for each item of every stage.

What does the proposed API look like?

In the drop rate table, show a small trend graph next to each drop rate. When user clicks on it, show a detailed one.

Back-end API

Please go to swagger to see the 3rd and 4th API under Stage Controller on dev branch.

API Usage and Parameters

1. Get segmented results for all items in the given stage
   GET /api/stages/{stageId}/trends

• interval means how many milliseconds does each interval have. It also means the time gap between every two points on x-axis. Default value is 86400000 (1 day).

• stageId is required.

2. Get segmented results for a specific item in the given stage
   GET /api/stages/{stageId}/trends/items/{itemId}

• interval Same as above.

• stageId Same as above.

• itemId is required.

Return example

Both of these two APIs will return in the same structure.
For example:

{
  "interval": 864000000,
  "startTime": 1562668595938,
  "results": {
    "30012": [
      {
        "times": 3390,
        "quantity": 6337
      },
      {
        "times": 2734,
        "quantity": 4966
      },
      {
        "times": 756,
        "quantity": 1433
      },
      {}
    ],
    "30063": [
      {
        "times": 3390,
        "quantity": 1035
      },
      {
        "times": 2734,
        "quantity": 868
      },
      {
        "times": 756,
        "quantity": 221
      },
      {}
    ],
    "furni": [
      {
        "times": 3390,
        "quantity": 65
      },
      {
        "times": 2734,
        "quantity": 60
      },
      {
        "times": 756,
        "quantity": 24
      },
      {}
    ]
  }
}

• startTime is the earliest upload time of this stage. Please use this value and interval to generate all points on x-axis.

• If itemId is provided in the query, in results there will be only one key (the same as itemId). Otherwise it will contain all itemIds under this stage.

• The value of each itemId key is an array, containing all drop result objects for each section. The array index is the number of the section. Sometimes the result object will be empty {}, which means there is no drop sample in that section.

• times will never be 0. quantity may be 0.

• The response will have LAST-UPDATE-TIME in headers. Please ask @GalvinGao on its usage in caching.

Expand the Clicking Area of the statistics table

What problem does this feature solve?

It eliminates the complexity and annoyance of clicking such a small icon in the table ;)

What does the proposed API look like?

If the user clicks the row of the table then they should be redirected to the corresponding object's statistics page

Show selected zone/stage/item name on result page

What problem does this feature solve?

After selecting zone/stage/item, on the page which shows the drop rate table, user cannot find which zone/stage/item he or she has selected.

What does the proposed API look like?

We can show those selected stuff on the stepper, next to each step's name.

Drop Item Credibility Verification | 掉落数据可信度验证

• 根据内部用户上传，标注之前的数据
• 权重调整（根据上传量、是否内部等）
• 可靠性检验
• 待补充...

统计结果（按素材）选择素材变为多列

What problem does this feature solve?

优化用户选择时的体验（少滚屏）。

What does the proposed API look like?

N/A

Vuex is not using its cache

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

URL

https://penguin-stats.io/

Steps to reproduce

1. Set page theme to light
2. Reload the page

What is expected?

Page is in light theme

What is actually happening?

Page is in dark theme (default)

掉落汇报改进

What problem does this feature solve?

掉落汇报的所有item排列，在iphoneX下（宽度375）所有item是一行一个，竖直排列的，用户滚屏操作偏多。可否调整大小，以及padding，让这个宽度下能显示两列，或者更多？

What does the proposed API look like?

我还是认为目前的 "素材 0 -"占地太大了，也可以考虑素材图右下重叠一个小圆显示数目，下方放加减号？
还可以继续提升：减号使用频率远低于加号，考虑改进。

Back and Foward are not working properly with stepper

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

URL

http://localhost:8083/result/stage/main_2/main_02-02

Steps to reproduce

1. Go to "result by stage"
2. Select a zone and a stage
3. Press "Back" on the browser
4. "Back" button fails to take user to the previous step.

(This also happens on "Forward" button, and on "result by item")

What is expected?

Users should be able to use back and forward buttons to switch steps.

What is actually happening?

Not sure.

Bulk Upload Drops | 批量上传掉落记录

需要设计方便交互的UI。对批量的审核也要有所考虑，暂时可以只开放给内部？

关于用户名显示的一些改进

What problem does this feature solve?

注销登录在手机上没法显示，因为点击后就直接注销了，很突然。

What does the proposed API look like?

点用户名后出现dropdown，里面放一个选项“注销”？
另外希望增加旧版的对用户ID的说明。

Important: Idolize Webmaster (? | 重要: 请求加入站长女装

用户暴增，服务器月费上涨，企鹅物流的运营陷入了危机。站长红白为了保护喜爱的企鹅物流而决定成为偶像...

手机端标题栏上，页面标题overflow

Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

URL

https://penguin-stats.io/

Steps to reproduce

在375宽度（iPhone X）下，标题过长会触发ellipsis，影响观感。用户名比较长的情况下甚至一个字都显示不下。

What is expected?

考虑根据标题内容调整字号？

What is actually happening?

N/A

Support PWA

What problem does this feature solve?

PWA enables the user the ability to install the current site as a native app on their mobile devices.

What does the proposed API look like?

The one can utilize:

• Official Plugin
• Getting Started with PWA on Google Developer