Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jcbhmr/card-battle
🃏 Local multiplayer card combat
https://github.com/jcbhmr/card-battle
2player card-battle card-game combat game javascript local-multiplayer two-player-game vite web-game
Last synced: 12 days ago
JSON representation
🃏 Local multiplayer card combat
- Host: GitHub
- URL: https://github.com/jcbhmr/card-battle
- Owner: jcbhmr
- License: agpl-3.0
- Created: 2024-02-27T18:48:11.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-04-14T02:56:43.000Z (7 months ago)
- Last Synced: 2024-04-14T08:04:33.793Z (7 months ago)
- Topics: 2player, card-battle, card-game, combat, game, javascript, local-multiplayer, two-player-game, vite, web-game
- Language: TypeScript
- Homepage: https://jcbhmr.me/card-battle
- Size: 499 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
You're probably looking for jcbhmr.me/card-battle
# Card battle
🃏 Card game semester software project
Live game site
| Requirements report
| Test and delivery plan
| Final presentation
🎮 Local multiplayer (2 player) \
🔨 Proof-of-concept \
🏫 Made for UW-Whitewater Software Engineering semester project \
⚛ Used React, TypeScript, Vite, TailwindCSS, and more!
This project was made for the [COMPSCI 476 SOFTWARE ENGINEERING](https://courses.uww.edu/2241/Undergraduate/COMPSCI/476) class. The assignment itself was to come up with an idea for a software project and build that project over the course of the semester with a small-ish group of five people to develop real-world software development skills like using GitHub, how to work in a team, what tech you might need to know, etc. Our idea was to create a computer game inspired by a board game. We based this "Card battle" game off of the Adventure Time Card Wars idea and attempted to recreate some of the aspects of it in a web app. We used JavaScript, TypeScript, React, Vite, TailwindCSS, Node.js, npm, and more to create the basic web app that is viewable at [jcbhmr.me/card-battle](https://jcbhmr.me/card-battle/).
## Development
[](https://pr.new/https://github.com/jcbhmr/card-battle)
Adventure Time Card Wars rulebook
| Team Discord
| Canvas page
This app is entirely client-side. There is no server-side component. You can get started easily using ⚡StackBlitz by clicking the Open in Codeflow button above.
- **`npm run dev`:** Runs the Vite dev server so you can see a live reloading preview of your code as you edit it.
- **`npm run format`:** Formats all the code using Prettier. Run this every so often.
- **`npm run build`:** Compiles everything into an `index.html` and associated JavaScript and CSS files. This is what GitHub Actions will run before deploying this site to GitHub Pages.
### Cool tools
This is Jacob's list of cool tech tools that were shown off at some point in team meetings.
- **[StackBlitz](https://stackblitz.com/):** No-configuration Node.js dev env for frontend & light backend.
- **[Excalidraw](https://excalidraw.com/):** Great for low pressure crude sketches and diagrams when you need digital pen & paper.
- **[XState](https://github.com/statelyai/xstate):** Makes diagrams, simulations, and more out of your state machine code!
- **[Stately.ai editor](https://stately.ai/editor):** The company behind XState also makes a visual flowchart editor.
- **[Vite](https://vitejs.dev/):** The current best frontend build system.
- **[TypeScript](https://www.typescriptlang.org/):** The best way to write JavaScript with type declarations.
- **[v0](https://v0.dev/):** AI code generator focused on React & Tailwind CSS
- **[ChatGPT](https://chat.openai.com/):** General purpose AI chatbot that can generate code.
- **[Gemini](https://gemini.google.com/):** Alternative to ChatGPT that supports image inputs on the free tier.
- **[Craiyon](https://www.craiyon.com/):** Completely free no signup image generator AI.
- **[Tailwind CSS](https://tailwindcss.com/):** Put your CSS in your HTML instead of fragile linking to another file.
- **[React](https://react.dev/):** The biggest JavaScript UI framework right now.
- **[Prettier](https://prettier.io/):** The most popular JavaScript ecosystem code formatter.
- **[Vitest](https://vitest.dev/):** Vite-based testing framework. Supports TypeScript out of the box.
- **[shadcn/ui](https://ui.shadcn.com/):** Premade components to copy-paste into your React+TailwindCSS project.
- **[Greptile](https://greptile.com/):** Give ChatGPT the context of your entire GitHub repository.
- **[Immer](https://immerjs.github.io/immer/):** Immutable JavaScript objects with ergonomic & memory efficient copiers.