Deckfortress

Deckfortress is a browser-based card-defense game built with React, TypeScript, Vite, Zustand, Framer Motion, and Tailwind CSS. Defenders hold the line against incoming attackers through single-card counters, two-card combinations, sacrifices, and a second undead wave made from the cemetery.

Gameplay

You defend a six-slot fortress line against a three-card attacker preview. The first attacker in the preview is the active threat.

Core actions:

• Single attack: choose one opposite-color defender with a rank higher than the attacker. The attacker is captured and becomes the new defender.
• Dual attack: choose two defenders whose ranks sum to the attacker rank. The attacker is defeated.
• Sacrifice: choose one defender to discard and push the attacker back into the deck.

Wave flow:

• Wave 1 starts with red cards attacking and black cards defending.
• When Wave 1 is cleared, the cemetery is shuffled into Wave 2.
• In Wave 2, cemetery cards attack again, and dual attacks can also destroy same-color selected defenders.
• You win when all attackers are gone. You lose if no defenders remain while attackers are still present.

Getting Started

Requirements:

• Node.js
• pnpm

Install dependencies:

pnpm install

Start the development server:

pnpm dev

Build for production:

pnpm build

Preview the production build:

pnpm preview

Run linting:

pnpm lint

Run unit tests:

pnpm test

Project Structure

src/
  App.tsx
  main.tsx
  index.css
  assets/
  components/
    containers/
    ui/
  lib/
    deck.ts
    rules.ts
  store/
    gameStore.ts
  types/
    index.ts
public/

Important files:

• src/store/gameStore.ts contains the Zustand store, game actions, wave transitions, scoring, and victory/defeat checks.
• src/lib/rules.ts contains the pure rule checks for single and dual attacks.
• src/lib/deck.ts builds and shuffles the attacker and defender decks.
• src/components/ui/RulesPanel.tsx mirrors the in-game rules shown to players.
• src/App.tsx composes the main board, controls, badges, message banner, and overlays.

Scripts

pnpm dev      # Start Vite locally
pnpm build    # Type-check and build
pnpm lint     # Run ESLint
pnpm preview  # Preview the built app
pnpm test     # Run unit tests once