Colony Arcade · dev tool

Which badge does a new player get?

Signup used to hand everyone the same house-orange badge, so a board of new players looked like one person. Now the starting badge is derived from the display name. This page runs the exact production code so you can poke at it.

Try any name

Display name

style — initials — hash — index —

Type anything — an email, a handle, one letter, an emoji. Every string resolves to a badge, which is the answer to “does it work for any user?”.

How it works

Three steps, no randomness anywhere:

// 1. fold the name into a single integer (classic string hash)
var s = String(name || ''), h = 0;
for (var i = 0; i < s.length; i++)
  h = ((h << 5) - h + s.charCodeAt(i)) | 0;   // h*31 + char, kept 32-bit

// 2. make it positive, wrap it onto the palette
return pool[Math.abs(h) % pool.length];

(h << 5) - h is just h * 31 — a prime multiplier that spreads similar strings apart, so Rob and Rob2 land in different places rather than next to each other. The | 0 keeps it a 32-bit integer so it cannot drift into float territory on long names.

Deterministic, not random. The same name always gets the same badge. That matters more than it sounds: if signup failed and the player retried, a random pick would hand them a different colour each attempt. This way the badge is a property of the name.

The pool it picks from

Seventeen of the twenty-one styles. The three textured fills and the flat fallback are deliberately excluded — a first impression should be a colour, and the textures read as almost nothing at badge size.

Is it actually even?

A hash can look fine and still clump. This runs a batch of realistic names through the real function and counts where they land — perfectly even would be — per style.

—

Where this lives

clyDefaultBadgeFor() in src/js/auth.js, called from the signup path when a player does not pick a badge themselves. The palette is CLY_BADGE_STYLES in src/js/panel.js — the one source the login and admin copies are generated from, this page included.

This file is a single self-contained page: no scripts, styles, fonts or images are loaded from anywhere. Save it, mail it, open it on a plane — it behaves the same. Source lives at tools/badge-hash-tester.html.