BrowserLogic/js/main.js

/*
    MatCat BrowserLogic Simulator
 */

let Version = "0.4.6";
let spanVersion = document.getElementById("version");
spanVersion.innerText = Version;
// get the canvas and get the engine object going
let lCanvasElement = document.getElementById("LogicPlane");
let logicEngine = new LogicEngine(lCanvasElement);

// Get the game Tick going, this will be 4ms for now which is the fastest that is supported
// by the HTML5 spec!
setInterval(logicEngine.Scheduler.Tick.bind(logicEngine.Scheduler), 4);

window.addEventListener('resize', function(evt) {
  logicEngine.Resize(evt);
}, false);

window.addEventListener('keydown', function(evt) {
  logicEngine.Key_Press(evt);
}, false);

window.addEventListener('keyup', function(evt) {
  logicEngine.Key_Up(evt);
}, false);

window.addEventListener('mouseup', function(evt) {
  let rcm = document.getElementById("RightClickMenu");
  rcm.style.display = "none";
  let tfms = document.getElementsByClassName("top-menu-div");
  for (let a = 0; a < tfms.length; a++) {
    tfms[a].style.display = "none";
  }
}, false);


lCanvasElement.addEventListener('mousedown', function(evt) {
  logicEngine.Mouse_Down(evt);
}, false);

lCanvasElement.addEventListener('mouseup', function(evt) {
  logicEngine.Mouse_Up(evt);
}, false);

window.addEventListener('mousemove', function(evt) {
  logicEngine.Mouse_Move(evt);
}, false);

// Get the engine going
logicEngine.StartEngine();
BuildToolbox();

// Setup interface buttons
let btn_CloseWelcome = document.getElementById("btn_CloseWelcome");
btn_CloseWelcome.addEventListener('click', function(evt) {
  let WelcomeScreen = document.getElementById("WelcomeWindow");
  let DarkOverlay = document.getElementById("darkout-overlay");
  WelcomeScreen.style.display = "none";
  DarkOverlay.style.display = "none";
  let chk_dontDisplayWelcome = document.getElementById("chk_dontDisplayWelcome");
  if (chk_dontDisplayWelcome.checked) {
    setCookie("hidewelcomescreen","true",3600);
  }
}, false);

let tfm_CreateIC = document.getElementById("tfm_CreateIC");
tfm_CreateIC.addEventListener('click', function(evt) {
  if (!tfm_CreateIC.classList.contains("disabled")) {
    let CreateICBox = document.getElementById("CreateICBox");
    CreateICBox.style.display = "block";
    setTimeout(function () {
      hideMenus()
    }, 10);
  }
});

let rcm_CreateIC = document.getElementById("rcm_CreateIC");
rcm_CreateIC.addEventListener('click', function(evt) {
  if (!this.classList.contains("disabled")) {
    let CreateICBox = document.getElementById("CreateICBox");
    CreateICBox.style.display = "block";
  }
});

let btn_CreateIC_Cancel = document.getElementById("btn_CreateIC_Cancel");
btn_CreateIC_Cancel.addEventListener('click', function(evt) {
  let CreateICBox = document.getElementById("CreateICBox");
  CreateICBox.style.display = "none";
});

let btn_CreateIC_Create = document.getElementById("btn_CreateIC_Create");
btn_CreateIC_Create.addEventListener('click', function(evt) {
  let CreateICBox = document.getElementById("CreateICBox");
  let ICName = document.getElementById("ICName");
  let ICDescription = document.getElementById("ICDescription");
  createIC(logicEngine.ActiveContainer,ICName.value,ICDescription.value);
  CreateICBox.style.display = "none";
});

let ICName = document.getElementById("ICName");
let ICDescription = document.getElementById("ICDescription");

ICName.addEventListener('input', function(evt){
  btn_CreateIC_Create.disabled = true;
  if (ICName.value.length > 0 && ICDescription.value.length > 0) btn_CreateIC_Create.disabled = false;
});

ICDescription.addEventListener('input', function(evt){
  btn_CreateIC_Create.disabled = true;
  if (ICName.value.length > 0 && ICDescription.value.length > 0) btn_CreateIC_Create.disabled = false;
});

let tfm_New = document.getElementById("tfm_New");
tfm_New.addEventListener('click', function(evt) {
  logicEngine.ActiveContainer = new elementContainer();
  logicEngine.Ctx.setTransform(1,0,0,1,0,0);
  logicEngine.Panning.OffsetX = 0;
  logicEngine.Panning.OffsetY = 0;
  setTimeout(function(){hideMenus()},10);
});

let rcm_New = document.getElementById("rcm_New");
rcm_New.addEventListener('click', function(evt) {
  logicEngine.ActiveContainer = new elementContainer();
  logicEngine.Ctx.setTransform(1,0,0,1,0,0);
  logicEngine.Panning.OffsetX = 0;
  logicEngine.Panning.OffsetY = 0;

});

let rcm_Delete = document.getElementById("rcm_Delete");
rcm_Delete.addEventListener('click', function(evt) {
  logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
  disableSelectedRCMs(true);
});

let tfm_Delete = document.getElementById("tfm_Delete");
tfm_Delete.addEventListener('click', function(evt) {
  logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
  disableSelectedRCMs(true);
  setTimeout(function(){hideMenus()},10);
});


let rcm_Disconect = document.getElementById("rcm_Disconnect");
rcm_Disconect.addEventListener('click', function(evt) {
  for (let a = 0; a < logicEngine.ActiveContainer.Selected.length;a++) {
    logicEngine.ActiveContainer.Selected[a].Disconnect();
  }
  logicEngine.ActiveContainer.Disconnect(logicEngine.ActiveContainer.Selected);
});

let tfm_Disconect = document.getElementById("tfm_Disconnect");
tfm_Disconect.addEventListener('click', function(evt) {
  for (let a = 0; a < logicEngine.ActiveContainer.Selected.length;a++) {
    logicEngine.ActiveContainer.Selected[a]?.Disconnect();
  }
  logicEngine.ActiveContainer.Disconnect(logicEngine.ActiveContainer.Selected);
  setTimeout(function(){hideMenus()},10);
});

let tfm_SelectAll = document.getElementById("tfm_SelectAll");
tfm_SelectAll.addEventListener('click', function(evt) {
  let elements = new Array();
  for (let a = 0; a < logicEngine.ActiveContainer.Elements?.length;a++) {
    elements.push(logicEngine.ActiveContainer.Elements[a]);
  }
  logicEngine.ActiveContainer.Selected = elements;
  setTimeout(function(){hideMenus()},10);
});


let tfm_Save = document.getElementById("tfm_Save");
tfm_Save.addEventListener('click', function(evt) {
  let saveWindow = document.getElementById("SaveWindow");
  saveWindow.style.display="block";
  saveWindow.style.left = Math.round((window.innerWidth / 2) - (saveWindow.clientWidth/2)) + "px";
  saveWindow.style.top = Math.round((window.innerHeight / 2) - (saveWindow.clientHeight/2)) + "px";
  setTimeout(function(){hideMenus()},10);
});

let btn_SaveDesign = document.getElementById("btn_SaveDesign");
btn_SaveDesign.addEventListener('click', function(evt) {
  let DesignName = document.getElementById("saveName");
  let savestate = createSaveState(logicEngine.ActiveContainer);
  savestate.Name = DesignName.value;
  let saveWindow = document.getElementById("SaveWindow");
  saveWindow.style.display = "none";
  download(savestate.Name + ".LogicParts",savestate);
});

let btn_Save_Cancel = document.getElementById("btn_CancelSave");
btn_Save_Cancel.addEventListener('click', function(evt) {
  let saveWindow = document.getElementById("SaveWindow");
  saveWindow.style.display = "none";
});

let file_Load = document.getElementById("file_Load");
let tfm_Open = document.getElementById("tfm_Open");
tfm_Open.addEventListener('click', function(evt) {
  setTimeout(function(){hideMenus()},10);
  file_Load.click();
});
file_Load.addEventListener('change', function(evt) {
  let fread = new FileReader();
  fread.onload = (function (theFile) {
    return function (e) {
      try {
        let restoredata = JSON.parse(e.target.result);

        loadresult = loadsave(restoredata);
        if (!loadresult) {
          switch(loadresult) {
            case -1:
              alert("Invalid LogicParts file!");
              break;
            case -2:
              alert("The version of MatCat BrowserLogic cannot open this save version!");
              break;
            default:
              alert("Bad save file!");
              break;
          }
        }
      } catch (ex) {
        alert("Bad file! " + ex);
        console.log(ex);
      }
    }
  })(evt.target.files[0]);
  fread.readAsText(evt.target.files[0]);
}, false);

/*
    Generate the top menu item listeners
 */
let tfms = document.getElementsByClassName("top-menu-item");
for (let a = 0; a < tfms.length; a++) {
  tfms[a].addEventListener("click", function (evt) {
    let tfm = document.getElementById(tfms[a].id + "Menu");
    let tfm_rect = tfms[a].getBoundingClientRect();
    tfm.style.left = (tfm_rect.left) + "px";
    tfm.style.top = (tfm_rect.top + tfm_rect.height) + "px";
    tfm.style.display = "block";
  });
  let tfm = document.getElementById(tfms[a].id + "Menu");
  if (!tfm.classList.contains("keybinding-complete")) {
    tfm.classList.add("keybinding-complete");
    let menuItems = tfm?.getElementsByTagName("li");
    for (let b = 0; b < menuItems?.length; b++) {
      if (menuItems[b]?.getAttribute("value")) menuItems[b].innerHTML = '<span class="menuitem-label">' + menuItems[b].innerHTML + '</span><span class="menuitem-shortcut">' + (KeybindToString(logicEngine.Settings.Keybindings[menuItems[b].getAttribute("value")])) + '</span>';
    }
  }
}

let tfm_About = document.getElementById("tfm_About");
tfm_About.addEventListener("click", function (evt) {
  let WelcomeScreen = document.getElementById("WelcomeWindow");
  WelcomeScreen.style.display = "block";
  setTimeout(function(){hideMenus()},10);
});

let tfm_ShowConns = document.getElementById("tfm_ShowConnections");
tfm_ShowConns.addEventListener("click", function (evt) {
  if (logicEngine.Settings.HideConnections) {
    let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
    sgSpan.innerText = "✓";
    logicEngine.Settings.HideConnections = false;
  } else {
    let sgSpan = tfm_ShowConns.getElementsByClassName("checkbox")[0];
    sgSpan.innerHTML = "&nbsp;";
    logicEngine.Settings.HideConnections = true;
  }
  setTimeout(function(){hideMenus()},10);
});

let tfm_ConnLayer = document.getElementById("tfm_ConnectionLayer");
tfm_ConnLayer.addEventListener("click", function (evt) {
  if (logicEngine.Settings.TopConnections) {
    tfm_ConnLayer.innerText = "Connections Above";
    logicEngine.Settings.TopConnections = false;
  } else {
    tfm_ConnLayer.innerText = "Connections Below";
    logicEngine.Settings.TopConnections = true;
  }
  setTimeout(function(){hideMenus()},10);
});

let tfm_ShowFPS = document.getElementById("tfm_ShowFPS");
tfm_ShowFPS.addEventListener("click", function (evt) {
  if (logicEngine.Settings.ShowFPS) {
    let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0];
    sgSpan.innerHTML = "&nbsp;";
    logicEngine.Settings.ShowFPS = false;
  } else {
    let sgSpan = tfm_ShowFPS.getElementsByClassName("checkbox")[0];
    sgSpan.innerText = "✓";
    logicEngine.Settings.ShowFPS = true;
  }
  logicEngine.Resize("");
  setTimeout(function(){hideMenus()},10);
});


let tfm_Pan2Center = document.getElementById("tfm_Pan2Center");
tfm_Pan2Center.addEventListener("click", function (evt) {
  logicEngine.Ctx.setTransform(1,0,0,1,0,0);
  logicEngine.Panning.OffsetX = 0;
  logicEngine.Panning.OffsetY = 0;
  setTimeout(function(){hideMenus()},10);
});

let tfm_ShowGrid = document.getElementById("tfm_ShowGrid");
tfm_ShowGrid.addEventListener("click", function (evt) {
  if (logicEngine.Settings.ShowGrid) {
    let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0];
    sgSpan.innerHTML = "&nbsp;";
    logicEngine.Settings.ShowGrid = false;
  } else {
    let sgSpan = tfm_ShowGrid.getElementsByClassName("checkbox")[0];
    sgSpan.innerText = "✓";
    logicEngine.Settings.ShowGrid = true;
  }
  logicEngine.Resize("");
  setTimeout(function(){hideMenus()},10);
});

let tfm_SnapGrid = document.getElementById("tfm_SnapGrid");
tfm_SnapGrid.addEventListener("click", function (evt) {
  if (logicEngine.Settings.SnapGrid) {
    let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0];
    sgSpan.innerHTML = "&nbsp;";
    logicEngine.Settings.SnapGrid = false;
  } else {
    let sgSpan = tfm_SnapGrid.getElementsByClassName("checkbox")[0];
    sgSpan.innerText = "✓";
    logicEngine.Settings.SnapGrid = true;
  }
  logicEngine.Resize("");
  setTimeout(function(){hideMenus()},10);
});

let in_GridSize = document.getElementById("in_GridSize");
in_GridSize.addEventListener("change", function (evt) {
  logicEngine.Settings.GridSize = parseInt(in_GridSize.value);
  logicEngine.Resize("");
  //setTimeout(function(){hideMenus()},10);
});


function showRCM(evt) {
  evt.preventDefault();
  let rcm = document.getElementById("RightClickMenu");
  rcm.style.left = (evt.clientX-40) + "px";
  rcm.style.top = (evt.clientY-25) + "px";
  rcm.style.display = "block";

}

let leftmenu = document.getElementById("left-menu");
let propwin = document.getElementById("PropertiesBox");
lCanvasElement.addEventListener( "contextmenu", function(evt) {showRCM(evt)});
leftmenu.addEventListener( "contextmenu", function(evt) {showRCM(evt)});
propwin.addEventListener( "contextmenu", function(evt) {showRCM(evt)});

let topbar = document.getElementById("top-bar");
topbar.addEventListener( "contextmenu", function(evt) {
  evt.preventDefault();
});

CheckForWelcomeCookie();