poster/vanillajs/script.js

const bulbListEl = document.getElementById('bulbList');
const addBulbBtn = document.getElementById('addBulb');
const removeBulbBtn = document.getElementById('removeBulb');

const controls = document.getElementById('controls');
const noSelect = document.getElementById('noSelect');

const onOffSwitch = document.getElementById('onOffSwitch');
const brightness = document.getElementById('brightness');
const temperature = document.getElementById('temperature');

const brightnessVal = document.getElementById('brightnessVal');
const temperatureVal = document.getElementById('temperatureVal');

const light = document.getElementById('light');
const visualization = document.getElementById('visualization');

function kelvinToRGB(kelvin) {
  let temp = kelvin / 100;
  let red, green, blue;

  if (temp <= 66) {
    red = 255;
  } else {
    red = 329.698727446 * Math.pow(temp - 60, -0.1332047592);
    red = Math.min(Math.max(red, 0), 255);
  }

  if (temp <= 66) {
    green = 99.4708025861 * Math.log(temp) - 161.1195681661;
    green = Math.min(Math.max(green, 0), 255);
  } else {
    green = 288.1221695283 * Math.pow(temp - 60, -0.0755148492);
    green = Math.min(Math.max(green, 0), 255);
  }

  if (temp >= 66) {
    blue = 255;
  } else if (temp <= 19) {
    blue = 0;
  } else {
    blue = 138.5177312231 * Math.log(temp - 10) - 305.0447927307;
    blue = Math.min(Math.max(blue, 0), 255);
  }

  return {
    red_return: Math.round(red),
    green_return: Math.round(green),
    blue_return: Math.round(blue)
  };
}


let bulbs = [];
let selectedBulb = null;

function renderBulbList() {
  bulbListEl.innerHTML = '';
  bulbs.forEach((bulb, i) => {
    const div = document.createElement('div');
    div.className = 'bulb-item' + (selectedBulb === i ? ' selected' : '');
    div.textContent = `Bulb ${i + 1}`;
    div.onclick = () => selectBulb(i);
    bulbListEl.appendChild(div);
  });
}

function selectBulb(index) {
  selectedBulb = index;
  renderBulbList();
  updateUI();
}

function setControlsEnabled(enabled) {
  brightness.disabled = !enabled;
  temperature.disabled = !enabled;
  brightnessVal.style.opacity = enabled ? '1' : '0.5';
  temperatureVal.style.opacity = enabled ? '1' : '0.5';
}

function updateUI() {
  if (selectedBulb === null) {
    controls.style.display = 'none';
    noSelect.style.display = 'block';
    return;
  }

  const bulb = bulbs[selectedBulb];
  noSelect.style.display = 'none';
  controls.style.display = 'block';

  onOffSwitch.checked = bulb.on;
  brightness.value = bulb.brightness;
  temperature.value = bulb.temperature;
  brightnessVal.textContent = bulb.brightness;
  temperatureVal.textContent = bulb.temperature;

  setControlsEnabled(bulb.on);
  updateVisualization();
}

function clamp01(v) {
  return Math.max(0, Math.min(1, v));
}

function updateVisualization() {
  if (selectedBulb === null) {
    visualization.style.background = '#111';
    light.style.background = 'radial-gradient(circle, #000 0%, #000 100%)';
    light.style.boxShadow = 'none';
    return;
  }

  const bulb = bulbs[selectedBulb];

  if (!bulb.on) {
    visualization.style.background = '#111';
    light.style.background = 'radial-gradient(circle, #000 0%, #000 100%)';
    light.style.boxShadow = 'none';
    light.style.opacity = '1';
    return;
  }

  const b = clamp01(bulb.brightness / 100);
  const t = bulb.temperature;

  let color_conversion = kelvinToRGB(t);
  let color = `${color_conversion.red_return},${color_conversion.green_return},${color_conversion.blue_return}`;

  const faceAlpha = 0.25 + b * 0.75; 
  const glowAlpha = 0.12 + b * 0.5;  

  light.style.background = `radial-gradient(circle at 50% 35%, rgba(${color}, ${faceAlpha}) 0%, rgba(${color}, ${Math.max(0.06, faceAlpha * 0.3)}) 35%, rgba(0,0,0,0) 75%)`;

  const glowSize = 24 + b * 160;
  light.style.boxShadow = `0 0 ${glowSize}px rgba(${color}, ${glowAlpha}), 0 0 ${Math.round(glowSize/2)}px rgba(${color}, ${glowAlpha / 2})`;

  const roomGlowAlpha = Math.min(0.45, 0.06 + b * 0.25);
  visualization.style.background = `radial-gradient(circle at 50% 10%, rgba(${color}, ${roomGlowAlpha}) 0%, rgba(0,0,0,0) 45%), #111`;
  light.style.opacity = '1';
}

onOffSwitch.oninput = () => {
  if (selectedBulb === null) return;
  bulbs[selectedBulb].on = onOffSwitch.checked;
  setControlsEnabled(bulbs[selectedBulb].on);
  updateVisualization();
};

brightness.oninput = () => {
  if (selectedBulb === null) return;
  bulbs[selectedBulb].brightness = Number(brightness.value);
  brightnessVal.textContent = brightness.value;
  if (bulbs[selectedBulb].on) updateVisualization();
};

temperature.oninput = () => {
  if (selectedBulb === null) return;
  bulbs[selectedBulb].temperature = Number(temperature.value);
  temperatureVal.textContent = temperature.value;
  if (bulbs[selectedBulb].on) updateVisualization();
};

addBulbBtn.onclick = () => {
  bulbs.push({ on: false, brightness: 50, temperature: 3000 });
  renderBulbList();
  selectBulb(bulbs.length - 1);
};

removeBulbBtn.onclick = () => {
  if (selectedBulb === null) return;
  bulbs.splice(selectedBulb, 1);
  selectedBulb = null;
  renderBulbList();
  updateUI();
};