UX flow · killerbufo.com

KILLERBUFO

Ten players, one screen, everybody's phone. This walks through what each person sees from the moment the screen goes up to the moment somebody wins, and what the phone is actually sending.

The loop

Nobody installs anything to play. The screen mints a code, the phones join it, and the room runs the match. Between rounds everyone keeps their seat.

BIG SCREENHost a game

▶

BIG SCREENCode + QR

▶

PHONEScan or type

▶

PHONEName, pond, ready

▶

VIP PHONEStart

▶

EVERYONEMatch

▶

EVERYONEResults, again

Getting in

Landing page — BIG SCREEN One button. It mints a four letter code and redirects to the host screen. On a phone the page flips around: the code box leads and hosting drops to a secondary, because somebody holding a phone is joining a room, not running one.

Lobby with room code and QR — BIG SCREEN Everyone gets a bufo from bufo.fun, tinted to their pond, so a name on a TV has a face next to it. The code is the biggest thing in the room. The QR goes straight to `/p/CODE` so nobody types anything. Ponds fill in live, and the line under the logo says exactly what is still missing.

Codes avoid I, O, 0 and 1. They get read off a television by someone holding a drink.

Phone lobby controls and the room's roster — PHONE Name, then three decisions: which pond, whether you want to be queen, and ready. Everyone in the room is listed on everyone's phone, so nobody has to look at the TV to find out the room is waiting on them. First phone in gets VIP and the start button.

What the phone decides

Control	Rule
Switch pond	Blocked when the other pond already has five.
Claim queen	One per pond. Taken means the button does nothing.
Ready	Everyone connected has to be ready before start lights up. A dark button tells you to do something ("TAP WHEN READY"); a lit one tells you it is done ("READY", with a small way back).
Start	VIP only. Appears on their phone the moment the room qualifies.
Leave	Anybody, between rounds. The seat goes and so does the stored token, so coming back is a fresh seat.
Remove	VIP only, a small cross beside everyone else in the roster. The phone is told and stops reconnecting, and its token is refused if it tries anyway.

If nobody claims queen, the room hands it to whoever joined that pond first. A round never waits on a decision nobody wants to make.

The controller is landscape

Thumbs on the outside, status in the middle, nothing to reach across. Three buttons do everything; the fourth only matters when you are holding something.

Landscape controller on a phone — PHONE The real thing at 844×390. Entering a match asks for full screen and locks landscape where the browser allows it.

Turn your phone card — PHONE Held portrait when the match starts, you get this once. Rotation locked? Dismiss it and the controls stack instead.

Everything else is contextual

You do this	And this happens
Walk into a fly swarm	You pick up one fly. Only tadpoles and speedies can.
Walk into your own pond	The fly goes in. Twelve wins the round.
Walk through a gate	Warrior up in the canopy, speedy down low. The gate goes cold for a moment.
Lean on the snail	A third of a second later you are riding it. Queens cannot.
Touch an enemy	Armed beats unarmed. Two armed toads: the higher one wins.
Stand in a moving snail	It swallows you, and stands still for the whole second and a half it takes. Costs a life, buys time, and is all an unarmed toad can do about a snail.

There is no grab button and no attack button, which is the point. Two arrows and a hop is the whole thing you have to explain to somebody who just walked in.

The match

Countdown on the big screen — BIG SCREEN Three seconds where nothing moves and everyone finds their own name.

A live match — BIG SCREEN Names ride above heads. Ponds fill with water at the bottom corners. The HUD carries both tallies, both queens' remaining lives, and the clock. Big events get a banner in the pond's colour.

Results board — BIG SCREEN How it was won, then flies, kills and deaths per toad. VIP hits play again and everyone keeps their seat.

The cast

Sprites at six times size — The in-match cast, which is drawn rather than borrowed: tadpole, speedy, warrior, queen, both ponds, plus the snail, a fly and the two gates. Every pixel is a filled rectangle drawn at run time, so a promotion is four pixels of difference.

Role	Moves	Carries	Kills	Rides	How you get it
Tadpole	Hops	Yes	No	Yes	What you spawn as
Speedy	Hops, fast	Yes	No	Yes	Speed gate, low on the map
Warrior	Flies	No	Yes	Yes	Warrior gate, up in the canopy
Queen	Flies	No*	Yes	No*	Claimed in the lobby. One per pond.

Dying costs two seconds and your promotion: a warrior comes back a tadpole. A queen comes back a queen, and her pond loses one of three lives.

* Unless her pond is just her. A solo queen carries and rides as well, because otherwise two of the three ways to win are unreachable and a duel is only a knife fight.

Three ways to win

Pond full

Carry flies home: twelve at five a side, down to six in a small room. Swarms refill, so it never deadlocks.

Royal

Eat the rival queen three times. Fastest when one side has two warriors in the air and the other does not.

Snail

Ride the snail to your lily pad. It crawls: half a minute from the middle with nobody stopping you, and somebody always stops you.

All three are live at once, which is the thing the arcade cabinet got right: a pond losing on flies can still be two kills from a takeover, so nobody can read the score and give up.

How many people

Two phones minimum, ten maximum, plus the screen. The screen is not a player.

Room	What you get
1 v 1	A duel. Both toads are queens, and a queen on her own carries flies and rides the snail too, so all three ways to win stay open. Six flies fills a pond.
2 v 2	A queen and one carrier each. Six flies.
3 v 3 to 4 v 4	Eight and ten flies. Enough bodies to hold a gate.
5 v 5	The arcade shape. Twelve flies, four carriers, total chaos.
11th person	Turned away. Ten is the cap.

The fly target follows the shorthanded side, so a pond that is a player down is not also buried under a five-a-side workload. Nothing about a full room changed: twelve is still twelve.

A one on one duel — BIG SCREEN A duel: two queens, six flies, and the lobby says so before anybody presses start.

Watching on the phone

Tap WATCH HERE and the match draws on your own phone, with the controls going see-through on top of it. If no big screen is connected to the room, a phone turns it on without being asked, which is the whole game on two phones and nothing else.

The match drawn on a phone under translucent controls — PHONE The arena at full width, arrows and hop sitting over it at low opacity, status squeezed into one line. The thumb zones are narrowed here so they stop covering both ponds, which are the two things you most need to see. The white chevron is you.

The controls faded out over the match — PHONE Thumbs go quiet for a couple of seconds and the buttons fade away. They keep their hit areas the whole time, so they work while invisible. Faded out on their own, any touch brings them back, a stray press on HOP included. Tap the match and they switch off on purpose: presses still land, they just stay off screen until another tap on the match asks for them. Holding a direction never counts as idle.

None of this is video. The room already sends the big screen a packed frame about 500 bytes long, thirty times a second; a watching phone gets the same frame at twenty and draws it with the same renderer. Ten watching phones cost roughly 100 KB/s out of the room. Because it arrives as state and not as pixels, each phone can draw its own marker, its own HUD, and skip the parts it does not need.

What actually goes over the wire

One Durable Object per room code. The phone sends button state and nothing else, so a tampered controller can make its own toad walk and that is the end of its powers.

Case	What happens
Phone locks or drops wifi	Token in local storage puts you back on the same toad. Your toad just stands there meanwhile.
Somebody joins mid-match	They sit the round out and play the next one.
Everyone closes their tab	The room drops the match on the next tick. The alarm sweeps the object after half an hour.
A deploy lands	Each deploy stamps its id into the service worker, so a new one installs and the page reloads itself. If a round is running it waits for the end of it.
Eleventh player	Turned away with a line about ten being the cap.

Putting it on a phone

Optional. The controller is a web page and works in any browser; installing hides the address bar, holds landscape, and keeps the screen awake more reliably. Same WebSocket either way.

IPHONE AND IPAD

Safari only. Chrome on iOS cannot install one.

Open killerbufo.com in Safari.
Tap Share, the square with the arrow in the bottom bar.
Scroll down, tap Add to Home Screen.
Tap Add.
Open it from the home screen and join as usual.

iOS will not lock the orientation for you, so the turn your phone card does that job.

ANDROID

Chrome, Edge, Samsung Internet.

Open killerbufo.com in Chrome.
Tap INSTALL ON THIS PHONE if the button is showing, and you are done.
Otherwise tap the three dots, top right.
Tap Add to Home screen, then Install.
Launch it. Full screen, landscape, no tab bar.

Android honours the manifest, so it opens straight into landscape and full screen.

Install page on a phone — The same steps live at `/install`, with the right platform listed first.