DEV Community

Vladimir Ushakov
Vladimir Ushakov

Posted on

Changing the Rules at 70 Points: Designing a Legible Endgame

A Cat Laundry match on the 4×4 board

Cat Laundry already had an unusual rule: clicking one of your cats gives that cell to the opponent, while your color travels diagonally from it. Squares, diamonds, and crosses score points. The interaction is simple to execute, but the result is not self-explanatory.

The newest change made that communication problem sharper. I added a late-game state called Spin Cycle.

When either player reaches 70 points:

  • Spin Cycle visibly activates;
  • the cats rotate much faster;
  • squares and diamonds stop scoring;
  • only crosses count;
  • every cross awards 10 points;
  • the winning score remains 100.

The purpose is mechanical, not cosmetic. A normal match can slow down near the end because both players understand more of the board and start protecting useful formations. Spin Cycle makes the last 30 points more decisive. It also leaves room for a sharp comeback: one cross is worth a third of the remaining distance to victory when the mode begins.

That creates a UX problem: how do you change the scoring rules during play without forcing the player through another tutorial?

A rule change must look like an event

The implementation has one explicit transition. After points are awarded, the game checks the higher score. If it is at least 70, the target is the normal 100-point target, and Spin Cycle has not started yet, the state flips once.

In simplified form:

if (!spinCycle && target === 100 && Math.max(playerScore, opponentScore) >= 70) {
  spinCycle = true;
}
Enter fullscreen mode Exit fullscreen mode

The important part is not the conditional. It is what happens around it.

A silent boolean would be correct game logic and poor interface logic. If a square scores on one turn and does nothing on the next, the player is likely to read that as a bug. The new state therefore changes several signals together:

  • a high-contrast banner announces the mode;
  • the status text says that only crosses now count and that each is worth 10;
  • the board becomes more saturated;
  • the washing-machine glass and indicator lights pulse faster;
  • every cat's rotation accelerates dramatically.

The player should not have to infer a scoring-table change from a missing number. The board itself needs to say: the match just entered a different phase.

A completed shape highlighted after recoloring

Why the scoring filter happens after the transition

The existing scoring pipeline detects completed shapes and returns their point values. Spin Cycle does not replace shape detection. It filters the detected results: outside Spin Cycle all supported shapes can score; inside it, only crosses survive the filter and each surviving cross is worth 10.

Keeping detection and late-game scoring separate matters for feedback. A square can still exist visually after 70 points. It simply is no longer a scoring object. If I removed square detection entirely, other parts of the visual explanation could drift away from what is actually on the board.

The transition is checked after the points from the current action are applied. That means the move that reaches 70 finishes under the old scoring state; then the interface announces Spin Cycle for what follows. The player sees a cause, a boundary, and the new consequence in that order.

The animation has to carry causality

This game already taught me that instant state updates can look like random flicker. One click may recolor the clicked cat, propagate diagonally, complete a shape, award points, and hand control to the other side. If all of those facts appear at once, the final board is visible but the move is not understandable.

Spin Cycle adds another possible consequence to the same chain. The readable order is:

  1. the action resolves;
  2. the current shape is scored;
  3. the score crosses 70;
  4. the mode announcement appears;
  5. the board adopts its faster visual rhythm;
  6. later scoring accepts crosses only.

The animations are not decoration between states. They are the grammar that connects those states.

The tutorial showing the path of a diagonal wave

No second tutorial, but no hidden rule either

I did not add a modal tutorial at 70. Interrupting a close match to explain the ending would fight the tension the mode is supposed to create.

Instead, the transition repeats the rule in the normal status area while changing the whole board's tempo. This is a contextual explanation: it appears exactly when it becomes relevant and does not ask for confirmation.

That is also why the faster spinning alone would not be enough. Motion tells the player that something changed, but it does not tell them what counts now. Text alone has the opposite problem: it is precise, but easy to miss during a match. The two signals need each other.

The real test is the first wrong expectation

The most useful observation will not be whether players notice the banner. It will be what they do immediately afterward.

Do they try to complete a square and become confused when it awards nothing? Do they understand that a cross is now worth 10? Does the accelerated motion feel like a clear endgame signal or just visual noise? And after they understand the rule, does the possibility of a comeback make them want another match?

You can play the current English build in the browser.

After the score reaches 70, is it clear from the visual signals that the rules have changed and only crosses score now?

Top comments (0)