History&

SketchSystems.spec

History&
  waffle_bath unsticky a unsticky b
    waffle_bath Unvisited
      waffle_bath start -> waffle_bath Incomplete 

    waffle_bath Incomplete
      waffle_bath start -> waffle_bath Incomplete
      waffle_bath complete A -> waffle_bath CompletedOutcomeA
      waffle_bath complete B -> waffle_bath CompletedOutcomeB

    waffle_bath CompletedOutcomeA
      waffle_bath start -> waffle_bath Incomplete
      waffle_bath complete A -> waffle_bath CompletedOutcomeA
      waffle_bath complete B -> waffle_bath CompletedOutcomeB

    waffle_bath CompletedOutcomeB
      waffle_bath start -> waffle_bath Incomplete
      waffle_bath complete A -> waffle_bath CompletedOutcomeA
      waffle_bath complete B -> waffle_bath CompletedOutcomeB
      
   waffle_feed sticky a unsticky b
    waffle_feed Unvisited
      waffle_feed start -> waffle_feed Incomplete 

    waffle_feed Incomplete
      waffle_feed start -> waffle_feed Incomplete
      waffle_feed complete A -> waffle_feed CompletedOutcomeA
      waffle_feed complete B -> waffle_feed CompletedOutcomeB

    waffle_feed CompletedOutcomeA
      waffle_feed start -> waffle_feed CompletedOutcomeA
      waffle_feed complete A -> waffle_feed CompletedOutcomeA
      waffle_feed complete B -> waffle_feed CompletedOutcomeA

    waffle_feed CompletedOutcomeB
      waffle_feed start -> waffle_feed Incomplete
      waffle_feed complete A -> waffle_feed CompletedOutcomeA
      waffle_feed complete B -> waffle_feed CompletedOutcomeB

  waffle_walk sticky a sticky b
    waffle_walk Unvisited
      waffle_walk start -> waffle_walk Incomplete 

    waffle_walk Incomplete
      waffle_walk start -> waffle_walk Incomplete
      waffle_walk complete A -> waffle_walk CompletedOutcomeA
      waffle_walk complete B -> waffle_walk CompletedOutcomeB

    waffle_walk CompletedOutcomeA
      waffle_walk start -> waffle_walk CompletedOutcomeA
      waffle_walk complete A -> waffle_walk CompletedOutcomeA
      waffle_walk complete B -> waffle_walk CompletedOutcomeB

    waffle_walk CompletedOutcomeB
      waffle_walk start -> waffle_walk CompletedOutcomeB
      waffle_walk complete A -> waffle_walk CompletedOutcomeA
      waffle_walk complete B -> waffle_walk CompletedOutcomeB

SketchSystems_prototype.js

const hasState = (states) => (forStates) => states.find(state => forStates.includes(state.name))

function render(model){

  const forStates = hasState(model.active_states);
  
  const noBath = forStates(["waffle_bath Unvisited"]) && "Waffle hasn't had a bath";
  const partialBath = forStates(["waffle_bath Incomplete"]) && "Waffle would like to finish his bath";
  const hadBath = forStates(["waffle_bath CompletedOutcomeA", "waffle_bath CompletedOutcomeB"]) && "Waffle enjoyed his last bath!";
  
  const noFood = forStates(["waffle_feed Unvisited"]) && "Waffle is hungry. Would you like to feed him?";
  const partialFood = forStates(["waffle_feed Incomplete"]) && "Waffle didn't finish his lunch!";
  const hadNiceFood = forStates(["waffle_feed CompletedOutcomeA"]) && "Waffle loved his dinner!";
  const hadNastyFood = forStates(["waffle_feed CompletedOutcomeB"]) && "Waffle didn't like his dinner. He's still hungry!";
  
  const noWalk = forStates(["waffle_walk Unvisited"]) && "Waffle would like walkies";
  const partialWalk = forStates(["waffle_walk Incomplete"]) && "Waffle is looking for something to play with";
  const foundABall = forStates(["waffle_walk CompletedOutcomeA"]) && "Waffle is carrying a ball";
  const foundAStick = forStates(["waffle_walk CompletedOutcomeB"]) && "Waffle is carrying a stick";
  

  
  return <div style={{fontFamily: "sans-serif"}}>
    <h4>Games:</h4>
    <p>{noBath}{partialBath}{hadBath}</p>
    <p>{noFood}{partialFood}{hadNiceFood}{hadNastyFood}</p>
    <p>{noWalk}{partialWalk}{foundABall}{foundAStick}</p>
<h4>States:</h4>
<ul>{model.active_states.map(s => <li>{s.name}</li>)}</ul>
  </div>
  
}