A screen-saver for teasing 3yibao, re-written in React 三怡宝的日常放松专属屏保
Original Image: https://i.imgur.com/Vv8xw8g.gif (If Github says max content length exceeded)
3yibao(三怡宝, Troisième C'est bon) was bootstrapped with Create React App v3.
This funny site is used as a dashboard to describe the general attributes of the funny character 3yibao (e.g. the energy level, bad-luck points, jackpot chances and probability of losing weight) by some random algorithms. The attributes are all customizable. It is now using react framework at the front, and a simple go echo framework at the back-end.
The program calculates the yibao attributes during the time based on the input and put them in the charts.
The yibao attributes can be categorized into two: experience type and probability type.
Experience type has level thresholds, in which levels can go up or go down, and threshold order decides the leveling-up direction, while the probability type has a fixed range of 0 - 100%.
You need to specify the name, and algorithm parameters in advance for both of them, and additionally the level thresholds and orders for experience type.
As for now, the experiences are using Random walk model, in which a Gaussian number needs to be generated by the polar form of Box–Muller transform first, while for the probability part, the model is relatively simple, just normal javascript random numbers. The parameters available to set are magnitude and offset, which do nothing but the linear transformation to the original model. Hopefully, we can customize the algorithms in future updates.
3yibao's alias, as you can see the 1, 2, ..., 9 yibao, are randomly generated by index part. This alias will be used across the site.
The billboard up front will dynamically display the current yibao in place. The two lights are programmed to circling around, and "恭喜N怡宝" moves left and right periodically.
The dashboard in the middle shows the current status of yibao attributes. It automatically tells which level it is now and shows the next level value for experience type, and also show the current probability or status for probability type.
The charts from FusionCharts display the newly generated value. By default (when the chart type is not specified), they are line charts that have a memory of 30 points. Alternatively, you can select simple gauge. The "boom" effect is given near the chart every time there is an experience "level up" or probability "Off the charts". The charts will also grey out if the value reaches the pre-configured minimum value.
You can press "~" key or click the billboard to open the console, and check the log of various events (upgrade / downgrade / probability too low, etc.) there.
Also, the events will pop up by notification system (which utilizes react-toastify). Note that the maximum number of notifications on the screen is limited to 5.
react logo from Create React App
explosion svg from OnlyGFX
various icons from iconfont
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent