random palette generator

by Ben Gillbanks

HTML

<div id="slots"></div>
<button onclick="spin()">🎰 Spin</button>
<div id="result"></div>

CSS

#slots {
  display: flex;
  gap: 10px;
  font-family: monospace;
  margin-bottom: 1em;
}
.slot {
  width: 80px;
  height: 80px;
  border: 2px solid #444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
}
button {
  padding: 0.5em 1em;
  font-family: monospace;
}

JavaScript

const COLORS = [
	"#000000", "#1D2B53", "#7E2553", "#008751",
	"#AB5236", "#5F574F", "#C2C3C7", "#FFF1E8",
	"#FF004D", "#FFA300", "#FFEC27", "#00E436",
	"#29ADFF", "#83769C", "#FF77A8", "#FFCCAA"
];

const slotNames = [
	"Sunburst Circuit", "Slime Dreams", "Neon Doom",
	"Cosmic Candy", "Fogbyte", "Laser Picnic"
];

const slotsEl = document.getElementById("slots");
const resultEl = document.getElementById("result");
const slots = [];

const SPIN_BASE_DURATION = 4000; // more spin time
const SPIN_INTERVAL_MIN = 20;    // faster initial speed
const SPIN_INTERVAL_MAX = 1000;   // allow more slowdown
const DELAY_MULTIPLIER = 2;   // more aggressive deceleration


// Initialise slots with ?
for (let i = 0; i < 3; i++) {
	const div = document.createElement("div");
	div.className = "slot";
	div.style.background = COLORS[0];
	div.innerText = "?";
	slotsEl.appendChild(div);
	slots.push(div);
}

function spin() {
	// Clear result while spinning
	resultEl.innerHTML = "";

	const usedIndices = new Set();
	const finalIndices = [];

	slots.forEach((slot, idx) => {
		const spinTime = Math.round(SPIN_BASE_DURATION + Math.random() * 10000); // add per-slot variation
    //console.log('spinTime',spinTime);
		let currentIndex = Math.floor(Math.random() * COLORS.length);
		let elapsed = 0;
		let delay = SPIN_INTERVAL_MIN;


		const interval = setInterval(() => {
			slot.style.background = COLORS[currentIndex];
			slot.innerText = currentIndex;
			currentIndex = (currentIndex + 1) % COLORS.length;
			elapsed += delay;

			// Slow down over time
      delay = Math.min(SPIN_INTERVAL_MAX, delay * DELAY_MULTIPLIER);
      console.log(delay);
			if (elapsed >= spinTime) {
				clearInterval(interval);

				// Pick a unique colour that hasn't been used yet
				let finalIndex = currentIndex;
				let tries = 0;
				while (usedIndices.has(finalIndex) && tries < COLORS.length) {
					finalIndex = (finalIndex + 1) %...