diff --git a/index.html b/index.html
new file mode 100644
index 0000000..33e2ae8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,83 @@
+<html>
+ <head>.
+ <title>
+ Logic simulator
+ </title>
+ <!-- Scripts -->
+ <!-- jquery -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+ <!-- Latest compiled and minified CSS -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+ <!-- Optional theme --
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+ !--Latest compiled and minified JavaScript -->
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+ </head>
+ <body>
+ <svg height = "100%" width = "100%" id = "svg1">
+ </svg>
+
+ <!--And-->
+ <script src="scripts/and_gate.js"></script>
+ <!--Pin-->
+ <script src="scripts/pins.js"></script>
+ <!--Edges-->
+ <script src="scripts/edges.js"></script>
+ <!--Button-->
+ <script src="scripts/but.js"></script>
+ <!--light bulb-->
+ <script src="scripts/light.js"></script>
+ <!--or-->
+ <script src="scripts/or.js"></script>
+ <!--or-->
+ <script src="scripts/text.js"></script>
+ <!--not-->
+ <script src="scripts/not.js"></script>
+ <!--buffer-->
+ <script src="scripts/buffer.js"></script>
+ <!--Main-->
+ <script src="scripts/main.js"></script>
+
+
+ <div class = "modal fade" id = "addel">
+ <div class = "modal-dialog">
+ <div class = "modal-content">
+ <div class = "modal-header">
+ <p>
+ Add a piece!
+ </p>
+ </div>
+ <div class = "modal-body">
+ <select id="sel">
+ <option value = "not">Not gate</option>
+ <option value = "light">Light bulb</option>
+ <option value = "but">Button</option>
+ <option value = "buffer">Buffer</option>
+ <option value = "or">Or gate</option>
+ <option value = "and">And gate</option>
+ </select>
+ </div>
+ <div class = "modal-footer">
+ <button type="button" onclick = '$("#addel").modal("hide"); addel();' class="btn btn-primmary" id = "done">
+ Add!!!
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <link href="st.css" rel="Stylesheet" type="text/css" />
+ </body>
+</html>
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/scripts/and_gate.js b/scripts/and_gate.js
new file mode 100644
index 0000000..a3e9c1e
--- /dev/null
+++ b/scripts/and_gate.js
@@ -0,0 +1,103 @@
+console.log("and");
+function and(id){
+ this.id = id;
+ this.rep = add(80,80,"blue","black",this.id,false);
+ this.pin1 = new pin(0);
+ this.pin2 = new pin(0);
+ this.o = new pin(1);
+ this.o.nei = this;
+ this.activation = function(){
+ if (this.pin1.val && this.pin2.val){
+ return true;
+ }
+ return false;
+ }
+
+ this.x = function(){
+ let name = "#" + this.id;
+ return parseFloat($(name).attr("x"));
+ }
+
+ this.y = function(){
+ let name = "#" + this.id;
+ //console.log("y"+parseFloat($(name).attr("y")));
+ return parseFloat($(name).attr("y"));
+ }
+
+ //design
+ var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ $(g).attr({
+ width: "100%",
+ height: "100%"
+ });
+ var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
+ x: "50",
+ y: "50",
+ id: (id+"-skin"),
+ width:"80",
+ height:"80"
+ });
+ var img = $(document.createElement('img')).attr({
+ height:"72",
+ width:"72",
+ src:"textures/gates/and_gate.jpg"
+ });
+ var iDiv = document.createElement("div");
+ $(iDiv).append(img);
+ this.skin = skin;
+ this.img = img;
+ $(skin).append(iDiv);
+ //noname(this);
+ $(g).append(skin);
+ var elem = document.getElementById("svg1");
+ elem.appendChild(g);
+
+ //updating
+ this.update = function(){
+ //the main object and his pins
+ let x = this.x();
+ let y = this.y();
+ this.pin1.set(x-20,y);
+ this.pin2.set(x-20,y+60);
+ this.o.set(x+80,y+30);
+
+ //and the skin
+ var name = "#"+this.id+"-skin";
+ var skin = $(name);
+ skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
+ skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
+ }
+ pieces[pieces.length] = this;
+
+
+ addclk(this);
+}
+
+function addclk(ob){
+ var rep = ob.rep;
+ $((ob.img)).mousedown(function(e){
+ var svg = document.getElementById("svg1");
+ $(svg).append(ob.rep);
+ $(svg).append($(ob.pin1.rep));
+ $(svg).append($(ob.pin2.rep));
+ $(svg).append($(ob.o.rep));
+ $(svg).append($(ob.skin));
+ selected = ob.id;
+ });
+ $((ob.img)).mouseup(function(e){
+ selected = "yay";
+ });
+}
+/*
+function noname(ob){
+ $((ob.img)).mousedown(function(e){
+ selected = ob.id;
+ console.log("Clicked!!!");
+ });
+ $((ob.img)).mouseup(function(e){
+ selected = "yay";
+ });
+}
+*/
+
+
diff --git a/scripts/buffer.js b/scripts/buffer.js
new file mode 100644
index 0000000..d9b600b
--- /dev/null
+++ b/scripts/buffer.js
@@ -0,0 +1,72 @@
+function buffer(id){
+ this.id = id;
+ this.name = "#" + this.id;
+ this.rep = add(80,80,"green","black",this.id,true);
+ this.pin1 = new pin(0);
+ this.o = new pin(1);
+ this.o.nei = this;
+ //this.text = new text(this,"Or-gate");
+ this.activation = function(){
+ if (this.pin1.val){
+ return true;
+ }
+ return false;
+ }
+
+ this.x = function(){
+ let name = "#" + this.id;
+ return parseFloat($(name).attr("x"));
+ }
+
+ this.y = function(){
+ let name = "#" + this.id;
+ //console.log("y"+parseFloat($(name).attr("y")));
+ return parseFloat($(name).attr("y"));
+ }
+
+ //design
+ var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ $(g).attr({
+ width: "100%",
+ height: "100%"
+ });
+ var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
+ x: "50",
+ y: "50",
+ id: (id+"-skin"),
+ width:"80",
+ height:"80"
+ });
+ var img = $(document.createElement('img')).attr({
+ height:"80",
+ width:"80",
+ src:"textures/gates/buffer_gate.jpg"
+ });
+ var iDiv = document.createElement("div");
+ $(iDiv).append(img);
+ this.skin = skin;
+ this.img = img;
+ $(skin).append(iDiv);
+ //noname(this);
+ $(g).append(skin);
+ var elem = document.getElementById("svg1");
+ elem.appendChild(g);
+
+ //updating
+ this.update = function(){
+ //the main object and his pins
+ let x = this.x();
+ let y = this.y();
+ this.pin1.set(x-20,y+30);
+ this.o.set(x+80,y+30);
+
+ //and the skin
+ var name = "#"+this.id+"-skin";
+ var skin = $(name);
+ skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
+ skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
+ }
+ pieces[pieces.length] = this;
+
+ addclk11(this);
+}
\ No newline at end of file
diff --git a/scripts/but.js b/scripts/but.js
new file mode 100644
index 0000000..cf91d3c
--- /dev/null
+++ b/scripts/but.js
@@ -0,0 +1,79 @@
+console.log("nut");
+function but(id){
+ this.wait = true;
+ this.id = id;
+ this.rep = add(80,80,"orange","black",this.id,true);
+ this.o = new pin(1);
+ this.val = false;
+ addevt(this);
+ $((this.rep)).attr("stroke-width",4);
+ $((this.rep)).attr("stroke","black");
+ this.o.nei = this;
+ this.activation = function(){
+ return this.val;
+ }
+
+ this.x = function(){
+ let name = "#" + this.id;
+ return parseFloat($(name).attr("x"));
+ }
+
+ this.y = function(){
+ let name = "#" + this.id;
+ //console.log("y"+parseFloat($(name).attr("y")));
+ return parseFloat($(name).attr("y"));
+ }
+
+ //design
+ this.init = function(){
+ return 0;
+ }
+
+ this.update = function(){
+ let x = this.x();
+ let y = this.y();
+ this.o.set(x+80,y+30);
+ }
+ pieces[pieces.length] = this;
+}
+function addevt(ob){
+ /*
+ $((ob.rep)).click(function(){
+ ob.val = (ob.val+1)%2;
+ if (ob.val){
+ $((ob.rep)).attr("fill","red");
+ }
+ else{
+ $((ob.rep)).attr("fill","orange");
+ }
+ });
+ */
+
+ $((ob.rep)).mousedown(function(e){
+ var svg = document.getElementById("svg1");
+ $(svg).append(ob.rep);
+ $(svg).append($(ob.o.rep));
+ selected = ob.id;
+
+ if (ob.wait){
+ ob.val = (ob.val+1)%2;
+ if (ob.val){
+ $((ob.rep)).attr("fill","red");
+ }
+ else{
+ $((ob.rep)).attr("fill","orange");
+ }
+ ob.wait = false;
+ }
+ });
+ $((ob.rep)).mouseup(function(e){
+ selected = "yay";
+ ob.wait = true;
+ });
+}
+
+
+
+
+
+
diff --git a/scripts/edges.js b/scripts/edges.js
new file mode 100644
index 0000000..16f8f37
--- /dev/null
+++ b/scripts/edges.js
@@ -0,0 +1,94 @@
+var l_count = 0;
+var lines = [];
+console.log("started2");
+function edge(start,end){
+ this.id = l_count.toString()+"line";
+ l_count++;
+ this.start = start;
+ this.end = end;
+ console.log(start+end);
+
+ console.log(this.end);
+ console.log(this.start);
+
+ lines[lines.length] = this;
+
+ var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ $(g).attr({
+ width: "100%",
+ height: "100%"
+ });
+ var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'line')).attr({
+ x1: "50",
+ y1:"50",
+ x2:"55",
+ y2:"55",
+ id: this.id,
+ fill:"yellow",
+ stroke: "black"
+ });
+ $(el).attr("stroke-width","2");
+ $(g).append(el);
+ var elem = document.getElementById("svg1");
+ elem.appendChild(g);
+
+ //console.log("succes"+lines);
+
+ this.rep = el;
+ this.name = "#"+this.id;
+
+ this.update = function(){
+ let adr = this.start.name;
+ let temp = $(adr).attr("x");
+ let n = this.name;
+ //console.log("updating"+adr+temp+n);
+ temp = (parseFloat(temp)).toString();
+ $(n).attr("x1",temp);
+ temp = $(adr).attr("y");
+ temp = (parseFloat(temp)+10).toString();
+ $(n).attr("y1",temp);
+ adr = this.end.name;
+ temp = $(adr).attr("x");
+ temp = (parseFloat(temp)+20).toString();
+ $(n).attr("x2",temp);
+ temp = $(adr).attr("y");
+ temp = (parseFloat(temp)+10).toString();
+ $(n).attr("y2",temp);
+
+ //and the color based on the state
+ if (this.start.val){
+ $((this.rep)).attr("stroke","yellow");
+ }
+ else{
+ $((this.rep)).attr("stroke","black");
+ }
+ }
+
+
+ rem_edge(this);
+}
+
+function rem_edge(ob){
+ $((ob.rep)).click(function(e){
+ //removing the edge from the array
+ for (var i = 0; i < lines.length; i++) {
+ if (lines[i] == (ob.id)) {
+ lines.splice(i, 1);
+ }
+ }
+
+ //removing the visual
+ $((ob.rep)).remove();
+
+ //fixing the actual start and end pins
+ ob.start.nei = "yay";
+ ob.start.val = false;
+ ob.start.state = true;
+ ob.end.val = false;
+ ob.end.state = true;
+ });
+}
+
+
+
+
diff --git a/scripts/light.js b/scripts/light.js
new file mode 100644
index 0000000..62ec951
--- /dev/null
+++ b/scripts/light.js
@@ -0,0 +1,83 @@
+console.log("bulb");
+function light(id){
+ this.id = id;
+ var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ $(g).attr({
+ width: "100%",
+ height: "100%"
+ });
+ var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle')).attr({
+ cx: "50",
+ cy:"50",
+ r: "40",
+ id: this.id,
+ fill:"white",
+ stroke: "black"
+ });
+ $(el).attr("stroke-width","2");
+ $(el).attr("class","light");
+ $(g).append(el);
+ //$(el).attr("onmousedown","selected='"+this.id+"';");
+ $(el).attr("onmouseup","selected='yay';");
+ var elem = document.getElementById("svg1");
+ elem.appendChild(g);
+ this.rep = el;
+
+ this.i = new pin(0);
+ this.val = false;
+ //addevt(this);
+ $((this.rep)).attr("stroke-width",4);
+
+ this.activation = function(){
+ return this.i.val;
+ }
+
+ this.x = function(){
+ let name = "#" + this.id;
+ return parseFloat($(name).attr("cx"));
+ }
+
+ this.y = function(){
+ let name = "#" + this.id;
+ //console.log("y"+parseFloat($(name).attr("y")));
+ return parseFloat($(name).attr("cy"));
+ }
+
+ //design
+ this.init = function(){
+ return 0;
+ }
+
+ this.update = function(){
+ if (this.i.val != "yay"){
+ if ((this.activation())){
+ $((this.rep)).attr("fill","yellow");
+ }
+ else{
+ $((this.rep)).attr("fill","white");
+ }
+ }
+ //console.log($((this.rep)).attr("fill"));
+ let x = this.x();
+ let y = this.y();
+ this.i.set(x-60,y-10);
+ }
+ pieces[pieces.length] = this;
+
+ addclk_light(this);
+}
+
+function addclk_light(ob){
+ var rep = ob.rep;
+ $(ob.rep).mousedown(function(e){
+ var svg = document.getElementById("svg1");
+ $(svg).append(ob.rep);
+ $(svg).append($(ob.i.rep));
+ selected=ob.id;
+ });
+}
+
+
+
+
+
diff --git a/scripts/main.js b/scripts/main.js
new file mode 100644
index 0000000..64e29bd
--- /dev/null
+++ b/scripts/main.js
@@ -0,0 +1,187 @@
+//the absolute start, adding the buttons
+//adding the button for the modal
+var order = 0;
+var selecte="yay"
+var pieces = [];
+var modal = add(40,40,"blue","black","butt",false);
+$(modal).mousedown(function(e){
+ $("#addel").modal("show");
+ selected = "butt";
+});
+$(modal).mouseup(function(e){
+ selected = "yay";
+});
+$(modal).attr("y","500");
+$(modal).attr("x","500");
+
+//var desc = new text(modal,"+")
+
+function getname(){
+ return ((order++).toString()+"piece")
+}
+
+function addel(){
+ var added = eval("new "+$("#sel option:selected").attr("value")+"(getname())");
+}
+
+//variables
+$("img,rect,circle,svg,p").mousedown(function(e){
+ e.preventDefault();
+});
+$("*").mouseup(function(e){
+ e.preventDefault();
+});
+$("img").click(function(e){
+ e.preventDefault();
+});
+var selected = "yay";
+var firstx = 0;
+var firsty = 0;
+var fx = 0;
+var fy = 0;
+let snap = false;
+console.log("started");
+//events
+
+$("body").mousemove(function(e){
+ drag(e,selected);
+});
+$("body").mouseup(function(e){
+ selected = "yay";
+});
+$("body").mousedown(function(e){
+ if (selected!="yay"){
+ firstx = e.pageX;
+ firsty = e.pageY;
+ name = "#"+selected;
+ if ($(name).attr("class")=="light"){
+ fx = parseFloat($(name).attr("cx"));
+ fy = parseFloat($(name).attr("cy"));
+ }
+ else{
+ fx = parseFloat($(name).attr("x"));
+ fy = parseFloat($(name).attr("y"));
+ }
+ }
+});
+//functions
+function drag(e,selected){
+
+ //the name
+ let name = "#" + selected;
+
+ //the positions
+ let x = e.pageX;
+ let y = e.pageY;
+
+ //updating positions
+ set_position(name,x,y);
+}
+
+function set_position(name,x,y){
+ var obj,objx,objy;
+ obj = "#"+selected;
+ if ($(name).attr("class")!="light"){
+ //getting the variables
+ obj = "#"+selected;
+ objx = parseFloat($(obj).attr("x"));
+ objy = parseFloat($(obj).attr("y"));
+
+ x = parseFloat(x);
+ y = parseFloat(y);
+
+ xdif = fx - firstx;
+ ydif = fy - firsty;
+
+ x += xdif;
+ y += ydif;
+
+ //x -= parseFloat($(obj).attr("width"));
+ //y -= parseFloat($(obj).attr("height"));
+ if (snap){
+ x = Math.floor(x/80)*80;
+ y = Math.floor(y/80)*80;
+ }
+ //console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
+ //setting the new positions
+ $(obj).attr("x",(x).toString());
+ $(obj).attr("y",(y).toString());
+ }
+ else{
+ //for circles
+ //getting the variables
+ obj = "#"+selected;
+ objx = parseFloat($(obj).attr("cx"));
+ objy = parseFloat($(obj).attr("cy"));
+
+ x = parseFloat(x);
+ y = parseFloat(y);
+
+ xdif = fx - firstx;
+ ydif = fy - firsty;
+
+ x += xdif;
+ y += ydif;
+
+ //x -= parseFloat($(obj).attr("width"));
+ //y -= parseFloat($(obj).attr("height"));
+ if (snap){
+ x = Math.floor(x/80)*80+40;
+ y = Math.floor(y/80)*80+40;
+ }
+ //console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
+ //setting the new positions
+ $(obj).attr("cx",(x).toString());
+ $(obj).attr("cy",(y).toString());
+ }
+}
+
+function add(h,w,color,stroke,id,on){
+ var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ $(g).attr({
+ width: "100%",
+ height: "100%"
+ });
+ var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'rect')).attr({
+ x: "50",
+ y:"50",
+ id: id,
+ fill:color,
+ height: h.toString()+"px",
+ width: w.toString()+"px",
+ stroke: stroke,
+ rx:"20",
+ ry:"20"
+ });
+ if (on){
+ $(el).attr("onmousedown","selected='"+id+"';");
+ $(el).attr("onmouseup","selected='yay';");
+ }
+ $(el).attr("stroke-width","4");
+ $(g).append(el);
+ var elem = document.getElementById("svg1");
+ elem.appendChild(g);
+ return el;
+}
+
+console.log(pieces);
+setInterval(function(){
+ for (var i = 0;i < pieces.length;i++){
+ pieces[i].update();
+ }
+ for (var i = 0;i < lines.length;i++){
+ lines[i].update();
+ }
+ for (var i = 0;i < pins.length;i++){
+ pins[i].update();
+ }
+},0.001);
+
+
+
+
+
+
+
+
+//objects are made in other files
\ No newline at end of file
diff --git a/scripts/not.js b/scripts/not.js
new file mode 100644
index 0000000..2ba4a78
--- /dev/null
+++ b/scripts/not.js
@@ -0,0 +1,93 @@
+function not(id){
+ this.id = id;
+ this.name = "#" + this.id;
+ this.rep = add(80,80,"green","black",this.id,true);
+ this.pin1 = new pin(0);
+ this.o = new pin(1);
+ this.o.nei = this;
+ //this.text = new text(this,"Or-gate");
+ this.activation = function(){
+ if (!this.pin1.val){
+ return true;
+ }
+ return false;
+ }
+
+ this.x = function(){
+ let name = "#" + this.id;
+ return parseFloat($(name).attr("x"));
+ }
+
+ this.y = function(){
+ let name = "#" + this.id;
+ //console.log("y"+parseFloat($(name).attr("y")));
+ return parseFloat($(name).attr("y"));
+ }
+
+ //design
+ var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ $(g).attr({
+ width: "100%",
+ height: "100%"
+ });
+ var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
+ x: "50",
+ y: "50",
+ id: (id+"-skin"),
+ width:"80",
+ height:"80"
+ });
+ var img = $(document.createElement('img')).attr({
+ height:"80",
+ width:"80",
+ src:"textures/gates/not_gate.jpg"
+ });
+ var iDiv = document.createElement("div");
+ $(iDiv).append(img);
+ this.skin = skin;
+ this.img = img;
+ $(skin).append(iDiv);
+ //noname(this);
+ $(g).append(skin);
+ var elem = document.getElementById("svg1");
+ elem.appendChild(g);
+
+ //updating
+ this.update = function(){
+ //the main object and his pins
+ let x = this.x();
+ let y = this.y();
+ this.pin1.set(x-20,y+30);
+ this.o.set(x+80,y+30);
+
+ //and the skin
+ var name = "#"+this.id+"-skin";
+ var skin = $(name);
+ skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
+ skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
+ }
+ pieces[pieces.length] = this;
+
+ addclk11(this);
+}
+
+function addclk11(ob){
+ var rep = ob.rep;
+ $((ob.img)).mousedown(function(e){
+ var svg = document.getElementById("svg1");
+ $(svg).append(ob.rep);
+ $(svg).append($(ob.pin1.rep));
+ $(svg).append($(ob.o.rep));
+ $(svg).append($(ob.skin));
+ selected = ob.id;
+ });
+ $((ob.img)).mouseup(function(e){
+ selected = "yay";
+ });
+}
+
+
+
+
+
+
diff --git a/scripts/or.js b/scripts/or.js
new file mode 100644
index 0000000..07009b5
--- /dev/null
+++ b/scripts/or.js
@@ -0,0 +1,86 @@
+function or(id){
+ this.id = id;
+ this.name = "#" + this.id;
+ this.rep = add(80,80,"green","black",this.id,true);
+ this.pin1 = new pin(0);
+ this.pin2 = new pin(0);
+ this.o = new pin(1);
+ this.o.nei = this;
+ //this.text = new text(this,"Or-gate");
+ this.activation = function(){
+ if (this.pin1.val || this.pin2.val){
+ return true;
+ }
+ return false;
+ }
+
+ this.x = function(){
+ let name = "#" + this.id;
+ return parseFloat($(name).attr("x"));
+ }
+
+ this.y = function(){
+ let name = "#" + this.id;
+ //console.log("y"+parseFloat($(name).attr("y")));
+ return parseFloat($(name).attr("y"));
+ }
+
+ //design
+ var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ $(g).attr({
+ width: "100%",
+ height: "100%"
+ });
+ var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
+ x: "50",
+ y: "50",
+ id: (id+"-skin"),
+ width:"80",
+ height:"80"
+ });
+ var img = $(document.createElement('img')).attr({
+ height:"80",
+ width:"80",
+ src:"textures/gates/or_gate.jpg"
+ });
+ var iDiv = document.createElement("div");
+ $(iDiv).append(img);
+ this.skin = skin;
+ this.img = img;
+ $(skin).append(iDiv);
+ //noname(this);
+ $(g).append(skin);
+ var elem = document.getElementById("svg1");
+ elem.appendChild(g);
+
+ //updating
+ this.update = function(){
+ //the main object and his pins
+ let x = this.x();
+ let y = this.y();
+ this.pin1.set(x-20,y);
+ this.pin2.set(x-20,y+60);
+ this.o.set(x+80,y+30);
+
+ //and the skin
+ var name = "#"+this.id+"-skin";
+ var skin = $(name);
+ skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
+ skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
+ }
+ pieces[pieces.length] = this;
+
+ addclk(this);
+}
+/*
+function addclk(ob){
+ var rep = ob.rep;
+ $(ob.rep).mousedown(function(e){
+ var svg = document.getElementById("svg1");
+ $(svg).append(ob.rep);
+ $(svg).append($(ob.pin1.rep));
+ $(svg).append($(ob.pin2.rep));
+ $(svg).append($(ob.o.rep));
+ });
+}
+*/
diff --git a/scripts/pins.js b/scripts/pins.js
new file mode 100644
index 0000000..552f599
--- /dev/null
+++ b/scripts/pins.js
@@ -0,0 +1,70 @@
+var count = 0;
+var pins = [];
+var sels = "yay";
+var sele = "yay";
+var num;
+function pin(type){
+ this.state = true;
+ this.nei = "yay";
+ this.val = false;
+ if (type == 0){
+ this.type = true;
+ color = "black";
+ }
+ else{
+ this.type = false;
+ color = "red";
+ }
+ this.update = function(){
+ if (this.nei != "yay"){
+ if (!(this.type)){
+ this.val = this.nei.activation();
+ }
+ else{
+ this.val = this.nei.val;
+ }
+ }
+ if (this.val){
+ $((this.rep)).attr("fill","red");
+ }
+ else{
+ $((this.rep)).attr("fill","yellow");
+ }
+ }
+ this.id = count.toString();
+ this.name = "#"+this.id;
+ this.rep = add(20,20,"yellow","black",this.id,false);
+ clicked(this);
+ count++;
+ this.name = "#"+this.id;
+ this.set = function(x,y){
+ $(this.name).attr("x",x.toString());
+ $(this.name).attr("y",y.toString());
+ }
+ pins[pins.length] = this;
+ this.num = pins.length-1;
+}
+
+function clicked(ob){
+ $(ob.rep).click(function(e){
+ if (ob.type == true){
+ sels = ob;
+ }
+ else{
+ sele = ob;
+ }
+ console.log("click"+sels+sele+ob.type);
+ if ((sels!="yay")&&(sele!="yay")){
+ console.log("step 2");
+ if ((sels.state)){
+ sels.nei = sele;
+ sels.state = false;
+ sele.state = false;
+ a = new edge(sels,sele);
+ sels = "yay";
+ sele = "yay";
+ console.log("end");
+ }
+ }
+ });
+}
\ No newline at end of file
diff --git a/scripts/text.js b/scripts/text.js
new file mode 100644
index 0000000..d266c7a
--- /dev/null
+++ b/scripts/text.js
@@ -0,0 +1,41 @@
+var t_count = 0;
+function text(parent,value){
+ //variables
+ this.parent = parent;
+ this.val = value;
+ this.id = t_count.toString() + "text";
+ t_count++;
+ this.name = "#"+this.id;
+
+ //adding the text to the SVG
+ var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ $(g).attr({
+ width: "100%",
+ height: "100%"
+ });
+ var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'text')).attr({
+ x: "50",
+ y:"50",
+ id: this.id,
+ fill:"white",
+ stroke: "black"
+ });
+ $(el).text(value);
+ $(el).attr("class","heavy");
+ $(g).append(el);
+ var elem = document.getElementById("svg1");
+ elem.appendChild(g);
+ this.rep = el;
+ $((this.rep)).click(function(e){
+ e.preventDefault();
+ });
+
+ //updating
+ this.update = function(){
+ $((this.name)).attr("x",(parseFloat($((this.parent)).attr("x"))+15).toString());
+ $((this.name)).attr("y",(parseFloat($((this.parent)).attr("y"))+25).toString());
+ }
+
+ //beeing sure it would be updated
+ pieces[pieces.length] = this;
+}
\ No newline at end of file
diff --git a/st.css b/st.css
new file mode 100644
index 0000000..dfc12c4
--- /dev/null
+++ b/st.css
@@ -0,0 +1,22 @@
+body {
+ background-color:rgba(0,0,0,0.7);
+ /*
+ background-image: url("bg.jpg");
+ background-repeat: no-repeat;
+ background-size: cover;
+ */
+ margin:0;
+}
+
+.heavy { font: bold 20px sans-serif; }
+
+img {
+ border-radius: 17px;
+ height: 74;
+ width: 74;
+}
+
+#butt {
+ rx: 10;
+ ry: 10;
+}
\ No newline at end of file
diff --git a/textures/gates/Thumbs.db b/textures/gates/Thumbs.db
new file mode 100644
index 0000000..04791af
Binary files /dev/null and b/textures/gates/Thumbs.db differ
diff --git a/textures/gates/and_gate.jpg b/textures/gates/and_gate.jpg
new file mode 100644
index 0000000..c9ee14f
Binary files /dev/null and b/textures/gates/and_gate.jpg differ
diff --git a/textures/gates/buffer_gate.jpg b/textures/gates/buffer_gate.jpg
new file mode 100644
index 0000000..3c8f45c
Binary files /dev/null and b/textures/gates/buffer_gate.jpg differ
diff --git a/textures/gates/not_gate.jpg b/textures/gates/not_gate.jpg
new file mode 100644
index 0000000..c12ab4a
Binary files /dev/null and b/textures/gates/not_gate.jpg differ
diff --git a/textures/gates/or_gate.jpg b/textures/gates/or_gate.jpg
new file mode 100644
index 0000000..0f78a16
Binary files /dev/null and b/textures/gates/or_gate.jpg differ