stoplight

components.container\.hbs

<div class="container">
  <Stoplight @colors={{this.colors}} @currentColor={{this.currentColor}} />
  <button {{on "click" this.changeCurrentColor}}>Change</button>
  <div>
    <label>
      <input
        type="radio"
        name="mode"
        value="order"
        checked={{eq this.mode "order"}}
        {{on "change" this.toggleMode}}
      />
      In order
    </label>
    <label>
      <input
        type="radio"
        name="mode"
        value="random"
        checked={{eq this.mode "random"}}
        {{on "change" this.toggleMode}}
      />
      Random
    </label>
  </div>
</div>

components.container\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class Container extends Component {
  @tracked currentColor = 'red';
  @tracked mode = 'order';

  colors = ["red", "yellow", "green"];

  changeCurrentColor = () => {
    const { colors, mode, currentColor } = this;

    if (mode === "order") {
      const idx = colors.indexOf(currentColor);
      const next = idx === 2 ? 0 : idx + 1;
      this.currentColor = colors[next];
    } else {
      const idx = Math.floor(Math.random() * 3);
      if (colors[idx] !== currentColor) {
        this.currentColor = colors[idx];
      } else {
        const nextColor = idx === 0
        	? colors[idx + 1]
          : colors[idx - 1];
        this.currentColor = nextColor;
      }
    }
  }
  
  toggleMode = () => {
    this.mode = this.mode === "order" ? "random" : "order"
  }
}

components.light\.hbs

<div
  data-color={{@color}}
  class="light {{if @active "light--active"}}"
></div>

components.stoplight\.hbs

<div class="stop-light">
	{{#each @colors as |color|}}
    <Light @color={{color}} @active={{eq @currentColor color}} />
  {{/each}}
</div>

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

helpers.eq\.js

import { helper } from '@ember/component/helper';

export default helper(function eq([a, b]) {
  return a === b;
});

styles.app\.css

* {
  font-family: sans-serif;
  color: #333;
  font-weight: 400;
  box-sizing: border-box;
}

.container {
  width: 200px;
  margin: 50px auto;
  display: grid;
  justify-content: center;
  gap: 10px;
}

.stop-light {
  width: 118px;
  height: 300px;
  padding: 18px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr;
  gap: 10px;
  justify-content: center;
  justify-self: center;
  border: 1px solid black;
  border-radius: 5px;
  background: linear-gradient(217deg, #aaa, #000 70.71%);
}

.light {
  width: 80px;
  height: 80px;
  border: 1px solid black;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 #0000;
  transition: box-shadow 0.15s ease-in;
}

.light--active {
  background: radial-gradient(#fbe9e9, var(--color));
  box-shadow: 0 0 10px var(--color);
}

.light--active[data-color="red"] {
  --color: #ff3c41;
}

.light--active[data-color="yellow"] {
  --color: #ffdd40;
}

.light--active[data-color="green"] {
  --color: #47cf73;
}

templates.application\.hbs

<Container />

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}