siers/script.js

## script.js
$(function() {
  "use strict";

  function log() {
    window.console && console.log.apply(console, arguments);
  }

  var thing = $("#victim");
  var fns = {
    // rotatable = c = (l | r | s); if r = s then nil -> movable else rotate(c) -> rotatable
    rotatable: function(sig) {
      var dr = 0;

      switch (sig) {
        case 'lt':
          dr = 10;
          break;
        case 'gt':
          dr = -10;
          break;
        case 's':
          return this.movable();
        default:
          log('ignoring signal ' + sig);
          break;
      }

      var rot = (thing.data('rot') || 0) - dr;
      thing.data('rot', rot);
      thing.css({transform:"rotate(" + rot + "deg)"});

      return this.rotatable;
    },

    // movable = c = (u | d | l | r | s); if r = s then nil -> rotatable else move(c) -> movable
    movable: function(sig) {
      var dx = 0, dy = 0;

      switch (sig) {
        case 'up':
          dx = 10;
          break;
        case 'dn':
          dx = -10;
          break;
        case 'lt':
          dy = 10;
          break;
        case 'gt':
          dy = -10;
          break;
        case 's':
          return this.rotatable();
        default:
          log('ignoring signal ' + sig);
          break;
      }

      thing.css('margin-top', parseInt(thing.css('margin-top'), 10) - dx);
      thing.css('margin-left', parseInt(thing.css('margin-left'), 10) - dy);

      return this.movable;
    },

    recv: function() {
      this.action = this.rotatable;
      $(".r").addClass("active");
      this.recv = function(sig) {
        var tmp = this.action;
        this.action = this.action(sig);

        // Con: works only with two actions.
        if (tmp != this.action) {
          $(".states div").toggleClass("active");
        }
      };
    }
  };

  $("body.signals").each(function() {
    $(".arrows span").click(function() {
      fns.recv($(this).attr('class'));
    });
  });
});

## signals.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta content='' name='description' />
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
    <title>signals</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
    <script src='script.js' type='text/javascript'></script>
    <style>
      body { margin: 25px; }
      .arrows { padding: 10px; margin: 0 0 40px; width: 100px; height: 100px; position: relative; }
      .arrows span { position: absolute; font-size: 30px; }
      .arrows span.gt,
      .arrows span.lt { top: 50%; }
      .arrows span.up,
      .arrows span.dn { left: 50%; }
      .arrows span.gt { left: 100%; }
      .arrows span.lt { left: 0%; }
      .arrows span.up { top: 0%; }
      .arrows span.dn { top: 100%; }
      .arrows span.s  { top: 50%; left: 50%;top: 50%; left: 50%; }
      #victim { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; background: rgb(255, 127, 127); }
      .states .active { color: green; }
    </style>
  </head>
  <body class='signals'>
    <h1>Am I doing signals right?</h1>
    <div class="arrows">
      <span class="lt">&lt;-</span>
      <span class="gt">-&gt;</span>
      <span class="up">^</span>
      <span class="dn">V</span>
      <span class="s">%</span>
    </div>
    <div class="states">
      <div class="r">rotatable</div>
      <div class="m">movable</div>
    </div>

    <div id="victim"></div>
  </body>
</html>
	$(function() {
	"use strict";

	function log() {
	window.console && console.log.apply(console, arguments);
	}

	var thing = $("#victim");
	var fns = {
	// rotatable = c = (l \| r \| s); if r = s then nil -> movable else rotate(c) -> rotatable
	rotatable: function(sig) {
	var dr = 0;

	switch (sig) {
	case 'lt':
	dr = 10;
	break;
	case 'gt':
	dr = -10;
	break;
	case 's':
	return this.movable();
	default:
	log('ignoring signal ' + sig);
	break;
	}

	var rot = (thing.data('rot') \|\| 0) - dr;
	thing.data('rot', rot);
	thing.css({transform:"rotate(" + rot + "deg)"});

	return this.rotatable;
	},

	// movable = c = (u \| d \| l \| r \| s); if r = s then nil -> rotatable else move(c) -> movable
	movable: function(sig) {
	var dx = 0, dy = 0;

	switch (sig) {
	case 'up':
	dx = 10;
	break;
	case 'dn':
	dx = -10;
	break;
	case 'lt':
	dy = 10;
	break;
	case 'gt':
	dy = -10;
	break;
	case 's':
	return this.rotatable();
	default:
	log('ignoring signal ' + sig);
	break;
	}

	thing.css('margin-top', parseInt(thing.css('margin-top'), 10) - dx);
	thing.css('margin-left', parseInt(thing.css('margin-left'), 10) - dy);

	return this.movable;
	},

	recv: function() {
	this.action = this.rotatable;
	$(".r").addClass("active");
	this.recv = function(sig) {
	var tmp = this.action;
	this.action = this.action(sig);

	// Con: works only with two actions.
	if (tmp != this.action) {
	$(".states div").toggleClass("active");
	}
	};
	}
	};

	$("body.signals").each(function() {
	$(".arrows span").click(function() {
	fns.recv($(this).attr('class'));
	});
	});
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<meta content='' name='description' />
	<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
	<title>signals</title>
	<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
	<script src='script.js' type='text/javascript'></script>
	<style>
	body { margin: 25px; }
	.arrows { padding: 10px; margin: 0 0 40px; width: 100px; height: 100px; position: relative; }
	.arrows span { position: absolute; font-size: 30px; }
	.arrows span.gt,
	.arrows span.lt { top: 50%; }
	.arrows span.up,
	.arrows span.dn { left: 50%; }
	.arrows span.gt { left: 100%; }
	.arrows span.lt { left: 0%; }
	.arrows span.up { top: 0%; }
	.arrows span.dn { top: 100%; }
	.arrows span.s { top: 50%; left: 50%;top: 50%; left: 50%; }
	#victim { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; background: rgb(255, 127, 127); }
	.states .active { color: green; }
	</style>
	</head>
	<body class='signals'>
	<h1>Am I doing signals right?</h1>
	<div class="arrows">
	<span class="lt"><-</span>
	<span class="gt">-></span>
	<span class="up">^</span>
	<span class="dn">V</span>
	<span class="s">%</span>
	</div>
	<div class="states">
	<div class="r">rotatable</div>
	<div class="m">movable</div>
	</div>

	<div id="victim"></div>
	</body>
	</html>