Session Attendance Probability Calculator

class PlayerElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const template = document.getElementById('player-template');
    const templateContent = template.content.cloneNode(true);
    this.shadowRoot.appendChild(templateContent);

    // References to elements in the shadow DOM.
    this._legend = this.shadowRoot.getElementById('player-legend');
    this._nameInput = this.shadowRoot.getElementById('player-name');
    this._slider = this.shadowRoot.getElementById('player-slider');
    this._numberInput = this.shadowRoot.getElementById('player-number');
    this._removeButton = this.shadowRoot.getElementById('remove-btn');
  }

  connectedCallback() {
    // Initialize properties from attributes or defaults.
    this._name = this.getAttribute('name') || 'Player';
    this._probability = Number(this.getAttribute('probability')) || 50;
    this._updateRendering();

    // When the name changes, update the legend and dispatch an event.
    this._nameInput.addEventListener('input', () => {
      this._name = this._nameInput.value;
      this._legend.textContent = this._name.trim() || 'Player';
      this.setAttribute('name', this._name);
      this._dispatchChange();
    });

    // When the slider changes, update the number input.
    this._slider.addEventListener('input', () => {
      const val = this._slider.value;
      this._probability = Number(val);
      this._numberInput.value = val;
      this.setAttribute('probability', this._probability);
      this._dispatchChange();
    });

    // When the number input changes, update the slider.
    this._numberInput.addEventListener('input', () => {
      const val = this._numberInput.value;
      this._probability = Number(val);
      this._slider.value = val;
      this.setAttribute('probability', this._probability);
      this._dispatchChange();
    });

    // Clamp the number input on blur.
    this._numberInput.addEventListener('blur', () => {
      let val = Number(this._numberInput.value);
      if (isNaN(val) || val < 1) {
        val = 1;
      }
      if (val > 100) {
        val = 100;
      }
      this._probability = val;
      this._numberInput.value = val;
      this._slider.value = val;
      this.setAttribute('probability', this._probability);
      this._dispatchChange();
    });

    // Remove button dispatches an event.
    this._removeButton.addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('remove-player', {
        detail: { name: this._name },
        bubbles: true,
        composed: true
      }));
    });
  }

  _updateRendering() {
    this._legend.textContent = this._name;
    this._nameInput.value = this._name;
    this._slider.value = this._probability;
    this._numberInput.value = this._probability;
  }

  _dispatchChange() {
    // Dispatch a custom event so the parent can update the distribution.
    this.dispatchEvent(new CustomEvent('player-change', {
      bubbles: true,
      composed: true
    }));
  }

  static get observedAttributes() {
    return ['name', 'probability'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue === newValue) return;
    if (name === 'name') {
      this._name = newValue;
      if (this._legend) {
        this._legend.textContent = newValue;
      }
      if (this._nameInput) {
        this._nameInput.value = newValue;
      }
    } else if (name === 'probability') {
      this._probability = Number(newValue);
      if (this._slider) {
        this._slider.value = newValue;
      }
      if (this._numberInput) {
        this._numberInput.value = newValue;
      }
    }
  }

  get probability() {
    return this._probability;
  }
}

customElements.define('player-element', PlayerElement);

// Global state: manage the list of player elements.
let nextPlayerId = 1;
const playersContainer = document.getElementById('players-container');
const addPlayerBtn = document.getElementById('add-player-btn');
const distributionContainer = document.getElementById('distribution-container');

// Add a new player custom element.
function addPlayer(name = 'Player ' + nextPlayerId, probability = 80) {
  const playerEl = document.createElement('player-element');
  playerEl.setAttribute('name', name);
  playerEl.setAttribute('probability', probability);
  playerEl.setAttribute('data-id', nextPlayerId);
  nextPlayerId++;
  playersContainer.appendChild(playerEl);
  updateDistribution();
}

// Remove a player element and update distribution.
function removePlayer(playerEl) {
  playersContainer.removeChild(playerEl);
  updateDistribution();
}

// Calculate the probability distribution using dynamic programming.
// dp[k] is the probability that exactly k players attend.
function calculateDistribution() {
  const playerElements = playersContainer.querySelectorAll('player-element');
  const probs = Array.from(playerElements).map(el => Number(el.getAttribute('probability')) / 100);
  const n = probs.length;
  let dp = new Array(n + 1).fill(0);
  dp[0] = 1;
  probs.forEach(p => {
    let newdp = new Array(n + 1).fill(0);
    for (let k = 0; k <= n; k++) {
      newdp[k] += dp[k] * (1 - p);
      if (k > 0) newdp[k] += dp[k - 1] * p;
    }
    dp = newdp;
  });
  return dp;
}

// Update the distribution table.
function updateDistribution() {
  const distribution = calculateDistribution();
  let html = '';
  distribution.forEach((prob, k) => {
    html += ``;
  });
  html += '
Attendees
Probability
${k}
${(prob * 100).toFixed(2)}%
';
  distributionContainer.innerHTML = html;
}

// Listen for events from player elements to update distribution.
document.body.addEventListener('player-change', () => {
  updateDistribution();
});

// Listen for remove-player events to remove a player element.
document.body.addEventListener('remove-player', (e) => {
  // e.target is the custom element that dispatched the event.
  const playerEl = e.target;
  removePlayer(playerEl);
});

addPlayerBtn.addEventListener('click', () => {
  addPlayer();
});

// Initialize with two players.
addPlayer('Player 1', 80);
addPlayer('Player 2', 80);