A broser-based version of the Ultimate Werewolf 🐺 card game. This is the client code only!
The backend lives in its own repo, created by the magic McGoddard: mcgoddard/janky_werewolf_backend
Status | Link | |
---|---|---|
Circle CI master |
https://www.jankywerewolf.co.uk/ | |
Circle CI staging |
https://staging.jankywerewolf.co.uk/ | |
Snyk Vulnerabilities | https://app.snyk.io/org/ripixelcodes/project/c0909e52-0df4-4868-8b70-b4dc768da8a1 |
This project leverages:
- TypeScript
- Node
- Webpack
- ESLint
- Prettier
- Jest
- Sentry
- NPM Audit
- React
...amongst some other bits which aren't headline-worthy.
See the docs folder for various pieces of documentation on how to add to this repository.
Some useful links:
See Local Development for how to contribute code to this repository.
It uses the CircleCI Config to checkout, build, lint, test, and deploy in 5 separate jobs (only deploying on master
or staging
branches).
It will moan if any of the interim (build, lint, test) stages fail, and provide integrated feedback for lint and test in CircleCI's UI.
As described above, deployment is handled by CircleCI. Pushing an update to either the master
or staging
branches will deploy to the respective URL:
- Master/Production: https://www.jankywerewolf.co.uk
- Staging: https://staging.jankywerewolf.co.uk
To be sure your version is deployed, the build job number is displayed in the bottom-left on all screens.
Note: Pushing to the master
branch can only be done via merged pull request. Anything can be pushed to staging
.
Linting uses prettier + ESLint (TSLint was deprecated and is now integrated into ES). Husky runs on pre-commit to ensure everything follows these standards, but they're also checked on CI build too just to make sure!
Testing uses Jest, with a requirement that all files are covered at least 30% - this is to ensure we do not end up with untested code in our codebase!
Uses React Testing Library for component rendering and interaction in tests.
We use webpack to get all the "niceness" it provides, like creating a single comparable file and removing unnecessary code. Any TypeScript failures will cause the build to fail, as will any normal JS build errors.
Use .env.{NODE_ENV}
files to control what your environment variables are - these will get replaced via webpack with the correct value. If no .env.{NODE_ENV}
can be found your specific environment, .env
will be used as a fallback. System Environment variables (such as those set on the command line) take precedence over any .env
files.
Currently uses NPM Audit with a level of high
or critical
causing a build failure on the pipeline, as well as a failure in the pre-push hook.
To run this locally, first install the dependencies:
npm ci
To run tests with development output, use:
npm run test
If you also want to watch use:
# Watch only staged files
npm run test -- --watch
# Watch all files
npm run test -- --watchAll
Note: Using test
will not give the error about uncovered files. If you want to make sure it doesn't fail on the CI, use test:ci
with the above commands.
To run the audit at the correct level (ie prod only and fail on high vuln) use:
npm run audit
npm run dev
This will watch any build-dependant files, and rebuild/restart the server on change (you will need to refresh your browser, of course).
To create staging-level output, do:
npm run build:staging
To create production-level output, do:
npm run build
To do everything the CI does (assuming prod), do:
npm run lint:ci && npm run test:ci && npm run audit:ci && npm run build