Game kit

Make it a video game

A concept a developer or an AI coding agent can build from, using only what is on this page.

The pitch

Paws in Peril is a turn-based tactics game for 2 to 4 players on a small hex map. Each player is an animal with 10 HP, two lives and a hand of item cards, racing to claim homes and mansions by beating the monsters inside them in quick dice fights. Every monster you beat joins your side with one ability, so each game builds a different little crew. A game is about 11 rounds, on one screen passed around the couch or online with friends, against bots that play like careful people. It looks like the cards: hot orange into purple, paint-splatter backgrounds, chunky round type.

Platform and engine

• A web game in TypeScript, built with Vite, drawn with Phaser 3. It runs from a link on phones, tablets and desktops, installs as a PWA, and can be wrapped with Capacitor for the app stores later.
• The rules core is engine.js, unchanged. The game draws state, offers what legalActions(state) allows, and calls apply with the player's pick. No rule is written twice, and every rule the tests cover stays covered.
• If you prefer HTML for menus and cards, use PixiJS for the board only and keep the rest in the DOM. Godot 4 suits a native or console build, but it means porting the engine; start on the web and port once the design is settled.

One turn, the core loop

1. Start. The player gets 5 AP (plus monster buffs); starting on the desert heals 2 HP; poison ticks. The camera centres on their animal.
2. Act. Tap a lit neighbouring tile to move (1 AP). Buttons for the current tile: Loot, Buy a card, Raid, Invade, Barricade. Item cards in the hand light up when they can be played (free).
3. Fight. Looting a home or mansion, invading or raiding opens the fight: both sides roll 4 dice, the two highest count, the gap is damage. Between rolls, In Combat and Anytime cards can be played.
4. Resolve. A beaten monster's card flies into the player's crew and their colour goes on the building; a knockout costs a life and sends the animal back to the desert.
5. End. Unused AP is lost. The next player's turn begins, or the victory screen when someone reaches the VP target.

Screens

How the assets map to the game

Multiplayer

• Hot-seat first. One device passed around. Hands are secret, so between turns show a "Pass to Blue" screen that hides the hand until the next player taps.
• Online, with the server in charge. A small Node server imports engine.js, keeps the one true state per room, and applies the actions clients send (apply already refuses illegal ones). Each client gets its own view: other players' hands as counts, the decks as sizes, and never the random seed, which would let a client predict dice. WebSocket per room, a short room code to join, and a rejoin that sends the latest view.
• Reactions. Anytime cards can be played on other players' turns. legalActions lists them for every player who may act, so the client shows them as a prompt with a few seconds' timer rather than stopping the game.

AI opponents

smartbot.js is the opponent to ship. It prices every option in victory points: a home is worth 1 VP (more when it wins the game), a monster card is worth its buff and its value as a defender, and dying costs a life and the cards you drop. It takes a fight only when the chance of winning times the gain beats the chance of losing times the cost, with the chance from a few hundred simulated fights, and never takes a hopeless one. It raids when the cards it expects to grab outweigh the HP it risks, throws grenades at clusters or the leader, and keeps its best defender. It is deterministic, and at a table split between the two bots it wins about two games in three against the greedy one under the tuned rules.

• Difficulty: Easy is the greedy bot (bot.js), Normal the smart bot, Hard the smart bot that also sees the top of the monster deck.
• Run bots in a Web Worker so the fight simulations never stall a frame, and wait half a second between bot actions so people can follow.

Art and audio

• Palette: hot orange #FF9A2E and ember #EA6A1F into deep purple #1C0E24 and #28143A, with orange dots as the motif, as on this page and the cards.
• Type: Lilita One for titles, numbers and buttons; Figtree for card text and menus.
• Look: storybook animals with oversized weapons over paint-splatter skies; the board is the painted top-down tiles; UI is chunky rounded pills with a solid drop shadow that presses in.
• Motion: cards deal in with a tilt, dice tumble and the two that count lift, damage pops as a number, a claimed building gets a stamp in the owner's colour. A reduced-motion setting swaps all of it for fades.
• Audio: a warm folk-adventure loop with hand percussion, a tenser layer during fights; wooden dice on felt, a card flick, a heavy stamp on a claim, a soft growl scaled to the monster's HP. No voice needed.

First milestone

A playable slice: hot-seat on the Beginner board, one human against one smart bot, start to finish.

1. A Vite + TypeScript + Phaser project that loads the kit's data and engine.js as they are.
2. The board from state.board.tiles with the tile art and a token per player; the tiles you can move to lit from legalActions.
3. Player panels (HP, lives, AP, VP, crew) and the action bar: move, loot, buy, end turn.
4. The fight overlay for monster fights, stepping through combatRoll, combatContinue and combatApply.
5. The hand: item cards that can be played when legalActions includes them; the discard picker.
6. The end screen from state.over.

Done when a game plays from the lobby to a winner on a desktop and on a phone, with no rule logic outside engine.js. Next: raids, invasions and the other pickers; the Explorer board and teams; sound; then online play.

Build a web video game of the board game Paws in Peril. Everything you need is at https://renfrovibes.com/paws/kit/.

Fetch and read these before writing any code:
- https://renfrovibes.com/paws/kit/rulebook.md (the rules, V4 draft)
- https://renfrovibes.com/paws/kit/data/game.json (the rule constants)
- https://renfrovibes.com/paws/kit/data/monsters.json, data/items.json, data/tiles.json (the content)
- https://renfrovibes.com/paws/kit/engine.js (the rules engine: a plain ES module, no dependencies, every rule and card)
- https://renfrovibes.com/paws/kit/bot.js and smartbot.js (the bots; they import ./engine.js and ./bot.js, keep all three in one folder)
- https://renfrovibes.com/paws/kit/manifest.json (every picture with its path, size in bytes and pixels, and what it is)
Then download https://renfrovibes.com/paws/kit/paws-in-peril-assets.zip, which holds all of the above and all the art, and unzip its paws-in-peril folder into the project's public folder.

Stack: TypeScript, Vite, Phaser 3. Keep engine.js, bot.js and smartbot.js byte for byte. The game never implements a rule itself.

How the engine works:
- createGame({ monsters, items, players: 2 to 4, board: 'beginner' or 'explorer', mode: 'ffa' or 'teams', seed }) returns the game state as plain JSON. Rules default to V4.
- legalActions(state) returns every action any player may take now, as plain objects ({ type: 'move', player, q, r }, loot, buyItem, raid, invade, placeBarricade, playItem, useAbility, endTurn, combatRoll, combatContinue, combatApply, discard, chooseDefender, takeCard, doneTaking, keepCard, placeTile). actor(state) is the player the game waits on.
- apply(state, action) returns a new state and throws on an illegal action. state.lastEvents lists what just happened, each with a type and a readable msg; animate from these. state.over is set when the game ends.
- The board uses axial hex coordinates (q, r) with the desert at 0,0. Tiles are flat-top hexes, assets/tiles/*.webp at 400 x 346.
- nextSmartStep(state, isBot) from smartbot.js returns { pid, action } for the next bot move.

Build this first (hot-seat on one screen):
1. A title screen and a setup screen: 2 to 4 seats, each human or bot, the Beginner board.
2. The board: every tile in state.board.tiles drawn with its tile art, a coloured token per player (red, blue, green, yellow), and the tiles the current player can move to highlighted from legalActions.
3. A panel per player: HP out of 12, lives, AP pips, VP, and the monster cards they own (assets/cards/<id>.webp).
4. The current player's actions: tap a tile to move; buttons for loot, buy, raid, invade, barricade and end turn, shown only when legalActions has them. The hand of item cards (assets/items/<id>.webp), playable when legalActions includes them.
5. A fight overlay: both sides (monster portraits from assets/art/<id>.webp), 4 dice each with the two highest marked, damage, HP bars; step through combatRoll, combatContinue and combatApply.
6. A picker for every choice the engine waits on: discard, chooseDefender, takeCard, keepCard, placeTile.
7. An end screen from state.over.
Bot seats act through nextSmartStep with half a second between moves; run it in a Web Worker if it stalls a frame.

Done when a game with one human and one smart bot plays from setup to a winner on a desktop and on a phone, with no rule logic outside engine.js. Next: the Explorer board, teams, sound, then online play with engine.js on a server that owns the state and hides other players' hands.

Look: hot orange (#FF9A2E, #EA6A1F) into deep purple (#1C0E24, #28143A), orange dots, Lilita One for headings and numbers, Figtree for text, rounded chunky buttons. No emoji.