Skribbl.io - OpenProcessing

mySketch
xxxxxxxxxx
 
var socket = io.connect(":30000?sketch=787662");
var screen = 0;
var localPin = "";
var host = false;
var gap;
var joined = false;
​
//pin vars
var typing = false;
var pinText = "";
​
//username vars
var userTyping = false;
var username = "";
​
//manager vars
var clearScreen = false;
var players;
var p = 0;
var playing = false;
var gameData;
var time = 60*3;
​
//game vars
var answer = "";
var correct = "";
var answerType = false;
var textBox = [];
var localText = [];
​
//host vars
var time = 60*3;
var words = [];
var currentlyPlaying = 0;
var currentWord = "";
​
var newRound = true;
var intermediate = true;
var match = 0;
​
function setup() {
  createCanvas((displayHeight / 9) * 16, displayHeight);
  background('white');
  textAlign(CENTER);
  gap = windowWidth * 0.02;
​
  for (i = 0; i < 6; i++) {
    localPin += char(round(random(97, 122)));
  }
​
  socket.on(localPin, manager);
}
​
function draw() {
  if (clearScreen) {
    clear();
    clearScreen = false;
    if (screen == 2)
      background('black');
    else
      background('white');
  }
  if (screen == 0) {
    clear();
    background('white');
    homescreen();
    homescreenGUI();
  } else if (screen == 1) {
    lobby();
  } else if (screen == 2) {
    game(gameData);
    if (host)
      hostCompute();
  }
​
}
​
function homescreen() {
  push();
  textSize(70);
  fill('red');
  text("Skribbl.io", width * 0.5, height * 0.34);
  fill('gray');
​
  if (!host) {
    push();
    textSize(20);
    fill('black');
    text('Join Game: ', gap * 2, height - gap);
    fill('gray');
    if (typing)
      stroke('black');
    else
      noStroke();
​
    textAlign(LEFT);
    rect(gap * 4, height - gap * 1.75, 120, gap);
    fill('black');
    noStroke();
    text(pinText, gap * 4 + 25, height - gap);
    pop();
​
    push();
    textSize(20);
    noStroke();
    fill('black');
    rect(width * 0.46, height * 0.54, width * 0.08, height * 0.04);
    fill('red');
    var f = 'CREATE';
    if (pinText.length != 0)
      f = 'JOIN';
    text(f, width * 0.5, height * 0.565);
    pop();
​
    push();
    textSize(20);
    fill('gray');
    if (userTyping)
      stroke('black');
    else
      noStroke();
    rect(width * 0.42, height * 0.48, width * 0.16, height * 0.04);
    fill('black');
    noStroke();
    text(username, width * 0.5, height * 0.505);
    pop();
  } else { //host's screen
    textSize(20);
    rect(gap, gap, 180, 40);
    fill('white');
    text("Game Pin: " + localPin, gap + 90, gap + 25);
    pop();
​
    textSize(20);
    for (let a = 0; a < p; a++) {
      fill(color(players[a].r, players[a].g, players[a].b));
      text(players[a].username, width * 0.1 + (width * 0.1 * a), height * 0.65);
    }
​
    //start
    push();
    fill('red');
    rect(width * 0.45, height * 0.48, width * 0.1, height * 0.04);
    fill('black');
    text('START', width / 2, height * 0.505);
    pop();
  }
​
​
​
​
}
​
function homescreenGUI() {
  if (!host && mouseIsPressed && mouseX > gap * 4 && mouseX < gap * 4 + 120 && mouseY > height - gap * 1.75 && mouseY < height - gap * .75) {
    typing = true;
    userTyping = false
  } else if (!host && mouseIsPressed && mouseX > width * 0.42 && mouseX < width * 0.58 && mouseY > height * 0.48 && mouseY < height * 0.52) {
    userTyping = true;
    typing = false;
  } else if (!host && mouseIsPressed) {
    typing = false;
    userTyping = false;
  }
  if ((!joined && mouseIsPressed && width * 0.48 < mouseX && mouseX < width * 0.52 && height * 0.54 < mouseY && mouseY < height * 0.58) || (userTyping && key == 'Enter')) {
    typing = false;
    userTyping = false;
    if (pinText.length == 6 && username != "") {
      var data = {
        call: 'join',
        name: username,
        pin: localPin
      };
      joined = true;
      socket.emit(pinText, data);
    } else if (pinText.length == 0 && username != "") {
      p++;
      var la = {
        username: username,
        r: random(255),
        g: random(255),
        b: random(255),
        pin: localPin,
        number: p,
        answered: 0,
        score: 0,
        drawn: 0
      }
      players = [la]; //[new playerData(username, localPin, p)];
      clearScreen = true;
      host = true;
      joined = true;
    } else {
      fill('red');
      text('Enter username / game pin', width / 2, height * 0.7);
    }
  } //mousePressed
  if (host) {
    if (mouseIsPressed && width * 0.45 < mouseX && mouseX < width * 0.55 && height * 0.48 < mouseY && mouseY < height * 0.52) {
​
      var ha = {
        call: 'startGame',
      };
​
      var ma = {
        call: 'gameInfo',
        playersIn: p,
        playerData: players
      };
​
      manager(ma);
      manager(ha);
      for (let m = 0; m < p; m++) {
        socket.emit(players[m].pin, ma);
        socket.emit(players[m].pin, ha);
      }
​
    }
  }
​
}
​
function lobby() {
  push();
  textSize(35);
  fill('Black');
  text('Waiting on host...', width / 2, height / 2);
  pop();
}
​
function manager(data) {
  if (data.call == 'join') {
    p++;
    var la = {
      username: data.name,
      r: random(255),
      g: random(255),
      b: random(255),
      pin: data.pin,
      number: p,
      answered: 0,
      score: 0,
      drawn: 0
    }
    players.push(la); //(new playerData(data.name, data.pin, p) );
    var da = {
      call: 'joinAccept'
    };
    socket.emit(players[p - 1].pin, da);
  } else if (data.call == 'joinAccept') {
    clearScreen = true;
    screen = 1;
  } else if (data.call == 'startGame') {
    playing = true;
    screen = 2;
    clearScreen = true;
  } else if (data.call == 'gameInfo') {
    gameData = data;
  } else if (data.call == 'guess') {
    if (data.guess == correct) {
      var hold = {
        pin: data.pin,
        message: "guessed correctly"
      }
      textBox.unshift(hold);
    }else{
      var hald = {
        pin: data.pin,
        message: data.guess
      }
      textBox.unshift(hald);
    }
    
    var wen = {
      call: 'update_text',
      text: textBox
    }
    manager(wen);
    for (let it = 0; it < p; it++) {
      socket.emit(players[it].pin, wen);
    }
  }else if (data.call == 'update_text') {
    localText = data.text;
  }else if (data.call == 'playerDrawing') {
  }
}
​
function keyPressed() {
  if (typing) {
    if (keyCode === BACKSPACE) {
      pinText = pinText.substring(0, pinText.length - 1);
    } else if (pinText.length < 6) {
      pinText += key;
    }
  } else if (userTyping) {
    if (keyCode === BACKSPACE) {
      username = username.substring(0, username.length - 1);
    } else if (username.length < 14 && key != 'Shift' && key != 'Enter') {
      username += key;
    }
  }else if (answerType) {
    if (key != 'Enter' && key != 'Alt' && key != 'Control' && key != 'Backspace' && key != 'Shift') {
      answer += key;
    }else if(key == 'Backspace') {
      answer  = answer.substring(0, answer.length-1);
    }else if(key == 'Enter') {
      if (host) {
        var da = {
          call: 'guess',
          pin: localPin,
          guess: answer
        };
        answer = "";
        manager(da);
      }else{
        var ba = {
          call: 'guess',
          pin: localPin,
          guess: answer
        };
        answer = "";
        socket.emit(pinText, ba);
      }
    }
    
  } else if (key === 'f') {
    var fs = fullscreen();
    fullscreen(!fs);
  }
}
​
// Main game function
//
//
//
//
​
function hostCompute() {
  if (newRound) {
    currentlyPLaying = random(p);
    
    while (players[currentlyPlaying].draw != match) {
      currentlyPLaying = random(p);
    }
    
    
  }
  
}
​
function game(data) {
  push();
  textSize(20);
  fill('white');
  rect(width * 0.1, height * 0.1, width * 0.6, height * 0.85);
  fill('gray');
  rect(width * 0.8, height * 0.05, width * 0.2, height * 0.95);
  fill('white');
  rect(width * 0.8, height * 0.95, width * 0.2, height * 0.05);
​
  textAlign(LEFT);
  for (let b = 0; b < gameData.playersIn; b++) {
    fill(color(gameData.playerData[b].r, gameData.playerData[b].g, gameData.playerData[b].b));
    text(gameData.playerData[b].username, width * 0.02, height * 0.1 + height * 0.1 * b);
  }
  pop();
  
  if (mouseIsPressed && width*0.8 <= mouseX && height*0.95 < mouseY) {
    answerType = true;
  }else if (mouseIsPressed) {
    answerType = false;
  }
  
  push();
  textAlign(LEFT);
  textSize(20);
  fill('black');
  text(answer, width * 0.81, height * 0.975);
  if (answerType) {
    if (frameCount%120 > 60)
      line (width * 0.81 + 12*answer.length, height*0.956, width * 0.81 + 12*answer.length, height*0.99);
  }
  pop();
  
  push();
  textSize(18);
  textAlign(LEFT);
  for (let r = 0; r < localText.length; r++) {
    for (let y = 0; y < gameData.playersIn; y++) {
      if (localText[r].pin == gameData.playerData[y].pin) {
        fill(color(gameData.playerData[y].r, gameData.playerData[y].g, gameData.playerData[y].b));
        text(gameData.playerData[y].username + ":", width*0.81, height*0.94 - 25*r);
      }
    }
    fill('black');
    text(localText[r].message, width*0.86, height*0.94 - 25*r);
  }
  pop();
}
​
​
​
​