1
0
Fork
You've already forked wartoad
0
A small project to partially implement a boardgame with a React app for practice.
  • TypeScript 93.8%
  • CSS 5.9%
  • Dockerfile 0.2%
  • HTML 0.1%
2026年06月19日 12:20:29 +10:00
.github/workflows ~: Bump oxfmt and Move .oxfmtrc.json to top level 2026年06月05日 13:32:23 +10:00
app 21: Make unaffordable cards uninteractible in the hand 2026年06月19日 12:20:29 +10:00
assets ~: Add screenshot to the README 2026年05月15日 16:32:54 +10:00
server 20: Store gamestate and send to new clients 2026年06月15日 17:49:59 +10:00
.dockerignore 19: Set up docker container deployment 2026年06月04日 13:04:32 +10:00
.gitignore 19: Add github workflow to deploy to pages 2026年05月15日 19:06:28 +10:00
.oxfmtrc.json ~: Bump oxfmt and Move .oxfmtrc.json to top level 2026年06月05日 13:32:23 +10:00
.oxlintrc.json ~: Resolve lint warnings and update TODOs 2026年06月10日 16:50:42 +10:00
bun.lock ~: Update dependencies 2026年06月15日 17:43:42 +10:00
Dockerfile 19: Set up docker container deployment 2026年06月04日 13:04:32 +10:00
package.json ~: Update dependencies 2026年06月15日 17:43:42 +10:00
README.md ~: Bump oxfmt and Move .oxfmtrc.json to top level 2026年06月05日 13:32:23 +10:00

Wartoad

Wartoad is a card game about seizing control of the pond!

Upgrade leaves floating on the pond, deploy units, and use them to capture your opponent's home leaf to win.

A screenshot of Wartoad being played from the perspective of a blue 'South' player. A sidebar shows hands of cards belonging to the South player and their red 'North' opponent. The main play area has a grid of red and blue zones, each with cards on them. Some cards are face down, but face up 'LilyPads' and 'Froglets' are also visible.

This is a toy project based on Wartide for coding practice.

App

The app directory contains the frontend code for the game. It uses the following directory structure.

app/src:

  • types: basic types -- only uses type imports only from the same directory
  • state-types: types and constants for store/context state and convenience functions for operating on those types
  • view: React components which import no other components and don't use context or state
  • state: state to be provided by store/context
  • actions: action and/or reducer functions for modifying store/context state
  • context: React contexts and relevant custom hooks, for direct use in any component
  • basic: React components which import only components from src/view and may use context and/or state
  • composite: React components which import some other components

Files in later directories may only import from earlier ones. Also:

  • src/state/game imports all the other state files
  • src/action/game imports all the other action files
  • Files in src/composite may import eachother for now.
  • Files in src/types may type-import eachother for now.
  • Game.tsx composes all components of the game. It is presentational/structural.
  • App.tsx provides top level context and state for Game.tsx, which it imports. It is an entrypoint and provides wiring but should have minimal logic.
  • In other subdirectories, files of the same directory may not import eachother.