Public modul packs

raphael.default.js

var ctx = modul.context;

function skin_Default() {
  ctx.clearRect(0,0,50,50);
  // modul.io DEFAULT SKIN
  ctx.beginPath();
  // Here is a trick to random the modul's color:
  ctx.fillStyle="rgba(" + Math.floor( Math.random() * 255) + "," + Math.floor( Math.random() * 255) + "," + Math.floor( Math.random() * 255) + ",1)";
  //eyes
ctx.fillRect(12,3, 4, 4);
ctx.fillRect(35,3, 4, 4);
//left antenna
ctx.fillRect(16,7, 1, 1);
ctx.fillRect(17,8, 1, 1);
ctx.fillRect(18,9, 1, 1);
ctx.fillRect(17,10, 1, 1);
ctx.fillRect(16,11, 1, 1);
ctx.fillRect(15,12, 1, 1);
ctx.fillRect(14,13, 1, 1);
ctx.fillRect(15,14, 1, 1);
ctx.fillRect(16,15, 1, 1);
ctx.fillRect(17,16, 1, 1);
ctx.fillRect(18,17, 1, 1);
//right antenna
ctx.fillRect(34,7, 1, 1);
ctx.fillRect(33,8, 1, 1);
ctx.fillRect(32,9, 1, 1);
ctx.fillRect(33,10, 1, 1);
ctx.fillRect(34,11, 1, 1);
ctx.fillRect(35,12, 1, 1);
ctx.fillRect(36,13, 1, 1);
ctx.fillRect(35,14, 1, 1);
ctx.fillRect(34,15, 1, 1);
ctx.fillRect(33,16, 1, 1);
ctx.fillRect(32,17, 1, 1);
//body
ctx.fillRect(11,18, 29, 4);
ctx.fillRect(11,26, 29, 4);
ctx.fillRect(11,34, 29, 4);
//trail
ctx.fillRect(16,47, 1, 1);
ctx.fillRect(17,46, 1, 1);
ctx.fillRect(18,45, 1, 1);
ctx.fillRect(19,44, 1, 1);
ctx.fillRect(20,43, 1, 1);
ctx.fillRect(21,42, 1, 1);
ctx.fillRect(22,41, 1, 1);
ctx.fillRect(23,40, 1, 1);
ctx.fillRect(24,39, 1, 1);
ctx.fillRect(25,38, 1, 1);
ctx.fillRect(26,39, 1, 1);
ctx.fillRect(27,40, 1, 1);
ctx.fillRect(28,41, 1, 1);
ctx.fillRect(29,42, 1, 1);
ctx.fillRect(30,43, 1, 1);
ctx.fillRect(31,44, 1, 1);
ctx.fillRect(32,45, 1, 1);
ctx.fillRect(33,46, 1, 1);
ctx.fillRect(34,47, 1, 1);
//bZzZ
}
function skin_Glitch() {
 var x = 50;  
  while (x--){
    var y = 50;
    while (y--){
      ctx.fillStyle = "rgba(" + Math.floor( Math.random() * 255) + "," + Math.floor( Math.random() * 255) + "," + Math.floor( Math.random() * 255) + ",1)";  
      ctx.fillRect(x, y, 1, 1);
    }
  }
}

// You can fill your panel on creation...
var actionsPanel = new ui.buttonsPanel("Actions", [
    new ui.button("Top", function(){
        modul.move("top");
    }),
    new ui.button("Right", function(){
        modul.move("right");
    }),
    new ui.button("Bottom", function(){
        modul.move("bottom");
    }),
    new ui.button("Left", function(){
        modul.move("left");
    })
]);
// You can fill your panel on creation...
var spriteskin_anel = new ui.buttonsPanel("Skins", [
    new ui.button("default", skin_Default),
    new ui.button("glitch", skin_Glitch)
]);

skin_Default();

raphael.test.js

var ctx = modul.context;

// ------- SKINS

function skin_Default() {
  ctx.clearRect(0, 0, 50, 50);
  // modul.io DEFAULT SKIN
  ctx.beginPath();
  // Here is a trick to random the modul's color used for RainbowRandom:
  ctx.fillStyle="rgba(" + Math.floor( Math.random() * 255) + "," + Math.floor( Math.random() * 255) + "," + Math.floor( Math.random() * 255) + ",1)";  //eyes
  ctx.fillRect(12, 3, 4, 4);
  ctx.fillRect(35, 3, 4, 4);
  //left antenna
  ctx.fillRect(16, 7, 1, 1);
  ctx.fillRect(17, 8, 1, 1);
  ctx.fillRect(18, 9, 1, 1);
  ctx.fillRect(17, 10, 1, 1);
  ctx.fillRect(16, 11, 1, 1);
  ctx.fillRect(15, 12, 1, 1);
  ctx.fillRect(14, 13, 1, 1);
  ctx.fillRect(15, 14, 1, 1);
  ctx.fillRect(16, 15, 1, 1);
  ctx.fillRect(17, 16, 1, 1);
  ctx.fillRect(18, 17, 1, 1);
  //right antenna
  ctx.fillRect(34, 7, 1, 1);
  ctx.fillRect(33, 8, 1, 1);
  ctx.fillRect(32, 9, 1, 1);
  ctx.fillRect(33, 10, 1, 1);
  ctx.fillRect(34, 11, 1, 1);
  ctx.fillRect(35, 12, 1, 1);
  ctx.fillRect(36, 13, 1, 1);
  ctx.fillRect(35, 14, 1, 1);
  ctx.fillRect(34, 15, 1, 1);
  ctx.fillRect(33, 16, 1, 1);
  ctx.fillRect(32, 17, 1, 1);
  //body
  ctx.fillRect(11, 18, 29, 4);
  ctx.fillRect(11, 26, 29, 4);
  ctx.fillRect(11, 34, 29, 4);
  //trail
  ctx.fillRect(16, 47, 1, 1);
  ctx.fillRect(17, 46, 1, 1);
  ctx.fillRect(18, 45, 1, 1);
  ctx.fillRect(19, 44, 1, 1);
  ctx.fillRect(20, 43, 1, 1);
  ctx.fillRect(21, 42, 1, 1);
  ctx.fillRect(22, 41, 1, 1);
  ctx.fillRect(23, 40, 1, 1);
  ctx.fillRect(24, 39, 1, 1);
  ctx.fillRect(25, 38, 1, 1);
  ctx.fillRect(26, 39, 1, 1);
  ctx.fillRect(27, 40, 1, 1);
  ctx.fillRect(28, 41, 1, 1);
  ctx.fillRect(29, 42, 1, 1);
  ctx.fillRect(30, 43, 1, 1);
  ctx.fillRect(31, 44, 1, 1);
  ctx.fillRect(32, 45, 1, 1);
  ctx.fillRect(33, 46, 1, 1);
  ctx.fillRect(34, 47, 1, 1);
  //bZzZ
}

function skin_Kirby() {
  // modul.io KIRBY SKIN
  ctx.clearRect(0, 0, 50, 50);
  //body
  ctx.fillStyle = "#fba7c3";
  ctx.fillRect(6, 6, 35, 38);
  ctx.fillRect(41, 15, 3, 26);
  ctx.fillRect(44, 25, 3, 13);
  ctx.fillRect(12, 3, 13, 3);
  ctx.fillRect(31, 44, 3, 3);
  //feets
  ctx.fillStyle = "#f65797";
  ctx.fillRect(3, 25, 3, 15);
  ctx.fillRect(6, 34, 3, 10);
  ctx.fillRect(19, 41, 9, 6);
  ctx.fillRect(22, 38, 3, 3);
  ctx.fillRect(25, 35, 6, 9);
  //border
  ctx.fillStyle = "black";
  ctx.fillRect(12, 0, 13, 3);
  ctx.fillRect(9, 3, 3, 3);
  ctx.fillRect(25, 3, 10, 3);
  ctx.fillRect(6, 6, 3, 7);
  ctx.fillRect(34, 6, 7, 3);
  ctx.fillRect(41, 9, 3, 6);
  ctx.fillRect(3, 13, 3, 11);
  ctx.fillRect(44, 15, 3, 10);
  ctx.fillRect(38, 22, 7, 3);
  ctx.fillRect(47, 25, 4, 12);
  ctx.fillRect(0, 23, 3, 17);
  ctx.fillRect(6, 25, 3, 9);
  ctx.fillRect(3, 40, 3, 4);
  ctx.fillRect(6, 44, 10, 3);
  ctx.fillRect(9, 34, 3, 10);
  ctx.fillRect(3, 22, 3, 3);
  ctx.fillRect(16, 41, 3, 9);
  ctx.fillRect(19, 3, 3, 3);
  ctx.fillRect(19, 38, 3, 3);
  ctx.fillRect(22, 35, 3, 3);
  ctx.fillRect(25, 32, 6, 3);
  ctx.fillRect(31, 35, 3, 9);
  ctx.fillRect(16, 47, 18, 3);
  ctx.fillRect(28, 44, 3, 3);
  ctx.fillRect(34, 44, 7, 3);
  ctx.fillRect(41, 41, 3, 3);
  ctx.fillRect(44, 38, 3, 3);
  ctx.fillRect(47, 25, 3, 13);
  ctx.fillRect(19, 13, 3, 3);
  ctx.fillRect(22, 10, 3, 3);
  ctx.fillRect(25, 16, 3, 3);
  ctx.fillRect(28, 13, 3, 3);
  ctx.fillRect(16, 19, 3, 3);
  //pinkdots
  ctx.fillStyle = "#f65797";
  ctx.fillRect(13, 13, 3, 3);
  ctx.fillRect(16, 7, 3, 3);
  ctx.fillRect(29, 21, 3, 3);
  ctx.fillRect(35, 25, 3, 3);
  //cleardots
  ctx.fillStyle = "#fdc8e9";
  ctx.fillRect(27, 8, 3, 3);
  ctx.fillRect(19, 8, 3, 3);
  ctx.fillRect(40, 18, 3, 3);
  ctx.fillRect(39, 26, 3, 3);
}

function skin_Mario() {
  // modul.io MARIO SKIN
  ctx.clearRect(0, 0, 50, 50);
  ctx.beginPath();
  ctx.fillStyle = "#FFD1F8";
  ctx.fillRect(38, 3, 9, 6);
  ctx.fillRect(10, 9, 31, 10);
  ctx.fillRect(16, 19, 22, 6);
  ctx.fillRect(3, 31, 10, 7);
  ctx.fillStyle = "white";
  ctx.fillRect(25, 31, 13, 4);
  ctx.fillStyle = "black";
  ctx.fillRect(16, 0, 15, 3);
  ctx.fillRect(38, 0, 9, 3);
  ctx.fillRect(31, 3, 7, 3);
  ctx.fillRect(47, 3, 3, 6);
  ctx.fillRect(13, 3, 3, 3);
  ctx.fillRect(10, 6, 3, 6);
  ctx.fillRect(13, 9, 6, 3);
  ctx.fillRect(25, 9, 3, 6);
  ctx.fillRect(31, 9, 10, 3);
  ctx.fillRect(44, 9, 3, 10);
  ctx.fillRect(38, 6, 3, 3);
  ctx.fillRect(7, 12, 3, 7);
  ctx.fillRect(16, 12, 6, 7);
  ctx.fillRect(28, 15, 3, 4);
  ctx.fillRect(10, 19, 6, 3);
  ctx.fillRect(25, 19, 19, 3);
  ctx.fillRect(13, 22, 6, 3);
  ctx.fillRect(41, 22, 3, 3);
  ctx.fillRect(7, 25, 3, 3);
  ctx.fillRect(19, 25, 3, 3);
  ctx.fillRect(32, 25, 3, 3);
  ctx.fillRect(38, 25, 3, 3);
  ctx.fillRect(3, 28, 10, 3);
  ctx.fillRect(22, 28, 3, 7);
  ctx.fillRect(35, 28, 12, 3);
  ctx.fillRect(0, 31, 3, 6);
  ctx.fillRect(13, 31, 3, 6);
  ctx.fillRect(28, 31, 7, 3);
  ctx.fillRect(38, 31, 3, 3);
  ctx.fillRect(47, 31, 4, 6);
  ctx.fillRect(3, 37, 3, 3);
  ctx.fillRect(19, 34, 19, 10);
  ctx.fillRect(44, 37, 3, 7);
  ctx.fillRect(10, 37, 3, 3);
  ctx.fillRect(13, 37, 9, 12);
  ctx.fillRect(10, 44, 18, 3);
  ctx.fillRect(38, 44, 6, 3);
  ctx.fillRect(0, 41, 3, 6);
  ctx.fillRect(3, 47, 7, 3);
  ctx.fillStyle = "red";
  ctx.fillRect(16, 3, 15, 3);
  ctx.fillRect(13, 6, 25, 3);
  ctx.fillRect(41, 9, 3, 10);
  ctx.fillRect(10, 25, 9, 3);
  ctx.fillRect(22, 25, 10, 3);
  ctx.fillRect(35, 25, 3, 3);
  ctx.fillRect(38, 22, 3, 3);
  ctx.fillRect(13, 28, 9, 3);
  ctx.fillRect(25, 28, 10, 3);
  ctx.fillRect(16, 31, 6, 3);
  ctx.fillRect(16, 34, 3, 3);
  ctx.fillRect(41, 31, 6, 6);
  ctx.fillRect(38, 34, 6, 10);
  ctx.fillRect(3, 40, 7, 7);
  ctx.fillRect(6, 37, 4, 4);
  ctx.fillRect(9, 40, 4, 4);
}

function skin_Blank() {
  ctx.clearRect(0, 0, 50, 50);
}

function skin_Creeper() {
  // modul.io CREEPER SKIN
  ctx.clearRect(0, 0, 50, 50);
  ctx.fillStyle='#dcdcdc';
  ctx.fillRect(5,5,40,40);
  var x = 40;
  while (x) {
    var y = 40;
    while (y) {
      ctx.fillStyle = "rgba(" + Math.floor(Math.random() * 10) + "," 
      + Math.floor(Math.random() * 205) + "," 
      + Math.floor(Math.random() * 10) + ",.7)";
      ctx.fillRect(x, y, 5, 5);
      y-=5;      
    }
    x-=5;
  }  
  ctx.fillStyle = "#000000";
  ctx.fillRect(15, 20, 5, 5);
  ctx.fillRect(30, 20, 5, 5);
  ctx.fillRect(20, 30, 10, 5);
  ctx.fillRect(15, 35, 20, 5);
  ctx.fillStyle = "#1e3116";
  ctx.fillRect(15, 15, 5, 5);
  ctx.fillRect(10, 20, 5, 5);
  ctx.fillRect(20, 25, 10, 5);
  ctx.fillRect(30, 40, 5, 5);
  ctx.fillStyle = "#2d302c";
  ctx.fillRect(10, 15, 5, 5);
  ctx.fillRect(30, 15, 5, 5);
  ctx.fillRect(15, 30, 5, 5);
  ctx.fillStyle = "#18330c";
  ctx.fillRect(30, 30, 5, 5);
  ctx.fillRect(35, 15, 5, 5);
  ctx.fillRect(35, 20, 5, 5);
  ctx.fillRect(15, 40, 5, 5);
}
function skin_Love() {
  // modul.io LOVE SKIN
  ctx.clearRect(0, 0, 50, 50);
  ctx.fillStyle='crimson';
  ctx.fillRect(15,16,10,1);
  ctx.fillRect(26,16,10,1);
  ctx.fillRect(15,17,21,4);
  ctx.fillRect(16,15,8,1);
  ctx.fillRect(27,15,8,1);
  ctx.fillRect(17,14,6,1);
  ctx.fillRect(28,14,6,1);
  ctx.fillRect(16,21,19,1);
  ctx.fillRect(17,22,17,1);
  ctx.fillRect(18,23,15,1);
  ctx.fillRect(19,24,13,1);
  ctx.fillRect(20,25,11,1);
  ctx.fillRect(21,26,9,1);
  ctx.fillRect(22,27,7,1);
  ctx.fillRect(23,28,5,1);
  ctx.fillRect(24,29,3,1);
  ctx.fillRect(25,30,1,1);
}

function skin_Error() {
  // modul.io ERROR SKIN
  ctx.antialias = 'gray';
  ctx.clearRect(0, 0, 50, 50);
  ctx.fillStyle = "#0202AC";
  ctx.fillRect(0, 0, 50, 50);
  ctx.fillStyle = "#AFAEAB";
  ctx.fillRect(10, 10, 30, 10);
  ctx.font = "8px arial, sans";
  ctx.fillStyle = "black";
  ctx.fillText("ERROR", 10, 18);
  ctx.antialias = 'none';
  ctx.font = "6px arial, sans";
  ctx.fillStyle = "white";
  ctx.fillText("Ght67H", 10, 30);
  ctx.fillText("HUIhu YHUI", 10, 38);
  ctx.antialias = 'default';
}

function skin_Win(x, y) {
  // modul.io WIN SKIN
  ctx.clearRect(0, 0, 50, 50);
  ctx.beginPath();
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, 50, 50);
  ctx.fillRect(x + 1, y + 2, 1, 1);
  ctx.fillRect(x + 3, y + 3, 1, 1);
  ctx.fillRect(x + 5, y + 3, 1, 1);
  ctx.fillRect(x + 7, y + 2, 1, 1);
  ctx.fillRect(x + 1, y + 14, 1, 1);
  ctx.fillRect(x + 3, y + 15, 1, 1);
  ctx.fillRect(x + 5, y + 15, 1, 1);
  ctx.fillRect(x + 7, y + 14, 1, 1);
  ctx.fillRect(x + 1, y + 8, 1, 1);
  ctx.fillRect(x + 3, y + 9, 1, 1);
  ctx.fillRect(x + 5, y + 9, 1, 1);
  ctx.fillRect(x + 7, y + 8, 1, 1);
  ctx.fillRect(x + 9, y + 1, 1, 1);
  ctx.fillRect(x + 10, y + 1, 1, 1);
  ctx.fillRect(x + 11, y + 0, 1, 1);
  ctx.fillRect(x + 12, y + 0, 1, 1);
  ctx.fillRect(x + 13, y + 0, 1, 1);
  ctx.fillRect(x + 14, y + 0, 1, 1);
  ctx.fillRect(x + 15, y + 1, 1, 1);
  ctx.fillRect(x + 16, y + 1, 1, 1);
  ctx.fillRect(x + 17, y + 2, 1, 12);
  ctx.fillRect(x + 12, y + 1, 1, 12);
  ctx.fillRect(x + 8, y + 2, 1, 12);
  ctx.fillRect(x + 9, y + 13, 1, 1);
  ctx.fillRect(x + 10, y + 12, 1, 1);
  ctx.fillRect(x + 11, y + 12, 1, 1);
  ctx.fillRect(x + 12, y + 12, 1, 1);
  ctx.fillRect(x + 13, y + 12, 1, 1);
  ctx.fillRect(x + 14, y + 12, 1, 1);
  ctx.fillRect(x + 15, y + 13, 1, 1);
  ctx.fillRect(x + 16, y + 13, 1, 1);
  ctx.fillRect(x + 9, y + 7, 1, 1);
  ctx.fillRect(x + 10, y + 6, 1, 1);
  ctx.fillRect(x + 11, y + 6, 1, 1);
  ctx.fillRect(x + 12, y + 6, 1, 1);
  ctx.fillRect(x + 13, y + 6, 1, 1);
  ctx.fillRect(x + 14, y + 6, 1, 1);
  ctx.fillRect(x + 15, y + 7, 1, 1);
  ctx.fillRect(x + 16, y + 7, 1, 1);
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(x + 9, y + 2, 1, 5);
  ctx.fillRect(x + 10, y + 2, 1, 4);
  ctx.fillRect(x + 11, y + 1, 1, 5);
  ctx.fillRect(x + 1, y + 4, 1, 1);
  ctx.fillRect(x + 3, y + 5, 1, 1);
  ctx.fillRect(x + 5, y + 5, 1, 1);
  ctx.fillRect(x + 7, y + 4, 1, 1);
  ctx.fillRect(x + 1, y + 6, 1, 1);
  ctx.fillRect(x + 3, y + 7, 1, 1);
  ctx.fillRect(x + 5, y + 7, 1, 1);
  ctx.fillRect(x + 7, y + 6, 1, 1);
  ctx.fillStyle = "#0003FB";
  ctx.fillRect(x + 9, y + 8, 1, 5);
  ctx.fillRect(x + 10, y + 7, 1, 5);
  ctx.fillRect(x + 11, y + 7, 1, 5);
  ctx.fillRect(x + 1, y + 10, 1, 1);
  ctx.fillRect(x + 3, y + 11, 1, 1);
  ctx.fillRect(x + 5, y + 11, 1, 1);
  ctx.fillRect(x + 7, y + 10, 1, 1);
  ctx.fillRect(x + 1, y + 12, 1, 1);
  ctx.fillRect(x + 3, y + 13, 1, 1);
  ctx.fillRect(x + 5, y + 13, 1, 1);
  ctx.fillRect(x + 7, y + 12, 1, 1);
  ctx.fillStyle = "#FFFF00";
  ctx.fillRect(x + 13, y + 7, 1, 5);
  ctx.fillRect(x + 14, y + 7, 1, 5);
  ctx.fillRect(x + 15, y + 8, 1, 5);
  ctx.fillRect(x + 16, y + 8, 1, 5);
  ctx.fillStyle = "#03A803";
  ctx.fillRect(x + 13, y + 1, 1, 5);
  ctx.fillRect(x + 14, y + 1, 1, 5);
  ctx.fillRect(x + 15, y + 2, 1, 5);
  ctx.fillRect(x + 16, y + 2, 1, 5);
  //bZz
}

// ------- WinState
var winState = false;
var winTimer = 0;
function win() {
  if (winTimer !== 0) {
    winTimer--;
    return;
  }
  winTimer = 2;
  skin_Win(Math.round(Math.random() * 32), Math.round(Math.random() * 32));
}

// ------- ZZZ
function skin_ZZZ(x, y, size) {
  ctx.clearRect(0, 0, 50, 50);
  ctx.strokeStyle = '#3A3751';
  ctx.lineWidth = 3;
  ctx.strokeRect(0, 0, 50, 50);
  ctx.lineWidth = 1;
  ctx.lineWidth = size;
  ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.lineTo(x+10,y);
  ctx.lineTo(x,y+11);
  ctx.lineTo(x+11,y+11);
  ctx.stroke();
}

// ------- ZZZState
var ZZZState = false;
var ZZZTimer = 0;
function zzz() {
  if (ZZZTimer !== 0) {
    ZZZTimer--;
    return;
  }
  ZZZTimer = 1;
  skin_ZZZ(20, Math.round(Math.random() * 32)+2, Math.round(Math.random() * 3));
}

// ------- Blue
function skin_Blue() {
  ctx.clearRect(0, 0, 50, 50);
  var gradient1 = ctx.createRadialGradient(25, 25, 25, 25, 25, 0);
  gradient1.addColorStop(0, 'rgba(0,0,255,0)'); //transparent black
  gradient1.addColorStop(1, '#0000ff');
  ctx.fillStyle = gradient1;
  ctx.beginPath();
  ctx.arc(25, 25, 25, 0, Math.PI * 2, false);
  ctx.closePath();
  ctx.fill();
}

// ------- I AM WITH STUPID
function skin_Stupid() {
  ctx.clearRect(0, 0, 50, 50);
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, 50, 50);
  ctx.fillStyle = "black";
  ctx.font = "16px Impact";
  // fonts    Impact Chalkduster
  var msg1 = 'I AM';
  var msg2 = 'WITH';
  var msg3 = 'STUPID';
  ctx.fillText(msg1, 2, 16);
  ctx.fillText(msg2, 2, 32);
  ctx.fillText(msg3, 2, 47);
  ctx.beginPath();
  ctx.moveTo(37,3);
  ctx.lineTo(45,9);
  ctx.lineTo(37,15);
  ctx.fill();
}

// ------- MONOCHROME FILL
function skin_Monochrome(color){
  ctx.clearRect(0,0,50,50);
  ctx.fillStyle = color;
  ctx.fillRect(0,0,50,50);
}

// ------- GLITCH
function skin_Glitch() {
  var x = 50;
  while (x--) {
    var y = 50;
    while (y--) {
      ctx.fillStyle = "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ",1)";
      ctx.fillRect(x, y, 1, 1);
    }
  }
}


// ------- ACTIONS

// ------- Zombie
var zombieState = false;
var zombiePath = ['top', 'top', 'top', 'left', 'left', 'left', 'bottom', 'bottom', 'bottom', 'right', 'right', 'right'];
var zombiePathCursor = 0;
function zombie() {
  skinPosition();
  modul.move(zombiePath[zombiePathCursor]);
  if (zombiePathCursor === zombiePath.length - 1) {
    zombiePathCursor = 0;
  } else {
    zombiePathCursor++;
  }
}

// ------- Cellular (in progress)
var cellularState = false;
function cellular() {
  var num = 1;
  function Cell() {
    this.xpos = Math.round(Math.random() * 50);
    this.ypos = Math.round(Math.random() * 50);
  }
  Cell.prototype.draw = function () {
    ctx.fillRect(this.xpos, this.ypos, 1, 1);
    this.xpos++;
    this.ypos++;
  };
  var myCell = new Cell();
  for (var i = 0; i < num; i++) {
    myCell.draw();
  }
}

// ------- Balise
function skinPosition() {
  var coords = modul.coordinates();
  ctx.clearRect(0, 0, 50, 50);
  ctx.fillStyle = "white";
  ctx.font = '20px sans';
  ctx.fillText(coords[0], 10, 22);
  ctx.fillText(coords[1], 10, 48);
}

// ------- Say
function say(msg1) {
  //  ctx.rotate(0);
  //  ctx.translate(2, 2);
  ctx.fillStyle = "white";
  ctx.font = "18px Chalkduster";
  // fonts    Impact Chalkduster
  ctx.fillText(msg1, 0, 22);
}

// ------- Distance
var distance = 0;
function dist() {
  ctx.clearRect(0, 0, 50, 50);
  ctx.fillStyle = "red";
  ctx.font = '20px sans';
  ctx.fillText(distance, 10, 22);
}

// ------- Boussole
var bousoleState = false;
function map(value, istart, istop, ostart, ostop) {
  return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
};
function bousole() {
  if (bousoleState) {
    map();
    var coords = modul.coordinates();
    var newx = map(coords[0], 0, 160, 0, 50);
    var newy = map(coords[1], 0, 120, 0, 50);
    ctx.clearRect(0, 0, 50, 50);
    ctx.strokeStyle = '#f00'; // red
    ctx.lineWidth = 1;
    ctx.strokeRect(0, 0, 50, 50);
    ctx.beginPath();
    ctx.fillStyle = "#f00";
    ctx.fillRect(newx - 2, newy, 5, 1);
    ctx.fillRect(newx, newy - 2, 1, 5);
  }
}

// ------- BoussoleTrace
var bousoleTraceState = false;
function bousoleTrace() {
  if (bousoleTraceState) {
    map();
    var coords = modul.coordinates();
    var newx = map(coords[0], 0, 160, 0, 50);
    var newy = map(coords[1], 0, 120, 0, 50);
    ctx.fillStyle = "#fff";
    ctx.fillRect(newx, newy, 1, 1);
  }
}

// ------- Corridor

var cintroState = false;
var cintroTimer = 3;
  function cintro() {
    if (cintroTimer !== 0) {
      cintroTimer--;
      ctx.fillStyle = '#000000';
      ctx.fillRect(0, 0, 50, 50);
      ctx.fillStyle = '#FFFFFF';
      ctx.font = "9px verdana";
      ctx.fillText('CorridoR', 3, 14);
      ctx.fillStyle = '#00FF00';
      ctx.fillText('A game', 6, 37);
      ctx.fillText('in a game', 1, 46);
      return;
    }
  if (cintroState) {
    ctx.clearRect(0, 0, 50, 50);
    corridorState = true;
    cintroState = false;
    corridor(levelx, levely);
  }
}

//Game
var corridorState = false;
var levelx = -10;
var levely = -10;
function checkpoint(chx, chy, message, color) {
//      var coords = modul.coordinates();
//      var mx = coords[0];
//      var my = coords[1];
  ctx.fillStyle = color;
  ctx.fillRect(staticx+chx, staticy+chy, 1, 1);
  if (-levelx+25===chx && -levely+25===chy) {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 40, 50, 10);
    ctx.fillStyle = color;
    ctx.font = "10px sans";
    ctx.fillText(message, 0, 49);
  }
}
function corridor(levelx, levely) {
  if (corridorState) {
    // level
    ctx.clearRect(0, 0, 50, 50);
    ctx.strokeStyle = 'white';
    ctx.lineWidth = 2;
    ctx.fillStyle = '#aaa';
    ctx.fillRect(levelx, levely, 30, 30);
    ctx.fillRect(levelx+40, levely, 30, 30);
    ctx.fillRect(levelx, levely+40, 30, 30);
    ctx.fillRect(levelx+40, levely+40, 30, 30);
    ctx.fillStyle = 'red';
    ctx.fillRect(25, 25, 1, 1);
    var staticx = levelx;
    var staticy = levely;
    checkpoint();
    checkpoint(34,0,'Topaze!', 'cyan');
    checkpoint(0,34,'Gold coin!','gold');
    checkpoint(34,70,'Cobalt!','blue');
    checkpoint(70,34,'Lettuce!','green');
  }
}


// ------- PANELS

// ------- Actions
var actionsPanel = new ui.buttonsPanel("Actions", [
  new ui.button("Left", function () {
    corridor(++levelx, levely);
    modul.move("left");
    bousole();
    bousoleTrace();
    distance++;
  }), new ui.button("Top", function () {
    corridor(levelx, ++levely);
    modul.move("top");
    bousole();
    bousoleTrace();
    distance++;
  }), new ui.button("Bottom", function () {
    corridor(levelx, --levely);
    modul.move("bottom");
    bousole();
    bousoleTrace();
    distance++;
  }), new ui.button("Right", function () {
    corridor(--levelx, levely);
    modul.move("right");
    bousole();
    bousoleTrace();
    distance++;
  }), new ui.button("Say", say), new ui.button("Balise", function () {
    skinPosition();
  }), new ui.button("zombie", function () {
    zombieState = !zombieState
  }), new ui.button("cellular", function () {
    cellularState = !cellularState
  }), new ui.button("bousole", function () {
    bousoleState = !bousoleState;
  }), new ui.button("CorridoR (buggy)", function () {
    cintroState = !cintroState;
  }), new ui.button("bousoleTrace", function () {
    bousoleTraceState = !bousoleTraceState;
  }), new ui.button("win", function () {
    winState = !winState
  }), new ui.button("ZZZ", function () {
    ZZZState = !ZZZState
  }), new ui.button("RainbowRandom", function(){
    skin_Default();
  }), new ui.button("dist", dist)
]);

// ------- Skins
var skinPanel = new ui.buttonsPanel("skins", [
  new ui.button("default", skin_Default),
  new ui.button("blank", skin_Blank),
  new ui.button("kirby", skin_Kirby),
  new ui.button("mario", skin_Mario),
  new ui.button("blue", skin_Blue),
  new ui.button("error", skin_Error),
  new ui.button("glitch", skin_Glitch),
  new ui.button("stupid", skin_Stupid),
  new ui.button("monochrome", skin_Monochrome),
  new ui.button("love", skin_Love),
  new ui.button("creeper", skin_Creeper)
]);

// ------- TEMPO
world.on( 'interval', function() {
  if (zombieState) zombie();
  if (cellularState) cellular();
  if (winState) win();
  if (cintroState) cintro();
  if (ZZZState) zzz();
});

// ------- Set default skin
skin_Default();