diff --git a/README.md b/README.md index 6874a4d..cb9293d 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,10 @@ To be decided, but at this moment this code is open source and free to use for n ## Changelog +### 0.3.1 +* Toolbox is now dynamically created and categorized +* The delete button is gone for now (use delete key on keyboard), it will come back when toolbar is added. + ### 0.3.0 * Saving / Loading of designs * New Element: Buffer, allows for construction of circuits that would otherwise be recursive diff --git a/css/main.css b/css/main.css index 14e8242..2b8bba9 100644 --- a/css/main.css +++ b/css/main.css @@ -267,22 +267,55 @@ textarea { #left-menu { width: 200px; max-width: 200px; - height: 100vh; + height: 99vh; display: inline-block; border: 1px solid black; margin: 0px; padding: 0px; } +#inner-left-menu { + width: 100%; + height: 99%; + overflow: auto; +} + #top-bar { height: 50px; - overflow: auto; + overflow: none; margin: 0px; padding: 0px; background-color: #222; font-size: 2em; } +#LeftOf-SiteTitle { + display: inline-block; + width: 200px; + height: 100%; + font-size: 0.5em; + margin: 0px; + padding: 5px; +} + +#SiteTitle { + display: inline-block; + height: 100%; + width: 50%; + margin: 0px; + padding-top: 2px; +} +.TOOLBOX_CATEGORY_HEADER { + margin: 0px; + padding: 0px; + text-align: center; + background-color: #222; +} +.TOOLBOX_CATEGORY_HEADER h2 { + margin: 0px; + padding: 5px; +} + #darkout-overlay { position: absolute; left: 0px; diff --git a/index.html b/index.html index 5416f28..5729f37 100644 --- a/index.html +++ b/index.html @@ -31,27 +31,18 @@
- MatCat BrowserLogic +
+     + + +
+
+ MatCat BrowserLogic +
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

-
- - +
+ LOADING
diff --git a/js/globalfunctions.js b/js/globalfunctions.js index 5a1d17c..4436d5f 100644 --- a/js/globalfunctions.js +++ b/js/globalfunctions.js @@ -79,6 +79,41 @@ function length2D(x1,y1,x2,y2) { return Math.sqrt(xDist*xDist + yDist * yDist); } +function BuildToolbox() { + let toolbox = document.getElementById("inner-left-menu"); + toolbox.innerHTML = ""; + + + for (let a = 0; a < elementCatalog.Categories.length; a++) { + let div_CategoryHeader = document.createElement("div"); + div_CategoryHeader.id = "TB_CATH_" + elementCatalog.Categories[a].Name; + div_CategoryHeader.className ="TOOLBOX_CATEGORY_HEADER"; + div_CategoryHeader.innerHTML = '

' + elementCatalog.Categories[a].Name + '

'; + let div_Category = document.createElement("div"); + div_Category.id = "TB_CATB_" + elementCatalog.Categories[a].Name; + div_Category.className = "TOOLBOX_CATEGORY_BODY"; + div_Category.innerHTML = ""; + for (let b = 0; b < elementCatalog.Categories[a].Elements.length; b++) { + let btn_Element = document.createElement("input"); + btn_Element.type = "button"; + btn_Element.id = "btn_" + elementCatalog.Categories[a].Elements[b].Name; + btn_Element.title = elementCatalog.Categories[a].Elements[b].Description; + btn_Element.value = elementCatalog.Categories[a].Elements[b].Icon + " " + elementCatalog.Categories[a].Elements[b].Name; + btn_Element.style.width = "100px"; + btn_Element.style.textAlign = "left"; + + btn_Element.addEventListener('click', function(evt) { + addElement(null,elementCatalog.Categories[a].Elements[b].Class,elementCatalog.Categories[a].Elements[b].Args); + }, false); + + div_Category.append(btn_Element); + // div_Category.append(document.createElement("br")); + } + toolbox.append(div_CategoryHeader); + toolbox.append(div_Category); + } +} + function getElementInfo(element) { for (let a = 0; a < ElementReferenceTable.length; a++) { if (ElementReferenceTable[a].Name == element) return ElementReferenceTable[a]; diff --git a/js/main.js b/js/main.js index e908647..f590b14 100644 --- a/js/main.js +++ b/js/main.js @@ -2,7 +2,7 @@ MatCat BrowserLogic Simulator */ -let Version = "0.3.0"; +let Version = "0.3.1"; let spanVersion = document.getElementById("version"); spanVersion.innerText = Version; // get the canvas and get the engine object going @@ -35,6 +35,7 @@ window.addEventListener('mousemove', function(evt) { // Get the engine going logicEngine.StartEngine(); +BuildToolbox(); // Setup interface buttons let btn_CloseWelcome = document.getElementById("btn_CloseWelcome"); @@ -49,75 +50,6 @@ btn_CloseWelcome.addEventListener('click', function(evt) { } }, false); -let btn_Delete = document.getElementById("btn_Delete"); -btn_Delete.addEventListener('click', function(evt) { - logicEngine.Key_Press({key: "Delete"}); -}, false); - -let btn_AddAND = document.getElementById("btn_AddAND"); -btn_AddAND.addEventListener('click', function(evt) { - addElement(null,LogicAND, [2]); -}, false); - -let btn_AddNAND = document.getElementById("btn_AddNAND"); -btn_AddNAND.addEventListener('click', function(evt) { - addElement(null,LogicNAND, [2]); -}, false); - -let btn_AddOR = document.getElementById("btn_AddOR"); -btn_AddOR.addEventListener('click', function(evt) { - addElement(null,LogicOR, [2]); -}, false); - -let btn_AddNOR = document.getElementById("btn_AddNOR"); -btn_AddNOR.addEventListener('click', function(evt) { - addElement(null,LogicNOR, [2]); -}, false); - -let btn_AddXOR = document.getElementById("btn_AddXOR"); -btn_AddXOR.addEventListener('click', function(evt) { - addElement(null,LogicXOR,[]); -}, false); - -let btn_AddXNOR = document.getElementById("btn_AddXNOR"); -btn_AddXNOR.addEventListener('click', function(evt) { - addElement(null,LogicXNOR,[]); -}, false); - -let btn_AddNOT = document.getElementById("btn_AddNOT"); -btn_AddNOT.addEventListener('click', function(evt) { - addElement(null,LogicNOT,[]); -}, false); - -let btn_AddBUFFER = document.getElementById("btn_AddBUFFER"); -btn_AddBUFFER.addEventListener('click', function(evt) { - let logicBuffer = addElement(null,LogicBuffer,[]); -}, false); - -let btn_AddSWITCH = document.getElementById("btn_AddSWITCH"); -btn_AddSWITCH.addEventListener('click', function(evt) { - addElement(null,InputSwitch,[]); -}, false); - -let btn_AddBTN = document.getElementById("btn_AddBTN"); -btn_AddBTN.addEventListener('click', function(evt) { - addElement(null,InputButton,[]); -}, false); - -let btn_AddCLK = document.getElementById("btn_AddCLK"); -btn_AddCLK.addEventListener('click', function(evt) { - let clk = addElement(null,ClockElement,[]); -}, false); - -let btn_AddPulse = document.getElementById("btn_AddPULSE"); -btn_AddPulse.addEventListener('click', function(evt) { - let pulse = addElement(null,PulseElement,[]); -}, false); - -let btn_AddDelay = document.getElementById("btn_AddDELAY"); -btn_AddDelay.addEventListener('click', function(evt) { - let delay = addElement(null,DelayElement,[]); -}, false); let btn_Save = document.getElementById("btn_Save"); btn_Save.addEventListener('click', function(evt) {