Illumination

Details

A basic light bulb. You know. the kind that illuminates...

This is my first time playing with CSS filters. Very fun thing to start playing with.

The HTML

<bitty-2-0 data-connect="Switch" data-send="bulb">
  <div data-receive="bulb"></div>
  <div>
    <button data-send="glow">switch</button>
  </div>
</bitty-2-0>

The CSS

[data-receive=bulb] {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 300px;
}

svg {
  position: absolute;
  width: auto;
  height: 100%;
}

:root {
  --dark-bulb-color: #888;
  --light-bulb-color: #888;
  --screw-color: #555;
}

:root {
  --base-color: var(--light-bulb-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --base-color: var(--dark-bulb-color);
  }
}

.bulb {
  stroke: var(--base-color);
}

.screw {
  stroke: var(--screw-color);
}

.glow {
  filter: 
    drop-shadow(-0.3em 0.4em 1.3em #f3f1b0)
    drop-shadow(0.3em -0.4em 1.3em #dcd85f);
}

The JavaScript

function setProp(key, value) {
  document.documentElement.style.setProperty(key, value);
}

window.Switch= class {
  #state = "on";
  async bulb(_event, el) {
    const bulb = await this.api.fetchSVG("/svgs/bulb.svg");
    bulb.dataset.receive = "glow";
    const screw = await this.api.fetchSVG("/svgs/screw.svg");
    el.appendChild(bulb);
    el.appendChild(screw);
  }

  glow(_event, el) {
    if (this.#state === "off") {
      this.#state = "on";
      setProp("--dark-bulb-color", "#888");
      el.classList.remove("glow")
    } else {
      this.#state = "off";
      setProp("--dark-bulb-color", "#eee838");
      el.classList.add("glow")
    }
  }
};