Traffic Light

SketchSystems.spec

Traffic Light
  Power On*
    power loss -> Power Off
    Green*
      tick -> Yellow
    Yellow
      tick -> Red
    Red
      tick -> Green

  Power Off
    power restored -> Power On
    Red On*
      tick -> Red Off
    Red Off
      tick -> Red On

SketchSystems_prototype.js

class Comp extends React.Component {
  constructor(props) {
    super(props)
    console.log('hi')
  }
  
  render() {
    return <h1>HI!</h1>
  }
}

const Light = (props) => {
  var styles = {
    width: '20px', 
    height: '20px', 
    borderRadius: '10px', 
    marginBottom: '2px',
    backgroundColor: props.color,
    opacity: .25
  };

  if(props.isOn){
    styles.opacity = 1;
  } 

  return (
    <div style={styles}></div>
  )
}

const render = (model) => {
  var active_light = model.active_states[0].name;
  
  return (
    <div>
      <Light color="Red" isOn={active_light === "Red" || active_light === "Red On"} />
      <Light color="Yellow" isOn={active_light === "Yellow"} />
      <Light color="Green" isOn={active_light === "Green"} />
    
      <button type="button" onClick={() => model.emit('tick')}>Tick</button>
    </div>
  )
}