Button*

SketchSystems.spec

Button*

  unlocked*
    default*
      mouseEnter -> hovered

    hovered
      mouseLeave -> default
      mouseDown -> pressed

    pressed
     mouseUp -> locked_hovered
     mouseLeave -> default
  
  locked
    locked_default*
      mouseEnter -> locked_hovered

    locked_hovered
      mouseLeave -> locked
      mouseDown -> locked_pressed

    locked_pressed
     mouseUp -> hovered
     mouseLeave -> locked

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  
  // Button Attributes
  
  let attrs = {
    position: "relative",
    width: "80px",
    height: "80px",
    backgroundImage: "linear-gradient(-180deg, #7D7D7D 0%, #4C4C4C 100%)",
    border: "1px solid #7D7D7D",
    borderRadius: "8px",
    margin: "0px auto",
    transition: "box-shadow .15s",
    "-webkit-box-shadow": "1px 2px 10px 0px rgba(0,0,0,0.3)",
    "-moz-box-shadow": "1px 2px 10px 0px rgba(0,0,0,0.3)",
    "box-shadow": "1px 2px 10px 0px rgba(0,0,0,0.3)"
  };
  
  // Button States
  
  let states = {
    default: {
      backgroundImage: "linear-gradient(-180deg, #7D7D7D 0%, #4C4C4C 100%)",
    },
    pressed: {
      backgroundImage: "linear-gradient(0deg, #5D5D5D 0%, #4D4D4D 100%)",
      "-webkit-box-shadow": "1px 2px 10px 0px rgba(0,0,0,0.0)",
      "-moz-box-shadow": "1px 2px 10px 0px rgba(0,0,0,0.0)",
      "box-shadow": "1px 2px 10px 0px rgba(0,0,0,0.0)"
    },
    hovered: {
      backgroundImage: "linear-gradient(-180deg, #858585 0%, #4E4E4E 100%)",
    }
  }
  
  // Icon Attributes
  
  let iconAttrs = {
    position: "absolute",
    left: "16px",
    top: "16px",
    height: "40px",
    width: "40px",
    borderRadius: "50%",
    border: "4px solid #000",
    transition: "border .3s"
  }
  
  // Icon States
  
  let iconStates = {
    default: { 
      borderColor: "#9bf990",
      borderColor: "#000",
    },
    locked: {
      borderColor: "#000",
      borderColor: "#9bf990"
    },
    hovered: {
      filter: "brightness(110%)",
    }
  }
  
  // Glow Attributes
  
  let glowAttrs = {
    position: "absolute",
    height: "80px",
    width: "80px",
    background: "radial-gradient(100% 100%, rgba(155,249,144,0.20) 30%, rgba(155,249,144,0.00) 80%)",
    opacity: 0,
    transition: "opacity .3s"
  }
  
  // Glow States
  
  let glowStates = {
    default: {
      opacity: 1,
      opacity: 0
    },
    locked: {
      opacity: 0,
      opacity: 1
    },
  }
  
  // Is the component hovered?
  
  if (current_state_name === "hovered" || current_state_name === "locked_hovered") {
    Object.assign(attrs, states.hovered)
    Object.assign(iconAttrs, iconStates.hovered)
  }
  
  // Is the component pressed?
  
  if (current_state_name === "pressed" || current_state_name === "locked_pressed") {
    Object.assign(attrs, states.pressed)
  }
  
  // Is the component unlocked? (or else locked)
  
  if (model.states.unlocked.is_active === true) {
    Object.assign(iconAttrs, iconStates.default)
  } else {
    Object.assign(iconAttrs, iconStates.locked)
    Object.assign(glowAttrs, glowStates.locked)
  }
  
  
  return(
    $("div",
      {style: { width: "100%" } },
      $("div", 
       {
        style: attrs,
        onMouseEnter: () => {model.emit("mouseEnter")},
        onMouseLeave: () => {model.emit("mouseLeave")},
        onMouseDown: () => {model.emit("mouseDown")},
        onMouseUp: () => {model.emit("mouseUp")},
      },
        $("div",
          { style: glowAttrs }
          ),
        $("div",
          { style: iconAttrs }
          )
     ),
     $("p", 
       {style: {
          margin: "12px auto",
          textAlign: "center",
          color: "#555",
          fontFamily: "Helvetica, Arial, Sans-serif",
          fontWeight: 700,
          fontSize: ".7em",
          letterSpacing: "1.5",
          textTransform: "uppercase"
       }},
       current_state_name
      )
   )
)}