@jjlmoya/utils-tabletop 1.9.0 → 1.11.0

package/src/tool/hidden-role-dealer/modules/dealer-logic.ts

@@ -0,0 +1,73 @@
+import { assignRoles, generateImpostorRoles, calculateImpostorCount, getRandomSecretWord } from '../logic';
+import { PRESETS } from './presets';
+import type { Player, Role, ImpostorValues } from '../types';
+
+export interface AssignRolesOptions {
+  players: Player[];
+  activePreset: string;
+  customRoles: Role[];
+  ui: Record<string, string>;
+  vals: ImpostorValues;
+  mode: string;
+  writerId: string;
+  secretInput: string;
+}
+
+export interface AssignResult {
+  players: Player[];
+  preroundActive: boolean;
+  impostorSecret: string;
+}
+
+function assignImpostorRandom(options: AssignRolesOptions): { players: Player[]; secret: string } {
+  const secret = options.secretInput || getRandomSecretWord();
+  const count = options.players.length;
+  const impCount = calculateImpostorCount(options.mode, count, options.vals);
+  return {
+    players: assignRoles(options.players, generateImpostorRoles(count, impCount, secret, options.ui)),
+    secret
+  };
+}
+
+function assignSpecificWriter(options: AssignRolesOptions): Player[] {
+  const others = options.players.filter(p => p.id !== options.writerId);
+  const writerP = options.players.find(p => p.id === options.writerId)!;
+  writerP.role = {
+    id: 'writer',
+    name: options.ui.roleWriterName || 'Writer',
+    description: options.ui.roleWriterDesc || 'You decide the secret word.',
+    team: options.ui.teamCrewmate || 'Crewmate',
+    secretInfo: '',
+    alignment: 'good'
+  };
+  const impCount = calculateImpostorCount(options.mode, others.length + 1, options.vals);
+  const otherRoles = generateImpostorRoles(others.length, impCount, '', options.ui);
+  return [writerP, ...assignRoles(others, otherRoles)];
+}
+
+export function performRoleAssignment(options: AssignRolesOptions): AssignResult {
+  const count = options.players.length;
+  if (options.activePreset === 'custom') {
+    return {
+      players: options.customRoles.length === count ? assignRoles(options.players, options.customRoles) : options.players,
+      preroundActive: false,
+      impostorSecret: ''
+    };
+  }
+  if (options.activePreset === 'impostor') {
+    if (options.writerId === 'preround') {
+      return { players: options.players, preroundActive: true, impostorSecret: '' };
+    }
+    if (options.writerId === 'random') {
+      const res = assignImpostorRandom(options);
+      return { players: res.players, preroundActive: false, impostorSecret: res.secret };
+    }
+    const players = assignSpecificWriter(options);
+    return { players, preroundActive: false, impostorSecret: '' };
+  }
+  return {
+    players: assignRoles(options.players, PRESETS[options.activePreset](count, options.ui)),
+    preroundActive: false,
+    impostorSecret: ''
+  };
+}

package/src/tool/hidden-role-dealer/modules/hold-controller.ts

@@ -0,0 +1,38 @@
+import { ParticleEffects } from './particle-effects';
+
+export class HoldController {
+  private container: HTMLElement;
+  private particles: ParticleEffects;
+  private holdTimer: number | null = null;
+  private isHolding: boolean = false;
+  private onReveal: () => void;
+
+  constructor(container: HTMLElement, onReveal: () => void) {
+    this.container = container;
+    this.particles = new ParticleEffects(container);
+    this.onReveal = onReveal;
+  }
+
+  public start(x: number, y: number): void {
+    const wrapper = this.container.querySelector('.hrd-hold-button-wrapper');
+    if (!wrapper) return;
+    this.isHolding = true;
+    wrapper.classList.add('holding');
+    this.holdTimer = window.setTimeout(() => {
+      if (this.isHolding) {
+        this.particles.spawn(x, y, 'var(--dealer-neutral)');
+        this.onReveal();
+      }
+    }, 1200);
+  }
+
+  public end(): void {
+    this.isHolding = false;
+    if (this.holdTimer) {
+      clearTimeout(this.holdTimer);
+      this.holdTimer = null;
+    }
+    const wrapper = this.container.querySelector('.hrd-hold-button-wrapper');
+    if (wrapper) wrapper.classList.remove('holding');
+  }
+}

package/src/tool/hidden-role-dealer/modules/particle-effects.ts

@@ -0,0 +1,40 @@
+export class ParticleEffects {
+  private container: HTMLElement;
+
+  constructor(container: HTMLElement) {
+    this.container = container;
+  }
+
+  public spawn(x: number, y: number, color: string): void {
+    const count = 30;
+    const parentRect = this.container.getBoundingClientRect();
+    const relativeX = x - parentRect.left;
+    const relativeY = y - parentRect.top;
+
+    for (let i = 0; i < count; i++) {
+      const particle = document.createElement('div');
+      particle.className = 'hrd-role-particle';
+      
+      const size = Math.random() * 8 + 6;
+      const angle = Math.random() * Math.PI * 2;
+      const distance = Math.random() * 80 + 40;
+      
+      const destinationX = Math.cos(angle) * distance;
+      const destinationY = Math.sin(angle) * distance;
+
+      particle.style.width = `${size}px`;
+      particle.style.height = `${size}px`;
+      particle.style.backgroundColor = color;
+      particle.style.left = `${relativeX}px`;
+      particle.style.top = `${relativeY}px`;
+      particle.style.setProperty('--tx', `${destinationX}px`);
+      particle.style.setProperty('--ty', `${destinationY}px`);
+
+      this.container.appendChild(particle);
+
+      setTimeout(() => {
+        particle.remove();
+      }, 1000);
+    }
+  }
+}

package/src/tool/hidden-role-dealer/modules/player-manager.ts

@@ -0,0 +1,44 @@
+import { addPlayer } from '../logic';
+import { loadSavedPlayers, savePlayersList } from './storage';
+import type { Player } from '../types';
+
+export class PlayerManager {
+  private players: Player[] = [];
+
+  constructor() {
+    this.players = loadSavedPlayers();
+  }
+
+  public getPlayers(): Player[] {
+    return this.players;
+  }
+
+  public setPlayers(players: Player[]): void {
+    this.players = players;
+    savePlayersList(this.players);
+  }
+
+  public add(name: string): void {
+    this.players = addPlayer(this.players, name);
+    savePlayersList(this.players);
+  }
+
+  public addFromInput(container: HTMLElement): void {
+    const input = container.querySelector('#input-player-name') as HTMLInputElement;
+    if (input && input.value.trim()) {
+      this.add(input.value.trim());
+      input.value = '';
+      input.focus();
+    }
+  }
+
+  public delete(id: string): void {
+    this.players = this.players.filter(p => p.id !== id);
+    savePlayersList(this.players);
+  }
+
+  public clear(): void {
+    this.players = [];
+    savePlayersList([]);
+  }
+}

package/src/tool/hidden-role-dealer/modules/presets.ts

@@ -0,0 +1,46 @@
+import type { Role } from '../types';
+
+export const PRESETS: Record<string, (count: number, ui: Record<string, string>) => Role[]> = {
+  werewolf: (count, ui) => {
+    const roles: Role[] = [];
+    const werewolfCount = count >= 6 ? 2 : 1;
+    for (let i = 0; i < werewolfCount; i++) {
+      roles.push({ id: `wolf-${i}`, name: ui.roleWerewolfName, description: ui.roleWerewolfDesc, team: ui.teamWerewolves, secretInfo: ui.roleWerewolfSecret, alignment: 'evil' });
+    }
+    roles.push({ id: 'seer', name: ui.roleSeerName, description: ui.roleSeerDesc, team: ui.teamVillagers, secretInfo: ui.roleSeerSecret, alignment: 'good' });
+    roles.push({ id: 'doctor', name: ui.roleDoctorName, description: ui.roleDoctorDesc, team: ui.teamVillagers, secretInfo: ui.roleDoctorSecret, alignment: 'good' });
+    while (roles.length < count) {
+      roles.push({ id: `villager-${roles.length}`, name: ui.roleVillagerName, description: ui.roleVillagerDesc, team: ui.teamVillagers, secretInfo: ui.roleVillagerSecret, alignment: 'neutral' });
+    }
+    return roles.slice(0, count);
+  },
+  avalon: (count, ui) => {
+    const roles: Role[] = [];
+    roles.push({ id: 'merlin', name: ui.roleMerlinName, description: ui.roleMerlinDesc, team: ui.teamGood, secretInfo: ui.roleMerlinSecret, alignment: 'good' });
+    roles.push({ id: 'assassin', name: ui.roleAssassinName, description: ui.roleAssassinDesc, team: ui.teamEvil, secretInfo: ui.roleAssassinSecret, alignment: 'evil' });
+    roles.push({ id: 'minion', name: ui.roleMinionName, description: ui.roleMinionDesc, team: ui.teamEvil, secretInfo: ui.roleMinionSecret, alignment: 'evil' });
+    while (roles.length < count) {
+      roles.push({ id: `servant-${roles.length}`, name: ui.roleServantName, description: ui.roleServantDesc, team: ui.teamGood, secretInfo: ui.roleServantSecret, alignment: 'neutral' });
+    }
+    return roles.slice(0, count);
+  },
+  hitler: (count, ui) => {
+    const roles: Role[] = [];
+    roles.push({ id: 'hitler', name: ui.roleHitlerName, description: ui.roleHitlerDesc, team: ui.teamFascist, secretInfo: ui.roleHitlerSecret, alignment: 'evil' });
+    roles.push({ id: 'fascist-0', name: ui.roleFascistName, description: ui.roleFascistDesc, team: ui.teamFascist, secretInfo: ui.roleFascistSecret, alignment: 'evil' });
+    if (count >= 7) {
+      roles.push({ id: 'fascist-1', name: ui.roleFascistName, description: ui.roleFascistDesc, team: ui.teamFascist, secretInfo: ui.roleFascistSecret, alignment: 'evil' });
+    }
+    while (roles.length < count) {
+      roles.push({ id: `liberal-${roles.length}`, name: ui.roleLiberalName, description: ui.roleLiberalDesc, team: ui.teamLiberal, secretInfo: ui.roleLiberalSecret, alignment: 'neutral' });
+    }
+    return roles.slice(0, count);
+  },
+  custom: (count, ui) => {
+    const roles: Role[] = [];
+    for (let i = 0; i < count; i++) {
+      roles.push({ id: `custom-${i}`, name: `${ui.roleCustomName} ${i + 1}`, description: ui.roleCustomDesc, team: ui.teamCustom, secretInfo: ui.roleCustomSecret, alignment: 'neutral' });
+    }
+    return roles;
+  }
+};

package/src/tool/hidden-role-dealer/modules/setup-handlers.ts

@@ -0,0 +1,34 @@
+import { addPlayer, addCustomRole, removeCustomRole } from '../logic';
+import { savePlayersList } from './storage';
+import type { Player, Role } from '../types';
+
+export function createNewPlayer(container: HTMLElement, players: Player[]): Player[] {
+  const input = container.querySelector('#input-player-name') as HTMLInputElement;
+  if (input && input.value.trim()) {
+    const next = addPlayer(players, input.value.trim());
+    savePlayersList(next);
+    input.value = '';
+    input.focus();
+    return next;
+  }
+  return players;
+}
+
+export function createNewCustomRole(container: HTMLElement, customRoles: Role[]): Role[] {
+  const input = container.querySelector('#input-role-name') as HTMLInputElement;
+  const select = container.querySelector('#select-role-alignment') as HTMLSelectElement;
+  if (input && select && input.value.trim()) {
+    const next = addCustomRole(customRoles, input.value.trim(), select.value as 'good' | 'evil' | 'neutral');
+    localStorage.setItem('hidden-role-dealer-custom-roles', JSON.stringify(next));
+    input.value = '';
+    input.focus();
+    return next;
+  }
+  return customRoles;
+}
+
+export function deleteCustomRole(id: string, customRoles: Role[]): Role[] {
+  const next = removeCustomRole(customRoles, id);
+  localStorage.setItem('hidden-role-dealer-custom-roles', JSON.stringify(next));
+  return next;
+}

package/src/tool/hidden-role-dealer/modules/storage.ts

@@ -0,0 +1,23 @@
+import type { Player, Role } from '../types';
+
+export function loadSavedPlayers(): Player[] {
+  const saved = localStorage.getItem('hidden-role-dealer-players');
+  try {
+    return saved ? JSON.parse(saved) : ['Alice', 'Bob', 'Charlie', 'Diana', 'Ethan'].map((name, i) => ({ id: `p-${i}`, name, role: null, revealed: false }));
+  } catch {
+    return [];
+  }
+}
+
+export function savePlayersList(players: Player[]): void {
+  localStorage.setItem('hidden-role-dealer-players', JSON.stringify(players.map((p) => ({ ...p, role: null, revealed: false }))));
+}
+
+export function loadSavedCustomRoles(): Role[] {
+  const savedRoles = localStorage.getItem('hidden-role-dealer-custom-roles');
+  try {
+    return savedRoles ? JSON.parse(savedRoles) : [];
+  } catch {
+    return [];
+  }
+}

package/src/tool/hidden-role-dealer/modules/utils.ts

@@ -0,0 +1,18 @@
+import type { Player } from '../types';
+
+export function parseInputValue(el: HTMLInputElement | HTMLSelectElement | null, defaultValue: number): number {
+  if (!el) return defaultValue;
+  return parseInt(el.value) || defaultValue;
+}
+
+export function getUIValue(ui: Record<string, string>, key: string, fallback: string): string {
+  return ui[key] || fallback;
+}
+
+export function isValidWriter(current: string, players: Player[]): boolean {
+  return current === 'random' || current === 'preround' || players.some(p => p.id === current);
+}
+
+export function setWrapperDisplay(el: HTMLElement | null, show: boolean): void {
+  if (el) el.style.display = show ? 'flex' : 'none';
+}

package/src/tool/hidden-role-dealer/modules/wizard-html.ts

@@ -0,0 +1,161 @@
+import type { Player, Role } from '../types';
+
+export interface WizardRenderOptions {
+  state: 'distributing' | 'revealed' | 'complete';
+  wizardView: HTMLElement;
+  preroundActive: boolean;
+  preroundContributors: Player[];
+  preroundStep: number;
+  players: Player[];
+  currentStep: number;
+  impostorSecret: string;
+  ui: Record<string, string>;
+}
+
+export function renderDistributing(player: Player, ui: Record<string, string>): string {
+  return `
+    <div class="hrd-pass-screen">
+      <div class="hrd-pass-label">${ui.passTo}</div>
+      <div class="hrd-player-highlight">${player.name}</div>
+      <div class="hrd-hold-button-wrapper">
+        <div class="hrd-hold-progress-ring"></div>
+        <button class="hrd-hold-button" id="btn-hold-reveal" type="button">
+          ${ui.holdToReveal}
+        </button>
+      </div>
+      <div class="hrd-hold-hint">${ui.releasingResets}</div>
+    </div>
+  `;
+}
+
+function getSecretHTML(role: Role, ui: Record<string, string>, prefix: string): string {
+  if (role.secretInfo.includes(prefix)) {
+    const word = role.secretInfo.replace(prefix, '').trim();
+    return `
+      <div class="hrd-epic-secret-box good">
+        <div class="hrd-epic-label">${prefix}</div>
+        <div class="hrd-epic-word">${word}</div>
+      </div>
+    `;
+  }
+  const isImp = role.name === (ui.roleImpostorName || 'Impostor') || role.id.startsWith('imp-');
+  if (role.alignment === 'evil' && isImp) {
+    return `
+      <div class="hrd-epic-secret-box evil">
+        <div class="hrd-epic-label">${role.secretInfo}</div>
+        <div class="hrd-epic-word">IMPOSTOR</div>
+      </div>
+    `;
+  }
+  return `<div class="hrd-secret-box">${role.secretInfo}</div>`;
+}
+
+export function renderRevealed(player: Player, ui: Record<string, string>): string {
+  const role = player.role;
+  if (!role) return '';
+  const prefix = ui.roleCrewmateSecret || 'The Secret Word is:';
+  const isImpostorPreset = role.id.startsWith('crew-') || role.id.startsWith('imp-');
+  const secretHTML = getSecretHTML(role, ui, prefix);
+  const badgeHTML = isImpostorPreset ? '' : `<div class="hrd-role-team hrd-role-badge ${role.alignment}">${role.team}</div>`;
+  const descHTML = isImpostorPreset ? '' : `<p class="hrd-role-desc">${role.description}</p>`;
+  return `
+    <div class="hrd-reveal-screen">
+      <div class="hrd-pass-label">${player.name}, ${ui.secretRoleIs}</div>
+      <div class="hrd-card-container">
+        <div class="hrd-role-card ${role.alignment} ${isImpostorPreset ? 'hrd-compact-card' : ''}">
+          ${badgeHTML}
+          <h3 class="hrd-role-name">${role.name}</h3>
+          ${descHTML}
+          ${secretHTML}
+        </div>
+      </div>
+      <button class="hrd-btn-primary" id="btn-hide-role" type="button">
+        ${ui.hideRole}
+      </button>
+    </div>
+  `;
+}
+
+export function renderComplete(ui: Record<string, string>): string {
+  return `
+    <div class="hrd-complete-screen">
+      <div class="hrd-complete-icon">
+        <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="currentColor" stroke-width="2.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </div>
+      <h3 class="hrd-complete-title">${ui.finishedTitle}</h3>
+      <p class="hrd-complete-desc">${ui.finishedDesc}</p>
+      <button class="hrd-btn-primary" id="btn-restart" type="button">
+        ${ui.restart}
+      </button>
+    </div>
+  `;
+}
+
+export function renderWriterInputScreen(player: Player, ui: Record<string, string>): string {
+  return `
+    <div class="hrd-reveal-screen">
+      <div class="hrd-pass-label">${player.name}</div>
+      <p style="color: var(--dealer-text-muted); font-size: 0.95rem; margin-bottom: 1.5rem; text-align: center;">
+        ${ui.writerInputPrompt}
+      </p>
+      <div class="hrd-input-row" style="margin-bottom: 1.5rem; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto;">
+        <input
+          id="input-writer-secret"
+          class="hrd-input"
+          type="text"
+          placeholder="${ui.writerInputPlaceholder}"
+          maxlength="50"
+          style="text-align: center;"
+        />
+      </div>
+      <button class="hrd-btn-primary" id="btn-save-writer-word" type="button">
+        ${ui.btnSetWord}
+      </button>
+    </div>
+  `;
+}
+
+function renderPreroundWizard(options: WizardRenderOptions): void {
+  const { state, wizardView, preroundContributors, preroundStep, ui } = options;
+  if (state === 'distributing') {
+    wizardView.innerHTML = renderDistributing(preroundContributors[preroundStep], ui);
+  } else if (state === 'revealed') {
+    const fakePlayer = {
+      ...preroundContributors[preroundStep],
+      role: {
+        id: 'preround-writer',
+        name: ui.roleWriterName || 'Writer',
+        description: ui.preroundInputPrompt,
+        team: '',
+        secretInfo: '',
+        alignment: 'good' as const
+      },
+      revealed: false
+    };
+    wizardView.innerHTML = renderWriterInputScreen(fakePlayer, ui);
+  }
+}
+
+function renderGameWizard(options: WizardRenderOptions): void {
+  const { state, wizardView, players, currentStep, impostorSecret, ui } = options;
+  if (state === 'distributing') {
+    const p = players[currentStep];
+    wizardView.innerHTML = (p.role?.id === 'writer' && !impostorSecret)
+      ? renderWriterInputScreen(p, ui)
+      : renderDistributing(p, ui);
+  } else if (state === 'revealed') {
+    wizardView.innerHTML = renderRevealed(players[currentStep], ui);
+  } else if (state === 'complete') {
+    wizardView.innerHTML = renderComplete(ui);
+  }
+}
+
+export function renderWizardDOM(options: WizardRenderOptions): void {
+  if (options.preroundActive) {
+    renderPreroundWizard(options);
+  } else {
+    renderGameWizard(options);
+  }
+}

package/src/tool/hidden-role-dealer/modules/wizard-renderer.ts

@@ -0,0 +1,161 @@
+import type { Player, Role } from '../types';
+import { parseInputValue, getUIValue, isValidWriter, setWrapperDisplay } from './utils';
+
+export interface SetupDOMOptions {
+  container: HTMLElement;
+  players: Player[];
+  customRoles: Role[];
+  activePreset: string;
+  ui: Record<string, string>;
+}
+
+export function renderPlayersListHTML(players: Player[]): string {
+  return players
+    .map(
+      (p) => `
+    <div class="hrd-player-item">
+      <span class="hrd-player-name">${p.name}</span>
+      <button class="hrd-btn-delete" data-id="${p.id}" type="button">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+  `
+    )
+    .join('');
+}
+
+export function renderCustomRolesListHTML(customRoles: Role[]): string {
+  return customRoles
+    .map(
+      (r) => `
+    <div class="hrd-player-item">
+      <span class="hrd-player-name">
+        ${r.name} 
+        <span class="hrd-role-badge ${r.alignment}">${r.alignment}</span>
+      </span>
+      <button class="hrd-btn-delete-role" data-id="${r.id}" type="button">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+  `
+    )
+    .join('');
+}
+
+function updatePresetToggles(container: HTMLElement, activePreset: string): void {
+  container.querySelectorAll('.hrd-preset-card').forEach((card) => {
+    card.classList.toggle('active', card.getAttribute('data-key') === activePreset);
+  });
+  const impSettings = container.querySelector('#impostor-settings') as HTMLElement;
+  if (impSettings) impSettings.style.display = activePreset === 'impostor' ? 'block' : 'none';
+  const editor = container.querySelector('#custom-roles-editor') as HTMLElement;
+  if (editor) editor.style.display = activePreset === 'custom' ? 'block' : 'none';
+}
+
+function updateCustomRoles(container: HTMLElement, customRoles: Role[]): void {
+  const rolesList = container.querySelector('#custom-roles-list') as HTMLElement;
+  if (rolesList) rolesList.innerHTML = renderCustomRolesListHTML(customRoles);
+}
+
+function updateImpostorWriterSelect(container: HTMLElement, players: Player[], ui: Record<string, string>): void {
+  const select = container.querySelector('#select-impostor-writer') as HTMLSelectElement;
+  if (!select) return;
+  const current = select.value;
+  const host = getUIValue(ui, 'impostorWriterRandom', 'Non-player host');
+  const pre = getUIValue(ui, 'impostorWriterPreround', 'Secret Pre-round (All players)');
+  select.innerHTML = `<option value="random">${host}</option>` +
+    `<option value="preround">${pre}</option>` +
+    players.map(p => `<option value="${p.id}">${p.name}</option>`).join('');
+  if (isValidWriter(current, players)) {
+    select.value = current;
+  }
+  const secretWrap = container.querySelector('#impostor-secret-wrapper') as HTMLElement;
+  if (secretWrap) {
+    secretWrap.style.display = select.value === 'random' ? 'flex' : 'none';
+  }
+  const descEl = container.querySelector('#impostor-writer-desc') as HTMLElement;
+  if (descEl) {
+    if (select.value === 'random') {
+      descEl.textContent = getUIValue(ui, 'impostorWriterDescHost', 'Non-player host uses a random word.');
+    } else if (select.value === 'preround') {
+      descEl.textContent = getUIValue(ui, 'impostorWriterDescPreround', 'Pre-round lets all players secretly write words, then picks one randomly.');
+    } else {
+      descEl.textContent = getUIValue(ui, 'impostorWriterDescPlayer', 'Selected player writes the word and cannot be the impostor.');
+    }
+  }
+}
+
+function getImpostorLimit(container: HTMLElement, mode: string, count: number): number {
+  if (mode === 'fixed') {
+    const el = container.querySelector('#select-impostor-fixed-count') as HTMLSelectElement;
+    return parseInputValue(el, 1);
+  }
+  if (mode === 'percentage') {
+    const el = container.querySelector('#input-impostor-percent') as HTMLInputElement;
+    const pct = parseInputValue(el, 25);
+    return Math.max(1, Math.round((pct / 100) * count));
+  }
+  const minEl = container.querySelector('#input-impostor-min') as HTMLInputElement;
+  return parseInputValue(minEl, 1);
+}
+
+function checkImpostorInvalid(container: HTMLElement, players: Player[], ui: Record<string, string>): { invalid: boolean; msg: string } {
+  const select = container.querySelector('#select-impostor-writer') as HTMLSelectElement;
+  const writerId = select?.value || 'random';
+  const count = players.length;
+  const activeCount = (writerId === 'random' || writerId === 'preround') ? count : count - 1;
+  const mode = (container.querySelector('#select-impostor-mode') as HTMLSelectElement)?.value || 'fixed';
+  const limit = getImpostorLimit(container, mode, count);
+  if (activeCount <= limit) {
+    return { invalid: true, msg: ui.impostorWarning };
+  }
+  return { invalid: false, msg: '' };
+}
+
+function checkValidation(options: SetupDOMOptions): { invalid: boolean; msg: string } {
+  const count = options.players.length;
+  if (count < 3) {
+    return { invalid: true, msg: options.ui.mismatchWarning };
+  }
+  if (options.activePreset === 'impostor') {
+    return checkImpostorInvalid(options.container, options.players, options.ui);
+  }
+  if (options.activePreset === 'custom' && options.customRoles.length !== count) {
+    return { invalid: true, msg: options.ui.customMismatchWarning };
+  }
+  return { invalid: false, msg: '' };
+}
+
+function updateValidationAndButton(options: SetupDOMOptions): void {
+  const btn = options.container.querySelector('#btn-deal-roles') as HTMLButtonElement;
+  const warn = options.container.querySelector('#deal-warning') as HTMLElement;
+  if (!btn || !warn) return;
+  const { invalid, msg } = checkValidation(options);
+  btn.disabled = invalid;
+  warn.style.display = invalid ? 'block' : 'none';
+  warn.textContent = invalid ? msg : '';
+}
+
+function updateImpostorModeWrappers(container: HTMLElement): void {
+  const modeEl = container.querySelector('#select-impostor-mode') as HTMLSelectElement;
+  const mode = modeEl ? modeEl.value : 'fixed';
+  setWrapperDisplay(container.querySelector('#impostor-fixed-wrapper') as HTMLElement, mode === 'fixed');
+  setWrapperDisplay(container.querySelector('#impostor-percent-wrapper') as HTMLElement, mode === 'percentage');
+  setWrapperDisplay(container.querySelector('#impostor-range-wrapper') as HTMLElement, mode === 'range');
+}
+
+export function updateSetupDOM(options: SetupDOMOptions): void {
+  const list = options.container.querySelector('#players-list') as HTMLElement;
+  if (list) list.innerHTML = renderPlayersListHTML(options.players);
+  updatePresetToggles(options.container, options.activePreset);
+  updateCustomRoles(options.container, options.customRoles);
+  updateImpostorWriterSelect(options.container, options.players, options.ui);
+  updateImpostorModeWrappers(options.container);
+  updateValidationAndButton(options);
+}