https://github.com/qubitpi/genshin-teaming-videos
原神角色配队视频展示网页应用
https://github.com/qubitpi/genshin-teaming-videos
genshin-impact reactjs
Last synced: about 2 months ago
JSON representation
原神角色配队视频展示网页应用
- Host: GitHub
- URL: https://github.com/qubitpi/genshin-teaming-videos
- Owner: QubitPi
- License: apache-2.0
- Created: 2025-01-02T08:49:28.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2025-02-17T14:18:11.000Z (2 months ago)
- Last Synced: 2025-02-17T14:27:19.506Z (2 months ago)
- Topics: genshin-impact, reactjs
- Language: TypeScript
- Homepage: https://genshin.qubitpi.org/
- Size: 33 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
- [原神配队展示应用](#原神配队展示应用)
- [缘起](#缘起)
- [Development](#development)
- [Getting Source Code](#getting-source-code)
- [Scripts](#scripts)
- [Automatically Formatting Codebase](#automatically-formatting-codebase)
- [Application Monitoring](#application-monitoring)
- [视频加载](#视频加载)
- [License](#license)
# 原神配队展示应用
## 缘起
在使用 [Enka.Network](https://enka.network/u/MyFavoriteCharacters/) 很长的一段时间里，我对它的角色展示功能一直很满意，
但在配队展示方面却不尽然。和很多玩家一样，我玩原神最大的乐趣在于培养自己的团队搭建能力 - 根据每个喜欢角色的特点，
搭配出高伤害的配队，而 Enka.Network 无法满足我在这方面的展示需求，所以我编写了这个项目用来展示我的原神配队。
应用地址 - [genshin.qubitpi.org](https://genshin.qubitpi.org/)
应用处于初期 PoC 阶段，我会抽空逐步实现新功能、新内容、 新体验，敬请期待。
## Development
Genshin Teaming Video has the following packages:
- [`genshin-teaming-videos-app`](packages/genshin-teaming-videos-app): holding business logics of the app
- [`genshin-teaming-videos-redux`](packages/genshin-teaming-videos-redux): managing all app states. Genshin Teaming Video
uses [Redux state management][Redux]
[][Redux]
instead of ~~[React state management][useState]~~ for a much more maintainable decoupling of React components
### Getting Source Code
```console
git clone [email protected]:QubitPi/genshin-teaming-videos.git
cd genshin-teaming-videos
```
Install dependencies by
> [!NOTE]
>
> Node 22 and Yarn 2 must be installed in local environment.
```console
yarn
```
### Scripts
- `yarn start`: Runs the app in development mode. Open http://localhost:3000 to view it in the browser. The page automatically reloads
if we make changes to the code. we will see the build errors and lint warnings in the console.
- `yarn test`: Runs the unit tests
- `yarn cypress:open` & `yarn e2e`: Opens Cypress End-to-End test console and runs the End-to-End tests, respectively
- `yarn build`: Builds the app for production to the build folder. It correctly bundles React in production mode and
optimizes the build for the best performance. The build is minified and the filenames include the hashes.
### Automatically Formatting Codebase
When CI/CD complains about "Code style check" as the following:
Simply run the following command at project root which will auto formatting the codebase using Prettier:
```console
yarn prettier --ignore-path .gitignore . --write
```
> [!TIP]
>
> It's always a good practice to auto-formatting code whenever convenient 
## Application Monitoring
sentry.io has been integrated into the [genshin.qubitpi.org](https://genshin.qubitpi.org/). Specifically:
- [sourcemap](https://docs.sentry.io/platforms/javascript/legacy-sdk/sourcemaps/) is uploaded to sentry during build time
- error trace are sent to sentry during run time
While error trace will always be sent in production mode (`process.env.NODE_ENV === "production"`), an
[.env.sentry-build-plugin](https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/webpack/) is, however,
required for `yarn build` to be able to generate and upload the sourcemap.
> [!NOTE]
>
> If the `.env.sentry-build-plugin` is not present, `yarn build` will still run successfully. It's just not possible
> then to locate the exact location of error in code on sentry issue console because sourcemap hasn't been uploaded
### 视频加载
我将视频同时上传到了 YouTube 和 B站。如果访问者是大陆用户，则加载 B站 版本，国外访问则加载 YouTube 版本
> [!CAUTION]
>
> - 两个版本视频内容完全一样
> - 本地开发是无法加载 B站 视频的，因为 CORS 限制。YouTube 则没有这个问题。所以本地开发模式会默认加载 YouTube 版本
## License
The use and distribution terms for [genshin-teaming-videos]() are covered by the [Apache License, Version 2.0](./LICENSE).
[Redux]: https://react-redux.qubitpi.org/
[useState]: https://react.qubitpi.org/reference/react/useState