https://github.com/zachstence/war
A simulation of the card game War in the browser
https://github.com/zachstence/war
card-game react typescript
Last synced: 3 months ago
JSON representation
A simulation of the card game War in the browser
- Host: GitHub
- URL: https://github.com/zachstence/war
- Owner: zachstence
- Created: 2021-10-21T22:13:52.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-04-23T00:34:06.000Z (over 3 years ago)
- Last Synced: 2025-01-13T12:24:53.366Z (over 1 year ago)
- Topics: card-game, react, typescript
- Language: TypeScript
- Homepage: https://zachstence.github.io/war
- Size: 1.08 MB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# War
## Table of Contents
- [Demo](#demo)
- [Running Locally](#running-locally)
- [Technology](#technology)
- [Architecture](#architecture)
- [Next Steps](#next-steps)
## Demo
You can access a live version of the game at [zachstence.github.io/war](https://zachstence.github.io/war).
## Running Locally
To run the code locally, first clone the repository
```console
$ git clone https://github.com/zachstence/war.git && cd war
```
Then, run the application
```console
$ npm start
```
Last, navigate to [http://localhost:3000](http://localhost:3000) in your browser.
## Technology
This project uses the Create React App [TypeScript Template](https://create-react-app.dev/docs/adding-typescript/) for the project framework, [node-sass](https://www.npmjs.com/package/node-sass) to compile SCSS to CSS, and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for testing.
## Architecture
The core functionality and state of the game is housed in the [``](src/components/Game/Game.tsx) component which interacts with a [Deck](src/Deck/Deck.ts) for each player. The [components](src/components) handle all of the rendering.
Both the [Deck](src/Deck/Deck.ts) and each [component](src/components) are (at least decently) tested.
## Next Steps
- Improved styling
- Better responsive design for different screen sizes
- More statistics on player win rate, total rounds played, etc.