Add flip flop

app/index.html

@@ -248,6 +248,7 @@ <h1>Tutorial</h1>
                 <li onclick="select(TimerStart)">TimerStart</li>
                 <li onclick="select(TimerEnd)">TimerEnd</li>
                 <li onclick="select(ROM)">ROM</li>
+                <li onclick="select(FlipFlop)">Flip Flop</li>
             </ul>
         </div>
         <div id="toolbartip"></div>

app/js/components.js

@@ -2377,6 +2377,46 @@ class Counter extends Component {
     }
 }
 
+class FlipFlop extends Component {
+    constructor(name,pos, properties) {
+        super(name,pos,2,1,{ type: "value" });
+        this.addInputPort({ side: 3, pos: 0 });
+        this.addOutputPort({ side: 1, pos: 0 });
+        this.value = this.properties.data || 0;
+        this.ready_to_toggle = this.properties.ready || 1;
+    }
+
+    onmousedown(sendToSocket = true) {
+        this.value = 1 - this.value;
+        this.ready_to_toggle = this.input[0].value == 0;
+        this.properties.data = this.value;
+        this.properties.ready = this.ready_to_toggle;
+        this.output[0].value = this.value;
+        this.update(true);
+
+        if(socket && sendToSocket) {
+            socket.send(JSON.stringify({
+                type: "mousedown",
+                data: this.id
+            }));
+        }
+    }
+
+    function() {
+        if(this.ready_to_toggle && this.input[0].value == 1) {
+            this.ready_to_toggle = 0;
+            this.value = 1 - this.value;
+            this.output[0].value = this.value;
+            this.properties.data = this.value;
+        }
+
+        if (this.input[0].value == 0) {
+            this.ready_to_toggle = 1;
+        }
+        this.properties.ready = this.ready_to_toggle;
+    }
+}
+
 class LED extends Component {
     constructor(name,pos,color = [100,0,0]) {
         super(name,pos,1,1,{ type: "value" });

app/js/localStorage2.js

@@ -98,7 +98,7 @@ const constructors = {
     Button,Constant,Delay,Clock,Debug,
     Beep,Counter,LED,Display,
     Custom, TimerStart, TimerEnd,
-    ROM
+    ROM, FlipFlop
 };
 
 /*
@@ -248,7 +248,7 @@ function parse(data) {
             }
         }
 
-        const component = new constructors[constructor]();
+        const component = new constructors[constructor](data.name, data.pos, data.properties);
 
         if(constructor == "Custom") {
             const parsed = parse(JSON.stringify(data.componentData));
@@ -260,17 +260,21 @@ function parse(data) {
 
         const input = data.input;
         for(let i = 0; i < component.input.length; ++i) {
-            component.input[i].name = input[i].name;
-            component.input[i].value = input[i].value;
-            component.input[i].pos = input[i].pos;
+            if (input[i]) {
+                component.input[i].name = input[i].name;
+                component.input[i].value = input[i].value;
+                component.input[i].pos = input[i].pos;
+	    }
         }
         delete data.input;
 
         const output = data.output;
         for(let i = 0; i < component.output.length; ++i) {
-            component.output[i].name = output[i].name;
-            component.output[i].value = output[i].value;
-            component.output[i].pos = output[i].pos;
+            if (output[i]) {
+                component.output[i].name = output[i].name;
+                component.output[i].value = output[i].value;
+                component.output[i].pos = output[i].pos;
+	    }
         }
         delete data.output;