var modemImg = ;

var routerImg = ;

var apImg = ;

var acImg = ;

var OMImgg = ;

var switchImg = ;

​

var monitorImg = ;

var rockImg = ;

*/

​

var rockNumber = 0;

​

var unitArray = [];

var buttonArray = [];

var rocks = [];

var selectedPort = false;

var isDrawing = false;

​

var AX

var AY

var BX

var BY

​

​

class NetworkDevice {

  constructor(type, x, y, ports) {

    this.type = type;

//    this.image = image;

    this.x = x;

    this.y = y;

    this.width = 100; 

    this.height = 40;

    this.isDragged = false;

    this.deviceOnrock = false;

    this.offsetX = 0;

    this.offsetY = 0;

    this.ports = ports;

    this.connections = []

  }

  draw() {

    fill(200); 

    rect(this.x, this.y, this.width, this.height);

​

    fill(0); 

    textSize(12);

    text(this.type, this.x + this.width / 6, this.y + this.height / 2 + 4);

​

    this.drawPorts();

​

  }

  drawPorts(){

    fill(100);

    var portYOffset = 10;

    for (var i = 0; i < this.ports.length; i++) {

      var port = this.ports[i]; 

      var portX = this.x + this.width + 5;

      var portY = this.y + portYOffset;

​

      port.x = portX;

      port.y = portY;

      port.width = 10;

      port.height = 10;

​

      rect(portX, portY, port.width, port.height); 

      textSize(8);

      text(port.type + ':' + port.speed, portX + 15, portY + 5); 

      portYOffset += 15;

    }

  }

​

  drag() {

    if (this.isDragged) {

      this.x = mouseX - this.offsetX;

      this.y = mouseY - this.offsetY;

    }

    this.draw();

  }

}

​

class singleRock {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.isOccupied = false;

  }

  draw(){

    fill('rgba(0,255,0, 0)');

    rect(this.x, this.y, 110,50);

  }

}

​

function isOnSingleRock(device) {

  for (var rock of rocks) {

    if (!rock.isOccupied && device.x > rock.x && device.x < rock.x + 110 && device.y > rock.y && device.y < rock.y + 50) {

      device.x = rock.x; 

      device.y = rock.y;

      device.deviceOnrock = true;

      rock.isOccupied = true; 

      return true;

    }

  }

  device.deviceOnrock = false;

  return false;

}

​

function mousePressed() {

  for (var button of buttonArray) {

    button.clickButton();

    cursor(ARROW);

  }

​

​

  for (var device of homeDevices.concat(companyDevices)) {

    // Device dragging logic

    if (!device.deviceOnrock && mouseX > device.x && mouseX < device.x + device.width && mouseY > device.y && mouseY < device.y + device.height) {

      device.isDragged = true;

      device.offsetX = mouseX - device.x;

      device.offsetY = mouseY - device.y;

      cursor(HAND);

      return; 

    }

​

    for (var port of device.ports) {

      if (mouseX > port.x && mouseX < port.x + port.width && mouseY > port.y && mouseY < port.y + port.height) {

        cursor(HAND);

​

  /*

     if (!isDrawing) {

       AX = mouseX;

       AY = mouseY;

       isDrawing = true

     } else {

       BX = mouseX;

       BY = mouseY;

     isDrawing = false;

    line(AX, AY, BX, BY);

    }

        */

      }

    }

  }

}

​

function mouseDragged() {

  for (var device of homeDevices.concat(companyDevices)) {

    if (!device.deviceOnrock && device.isDragged) {

      device.x = mouseX - device.offsetX;

      device.y = mouseY - device.offsetY;

    }

  }

}

​

function mouseReleased() {

  for (var device of homeDevices.concat(companyDevices)) {

    if (device.isDragged) {

      isOnSingleRock(device);

      device.isDragged = false;

      cursor(ARROW);

    }

  }

   for (var port of device.ports) {

      if (mouseX > port.x && mouseX < port.x + port.width && mouseY > port.y && mouseY < port.y + port.height) {

   cursor(ARROW);

    }

  }

}

​

var homeDevices = [

  new NetworkDevice('homeOptModem', 570, 100, [

    {type: 'optical', speed: ' '}

  ]),

  new NetworkDevice('homeRouter', 570, 150, [

    { type: 'wan', speed: '500m' },

    { type: 'lan', speed: '500m' },

    { type: 'lan', speed: '1000m' },

    { type: 'lan', speed: '3000m' }

  ]),

  new NetworkDevice('homeAP', 570, 200, [

    { type: 'wan', speed: '1000m' },

    { type: 'lan', speed: '1000m' }

  ]),

  new NetworkDevice('homeAC', 570, 250, [

    { type: 'wan', speed: '1000m' },

    { type: 'lan', speed: '1000m' }

  ])

];

​

// Instantiate NetworkDevice objects for companyDevices

var companyDevices = [

  new NetworkDevice('OpticalModem', 450, 100, [

    { type: 'optical', speed: ' ' },

    { type: 'lan', speed: '1000m' }

  ]),

  new NetworkDevice('Router', 450, 150, [

    { type: 'wan', speed: '10000m' },

    { type: 'lan', speed: '500m' },

    { type: 'lan', speed: '1000m' },

    { type: 'lan', speed: '3000m' }

  ]),

  new NetworkDevice('Switch', 450, 200, [

    { type: 'wan', speed: '10000m' }, 

    { type: 'wan', speed: '10000m' }, // 2 WAN ports

    { type: 'lan', speed: '10000m' }, 

    { type: 'lan', speed: '10000m' }, // 6 LAN ports

    { type: 'lan', speed: '10000m' },

    { type: 'lan', speed: '10000m' },

    { type: 'lan', speed: '10000m' },

    { type: 'lan', speed: '10000m' }

  ]),

  new NetworkDevice('Firewall', 450, 250, [

    { type: 'opt', speed: '10000m' },

    { type: 'opt', speed: '10000m' }, // 2 Optical ports

    { type: 'Lan', speed: '10000m' }, 

    { type: 'Lan', speed: '10000m' }, // 4 LAN ports

    { type: 'Lan', speed: '10000m' },

    { type: 'Lan', speed: '10000m' }

  ])

];

​

​

var networkStatus = {

  internetSpeed: 'Disconnected',

  iotSpeed: 'Disconnected'

};

​

var portSpeeds = {

  '10000m': 4,

  '3000m': 3,

  '1000m': 2,

  '500m': 1

};

​

​

​

function checkConnections() {

  //homeNet only OPT and Router

  var om = findDeviceByType('OpticalModem');

  var router = findDeviceByType('Router');

  if (om && router && arePortsConnected(om, 'optical', router, 'wan')) {

    networkStatus.internetSpeed = OPTlinkRouter(om.ports.optical, router.ports.wan);

  } else {

    networkStatus.internetSpeed = 'Disconnected';

  }

  //homeNet OPT with AP+AC

  var Opt = findDeviceByType('homeOptModem');

  var AP = findDeviceByType('homeAP');

  var AC = findDeviceByType('homeAC');

  //companyNet with opt(firewall) and switch

  if( Opt && AC && arePortsConnected(Opt,'homeOptModem', AC, 'homeAC')){

    networkStatus.internetSpeed = OPTlinkAC(Opt.ports.optical, AC.ports.wan);

  } else{

    networkStatus.internetSpeed = 'disconnected'

  }

  //switch to ac

  var switchdevice = findDeviceByType('Switch');

  if( switchdevice && AC && arePortsConnected(swtich,'Switch',AC,'homeAC')){

    networkStatus.interenetSpeed = switchLinkAC(switchdevice.port.lan, AC.ports.wan);

  }

  //ac to router/ ap

}

​

function findDeviceByType(type) {

  var allDevices = homeDevices.concat(companyDevices);

  return allDevices.find(function(device) { return device.type === type; });

}

​

function arePortsConnected(device1, portType1, device2, portType2) {

  return true; 

}

​

function OPTlinkRouter(OPT, Router) {

   return arePortsConnected(OPT, 'optical', Router, 'wan');

}

​

​

function OPTlinkAC(OPT, AC) {

   return arePortsConnected(OPT, 'optical', AC, 'homeAC');

}

​

function switchLinkAC(switchdevice,AC){

  return arePortsConnected(switchdevice,'Switch',AC,'homeAC');

}

​

​

function displayNetworkStatus() {

  textSize(16);

  if(arePortsConnected == true){

    fill(0,255,0);

  } else{

    fill(0)

  }

  text('Internet Speed' + networkStatus.internetSpeed, 100, height - 700);

  text('IoT Speed' + networkStatus.iotSpeed, 100, height - 670);

}

​

function connect(){

  fill(255);

  noStroke()

  rect(0,0,300,200);

  fill(0,255,0);

  text('Internet Speed  1000m', 100, height - 700);

  text('IoT Speed 1000m', 100, height - 670);

  stroke(0,255,0);

  line(550,440,710,440);

}

​

​

class switchUnit {

  constructor(x, y, unitName) {

    this.x = x;

    this.y = y;

​

    this.unitName = unitName;

  }

​

  draw() {

    fill(155, 155, 155);

    rect(this.x, this.y, 70, 50);

    fill(5);

    text(this.unitName,this.x+16,this.y+30);

  }

​

  mouseInButton() {

    return (mouseX >= this.x && mouseX <= this.x + 70 &&

            mouseY >= this.y && mouseY <= this.y + 50);

  }

​

  clickButton() {

    if (this.mouseInButton()) {

      unitArray = this.unitName; 

    }

  }

}

​

​

​

function home(){

  fill( 0, 255, 0 );

  text("Wellcome to Network Building Simulator!", 430, 250);

  text("Tap Unit to start the game!", 430, 270);

    }

​

​

function unit1(){

  for (var device of homeDevices) {

        device.drag();

        device.draw(); 

  }

  textSize(18);

  fill(0);

  var Blackback = rect(10,300,360,200);

  fill(155);

  text("Now you can start!", 100, 350);

  text("user>>> In this Unit you just need to ", 15, 370);

  text("   make network what can actually working", 40, 390)

}

​

function unit2(){

    for (var device of companyDevices) {

        device.drag();

        device.draw(); 

    }

  textSize(18);

  fill(0);

  var Blackback = rect(10,300,360,200);

  fill(155);

  text("Now you can start!", 100, 350);

  text("user>>> here you should try to build a ", 15, 370);

  text("   base company network(nolimited)", 40, 390)

​

}

​

function unit3(){

    for (var device of homeDevices.concat(companyDevices)) {

        device.drag();

        device.draw(); 

    }

    textSize(18);

  fill(0);

  var Blackback = rect(10,300,360,200);

  fill(155);

  text("Now you can start!", 100, 350);

  text("user>>> In this Unit you need make two", 15, 370);

  text("   network(company&home) in 1 OPT", 40, 390)

}

​

function unit4(){

    textSize(18);

  fill(0);

  var Blackback = rect(10,300,340,200);

  fill(155);

  text("Now you can start!", 100, 350);

  text("null", 30, 370);

  text("", 30, 390)

}

​

function Unit(){

  rect(410,80,350,300);

  rect(410,480,300,20);

  rect(410,630,300,20);

  rect(410,780,300,20);

​

  if (unitArray == "unit1") {

    unit1();

  } else if (unitArray == "unit2") {

    unit2();

  } else if (unitArray == "unit3") {

    unit3();

  } else if (unitArray == "unit4") {

    unit4();

  } else {

    home();

  }

}

​

function setup() {

  createCanvas(800, 800);

​

   buttonArray.push(new switchUnit( 30,530,"unit1"));

   buttonArray.push(new switchUnit( 110,530,"unit2"));

   buttonArray.push(new switchUnit( 190,530,"unit3"));

   buttonArray.push(new switchUnit( 30,590,"unit4"));

   buttonArray.push(new switchUnit( 30,700,"home"));

   rocks.push(new singleRock( 430, 430 )); 

   rocks.push(new singleRock( 580, 430 )); 

   rocks.push(new singleRock( 430, 580 )); 

   rocks.push(new singleRock( 580, 580 )); 

   rocks.push(new singleRock( 430, 730 )); 

   rocks.push(new singleRock( 580, 730 )); 

​

​

​

}

​

function draw() {

  background(255);

  displayNetworkStatus();

​

  fill(0);

  stroke(1);

  Unit();

  //test:

  for (var i = 0; i < rocks.length; i++) {

  rocks[i].draw();

  }

  for (var button of buttonArray) {

    button.draw();

  }

  checkConnections();

​

}

​

​