From cb4dd0654a503255c9248464292327de1c002825 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 7 May 2026 19:17:44 +0000
Subject: [PATCH 1/4] Initial plan
From 9f50c7102f8399411de73c0f784b32b526ded680 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 7 May 2026 19:25:48 +0000
Subject: [PATCH 2/4] Fix: make add-entry/input rows wrap responsively on
mobile
Agent-Logs-Url: https://github.com/K-Cully/random-picker/sessions/7e538db0-8a08-426e-ae87-bc797004907d
Co-authored-by: K-Cully <2370032+K-Cully@users.noreply.github.com>
---
DECISIONS.md | 6 ++++++
css/styles.css | 15 ++++++++++++++-
2 files changed, 20 insertions(+), 1 deletion(-)
diff --git a/DECISIONS.md b/DECISIONS.md
index a84989e..6bdc45d 100644
--- a/DECISIONS.md
+++ b/DECISIONS.md
@@ -103,3 +103,9 @@ _Date: 2026-05-06_
**Replaced stacked sidebar sections with a tab-based interface (Topics / Users)**
Rationale: The previous layout stacked the Topics and Users panels vertically within a fixed-width sidebar. When both panels had content the Users section would overlap or compress the Topics list, making the UI confusing. A tab interface shows one panel at a time, eliminates the overlap issue, and gives each panel the full vertical space of the sidebar. Tabs use ARIA `role="tablist"` / `role="tab"` / `role="tabpanel"` for accessibility.
+
+## Responsive Add-Entry / Add-User / Add-Topic Forms
+
+_Date: 2026-05-07_
+
+Made the add-entry form (`.add-entry-form`) and the sidebar input rows (`.input-row`) wrap on narrow viewports so the **Add** button is never pushed off-screen on mobile. Specifically, `flex-wrap: wrap` is enabled on both rows; `.input-field` uses `flex: 1 1 120px` with `min-width: 0` so inputs can shrink and reflow instead of overflowing; and on viewports ≤ 480px the entry form's submit button stretches to full width on its own row for an easier mobile tap target. Rationale: the previous fixed single-row flex layout assumed enough horizontal space for input + user-select + button, which fails on phone-width screens. Wrapping is preferred over horizontal scrolling for accessibility and usability.
diff --git a/css/styles.css b/css/styles.css
index 1d41194..2961dac 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -359,11 +359,13 @@ body {
.input-row {
display: flex;
+ flex-wrap: wrap;
gap: 8px;
}
.input-field {
- flex: 1;
+ flex: 1 1 120px;
+ min-width: 0;
background: var(--clr-input-bg);
border: 2px solid var(--clr-border);
border-radius: var(--radius-sm);
@@ -535,9 +537,20 @@ body {
/* ---------- Add Entry Form ---------- */
.add-entry-form {
display: flex;
+ flex-wrap: wrap;
gap: 8px;
}
+.add-entry-form .btn {
+ flex: 0 0 auto;
+}
+
+@media (max-width: 480px) {
+ .add-entry-form .btn[type="submit"] {
+ flex: 1 1 100%;
+ }
+}
+
/* ---------- Entries List ---------- */
.entries-list {
display: flex;
From 00d7fe43ddd9a8b5df077ada8e935236bb92d763 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 7 May 2026 20:06:29 +0000
Subject: [PATCH 3/4] Move add-entry submit-button media query into existing
Responsive section
Agent-Logs-Url: https://github.com/K-Cully/random-picker/sessions/b24460e4-9004-4eb2-99f0-40384ffaa03f
Co-authored-by: K-Cully <2370032+K-Cully@users.noreply.github.com>
---
css/styles.css | 10 ++++------
1 file changed, 4 insertions(+), 6 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 2961dac..cb25a84 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -545,12 +545,6 @@ body {
flex: 0 0 auto;
}
-@media (max-width: 480px) {
- .add-entry-form .btn[type="submit"] {
- flex: 1 1 100%;
- }
-}
-
/* ---------- Entries List ---------- */
.entries-list {
display: flex;
@@ -878,4 +872,8 @@ body {
.topic-item {
flex-shrink: 0;
}
+
+ .add-entry-form .btn[type="submit"] {
+ flex: 1 1 100%;
+ }
}
From 525f65f05c3a1c39f400459d590a9a939fc76a65 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 7 May 2026 20:18:51 +0000
Subject: [PATCH 4/4] Merge origin/main: resolve DECISIONS.md conflict (keep
both new dated entries)
Agent-Logs-Url: https://github.com/K-Cully/random-picker/sessions/b05a5da5-129e-4608-8284-bf678b7b3a2a
Co-authored-by: K-Cully <2370032+K-Cully@users.noreply.github.com>
---
DECISIONS.md | 15 ++++++++++
css/styles.css | 23 +++++++++++++++
js/app.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++++--
3 files changed, 112 insertions(+), 3 deletions(-)
diff --git a/DECISIONS.md b/DECISIONS.md
index 6bdc45d..9b84911 100644
--- a/DECISIONS.md
+++ b/DECISIONS.md
@@ -104,6 +104,21 @@ _Date: 2026-05-06_
**Replaced stacked sidebar sections with a tab-based interface (Topics / Users)**
Rationale: The previous layout stacked the Topics and Users panels vertically within a fixed-width sidebar. When both panels had content the Users section would overlap or compress the Topics list, making the UI confusing. A tab interface shows one panel at a time, eliminates the overlap issue, and gives each panel the full vertical space of the sidebar. Tabs use ARIA `role="tablist"` / `role="tab"` / `role="tabpanel"` for accessibility.
+## Fair Mode (Pseudo-Random Selection)
+
+_Date: 2026-05-07_
+
+**Added per-topic "Fair mode" toggle that ensures each user is selected before any user is repeated.**
+
+Rationale: Pure random selection can lead to unfair distribution in small groups — one user may be picked repeatedly while others are skipped. Fair mode addresses this by tracking which users have already been picked in the current round. Entries attributed to already-picked users are excluded from the candidate pool until every user with entries in the topic has been selected. Once all users have been picked, the round resets automatically.
+
+Implementation details:
+- Each topic stores `fairMode` (boolean) and `fairModePickedUserIds` (array of user IDs already picked this round).
+- Entries with no user attribution (`userId: null`) are always eligible regardless of fair mode state.
+- The round resets when all distinct user IDs present in the topic's entries have been picked.
+- Toggling fair mode off clears the tracking array.
+- State is persisted in localStorage alongside existing topic data.
+
## Responsive Add-Entry / Add-User / Add-Topic Forms
_Date: 2026-05-07_
diff --git a/css/styles.css b/css/styles.css
index cb25a84..bc71262 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -776,6 +776,29 @@ body {
display: flex;
gap: 10px;
justify-content: center;
+ align-items: center;
+}
+
+/* ---------- Fair Mode Toggle ---------- */
+.fair-mode-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ font-size: 0.85rem;
+ color: var(--clr-text-muted);
+ user-select: none;
+}
+
+.fair-mode-toggle input[type="checkbox"] {
+ width: 16px;
+ height: 16px;
+ accent-color: var(--clr-primary);
+ cursor: pointer;
+}
+
+.fair-mode-label {
+ white-space: nowrap;
}
/* ---------- Spin Animation ---------- */
diff --git a/js/app.js b/js/app.js
index 7c32e2e..084e306 100644
--- a/js/app.js
+++ b/js/app.js
@@ -64,6 +64,8 @@ const Storage = {
.filter(t => typeof t === 'string')
.map(t => ({ text: t, userId: null })),
picks: [],
+ fairMode: false,
+ fairModePickedUserIds: [],
};
} else if (value && typeof value === 'object') {
/* v2: ensure both arrays exist and contain valid elements */
@@ -76,6 +78,10 @@ const Storage = {
typeof p.text === 'string' &&
typeof p.timestamp === 'number')
: [],
+ fairMode: !!value.fairMode,
+ fairModePickedUserIds: Array.isArray(value.fairModePickedUserIds)
+ ? value.fairModePickedUserIds.filter(id => typeof id === 'string')
+ : [],
};
}
}
@@ -118,7 +124,7 @@ const App = (() => {
t => t.toLowerCase() === key
);
if (existing) return { ok: false, msg: `"${existing}" already exists.` };
- state.topics[trimmed] = { entries: [], picks: [] };
+ state.topics[trimmed] = { entries: [], picks: [], fairMode: false, fairModePickedUserIds: [] };
persist();
return { ok: true, topic: trimmed };
}
@@ -179,7 +185,19 @@ const App = (() => {
function pickRandom(topicName) {
const topic = state.topics[topicName];
if (!topic || topic.entries.length === 0) return null;
- return topic.entries[Math.floor(Math.random() * topic.entries.length)];
+
+ if (!topic.fairMode) {
+ return topic.entries[Math.floor(Math.random() * topic.entries.length)];
+ }
+
+ /* Fair mode: exclude entries whose userId is already picked this round */
+ const pickedIds = topic.fairModePickedUserIds || [];
+ const eligible = topic.entries.filter(e => !e.userId || !pickedIds.includes(e.userId));
+
+ /* If no eligible entries remain, fall back to full list (round will reset in recordPick) */
+ const pool = eligible.length > 0 ? eligible : topic.entries;
+
+ return pool[Math.floor(Math.random() * pool.length)];
}
function recordPick(topicName, entry) {
@@ -191,9 +209,43 @@ const App = (() => {
if (topic.picks.length > MAX_PICKS_PER_TOPIC) {
topic.picks.splice(0, topic.picks.length - MAX_PICKS_PER_TOPIC);
}
+
+ /* Fair mode: track the user who was just picked */
+ if (topic.fairMode && entry.userId) {
+ if (!topic.fairModePickedUserIds) topic.fairModePickedUserIds = [];
+
+ /* If all users were already picked, reset the round before tracking */
+ const userIdsInTopic = [...new Set(
+ topic.entries.map(e => e.userId).filter(Boolean)
+ )];
+ if (userIdsInTopic.length > 0 && userIdsInTopic.every(id => topic.fairModePickedUserIds.includes(id))) {
+ topic.fairModePickedUserIds = [];
+ }
+
+ if (!topic.fairModePickedUserIds.includes(entry.userId)) {
+ topic.fairModePickedUserIds.push(entry.userId);
+ }
+ }
+
+ persist();
+ }
+
+ /* ---- fair mode ---- */
+ function setFairMode(topicName, enabled) {
+ const topic = state.topics[topicName];
+ if (!topic) return;
+ topic.fairMode = !!enabled;
+ if (!enabled) {
+ topic.fairModePickedUserIds = [];
+ }
persist();
}
+ function isFairMode(topicName) {
+ const topic = state.topics[topicName];
+ return topic ? !!topic.fairMode : false;
+ }
+
/* ---- getters ---- */
function getActiveTopic() { return activeTopic; }
function getEntries(topicName) { return state.topics[topicName]?.entries ?? []; }
@@ -206,6 +258,7 @@ const App = (() => {
addEntry, removeEntry, pickRandom, recordPick,
addUser, removeUser, getUsers, getUserById,
getActiveTopic, getEntries, getPickHistory,
+ setFairMode, isFairMode,
get spinInterval() { return spinInterval; },
set spinInterval(v) { spinInterval = v; },
};
@@ -346,6 +399,10 @@ function renderMainContent() {
+
@@ -397,6 +454,11 @@ function renderMainContent() {
/* Wire up pick button */
$('btn-pick').addEventListener('click', () => runPicker(topic));
+
+ /* Wire up fair mode toggle */
+ $('fair-mode-checkbox').addEventListener('change', e => {
+ App.setFairMode(topic, e.target.checked);
+ });
}
function renderEntriesHtml(topic, entries) {
@@ -462,6 +524,10 @@ function runPicker(topic) {
pickBtn.disabled = true;
+ /* disable fair mode toggle during spin */
+ const fairModeCheckbox = $('fair-mode-checkbox');
+ if (fairModeCheckbox) fairModeCheckbox.disabled = true;
+
/* clear previous highlights */
document.querySelectorAll('.entry-item.highlighted').forEach(el =>
el.classList.remove('highlighted')
@@ -485,7 +551,11 @@ function runPicker(topic) {
/* final pick */
const winner = App.pickRandom(topic);
- if (!winner) { pickBtn.disabled = false; return; }
+ if (!winner) {
+ pickBtn.disabled = false;
+ if (fairModeCheckbox) fairModeCheckbox.disabled = false;
+ return;
+ }
const user = winner.userId ? App.getUserById(winner.userId) : null;
resultEl.innerHTML = `
@@ -524,6 +594,7 @@ function runPicker(topic) {
}
pickBtn.disabled = false;
+ if (fairModeCheckbox) fairModeCheckbox.disabled = false;
}
}, SPIN_INTERVAL_MS);
}