diff --git a/index.html b/index.html index 4f5fa81..9b18a10 100644 --- a/index.html +++ b/index.html @@ -1,63 +1,65 @@ - . - - Logic simulator - - - - - - - - + + + + + + - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + \ No newline at end of file diff --git a/scripts/and_gate.js b/scripts/and_gate.js index 0457d55..6229082 100644 --- a/scripts/and_gate.js +++ b/scripts/and_gate.js @@ -1,104 +1,87 @@ 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({ + +class and { + constructor(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 + let g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); + $(g).attr({ + width: "100%", + height: "100%" + }); + let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ x: "50", y: "50", - id: (id+"-skin"), - width:"80", - height:"80" + id: (id + "-skin"), + width: "80", + height: "80" }); - var img = $(document.createElement('img')).attr({ - height:"72", - width:"72", - src:"textures/gates/and_gate.jpg" + let img = $(document.createElement('img')).attr({ + height: "72", + width: "72", + src: "textures/gates/and_gate.jpg" + }); + let iDiv = document.createElement("div"); + $(iDiv).append(img); + this.skin = skin; + this.img = img; + $(skin).append(iDiv); + //noname(this); + $(g).append(skin); + let 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 + let name = "#" + this.id + "-skin"; + let 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) { + + $((ob.img)).on("mousedown touchstart", function(e) { + e.preventDefault(); + let 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; }); - 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)).on("mousedown touchstart",function(e){ - e.preventDefault(); - 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)).on("mouseup touchend",function(e){ - selected = "yay"; - }); -} -/* -function noname(ob){ - $((ob.img)).on("mousedown touchstart",function(e){ - selected = ob.id; - console.log("Clicked!!!"); - }); - $((ob.img)).on("mouseup touchend",function(e){ - selected = "yay"; - }); -} -*/ - - + $((ob.img)).on("mouseup touchend", function() { + selected = "yay"; + }); +} \ No newline at end of file diff --git a/scripts/buffer.js b/scripts/buffer.js index d9b600b..409faac 100644 --- a/scripts/buffer.js +++ b/scripts/buffer.js @@ -1,72 +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({ +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 + let 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" + let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ + x: "50", + y: "50", + id: (id + "-skin"), + width: "80", + height: "80" }); - 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"); + let img = $(document.createElement('img')).attr({ + height: "80", + width: "80", + src: "textures/gates/buffer_gate.jpg" + }); + let iDiv = document.createElement("div"); + $(iDiv).append(img); + this.skin = skin; + this.img = img; + $(skin).append(iDiv); + //noname(this); + $(g).append(skin); + let 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); + + //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 + let name = "#" + this.id + "-skin"; + let 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 index d66bfbb..b4ff252 100644 --- a/scripts/but.js +++ b/scripts/but.js @@ -1,79 +1,63 @@ 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)).on("click touchstart",function(){ - ob.val = (ob.val+1)%2; - if (ob.val){ - $((ob.rep)).attr("fill","red"); - } - else{ - $((ob.rep)).attr("fill","orange"); - } - }); - */ - - $((ob.rep)).on("mousedown touchstart",function(e){ - var svg = document.getElementById("svg1"); - $(svg).append(ob.rep); - $(svg).append($(ob.o.rep)); - selected = ob.id; - e.preventDefault(); - 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)).on("mouseup touchend",function(e){ - selected = "yay"; - ob.wait = true; - }); + +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)).on("mousedown touchstart", function(e) { + let svg = document.getElementById("svg1"); + $(svg).append(ob.rep); + $(svg).append($(ob.o.rep)); + selected = ob.id; + e.preventDefault(); + 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)).on("mouseup touchend", function() { + selected = "yay"; + ob.wait = true; + }); +} \ No newline at end of file diff --git a/scripts/edges.js b/scripts/edges.js index 329ba50..034724a 100644 --- a/scripts/edges.js +++ b/scripts/edges.js @@ -1,95 +1,91 @@ -var l_count = 0; -var lines = []; +let l_count = 0; +let 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({ + +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; + + let 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({ + let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'line')).attr({ x1: "50", - y1:"50", - x2:"55", - y2:"55", + y1: "50", + x2: "55", + y2: "55", id: this.id, - fill:"yellow", - stroke: "black" + fill: "yellow", + stroke: "black" }); - $(el).attr("stroke-width","2"); - $(g).append(el); - var elem = document.getElementById("svg1"); + $(el).attr("stroke-width", "2"); + $(g).append(el); + let 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); + + //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)).on("click touchstart",function(e){ - e.preventDefault(); - //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; - }); -} - - +function rem_edge(ob) { + $((ob.rep)).on("click touchstart", function(e) { + e.preventDefault(); + //removing the edge from the array + for (let 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; + }); +} \ No newline at end of file diff --git a/scripts/events.js b/scripts/events.js index cca3b72..97087f9 100644 --- a/scripts/events.js +++ b/scripts/events.js @@ -1,118 +1,102 @@ window.addEventListener("keydown", function(e) { // space and arrow keys - if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { + if ([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { e.preventDefault(); } }, false); -var xvb = 0; -var yvb=0; -var zoomx = window.innerWidth; -var zoomy = window.innerHeight; +let xvb = 0; +let yvb = 0; +let zoomx = window.innerWidth; +let zoomy = window.innerHeight; updatescr(); -function updatescr(){ - if (zoomx < 51){ - zoomx += 50; - } - if (zoomy < 51){ - zoomy += 50; - } - let newname = xvb.toString() + " " + yvb.toString() + " " + zoomx.toString() + " " + zoomy.toString(); - $("#svg1").removeAttr("viewBox"); - $("#svg1").each(function(){$(this)[0].setAttribute("viewBox",newname)}); +function updatescr() { + if (zoomx < 51) { + zoomx += 50; + } + if (zoomy < 51) { + zoomy += 50; + } + let newname = xvb.toString() + " " + yvb.toString() + " " + zoomx.toString() + " " + zoomy.toString(); + $("#svg1").removeAttr("viewBox"); + $("#svg1").each(function() { $(this)[0].setAttribute("viewBox", newname) }); } -document.addEventListener("keydown",e=> { - if(e.keyCode == 40){ - yvb += 10; - updatescr(); - } - else if(e.keyCode == 39){ - xvb += 10; - updatescr(); - } - else if(e.keyCode == 38){ - yvb -= 10; - updatescr(); - } - else if(e.keyCode == 37){ - xvb -= 10; - updatescr(); - } - else if(e.keyCode == 187){ - if (!(zoomx < 101)&&!(zoomy < 101)){ - xvb += 25; - yvb += 25; - } - zoomx -= 50; - zoomy -= 50; - updatescr(); - } - else if(e.keyCode == 189){ - xvb -= 25; - yvb -= 25; - zoomx += 50; - zoomy += 50; - updatescr(); - } -},false); +document.addEventListener("keydown", e => { + if (e.keyCode == 40) { + yvb += 10; + updatescr(); + } else if (e.keyCode == 39) { + xvb += 10; + updatescr(); + } else if (e.keyCode == 38) { + yvb -= 10; + updatescr(); + } else if (e.keyCode == 37) { + xvb -= 10; + updatescr(); + } else if (e.keyCode == 187) { + if (!(zoomx < 101) && !(zoomy < 101)) { + xvb += 25; + yvb += 25; + } + zoomx -= 50; + zoomy -= 50; + updatescr(); + } else if (e.keyCode == 189) { + xvb -= 25; + yvb -= 25; + zoomx += 50; + zoomy += 50; + updatescr(); + } +}, false); -var zooming = false; -var xbeg = 0; -var ybeg = 0; -var moveing = false; +let zooming = false; +let xbeg = 0; +let ybeg = 0; +let moveing = false; -$("svg").on("mousemove touchmove",function(e){ - if (moveing && selected == "yay"){ - if (!(zooming)){ - zooming = true; - - //setting our first mouse poitions - xbeg = e.pageX * zoomx/window.innerWidth; - ybeg = e.pageY * zoomy/window.innerHeight; - - xbeg += xvb; - ybeg += yvb; - console.log("started zooming"+xbeg+"and"+ybeg); - //moveing = (moveing +1)%2; - } - - var newx = e.pageX * zoomx/window.innerWidth; - var newy = e.pageY * zoomy/window.innerHeight; - - newx += xvb; - newy += yvb; - - xvb -= newx - xbeg; - yvb -= newy - ybeg; - updatescr(); - - console.log(xvb+"newx"+newx+"xbeg"+xbeg); - } +$("svg").on("mousemove touchmove", function(e) { + if (moveing && selected == "yay") { + if (!(zooming)) { + zooming = true; + + //setting our first mouse poitions + xbeg = e.pageX * zoomx / window.innerWidth; + ybeg = e.pageY * zoomy / window.innerHeight; + + xbeg += xvb; + ybeg += yvb; + console.log("started zooming" + xbeg + "and" + ybeg); + //moveing = (moveing +1)%2; + } + + let newx = e.pageX * zoomx / window.innerWidth; + let newy = e.pageY * zoomy / window.innerHeight; + + newx += xvb; + newy += yvb; + + xvb -= newx - xbeg; + yvb -= newy - ybeg; + updatescr(); + + console.log(xvb + "newx" + newx + "xbeg" + xbeg); + } }); -$("svg").on("mousedown touchstart",function(e){ - //e.preventDefault(); - moveing = true; +$("svg").on("mousedown touchstart", function() { + //e.preventDefault(); + moveing = true; }); -$("svg").on("mouseup touchend",function(e){ - e.preventDefault(); - selected = "yay"; - zooming = false; - moveing = false; -}); - - - - - - - - - - - +$("svg").on("mouseup touchend", function(e) { + e.preventDefault(); + selected = "yay"; + zooming = false; + moveing = false; +}); \ No newline at end of file diff --git a/scripts/light.js b/scripts/light.js index a51630f..1c20bf6 100644 --- a/scripts/light.js +++ b/scripts/light.js @@ -1,84 +1,78 @@ console.log("bulb"); -function light(id){ - this.id = id; - var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - $(g).attr({ + +function light(id) { + this.id = id; + let 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({ + let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle')).attr({ cx: "50", - cy:"50", - r: "40", + cy: "50", + r: "40", id: this.id, - fill:"white", - stroke: "black" + 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"); + $(el).attr("stroke-width", "2"); + $(el).attr("class", "light"); + $(g).append(el); + //$(el).attr("onmousedown","selected='"+this.id+"';"); + $(el).attr("onmouseup", "selected='yay';"); + let 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); + 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).on("mousedown touchstart",function(e){ - e.preventDefault(); - var svg = document.getElementById("svg1"); - $(svg).append(ob.rep); - $(svg).append($(ob.i.rep)); - selected=ob.id; - }); -} - - - - - +function addclk_light(ob) { + $(ob.rep).on("mousedown touchstart", function(e) { + e.preventDefault(); + let svg = document.getElementById("svg1"); + $(svg).append(ob.rep); + $(svg).append($(ob.i.rep)); + selected = ob.id; + }); +} \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index 02ec665..f50434a 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -6,63 +6,60 @@ //====================first adding the modal================================= //order is used to generate new id's for components -var order = 0; - -//selected indicates what is the last element the user clicked on -var selecte="yay" +let order = 0; //piece would contain all the components //(without pins and edges) //we will use that array for updating the value and the position -var pieces = []; +let pieces = []; -//this 'modal' variable is used to keep the blue box +//this 'modal' letiable is used to keep the blue box //basically when you click on it the modal for adding components will pop -var modal = add(40,40,"blue","black","butt",false); +let modal = add(40, 40, "blue", "black", "butt", false); //adding the event for clicking -$(modal).on("mousedown touchstart",function(e){ - - //showing the modal - //actually 'modal' is just the button - //and 'addel' is the true id of the modal from DOM - $("#addel").modal("show"); - - //being sure we wont move the components - moveing = false; - - //activatng the drag and drop for the blue box - selected = "butt"; +$(modal).on("mousedown touchstart", function() { + + //showing the modal + //actually 'modal' is just the button + //and 'addel' is the true id of the modal from DOM + $("#addel").modal("show"); + + //being sure we wont move the components + moveing = false; + + //activatng the drag and drop for the blue box + selected = "butt"; }); //the event for finishing the drag and drop on the blue box -$(modal).on("mouseup touchend",function(e){ - //telling that we dont want to drag it anymore - selected = "yay"; +$(modal).on("mouseup touchend", function() { + //telling that we dont want to drag it anymore + selected = "yay"; }); //changing the positon of the blue box //we dont want it to be in the left top corner at 0 0 -$(modal).attr("y","500"); -$(modal).attr("x","500"); +$(modal).attr("y", "500"); +$(modal).attr("x", "500"); -//var desc = new text(modal,"+") +//let desc = new text(modal,"+") //used for actually getting the new ids -function getname(){ - //getting the 'order' - //than making it bigger by 1 - //convert it to string - //than add 'piece' to it for avoiding confusion between pieces and pins - return ((order++).toString()+"piece") +function getname() { + //getting the 'order' + //than making it bigger by 1 + //convert it to string + //than add 'piece' to it for avoiding confusion between pieces and pins + return ((order++).toString() + "piece") } //the function that fires when you tap 'add' -function addel(){ - for (var i = 0;i < parseFloat($("#times").val());i++){ - var added = eval("new "+$("#sel option:selected").attr("value")+"(getname())"); - } +function addel() { + for (let i = 0; i < parseFloat($("#times").val()); i++) { + let added = eval("new " + $("#sel option:selected").attr("value") + "(getname())"); + } } @@ -71,32 +68,32 @@ function addel(){ //================================preventing deafult actions========================== //nothing to say here -$("img,rect,circle,p,foreignObject").on("mousedown touchstart",function(e){ - e.preventDefault(); +$("img,rect,circle,p,foreignObject").on("mousedown touchstart", function(e) { + e.preventDefault(); }); -$("*").on("mouseup touchend",function(e){ - e.preventDefault(); - moveing = false; +$("*").on("mouseup touchend", function(e) { + e.preventDefault(); + moveing = false; }); -$("img").on("click touchstart",function(e){ - e.preventDefault(); +$("img").on("click touchstart", function(e) { + e.preventDefault(); }); -//===============================variables============================================ +//===============================letiables============================================ //setting the drag and drop to our value //'yay' means 'nothing selected' -var selected = "yay"; +let selected = "yay"; //the first positios of the clicks -var firstx = 0; -var firsty = 0; +let firstx = 0; +let firsty = 0; //the first position of an element dragged -var fx = 0; -var fy = 0; +let fx = 0; +let fy = 0; //snap settings let snap = false; @@ -105,40 +102,39 @@ let snap = false; //nothing to say here... //just some basic things -$("body").on("mousemove touchmove",function(e){ - //calling the drag function - drag(e,selected); +$("body").on("mousemove touchmove", function(e) { + //calling the drag function + drag(e, selected); }); -$("body").on("mouseup touchend",function(e){ - selected = "yay"; - console.log("got a mouse up"); +$("body").on("mouseup touchend", function(e) { + selected = "yay"; + console.log("got a mouse up"); }); -$("body").on("mousedown touchstart",function(e){ - //beeing sure that we actually want to drag something - if (selected!="yay"){ - - //setting our first mouse poitions - firstx = e.pageX * zoomx/window.innerWidth; - firsty = e.pageY * zoomy/window.innerHeight; - - firstx += xvb; - firsty += yvb; - - //conveerting the id to an actual thing - name = "#"+selected; - - //beeing sure we get the corect attributes - //circle have 'cx' and 'cy' - //and rectangles have 'x' and 'y' - 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")); - } - } +$("body").on("mousedown touchstart", function(e) { + //beeing sure that we actually want to drag something + if (selected != "yay") { + + //setting our first mouse poitions + firstx = e.pageX * zoomx / window.innerWidth; + firsty = e.pageY * zoomy / window.innerHeight; + + firstx += xvb; + firsty += yvb; + + //conveerting the id to an actual thing + name = "#" + selected; + + //beeing sure we get the corect attributes + //circle have 'cx' and 'cy' + //and rectangles have 'x' and 'y' + 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")); + } + } }); @@ -147,130 +143,130 @@ $("body").on("mousedown touchstart",function(e){ //thefunction that tranfers the data from the event to our set_position function -function drag(e,selected){ - - //the name - let name = "#" + selected; - - //the positions - let x = e.pageX; - let y = e.pageY; - - x *= zoomx/window.innerWidth; - y *= zoomy/window.innerHeight; - - //updating positions - set_position(name,x,y); +function drag(e, selected) { + + //the name + let name = "#" + selected; + + //the positions + let x = e.pageX; + let y = e.pageY; + + x *= zoomx / window.innerWidth; + y *= zoomy / window.innerHeight; + + //updating positions + set_position(name, x, y); } //our main place to change things -function set_position(name,x,y){ - var obj,objx,objy; - obj = "#"+selected; - - x = parseFloat(x); - y = parseFloat(y); - - x += xvb; - y += yvb; - - - - 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 set_position(name, x, y) { + let obj, objx, objy; + obj = "#" + selected; + + x = parseFloat(x); + y = parseFloat(y); + + x += xvb; + y += yvb; + + + + if ($(name).attr("class") != "light") { + //getting the letiables + 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 letiables + 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({ +function add(h, w, color, stroke, id, on) { + let 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({ + let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'rect')).attr({ x: "50", - y:"50", + y: "50", id: id, - fill:color, - height: h.toString()+"px", - width: w.toString()+"px", - stroke: stroke, - rx:"20", - ry:"20" + 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"); + if (on) { + $(el).attr("onmousedown", "selected='" + id + "';"); + $(el).attr("onmouseup", "selected='yay';"); + } + $(el).attr("stroke-width", "4"); + $(g).append(el); + let elem = document.getElementById("svg1"); elem.appendChild(g); - return el; + 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); + +setInterval(function() { + for (let i = 0; i < pieces.length; i++) { + pieces[i].update(); + } + for (let i = 0; i < lines.length; i++) { + lines[i].update(); + } + for (let i = 0; i < pins.length; i++) { + pins[i].update(); + } +}, 0.001); diff --git a/scripts/nand.js b/scripts/nand.js index a7a7fb7..edd1aed 100644 --- a/scripts/nand.js +++ b/scripts/nand.js @@ -1,74 +1,74 @@ -function nand(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({ +function nand(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 + let 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/nand_gate.jpg" + let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ + x: "50", + y: "50", + id: (id + "-skin"), + width: "80", + height: "80" }); - 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"); + let img = $(document.createElement('img')).attr({ + height: "80", + width: "80", + src: "textures/gates/nand_gate.jpg" + }); + let iDiv = document.createElement("div"); + $(iDiv).append(img); + this.skin = skin; + this.img = img; + $(skin).append(iDiv); + //noname(this); + $(g).append(skin); + let 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); + + //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 + let name = "#" + this.id + "-skin"; + let 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); } \ No newline at end of file diff --git a/scripts/nand3.js b/scripts/nand3.js index e5f932d..e298aad 100644 --- a/scripts/nand3.js +++ b/scripts/nand3.js @@ -1,93 +1,92 @@ -function nand3(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.pin3 = new pin(0); - this.o = new pin(1); - this.o.nei = this; - this.activation = function(){ - if (!((this.pin1.val && this.pin2.val)&&this.pin3.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({ +function nand3(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.pin3 = new pin(0); + this.o = new pin(1); + this.o.nei = this; + this.activation = function() { + if (!((this.pin1.val && this.pin2.val) && this.pin3.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 + let 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/nand_gate.jpg" + let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ + x: "50", + y: "50", + id: (id + "-skin"), + width: "80", + height: "80" }); - 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"); + let img = $(document.createElement('img')).attr({ + height: "72", + width: "72", + src: "textures/gates/nand_gate.jpg" + }); + let iDiv = document.createElement("div"); + $(iDiv).append(img); + this.skin = skin; + this.img = img; + $(skin).append(iDiv); + //noname(this); + $(g).append(skin); + let 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.pin3.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; - - - clk(this,[this.pin1,this.pin2,this.pin3,this.o]); + + //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.pin3.set(x - 20, y + 30); + this.o.set(x + 80, y + 30); + + //and the skin + let name = "#" + this.id + "-skin"; + let 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; + + + clk(this, [this.pin1, this.pin2, this.pin3, this.o]); } -function clk(ob,arr){ - var rep = ob.rep; - $((ob.img)).on("mousedown touchstart",function(e){ - e.preventDefault(); - var svg = document.getElementById("svg1"); - $(svg).append(ob.rep); - $(svg).append($(ob.pin1.rep)); - for (var i = 0; i < arr.length;i++){ - $(svg).append($(i.rep)); - } - $(svg).append($(ob.skin)); - selected = ob.id; - }); - $((ob.img)).on("mouseup touchend",function(e){ - selected = "yay"; - }); +function clk(ob, arr) { + $((ob.img)).on("mousedown touchstart", function(e) { + e.preventDefault(); + let svg = document.getElementById("svg1"); + $(svg).append(ob.rep); + $(svg).append($(ob.pin1.rep)); + for (let i = 0; i < arr.length; i++) { + $(svg).append($(i.rep)); + } + $(svg).append($(ob.skin)); + selected = ob.id; + }); + $((ob.img)).on("mouseup touchend", function() { + selected = "yay"; + }); } \ No newline at end of file diff --git a/scripts/not.js b/scripts/not.js index 21b31a3..62bcacf 100644 --- a/scripts/not.js +++ b/scripts/not.js @@ -1,94 +1,87 @@ -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({ +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 + let 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" + let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ + x: "50", + y: "50", + id: (id + "-skin"), + width: "80", + height: "80" }); - 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"); + let img = $(document.createElement('img')).attr({ + height: "80", + width: "80", + src: "textures/gates/not_gate.jpg" + }); + let iDiv = document.createElement("div"); + $(iDiv).append(img); + this.skin = skin; + this.img = img; + $(skin).append(iDiv); + //noname(this); + $(g).append(skin); + let 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); + + //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 + let name = "#" + this.id + "-skin"; + let 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)).on("mousedown touchstart",function(e){ - e.preventDefault(); - 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)).on("mouseup touchend",function(e){ - selected = "yay"; - }); -} - - - - - - +function addclk11(ob) { + $((ob.img)).on("mousedown touchstart", function(e) { + e.preventDefault(); + let 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)).on("mouseup touchend", function() { + selected = "yay"; + }); +} \ No newline at end of file diff --git a/scripts/or.js b/scripts/or.js index adb3ca0..f58175f 100644 --- a/scripts/or.js +++ b/scripts/or.js @@ -1,86 +1,74 @@ -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({ +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 + let 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" + let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ + x: "50", + y: "50", + id: (id + "-skin"), + width: "80", + height: "80" }); - 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"); + let img = $(document.createElement('img')).attr({ + height: "80", + width: "80", + src: "textures/gates/or_gate.jpg" + }); + let iDiv = document.createElement("div"); + $(iDiv).append(img); + this.skin = skin; + this.img = img; + $(skin).append(iDiv); + //noname(this); + $(g).append(skin); + let 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).on("mousedown touchstart",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)); - }); -} -*/ + + //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 + let name = "#" + this.id + "-skin"; + let 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); +} \ No newline at end of file diff --git a/scripts/pins.js b/scripts/pins.js index b89227b..7e78ee1 100644 --- a/scripts/pins.js +++ b/scripts/pins.js @@ -1,71 +1,68 @@ -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; +let count = 0; +let pins = []; +let sels = "yay"; +let sele = "yay"; +let 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).on("click touchstart",function(e){ - e.preventDefault(); - 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"); - } - } - }); +function clicked(ob) { + $(ob.rep).on("click touchstart", function(e) { + e.preventDefault(); + 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 index b6e2c67..4736757 100644 --- a/scripts/text.js +++ b/scripts/text.js @@ -1,41 +1,42 @@ -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({ +let t_count = 0; + +function text(parent, value) { + //letiables + this.parent = parent; + this.val = value; + this.id = t_count.toString() + "text"; + t_count++; + this.name = "#" + this.id; + + //adding the text to the SVG + let 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({ + let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'text')).attr({ x: "50", - y:"50", + y: "50", id: this.id, - fill:"white", - stroke: "black" + fill: "white", + stroke: "black" }); - $(el).text(value); - $(el).attr("class","heavy"); - $(g).append(el); - var elem = document.getElementById("svg1"); + $(el).text(value); + $(el).attr("class", "heavy"); + $(g).append(el); + let elem = document.getElementById("svg1"); elem.appendChild(g); - this.rep = el; - $((this.rep)).on("click touchstart",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; + this.rep = el; + $((this.rep)).on("click touchstart", 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/scripts/xor.js b/scripts/xor.js index 3b250a6..fddfa1d 100644 --- a/scripts/xor.js +++ b/scripts/xor.js @@ -1,73 +1,73 @@ -function xor(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) && (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({ +function xor(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) && (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 + let 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/xor.jpg" + let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ + x: "50", + y: "50", + id: (id + "-skin"), + width: "80", + height: "80" }); - 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"); + let img = $(document.createElement('img')).attr({ + height: "80", + width: "80", + src: "textures/gates/xor.jpg" + }); + let iDiv = document.createElement("div"); + $(iDiv).append(img); + this.skin = skin; + this.img = img; + $(skin).append(iDiv); + //noname(this); + $(g).append(skin); + let 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; - clk(this,[this.pin1,this.pin2,this.output]); + + //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 + let name = "#" + this.id + "-skin"; + let 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; + clk(this, [this.pin1, this.pin2, this.output]); } \ No newline at end of file diff --git a/st.css b/st.css index dfc12c4..c030fe1 100644 --- a/st.css +++ b/st.css @@ -1,22 +1,24 @@ body { - background-color:rgba(0,0,0,0.7); - /* + background-color: rgba(0, 0, 0, 0.7); + /* background-image: url("bg.jpg"); background-repeat: no-repeat; background-size: cover; */ - margin:0; + margin: 0; } -.heavy { font: bold 20px sans-serif; } +.heavy { + font: bold 20px sans-serif; +} img { - border-radius: 17px; - height: 74; - width: 74; + border-radius: 17px; + height: 74; + width: 74; } #butt { - rx: 10; - ry: 10; + rx: 5; + ry: 5; } \ No newline at end of file