Clippy Test

Clippy Test

by John Schulz

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/clippy.js/1.0/clippy.min.css">
<script src="//cdn.jsdelivr.net/clippy.js/1.0/clippy.min.js"></script>
<h1>Clippy!</h1>

Babel + JSX

const getRandomClippy = () => {
  const agentNames = ["Bonzi", "Clippy", "F1", "Genie", "Genius", "Links", "Merlin", "Peedly", "Rocky", "Rover"];
  const randomIndex = Math.floor(Math.random() * agentNames.length);
  const agentName = agentNames[randomIndex];

  return agentName;
};

const loadRandomClippy = () => loadClippy(getRandomClippy());

const loadClippy = (agentName) => clippy.load(agentName, onClippyLoad, loadRandomClippy);

const clippyBehaviors = (agent) => {
  agent.show();
  agent.moveTo(150, 150);
  agent.speak("It looks like you're trying to write code. Can I help you with that?");
  agent.animate();
};

const onClippyLoad = (agent) => {
  clippyBehaviors(agent);
  setTimeout(drawNewClippy, 10000, agent);
};

const clearClippy = (agent) => {
  agent.stop();
  agent._el.remove();
};

const drawNewClippy = (agent) => {
	clearClippy(agent);
  loadRandomClippy();
};

loadRandomClippy();