Adding NAND,NOT and XNOR gates

app/css/toolbar.css

@@ -2,8 +2,8 @@
     position: fixed;
     left: 50%;
     bottom: 0;
-    margin-left: -175px;
-    width: 350px;
+    margin-left: -250px;
+    width: 500px;
     height: 50px;
     background: #111;
     color: #555;
@@ -156,4 +156,4 @@
 
 #toolbar #list li:hover, #toolbar #list li:active {
     background: #ddd;
-}
+}

app/index.html

@@ -228,8 +228,11 @@ <h1>Tutorial</h1>
             <div class="slot" tooltip="Input and output ports">I/O</div>
             <div class="slot" tooltip="NOT gate" onmousedown="event.which == 3 ? dialog.truthTable(NOT) : select(NOT)">!</div>
             <div class="slot" tooltip="AND gate" onmousedown="event.which == 3 ? dialog.truthTable(AND) : select(AND)">&</div>
+            <div class="slot" tooltip="NAND gate" onmousedown="event.which == 3 ? dialog.truthTable(NAND) : select(NAND)">!&</div>
             <div class="slot" tooltip="OR gate" onmousedown="event.which == 3 ? dialog.truthTable(OR) : select(OR)">|</div>
+            <div class="slot" tooltip="NOR gate" onmousedown="event.which == 3 ? dialog.truthTable(NOR) : select(NOR)">!|</div>
             <div class="slot" tooltip="XOR gate" onmousedown="event.which == 3 ? dialog.truthTable(XOR) : select(XOR)">^</div>
+            <div class="slot" tooltip="XNOR gate" onmousedown="event.which == 3 ? dialog.truthTable(XNOR) : select(XNOR)">!^</div>
             <div class="slot" tooltip="Custom component" onmousedown="select(Custom)"><i class="material-icons">memory</i></div>
             <div class="slot" tooltip="Saved components" onmousedown="dialog.savedCustomComponents()"><i class="material-icons">list</i></div>
 

app/js/components.js

@@ -1138,7 +1138,7 @@ function findComponentsInSelection(
     for(let i = 0; i < components.length; ++i) {
         const component = components[i];
          if(x < component.pos.x + (component.width || 0) - .5 &&
-           x2 > component.pos.x - .5 && 
+           x2 > component.pos.x - .5 &&
            y2 > component.pos.y - (component.height || 0) + .5 &&
            y < component.pos.y +.5) {
              result.push(component);
@@ -1985,6 +1985,21 @@ class AND extends Component {
     }
 }
 
+class NAND extends Component {
+    constructor(name, pos) {
+        super (name, pos, 2, 2, {type: "char", text: "!&"});
+        this.addInputPort({side: 3, pos: 1});
+        this.addInputPort({side: 3, pos: 0});
+        this.addOutputPort({side: 1, pos: 0});
+        this.function = () => {
+            if (this.input[0].value & this.input[1].value == 1)
+                this.output[0].value = 0;
+            else
+                this.output[0].value = 1;
+        }
+    }
+}
+
 class OR extends Component {
     constructor(name,pos) {
         super(name,pos,2,2,{ type: "char", text: "|" });
@@ -1997,6 +2012,21 @@ class OR extends Component {
     }
 }
 
+class NOR extends Component {
+    constructor(name,pos) {
+        super(name,pos,2,2,{ type: "char", text: "!|" });
+        this.addInputPort({ side: 3, pos: 1 });
+        this.addInputPort({ side: 3, pos: 0 });
+        this.addOutputPort({ side: 1, pos: 0 });
+        this.function = function() {
+            if (this.input[0].value | this.input[1].value)
+                this.output[0].value = 0;
+            else
+                this.output[0].value = 1;
+        }
+    }
+}
+
 class XOR extends Component {
     constructor(name,pos) {
         super(name,pos,2,2,{ type: "char", text: "^" });
@@ -2009,6 +2039,21 @@ class XOR extends Component {
     }
 }
 
+class XNOR extends Component {
+    constructor(name,pos) {
+        super(name,pos,2,2,{ type: "char", text: "!^" });
+        this.addInputPort({ side: 3, pos: 1 });
+        this.addInputPort({ side: 3, pos: 0 });
+        this.addOutputPort({ side: 1, pos: 0 });
+        this.function = function() {
+            if (this.input[0].value ^ this.input[1].value)
+                this.output[0].value = 0;
+            else
+                this.output[0].value = 1;
+        }
+    }
+}
+
 class Button extends Component {
     constructor(name,pos) {
         super(name,pos,2,1,{ type: "icon", text: "radio_button_checked" });

app/js/localStorage2.js

@@ -94,7 +94,7 @@ function getLocalStorage() {
 }
 
 const constructors = {
-    Input,Output,NOT,AND,OR,XOR,
+    Input,Output,NOT,AND,NAND,OR,NOT,XOR,XNOR,
     Button,Constant,Delay,Clock,Debug,
     Beep,Counter,LED,Display,
     Custom, TimerStart, TimerEnd,