prescientmoon/erratic-gate
prescientmoon/erratic-gate
1
Fork 0
Code Issues 2 Pull requests Activity

small changes to code

Browse source 
Signed-off-by: prescientmoon <git@moonythm.dev>
This commit is contained in:
Sandu Victor 2019-10-14 21:00:42 +03:00 committed by prescientmoon
parent cfd5714220
commit c0ea9eb319
Signed by: prescientmoon
SSH key fingerprint: SHA256:WFp/cO76nbarETAoQcQXuV+0h7XJsEsOCI0UsyPIy6U
16 changed files with 1171 additions and 1264 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
index.html
View file

@ -1,5 +1,6 @@
<html> <html>
<head>.
<head>.
<title> <title>
Logic simulator Logic simulator
</title> </title>
@ -13,9 +14,10 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <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 --> !--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> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head> </head>
<body id="body">
<svg height = "100%" width = "100%" id = "svg1" viewbox = "0 0 700 700"> <body id="body">
<svg height="100%" width="100%" id="svg1" viewbox="0 0 700 700">
</svg> </svg>
<!--And--> <!--And-->
@ -48,15 +50,15 @@
<script src="scripts/main.js"></script> <script src="scripts/main.js"></script>
<div class = "modal fade" id = "addel"> <div class="modal fade" id="addel">
<div class = "modal-dialog"> <div class="modal-dialog">
<div class = "modal-content"> <div class="modal-content">
<div class = "modal-header"> <div class="modal-header">
<p> <p>
Add a piece! Add a piece!
</p> </p>
</div> </div>
<div class = "modal-body"> <div class="modal-body">
<select id="sel"> <select id="sel">
<option value = "not">Not gate</option> <option value = "not">Not gate</option>
<option value = "light">Light bulb</option> <option value = "light">Light bulb</option>
@ -67,12 +69,11 @@
<option value = "nand">Nand gate</option> <option value = "nand">Nand gate</option>
<option value = "nand3">Nand gate (3 inputs)</option> <option value = "nand3">Nand gate (3 inputs)</option>
<option value = "xor">Xor gate</option> <option value = "xor">Xor gate</option>
</select> </select> Quantity:
Quantity: <input id="times" type="number">
<input id = "times" type = "number">
</div> </div>
<div class = "modal-footer"> <div class="modal-footer">
<button type="button" onclick = '$("#addel").modal("hide"); addel();' class="btn btn-primmary" id = "done"> <button type="button" onclick='$("#addel").modal("hide"); addel();' class="btn btn-primmary" id="done">
Add!!! Add!!!
</button> </button>
</div> </div>
@ -80,17 +81,6 @@
</div> </div>
</div> </div>
<link href="st.css" rel="Stylesheet" type="text/css" /> <link href="st.css" rel="Stylesheet" type="text/css" />
</body> </body>
</html> </html>

91
scripts/and_gate.js
View file

@ -1,83 +1,79 @@
console.log("and"); console.log("and");
function and(id){
class and {
constructor(id) {
this.id = id; this.id = id;
this.rep = add(80,80,"blue","black",this.id,false); this.rep = add(80, 80, "blue", "black", this.id, false);
this.pin1 = new pin(0); this.pin1 = new pin(0);
this.pin2 = new pin(0); this.pin2 = new pin(0);
this.o = new pin(1); this.o = new pin(1);
this.o.nei = this; this.o.nei = this;
this.activation = function(){ this.activation = function() {
if (this.pin1.val && this.pin2.val){ if (this.pin1.val && this.pin2.val) {
return true; return true;
} }
return false; return false;
} };
this.x = function() {
this.x = function(){
let name = "#" + this.id; let name = "#" + this.id;
return parseFloat($(name).attr("x")); return parseFloat($(name).attr("x"));
} };
this.y = function() {
this.y = function(){
let name = "#" + this.id; let name = "#" + this.id;
//console.log("y"+parseFloat($(name).attr("y"))); //console.log("y"+parseFloat($(name).attr("y")));
return parseFloat($(name).attr("y")); return parseFloat($(name).attr("y"));
} };
//design //design
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
$(g).attr({ $(g).attr({
width: "100%", width: "100%",
height: "100%" height: "100%"
}); });
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
x: "50", x: "50",
y: "50", y: "50",
id: (id+"-skin"), id: (id + "-skin"),
width:"80", width: "80",
height:"80" height: "80"
}); });
var img = $(document.createElement('img')).attr({ let img = $(document.createElement('img')).attr({
height:"72", height: "72",
width:"72", width: "72",
src:"textures/gates/and_gate.jpg" src: "textures/gates/and_gate.jpg"
}); });
var iDiv = document.createElement("div"); let iDiv = document.createElement("div");
$(iDiv).append(img); $(iDiv).append(img);
this.skin = skin; this.skin = skin;
this.img = img; this.img = img;
$(skin).append(iDiv); $(skin).append(iDiv);
//noname(this); //noname(this);
$(g).append(skin); $(g).append(skin);
var elem = document.getElementById("svg1"); let elem = document.getElementById("svg1");
elem.appendChild(g); elem.appendChild(g);
//updating //updating
this.update = function(){ this.update = function() {
//the main object and his pins //the main object and his pins
let x = this.x(); let x = this.x();
let y = this.y(); let y = this.y();
this.pin1.set(x-20,y); this.pin1.set(x - 20, y);
this.pin2.set(x-20,y+60); this.pin2.set(x - 20, y + 60);
this.o.set(x+80,y+30); this.o.set(x + 80, y + 30);
//and the skin //and the skin
var name = "#"+this.id+"-skin"; let name = "#" + this.id + "-skin";
var skin = $(name); let skin = $(name);
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString()); skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString()); skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
} };
pieces[pieces.length] = this; pieces[pieces.length] = this;
addclk(this); addclk(this);
}
} }
function addclk(ob){ function addclk(ob) {
var rep = ob.rep;
$((ob.img)).on("mousedown touchstart",function(e){ $((ob.img)).on("mousedown touchstart", function(e) {
e.preventDefault(); e.preventDefault();
var svg = document.getElementById("svg1"); let svg = document.getElementById("svg1");
$(svg).append(ob.rep); $(svg).append(ob.rep);
$(svg).append($(ob.pin1.rep)); $(svg).append($(ob.pin1.rep));
$(svg).append($(ob.pin2.rep)); $(svg).append($(ob.pin2.rep));
@ -85,20 +81,7 @@ function addclk(ob){
$(svg).append($(ob.skin)); $(svg).append($(ob.skin));
selected = ob.id; selected = ob.id;
}); });
$((ob.img)).on("mouseup touchend",function(e){ $((ob.img)).on("mouseup touchend", function() {
selected = "yay"; 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";
});
}
*/

48
scripts/buffer.js
View file

@ -1,70 +1,70 @@
function buffer(id){ function buffer(id) {
this.id = id; this.id = id;
this.name = "#" + this.id; this.name = "#" + this.id;
this.rep = add(80,80,"green","black",this.id,true); this.rep = add(80, 80, "green", "black", this.id, true);
this.pin1 = new pin(0); this.pin1 = new pin(0);
this.o = new pin(1); this.o = new pin(1);
this.o.nei = this; this.o.nei = this;
//this.text = new text(this,"Or-gate"); //this.text = new text(this,"Or-gate");
this.activation = function(){ this.activation = function() {
if (this.pin1.val){ if (this.pin1.val) {
return true; return true;
} }
return false; return false;
} }
this.x = function(){ this.x = function() {
let name = "#" + this.id; let name = "#" + this.id;
return parseFloat($(name).attr("x")); return parseFloat($(name).attr("x"));
} }
this.y = function(){ this.y = function() {
let name = "#" + this.id; let name = "#" + this.id;
//console.log("y"+parseFloat($(name).attr("y"))); //console.log("y"+parseFloat($(name).attr("y")));
return parseFloat($(name).attr("y")); return parseFloat($(name).attr("y"));
} }
//design //design
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
$(g).attr({ $(g).attr({
width: "100%", width: "100%",
height: "100%" height: "100%"
}); });
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
x: "50", x: "50",
y: "50", y: "50",
id: (id+"-skin"), id: (id + "-skin"),
width:"80", width: "80",
height:"80" height: "80"
}); });
var img = $(document.createElement('img')).attr({ let img = $(document.createElement('img')).attr({
height:"80", height: "80",
width:"80", width: "80",
src:"textures/gates/buffer_gate.jpg" src: "textures/gates/buffer_gate.jpg"
}); });
var iDiv = document.createElement("div"); let iDiv = document.createElement("div");
$(iDiv).append(img); $(iDiv).append(img);
this.skin = skin; this.skin = skin;
this.img = img; this.img = img;
$(skin).append(iDiv); $(skin).append(iDiv);
//noname(this); //noname(this);
$(g).append(skin); $(g).append(skin);
var elem = document.getElementById("svg1"); let elem = document.getElementById("svg1");
elem.appendChild(g); elem.appendChild(g);
//updating //updating
this.update = function(){ this.update = function() {
//the main object and his pins //the main object and his pins
let x = this.x(); let x = this.x();
let y = this.y(); let y = this.y();
this.pin1.set(x-20,y+30); this.pin1.set(x - 20, y + 30);
this.o.set(x+80,y+30); this.o.set(x + 80, y + 30);
//and the skin //and the skin
var name = "#"+this.id+"-skin"; let name = "#" + this.id + "-skin";
var skin = $(name); let skin = $(name);
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString()); skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString()); skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
} }
pieces[pieces.length] = this; pieces[pieces.length] = this;

60
scripts/but.js
View file

@ -1,79 +1,63 @@
console.log("nut"); console.log("nut");
function but(id){
function but(id) {
this.wait = true; this.wait = true;
this.id = id; this.id = id;
this.rep = add(80,80,"orange","black",this.id,true); this.rep = add(80, 80, "orange", "black", this.id, true);
this.o = new pin(1); this.o = new pin(1);
this.val = false; this.val = false;
addevt(this); addevt(this);
$((this.rep)).attr("stroke-width",4); $((this.rep)).attr("stroke-width", 4);
$((this.rep)).attr("stroke","black"); $((this.rep)).attr("stroke", "black");
this.o.nei = this; this.o.nei = this;
this.activation = function(){ this.activation = function() {
return this.val; return this.val;
} }
this.x = function(){ this.x = function() {
let name = "#" + this.id; let name = "#" + this.id;
return parseFloat($(name).attr("x")); return parseFloat($(name).attr("x"));
} }
this.y = function(){ this.y = function() {
let name = "#" + this.id; let name = "#" + this.id;
//console.log("y"+parseFloat($(name).attr("y"))); //console.log("y"+parseFloat($(name).attr("y")));
return parseFloat($(name).attr("y")); return parseFloat($(name).attr("y"));
} }
//design //design
this.init = function(){ this.init = function() {
return 0; return 0;
} }
this.update = function(){ this.update = function() {
let x = this.x(); let x = this.x();
let y = this.y(); let y = this.y();
this.o.set(x+80,y+30); this.o.set(x + 80, y + 30);
} }
pieces[pieces.length] = this; 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){ function addevt(ob) {
var svg = document.getElementById("svg1");
$((ob.rep)).on("mousedown touchstart", function(e) {
let svg = document.getElementById("svg1");
$(svg).append(ob.rep); $(svg).append(ob.rep);
$(svg).append($(ob.o.rep)); $(svg).append($(ob.o.rep));
selected = ob.id; selected = ob.id;
e.preventDefault(); e.preventDefault();
if (ob.wait){ if (ob.wait) {
ob.val = (ob.val+1)%2; ob.val = (ob.val + 1) % 2;
if (ob.val){ if (ob.val) {
$((ob.rep)).attr("fill","red"); $((ob.rep)).attr("fill", "red");
} } else {
else{ $((ob.rep)).attr("fill", "orange");
$((ob.rep)).attr("fill","orange");
} }
ob.wait = false; ob.wait = false;
} }
}); });
$((ob.rep)).on("mouseup touchend",function(e){ $((ob.rep)).on("mouseup touchend", function() {
selected = "yay"; selected = "yay";
ob.wait = true; ob.wait = true;
}); });
} }

64
scripts/edges.js
View file

@ -1,66 +1,66 @@
var l_count = 0; let l_count = 0;
var lines = []; let lines = [];
console.log("started2"); console.log("started2");
function edge(start,end){
this.id = l_count.toString()+"line"; function edge(start, end) {
this.id = l_count.toString() + "line";
l_count++; l_count++;
this.start = start; this.start = start;
this.end = end; this.end = end;
console.log(start+end); console.log(start + end);
console.log(this.end); console.log(this.end);
console.log(this.start); console.log(this.start);
lines[lines.length] = this; lines[lines.length] = this;
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
$(g).attr({ $(g).attr({
width: "100%", width: "100%",
height: "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", x1: "50",
y1:"50", y1: "50",
x2:"55", x2: "55",
y2:"55", y2: "55",
id: this.id, id: this.id,
fill:"yellow", fill: "yellow",
stroke: "black" stroke: "black"
}); });
$(el).attr("stroke-width","2"); $(el).attr("stroke-width", "2");
$(g).append(el); $(g).append(el);
var elem = document.getElementById("svg1"); let elem = document.getElementById("svg1");
elem.appendChild(g); elem.appendChild(g);
//console.log("succes"+lines); //console.log("succes"+lines);
this.rep = el; this.rep = el;
this.name = "#"+this.id; this.name = "#" + this.id;
this.update = function(){ this.update = function() {
let adr = this.start.name; let adr = this.start.name;
let temp = $(adr).attr("x"); let temp = $(adr).attr("x");
let n = this.name; let n = this.name;
//console.log("updating"+adr+temp+n); //console.log("updating"+adr+temp+n);
temp = (parseFloat(temp)).toString(); temp = (parseFloat(temp)).toString();
$(n).attr("x1",temp); $(n).attr("x1", temp);
temp = $(adr).attr("y"); temp = $(adr).attr("y");
temp = (parseFloat(temp)+10).toString(); temp = (parseFloat(temp) + 10).toString();
$(n).attr("y1",temp); $(n).attr("y1", temp);
adr = this.end.name; adr = this.end.name;
temp = $(adr).attr("x"); temp = $(adr).attr("x");
temp = (parseFloat(temp)+20).toString(); temp = (parseFloat(temp) + 20).toString();
$(n).attr("x2",temp); $(n).attr("x2", temp);
temp = $(adr).attr("y"); temp = $(adr).attr("y");
temp = (parseFloat(temp)+10).toString(); temp = (parseFloat(temp) + 10).toString();
$(n).attr("y2",temp); $(n).attr("y2", temp);
//and the color based on the state //and the color based on the state
if (this.start.val){ if (this.start.val) {
$((this.rep)).attr("stroke","yellow"); $((this.rep)).attr("stroke", "yellow");
} } else {
else{ $((this.rep)).attr("stroke", "black");
$((this.rep)).attr("stroke","black");
} }
} }
@ -68,11 +68,11 @@ function edge(start,end){
rem_edge(this); rem_edge(this);
} }
function rem_edge(ob){ function rem_edge(ob) {
$((ob.rep)).on("click touchstart",function(e){ $((ob.rep)).on("click touchstart", function(e) {
e.preventDefault(); e.preventDefault();
//removing the edge from the array //removing the edge from the array
for (var i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
if (lines[i] == (ob.id)) { if (lines[i] == (ob.id)) {
lines.splice(i, 1); lines.splice(i, 1);
} }
@ -89,7 +89,3 @@ function rem_edge(ob){
ob.end.state = true; ob.end.state = true;
}); });
} }

82
scripts/events.js
View file

@ -1,85 +1,80 @@
window.addEventListener("keydown", function(e) { window.addEventListener("keydown", function(e) {
// space and arrow keys // 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(); e.preventDefault();
} }
}, false); }, false);
var xvb = 0; let xvb = 0;
var yvb=0; let yvb = 0;
var zoomx = window.innerWidth; let zoomx = window.innerWidth;
var zoomy = window.innerHeight; let zoomy = window.innerHeight;
updatescr(); updatescr();
function updatescr(){ function updatescr() {
if (zoomx < 51){ if (zoomx < 51) {
zoomx += 50; zoomx += 50;
} }
if (zoomy < 51){ if (zoomy < 51) {
zoomy += 50; zoomy += 50;
} }
let newname = xvb.toString() + " " + yvb.toString() + " " + zoomx.toString() + " " + zoomy.toString(); let newname = xvb.toString() + " " + yvb.toString() + " " + zoomx.toString() + " " + zoomy.toString();
$("#svg1").removeAttr("viewBox"); $("#svg1").removeAttr("viewBox");
$("#svg1").each(function(){$(this)[0].setAttribute("viewBox",newname)}); $("#svg1").each(function() { $(this)[0].setAttribute("viewBox", newname) });
} }
document.addEventListener("keydown",e=> { document.addEventListener("keydown", e => {
if(e.keyCode == 40){ if (e.keyCode == 40) {
yvb += 10; yvb += 10;
updatescr(); updatescr();
} } else if (e.keyCode == 39) {
else if(e.keyCode == 39){
xvb += 10; xvb += 10;
updatescr(); updatescr();
} } else if (e.keyCode == 38) {
else if(e.keyCode == 38){
yvb -= 10; yvb -= 10;
updatescr(); updatescr();
} } else if (e.keyCode == 37) {
else if(e.keyCode == 37){
xvb -= 10; xvb -= 10;
updatescr(); updatescr();
} } else if (e.keyCode == 187) {
else if(e.keyCode == 187){ if (!(zoomx < 101) && !(zoomy < 101)) {
if (!(zoomx < 101)&&!(zoomy < 101)){
xvb += 25; xvb += 25;
yvb += 25; yvb += 25;
} }
zoomx -= 50; zoomx -= 50;
zoomy -= 50; zoomy -= 50;
updatescr(); updatescr();
} } else if (e.keyCode == 189) {
else if(e.keyCode == 189){
xvb -= 25; xvb -= 25;
yvb -= 25; yvb -= 25;
zoomx += 50; zoomx += 50;
zoomy += 50; zoomy += 50;
updatescr(); updatescr();
} }
},false); }, false);
var zooming = false; let zooming = false;
var xbeg = 0; let xbeg = 0;
var ybeg = 0; let ybeg = 0;
var moveing = false; let moveing = false;
$("svg").on("mousemove touchmove",function(e){ $("svg").on("mousemove touchmove", function(e) {
if (moveing && selected == "yay"){ if (moveing && selected == "yay") {
if (!(zooming)){ if (!(zooming)) {
zooming = true; zooming = true;
//setting our first mouse poitions //setting our first mouse poitions
xbeg = e.pageX * zoomx/window.innerWidth; xbeg = e.pageX * zoomx / window.innerWidth;
ybeg = e.pageY * zoomy/window.innerHeight; ybeg = e.pageY * zoomy / window.innerHeight;
xbeg += xvb; xbeg += xvb;
ybeg += yvb; ybeg += yvb;
console.log("started zooming"+xbeg+"and"+ybeg); console.log("started zooming" + xbeg + "and" + ybeg);
//moveing = (moveing +1)%2; //moveing = (moveing +1)%2;
} }
var newx = e.pageX * zoomx/window.innerWidth; let newx = e.pageX * zoomx / window.innerWidth;
var newy = e.pageY * zoomy/window.innerHeight; let newy = e.pageY * zoomy / window.innerHeight;
newx += xvb; newx += xvb;
newy += yvb; newy += yvb;
@ -88,31 +83,20 @@ $("svg").on("mousemove touchmove",function(e){
yvb -= newy - ybeg; yvb -= newy - ybeg;
updatescr(); updatescr();
console.log(xvb+"newx"+newx+"xbeg"+xbeg); console.log(xvb + "newx" + newx + "xbeg" + xbeg);
} }
}); });
$("svg").on("mousedown touchstart",function(e){ $("svg").on("mousedown touchstart", function() {
//e.preventDefault(); //e.preventDefault();
moveing = true; moveing = true;
}); });
$("svg").on("mouseup touchend",function(e){ $("svg").on("mouseup touchend", function(e) {
e.preventDefault(); e.preventDefault();
selected = "yay"; selected = "yay";
zooming = false; zooming = false;
moveing = false; moveing = false;
}); });

58
scripts/light.js
View file

@ -1,84 +1,78 @@
console.log("bulb"); console.log("bulb");
function light(id){
function light(id) {
this.id = id; this.id = id;
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
$(g).attr({ $(g).attr({
width: "100%", width: "100%",
height: "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", cx: "50",
cy:"50", cy: "50",
r: "40", r: "40",
id: this.id, id: this.id,
fill:"white", fill: "white",
stroke: "black" stroke: "black"
}); });
$(el).attr("stroke-width","2"); $(el).attr("stroke-width", "2");
$(el).attr("class","light"); $(el).attr("class", "light");
$(g).append(el); $(g).append(el);
//$(el).attr("onmousedown","selected='"+this.id+"';"); //$(el).attr("onmousedown","selected='"+this.id+"';");
$(el).attr("onmouseup","selected='yay';"); $(el).attr("onmouseup", "selected='yay';");
var elem = document.getElementById("svg1"); let elem = document.getElementById("svg1");
elem.appendChild(g); elem.appendChild(g);
this.rep = el; this.rep = el;
this.i = new pin(0); this.i = new pin(0);
this.val = false; this.val = false;
//addevt(this); //addevt(this);
$((this.rep)).attr("stroke-width",4); $((this.rep)).attr("stroke-width", 4);
this.activation = function(){ this.activation = function() {
return this.i.val; return this.i.val;
} }
this.x = function(){ this.x = function() {
let name = "#" + this.id; let name = "#" + this.id;
return parseFloat($(name).attr("cx")); return parseFloat($(name).attr("cx"));
} }
this.y = function(){ this.y = function() {
let name = "#" + this.id; let name = "#" + this.id;
//console.log("y"+parseFloat($(name).attr("y"))); //console.log("y"+parseFloat($(name).attr("y")));
return parseFloat($(name).attr("cy")); return parseFloat($(name).attr("cy"));
} }
//design //design
this.init = function(){ this.init = function() {
return 0; return 0;
} }
this.update = function(){ this.update = function() {
if (this.i.val != "yay"){ if (this.i.val != "yay") {
if ((this.activation())){ if ((this.activation())) {
$((this.rep)).attr("fill","yellow"); $((this.rep)).attr("fill", "yellow");
} } else {
else{ $((this.rep)).attr("fill", "white");
$((this.rep)).attr("fill","white");
} }
} }
//console.log($((this.rep)).attr("fill")); //console.log($((this.rep)).attr("fill"));
let x = this.x(); let x = this.x();
let y = this.y(); let y = this.y();
this.i.set(x-60,y-10); this.i.set(x - 60, y - 10);
} }
pieces[pieces.length] = this; pieces[pieces.length] = this;
addclk_light(this); addclk_light(this);
} }
function addclk_light(ob){ function addclk_light(ob) {
var rep = ob.rep; $(ob.rep).on("mousedown touchstart", function(e) {
$(ob.rep).on("mousedown touchstart",function(e){
e.preventDefault(); e.preventDefault();
var svg = document.getElementById("svg1"); let svg = document.getElementById("svg1");
$(svg).append(ob.rep); $(svg).append(ob.rep);
$(svg).append($(ob.i.rep)); $(svg).append($(ob.i.rep));
selected=ob.id; selected = ob.id;
}); });
} }

156
scripts/main.js
View file

@ -6,22 +6,19 @@
//====================first adding the modal================================= //====================first adding the modal=================================
//order is used to generate new id's for components //order is used to generate new id's for components
var order = 0; let order = 0;
//selected indicates what is the last element the user clicked on
var selecte="yay"
//piece would contain all the components //piece would contain all the components
//(without pins and edges) //(without pins and edges)
//we will use that array for updating the value and the position //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 //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 //adding the event for clicking
$(modal).on("mousedown touchstart",function(e){ $(modal).on("mousedown touchstart", function() {
//showing the modal //showing the modal
//actually 'modal' is just the button //actually 'modal' is just the button
@ -36,32 +33,32 @@ $(modal).on("mousedown touchstart",function(e){
}); });
//the event for finishing the drag and drop on the blue box //the event for finishing the drag and drop on the blue box
$(modal).on("mouseup touchend",function(e){ $(modal).on("mouseup touchend", function() {
//telling that we dont want to drag it anymore //telling that we dont want to drag it anymore
selected = "yay"; selected = "yay";
}); });
//changing the positon of the blue box //changing the positon of the blue box
//we dont want it to be in the left top corner at 0 0 //we dont want it to be in the left top corner at 0 0
$(modal).attr("y","500"); $(modal).attr("y", "500");
$(modal).attr("x","500"); $(modal).attr("x", "500");
//var desc = new text(modal,"+") //let desc = new text(modal,"+")
//used for actually getting the new ids //used for actually getting the new ids
function getname(){ function getname() {
//getting the 'order' //getting the 'order'
//than making it bigger by 1 //than making it bigger by 1
//convert it to string //convert it to string
//than add 'piece' to it for avoiding confusion between pieces and pins //than add 'piece' to it for avoiding confusion between pieces and pins
return ((order++).toString()+"piece") return ((order++).toString() + "piece")
} }
//the function that fires when you tap 'add' //the function that fires when you tap 'add'
function addel(){ function addel() {
for (var i = 0;i < parseFloat($("#times").val());i++){ for (let i = 0; i < parseFloat($("#times").val()); i++) {
var added = eval("new "+$("#sel option:selected").attr("value")+"(getname())"); let added = eval("new " + $("#sel option:selected").attr("value") + "(getname())");
} }
} }
@ -71,32 +68,32 @@ function addel(){
//================================preventing deafult actions========================== //================================preventing deafult actions==========================
//nothing to say here //nothing to say here
$("img,rect,circle,p,foreignObject").on("mousedown touchstart",function(e){ $("img,rect,circle,p,foreignObject").on("mousedown touchstart", function(e) {
e.preventDefault(); e.preventDefault();
}); });
$("*").on("mouseup touchend",function(e){ $("*").on("mouseup touchend", function(e) {
e.preventDefault(); e.preventDefault();
moveing = false; moveing = false;
}); });
$("img").on("click touchstart",function(e){ $("img").on("click touchstart", function(e) {
e.preventDefault(); e.preventDefault();
}); });
//===============================variables============================================ //===============================letiables============================================
//setting the drag and drop to our value //setting the drag and drop to our value
//'yay' means 'nothing selected' //'yay' means 'nothing selected'
var selected = "yay"; let selected = "yay";
//the first positios of the clicks //the first positios of the clicks
var firstx = 0; let firstx = 0;
var firsty = 0; let firsty = 0;
//the first position of an element dragged //the first position of an element dragged
var fx = 0; let fx = 0;
var fy = 0; let fy = 0;
//snap settings //snap settings
let snap = false; let snap = false;
@ -105,36 +102,35 @@ let snap = false;
//nothing to say here... //nothing to say here...
//just some basic things //just some basic things
$("body").on("mousemove touchmove",function(e){ $("body").on("mousemove touchmove", function(e) {
//calling the drag function //calling the drag function
drag(e,selected); drag(e, selected);
}); });
$("body").on("mouseup touchend",function(e){ $("body").on("mouseup touchend", function(e) {
selected = "yay"; selected = "yay";
console.log("got a mouse up"); console.log("got a mouse up");
}); });
$("body").on("mousedown touchstart",function(e){ $("body").on("mousedown touchstart", function(e) {
//beeing sure that we actually want to drag something //beeing sure that we actually want to drag something
if (selected!="yay"){ if (selected != "yay") {
//setting our first mouse poitions //setting our first mouse poitions
firstx = e.pageX * zoomx/window.innerWidth; firstx = e.pageX * zoomx / window.innerWidth;
firsty = e.pageY * zoomy/window.innerHeight; firsty = e.pageY * zoomy / window.innerHeight;
firstx += xvb; firstx += xvb;
firsty += yvb; firsty += yvb;
//conveerting the id to an actual thing //conveerting the id to an actual thing
name = "#"+selected; name = "#" + selected;
//beeing sure we get the corect attributes //beeing sure we get the corect attributes
//circle have 'cx' and 'cy' //circle have 'cx' and 'cy'
//and rectangles have 'x' and 'y' //and rectangles have 'x' and 'y'
if ($(name).attr("class")=="light"){ if ($(name).attr("class") == "light") {
fx = parseFloat($(name).attr("cx")); fx = parseFloat($(name).attr("cx"));
fy = parseFloat($(name).attr("cy")); fy = parseFloat($(name).attr("cy"));
} } else {
else{
fx = parseFloat($(name).attr("x")); fx = parseFloat($(name).attr("x"));
fy = parseFloat($(name).attr("y")); fy = parseFloat($(name).attr("y"));
} }
@ -147,7 +143,7 @@ $("body").on("mousedown touchstart",function(e){
//thefunction that tranfers the data from the event to our set_position function //thefunction that tranfers the data from the event to our set_position function
function drag(e,selected){ function drag(e, selected) {
//the name //the name
let name = "#" + selected; let name = "#" + selected;
@ -156,17 +152,17 @@ function drag(e,selected){
let x = e.pageX; let x = e.pageX;
let y = e.pageY; let y = e.pageY;
x *= zoomx/window.innerWidth; x *= zoomx / window.innerWidth;
y *= zoomy/window.innerHeight; y *= zoomy / window.innerHeight;
//updating positions //updating positions
set_position(name,x,y); set_position(name, x, y);
} }
//our main place to change things //our main place to change things
function set_position(name,x,y){ function set_position(name, x, y) {
var obj,objx,objy; let obj, objx, objy;
obj = "#"+selected; obj = "#" + selected;
x = parseFloat(x); x = parseFloat(x);
y = parseFloat(y); y = parseFloat(y);
@ -176,9 +172,9 @@ function set_position(name,x,y){
if ($(name).attr("class")!="light"){ if ($(name).attr("class") != "light") {
//getting the variables //getting the letiables
obj = "#"+selected; obj = "#" + selected;
objx = parseFloat($(obj).attr("x")); objx = parseFloat($(obj).attr("x"));
objy = parseFloat($(obj).attr("y")); objy = parseFloat($(obj).attr("y"));
@ -193,19 +189,18 @@ function set_position(name,x,y){
//x -= parseFloat($(obj).attr("width")); //x -= parseFloat($(obj).attr("width"));
//y -= parseFloat($(obj).attr("height")); //y -= parseFloat($(obj).attr("height"));
if (snap){ if (snap) {
x = Math.floor(x/80)*80; x = Math.floor(x / 80) * 80;
y = Math.floor(y/80)*80; y = Math.floor(y / 80) * 80;
} }
//console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif) //console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
//setting the new positions //setting the new positions
$(obj).attr("x",(x).toString()); $(obj).attr("x", (x).toString());
$(obj).attr("y",(y).toString()); $(obj).attr("y", (y).toString());
} } else {
else{
//for circles //for circles
//getting the variables //getting the letiables
obj = "#"+selected; obj = "#" + selected;
objx = parseFloat($(obj).attr("cx")); objx = parseFloat($(obj).attr("cx"));
objy = parseFloat($(obj).attr("cy")); objy = parseFloat($(obj).attr("cy"));
@ -220,57 +215,58 @@ function set_position(name,x,y){
//x -= parseFloat($(obj).attr("width")); //x -= parseFloat($(obj).attr("width"));
//y -= parseFloat($(obj).attr("height")); //y -= parseFloat($(obj).attr("height"));
if (snap){ if (snap) {
x = Math.floor(x/80)*80+40; x = Math.floor(x / 80) * 80 + 40;
y = Math.floor(y/80)*80+40; y = Math.floor(y / 80) * 80 + 40;
} }
//console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif) //console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
//setting the new positions //setting the new positions
$(obj).attr("cx",(x).toString()); $(obj).attr("cx", (x).toString());
$(obj).attr("cy",(y).toString()); $(obj).attr("cy", (y).toString());
} }
} }
function add(h,w,color,stroke,id,on){ function add(h, w, color, stroke, id, on) {
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
$(g).attr({ $(g).attr({
width: "100%", width: "100%",
height: "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", x: "50",
y:"50", y: "50",
id: id, id: id,
fill:color, fill: color,
height: h.toString()+"px", height: h.toString() + "px",
width: w.toString()+"px", width: w.toString() + "px",
stroke: stroke, stroke: stroke,
rx:"20", rx: "20",
ry:"20" ry: "20"
}); });
if (on){ if (on) {
$(el).attr("onmousedown","selected='"+id+"';"); $(el).attr("onmousedown", "selected='" + id + "';");
$(el).attr("onmouseup","selected='yay';"); $(el).attr("onmouseup", "selected='yay';");
} }
$(el).attr("stroke-width","4"); $(el).attr("stroke-width", "4");
$(g).append(el); $(g).append(el);
var elem = document.getElementById("svg1"); let elem = document.getElementById("svg1");
elem.appendChild(g); elem.appendChild(g);
return el; return el;
} }
console.log(pieces); console.log(pieces);
setInterval(function(){
for (var i = 0;i < pieces.length;i++){ setInterval(function() {
for (let i = 0; i < pieces.length; i++) {
pieces[i].update(); pieces[i].update();
} }
for (var i = 0;i < lines.length;i++){ for (let i = 0; i < lines.length; i++) {
lines[i].update(); lines[i].update();
} }
for (var i = 0;i < pins.length;i++){ for (let i = 0; i < pins.length; i++) {
pins[i].update(); pins[i].update();
} }
},0.001); }, 0.001);

50
scripts/nand.js
View file

@ -1,72 +1,72 @@
function nand(id){ function nand(id) {
this.id = id; this.id = id;
this.name = "#" + this.id; this.name = "#" + this.id;
this.rep = add(80,80,"green","black",this.id,true); this.rep = add(80, 80, "green", "black", this.id, true);
this.pin1 = new pin(0); this.pin1 = new pin(0);
this.pin2 = new pin(0); this.pin2 = new pin(0);
this.o = new pin(1); this.o = new pin(1);
this.o.nei = this; this.o.nei = this;
//this.text = new text(this,"Or-gate"); //this.text = new text(this,"Or-gate");
this.activation = function(){ this.activation = function() {
if (!(this.pin1.val && this.pin2.val)){ if (!(this.pin1.val && this.pin2.val)) {
return true; return true;
} }
return false; return false;
} }
this.x = function(){ this.x = function() {
let name = "#" + this.id; let name = "#" + this.id;
return parseFloat($(name).attr("x")); return parseFloat($(name).attr("x"));
} }
this.y = function(){ this.y = function() {
let name = "#" + this.id; let name = "#" + this.id;
//console.log("y"+parseFloat($(name).attr("y"))); //console.log("y"+parseFloat($(name).attr("y")));
return parseFloat($(name).attr("y")); return parseFloat($(name).attr("y"));
} }
//design //design
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
$(g).attr({ $(g).attr({
width: "100%", width: "100%",
height: "100%" height: "100%"
}); });
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
x: "50", x: "50",
y: "50", y: "50",
id: (id+"-skin"), id: (id + "-skin"),
width:"80", width: "80",
height:"80" height: "80"
}); });
var img = $(document.createElement('img')).attr({ let img = $(document.createElement('img')).attr({
height:"80", height: "80",
width:"80", width: "80",
src:"textures/gates/nand_gate.jpg" src: "textures/gates/nand_gate.jpg"
}); });
var iDiv = document.createElement("div"); let iDiv = document.createElement("div");
$(iDiv).append(img); $(iDiv).append(img);
this.skin = skin; this.skin = skin;
this.img = img; this.img = img;
$(skin).append(iDiv); $(skin).append(iDiv);
//noname(this); //noname(this);
$(g).append(skin); $(g).append(skin);
var elem = document.getElementById("svg1"); let elem = document.getElementById("svg1");
elem.appendChild(g); elem.appendChild(g);
//updating //updating
this.update = function(){ this.update = function() {
//the main object and his pins //the main object and his pins
let x = this.x(); let x = this.x();
let y = this.y(); let y = this.y();
this.pin1.set(x-20,y); this.pin1.set(x - 20, y);
this.pin2.set(x-20,y+60); this.pin2.set(x - 20, y + 60);
this.o.set(x+80,y+30); this.o.set(x + 80, y + 30);
//and the skin //and the skin
var name = "#"+this.id+"-skin"; let name = "#" + this.id + "-skin";
var skin = $(name); let skin = $(name);
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString()); skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString()); skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
} }
pieces[pieces.length] = this; pieces[pieces.length] = this;

65
scripts/nand3.js
View file

@ -1,93 +1,92 @@
function nand3(id){ function nand3(id) {
this.id = id; this.id = id;
this.rep = add(80,80,"blue","black",this.id,false); this.rep = add(80, 80, "blue", "black", this.id, false);
this.pin1 = new pin(0); this.pin1 = new pin(0);
this.pin2 = new pin(0); this.pin2 = new pin(0);
this.pin3 = new pin(0); this.pin3 = new pin(0);
this.o = new pin(1); this.o = new pin(1);
this.o.nei = this; this.o.nei = this;
this.activation = function(){ this.activation = function() {
if (!((this.pin1.val && this.pin2.val)&&this.pin3.val)){ if (!((this.pin1.val && this.pin2.val) && this.pin3.val)) {
return true; return true;
} }
return false; return false;
} }
this.x = function(){ this.x = function() {
let name = "#" + this.id; let name = "#" + this.id;
return parseFloat($(name).attr("x")); return parseFloat($(name).attr("x"));
} }
this.y = function(){ this.y = function() {
let name = "#" + this.id; let name = "#" + this.id;
//console.log("y"+parseFloat($(name).attr("y"))); //console.log("y"+parseFloat($(name).attr("y")));
return parseFloat($(name).attr("y")); return parseFloat($(name).attr("y"));
} }
//design //design
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
$(g).attr({ $(g).attr({
width: "100%", width: "100%",
height: "100%" height: "100%"
}); });
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
x: "50", x: "50",
y: "50", y: "50",
id: (id+"-skin"), id: (id + "-skin"),
width:"80", width: "80",
height:"80" height: "80"
}); });
var img = $(document.createElement('img')).attr({ let img = $(document.createElement('img')).attr({
height:"72", height: "72",
width:"72", width: "72",
src:"textures/gates/nand_gate.jpg" src: "textures/gates/nand_gate.jpg"
}); });
var iDiv = document.createElement("div"); let iDiv = document.createElement("div");
$(iDiv).append(img); $(iDiv).append(img);
this.skin = skin; this.skin = skin;
this.img = img; this.img = img;
$(skin).append(iDiv); $(skin).append(iDiv);
//noname(this); //noname(this);
$(g).append(skin); $(g).append(skin);
var elem = document.getElementById("svg1"); let elem = document.getElementById("svg1");
elem.appendChild(g); elem.appendChild(g);
//updating //updating
this.update = function(){ this.update = function() {
//the main object and his pins //the main object and his pins
let x = this.x(); let x = this.x();
let y = this.y(); let y = this.y();
this.pin1.set(x-20,y); this.pin1.set(x - 20, y);
this.pin2.set(x-20,y+60); this.pin2.set(x - 20, y + 60);
this.pin3.set(x-20,y+30); this.pin3.set(x - 20, y + 30);
this.o.set(x+80,y+30); this.o.set(x + 80, y + 30);
//and the skin //and the skin
var name = "#"+this.id+"-skin"; let name = "#" + this.id + "-skin";
var skin = $(name); let skin = $(name);
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString()); skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString()); skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
} }
pieces[pieces.length] = this; pieces[pieces.length] = this;
clk(this,[this.pin1,this.pin2,this.pin3,this.o]); clk(this, [this.pin1, this.pin2, this.pin3, this.o]);
} }
function clk(ob,arr){ function clk(ob, arr) {
var rep = ob.rep; $((ob.img)).on("mousedown touchstart", function(e) {
$((ob.img)).on("mousedown touchstart",function(e){
e.preventDefault(); e.preventDefault();
var svg = document.getElementById("svg1"); let svg = document.getElementById("svg1");
$(svg).append(ob.rep); $(svg).append(ob.rep);
$(svg).append($(ob.pin1.rep)); $(svg).append($(ob.pin1.rep));
for (var i = 0; i < arr.length;i++){ for (let i = 0; i < arr.length; i++) {
$(svg).append($(i.rep)); $(svg).append($(i.rep));
} }
$(svg).append($(ob.skin)); $(svg).append($(ob.skin));
selected = ob.id; selected = ob.id;
}); });
$((ob.img)).on("mouseup touchend",function(e){ $((ob.img)).on("mouseup touchend", function() {
selected = "yay"; selected = "yay";
}); });
} }

63
scripts/not.js
View file

@ -1,94 +1,87 @@
function not(id){ function not(id) {
this.id = id; this.id = id;
this.name = "#" + this.id; this.name = "#" + this.id;
this.rep = add(80,80,"green","black",this.id,true); this.rep = add(80, 80, "green", "black", this.id, true);
this.pin1 = new pin(0); this.pin1 = new pin(0);
this.o = new pin(1); this.o = new pin(1);
this.o.nei = this; this.o.nei = this;
//this.text = new text(this,"Or-gate"); //this.text = new text(this,"Or-gate");
this.activation = function(){ this.activation = function() {
if (!this.pin1.val){ if (!this.pin1.val) {
return true; return true;
} }
return false; return false;
} }
this.x = function(){ this.x = function() {
let name = "#" + this.id; let name = "#" + this.id;
return parseFloat($(name).attr("x")); return parseFloat($(name).attr("x"));
} }
this.y = function(){ this.y = function() {
let name = "#" + this.id; let name = "#" + this.id;
//console.log("y"+parseFloat($(name).attr("y"))); //console.log("y"+parseFloat($(name).attr("y")));
return parseFloat($(name).attr("y")); return parseFloat($(name).attr("y"));
} }
//design //design
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
$(g).attr({ $(g).attr({
width: "100%", width: "100%",
height: "100%" height: "100%"
}); });
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
x: "50", x: "50",
y: "50", y: "50",
id: (id+"-skin"), id: (id + "-skin"),
width:"80", width: "80",
height:"80" height: "80"
}); });
var img = $(document.createElement('img')).attr({ let img = $(document.createElement('img')).attr({
height:"80", height: "80",
width:"80", width: "80",
src:"textures/gates/not_gate.jpg" src: "textures/gates/not_gate.jpg"
}); });
var iDiv = document.createElement("div"); let iDiv = document.createElement("div");
$(iDiv).append(img); $(iDiv).append(img);
this.skin = skin; this.skin = skin;
this.img = img; this.img = img;
$(skin).append(iDiv); $(skin).append(iDiv);
//noname(this); //noname(this);
$(g).append(skin); $(g).append(skin);
var elem = document.getElementById("svg1"); let elem = document.getElementById("svg1");
elem.appendChild(g); elem.appendChild(g);
//updating //updating
this.update = function(){ this.update = function() {
//the main object and his pins //the main object and his pins
let x = this.x(); let x = this.x();
let y = this.y(); let y = this.y();
this.pin1.set(x-20,y+30); this.pin1.set(x - 20, y + 30);
this.o.set(x+80,y+30); this.o.set(x + 80, y + 30);
//and the skin //and the skin
var name = "#"+this.id+"-skin"; let name = "#" + this.id + "-skin";
var skin = $(name); let skin = $(name);
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString()); skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString()); skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
} }
pieces[pieces.length] = this; pieces[pieces.length] = this;
addclk11(this); addclk11(this);
} }
function addclk11(ob){ function addclk11(ob) {
var rep = ob.rep; $((ob.img)).on("mousedown touchstart", function(e) {
$((ob.img)).on("mousedown touchstart",function(e){
e.preventDefault(); e.preventDefault();
var svg = document.getElementById("svg1"); let svg = document.getElementById("svg1");
$(svg).append(ob.rep); $(svg).append(ob.rep);
$(svg).append($(ob.pin1.rep)); $(svg).append($(ob.pin1.rep));
$(svg).append($(ob.o.rep)); $(svg).append($(ob.o.rep));
$(svg).append($(ob.skin)); $(svg).append($(ob.skin));
selected = ob.id; selected = ob.id;
}); });
$((ob.img)).on("mouseup touchend",function(e){ $((ob.img)).on("mouseup touchend", function() {
selected = "yay"; selected = "yay";
}); });
} }

62
scripts/or.js
View file

@ -1,86 +1,74 @@
function or(id){ function or(id) {
this.id = id; this.id = id;
this.name = "#" + this.id; this.name = "#" + this.id;
this.rep = add(80,80,"green","black",this.id,true); this.rep = add(80, 80, "green", "black", this.id, true);
this.pin1 = new pin(0); this.pin1 = new pin(0);
this.pin2 = new pin(0); this.pin2 = new pin(0);
this.o = new pin(1); this.o = new pin(1);
this.o.nei = this; this.o.nei = this;
//this.text = new text(this,"Or-gate"); //this.text = new text(this,"Or-gate");
this.activation = function(){ this.activation = function() {
if (this.pin1.val || this.pin2.val){ if (this.pin1.val || this.pin2.val) {
return true; return true;
} }
return false; return false;
} }
this.x = function(){ this.x = function() {
let name = "#" + this.id; let name = "#" + this.id;
return parseFloat($(name).attr("x")); return parseFloat($(name).attr("x"));
} }
this.y = function(){ this.y = function() {
let name = "#" + this.id; let name = "#" + this.id;
//console.log("y"+parseFloat($(name).attr("y"))); //console.log("y"+parseFloat($(name).attr("y")));
return parseFloat($(name).attr("y")); return parseFloat($(name).attr("y"));
} }
//design //design
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
$(g).attr({ $(g).attr({
width: "100%", width: "100%",
height: "100%" height: "100%"
}); });
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
x: "50", x: "50",
y: "50", y: "50",
id: (id+"-skin"), id: (id + "-skin"),
width:"80", width: "80",
height:"80" height: "80"
}); });
var img = $(document.createElement('img')).attr({ let img = $(document.createElement('img')).attr({
height:"80", height: "80",
width:"80", width: "80",
src:"textures/gates/or_gate.jpg" src: "textures/gates/or_gate.jpg"
}); });
var iDiv = document.createElement("div"); let iDiv = document.createElement("div");
$(iDiv).append(img); $(iDiv).append(img);
this.skin = skin; this.skin = skin;
this.img = img; this.img = img;
$(skin).append(iDiv); $(skin).append(iDiv);
//noname(this); //noname(this);
$(g).append(skin); $(g).append(skin);
var elem = document.getElementById("svg1"); let elem = document.getElementById("svg1");
elem.appendChild(g); elem.appendChild(g);
//updating //updating
this.update = function(){ this.update = function() {
//the main object and his pins //the main object and his pins
let x = this.x(); let x = this.x();
let y = this.y(); let y = this.y();
this.pin1.set(x-20,y); this.pin1.set(x - 20, y);
this.pin2.set(x-20,y+60); this.pin2.set(x - 20, y + 60);
this.o.set(x+80,y+30); this.o.set(x + 80, y + 30);
//and the skin //and the skin
var name = "#"+this.id+"-skin"; let name = "#" + this.id + "-skin";
var skin = $(name); let skin = $(name);
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString()); skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString()); skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
} }
pieces[pieces.length] = this; pieces[pieces.length] = this;
addclk(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));
});
}
*/

67
scripts/pins.js
View file

@ -1,67 +1,64 @@
var count = 0; let count = 0;
var pins = []; let pins = [];
var sels = "yay"; let sels = "yay";
var sele = "yay"; let sele = "yay";
var num; let num;
function pin(type){
function pin(type) {
this.state = true; this.state = true;
this.nei = "yay"; this.nei = "yay";
this.val = false; this.val = false;
if (type == 0){ if (type == 0) {
this.type = true; this.type = true;
color = "black"; color = "black";
} } else {
else{
this.type = false; this.type = false;
color = "red"; color = "red";
} }
this.update = function(){ this.update = function() {
if (this.nei != "yay"){ if (this.nei != "yay") {
if (!(this.type)){ if (!(this.type)) {
this.val = this.nei.activation(); this.val = this.nei.activation();
} } else {
else{
this.val = this.nei.val; this.val = this.nei.val;
} }
} }
if (this.val){ if (this.val) {
$((this.rep)).attr("fill","red"); $((this.rep)).attr("fill", "red");
} } else {
else{ $((this.rep)).attr("fill", "yellow");
$((this.rep)).attr("fill","yellow");
} }
} }
this.id = count.toString(); this.id = count.toString();
this.name = "#"+this.id; this.name = "#" + this.id;
this.rep = add(20,20,"yellow","black",this.id,false); this.rep = add(20, 20, "yellow", "black", this.id, false);
clicked(this); clicked(this);
count++; count++;
this.name = "#"+this.id; this.name = "#" + this.id;
this.set = function(x,y){ this.set = function(x, y) {
$(this.name).attr("x",x.toString()); $(this.name).attr("x", x.toString());
$(this.name).attr("y",y.toString()); $(this.name).attr("y", y.toString());
} }
pins[pins.length] = this; pins[pins.length] = this;
this.num = pins.length-1; this.num = pins.length - 1;
} }
function clicked(ob){ function clicked(ob) {
$(ob.rep).on("click touchstart",function(e){ $(ob.rep).on("click touchstart", function(e) {
e.preventDefault(); e.preventDefault();
if (ob.type == true){ if (ob.type == true) {
sels = ob; sels = ob;
} } else {
else{
sele = ob; sele = ob;
} }
console.log("click"+sels+sele+ob.type); console.log("click" + sels + sele + ob.type);
if ((sels!="yay")&&(sele!="yay")){ if ((sels != "yay") && (sele != "yay")) {
console.log("step 2"); console.log("step 2");
if ((sels.state)){ if ((sels.state)) {
sels.nei = sele; sels.nei = sele;
sels.state = false; sels.state = false;
sele.state = false; sele.state = false;
a = new edge(sels,sele); a = new edge(sels, sele);
sels = "yay"; sels = "yay";
sele = "yay"; sele = "yay";
console.log("end"); console.log("end");

29
scripts/text.js
View file

@ -1,39 +1,40 @@
var t_count = 0; let t_count = 0;
function text(parent,value){
//variables function text(parent, value) {
//letiables
this.parent = parent; this.parent = parent;
this.val = value; this.val = value;
this.id = t_count.toString() + "text"; this.id = t_count.toString() + "text";
t_count++; t_count++;
this.name = "#"+this.id; this.name = "#" + this.id;
//adding the text to the SVG //adding the text to the SVG
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
$(g).attr({ $(g).attr({
width: "100%", width: "100%",
height: "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", x: "50",
y:"50", y: "50",
id: this.id, id: this.id,
fill:"white", fill: "white",
stroke: "black" stroke: "black"
}); });
$(el).text(value); $(el).text(value);
$(el).attr("class","heavy"); $(el).attr("class", "heavy");
$(g).append(el); $(g).append(el);
var elem = document.getElementById("svg1"); let elem = document.getElementById("svg1");
elem.appendChild(g); elem.appendChild(g);
this.rep = el; this.rep = el;
$((this.rep)).on("click touchstart",function(e){ $((this.rep)).on("click touchstart", function(e) {
e.preventDefault(); e.preventDefault();
}); });
//updating //updating
this.update = function(){ this.update = function() {
$((this.name)).attr("x",(parseFloat($((this.parent)).attr("x"))+15).toString()); $((this.name)).attr("x", (parseFloat($((this.parent)).attr("x")) + 15).toString());
$((this.name)).attr("y",(parseFloat($((this.parent)).attr("y"))+25).toString()); $((this.name)).attr("y", (parseFloat($((this.parent)).attr("y")) + 25).toString());
} }
//beeing sure it would be updated //beeing sure it would be updated

52
scripts/xor.js
View file

@ -1,73 +1,73 @@
function xor(id){ function xor(id) {
this.id = id; this.id = id;
this.name = "#" + this.id; this.name = "#" + this.id;
this.rep = add(80,80,"green","black",this.id,true); this.rep = add(80, 80, "green", "black", this.id, true);
this.pin1 = new pin(0); this.pin1 = new pin(0);
this.pin2 = new pin(0); this.pin2 = new pin(0);
this.o = new pin(1); this.o = new pin(1);
this.o.nei = this; this.o.nei = this;
//this.text = new text(this,"Or-gate"); //this.text = new text(this,"Or-gate");
this.activation = function(){ this.activation = function() {
if (!(this.pin1.val && this.pin2.val) && (this.pin1.val || this.pin2.val)){ if (!(this.pin1.val && this.pin2.val) && (this.pin1.val || this.pin2.val)) {
return true; return true;
} }
return false; return false;
} }
this.x = function(){ this.x = function() {
let name = "#" + this.id; let name = "#" + this.id;
return parseFloat($(name).attr("x")); return parseFloat($(name).attr("x"));
} }
this.y = function(){ this.y = function() {
let name = "#" + this.id; let name = "#" + this.id;
//console.log("y"+parseFloat($(name).attr("y"))); //console.log("y"+parseFloat($(name).attr("y")));
return parseFloat($(name).attr("y")); return parseFloat($(name).attr("y"));
} }
//design //design
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
$(g).attr({ $(g).attr({
width: "100%", width: "100%",
height: "100%" height: "100%"
}); });
var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({ let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
x: "50", x: "50",
y: "50", y: "50",
id: (id+"-skin"), id: (id + "-skin"),
width:"80", width: "80",
height:"80" height: "80"
}); });
var img = $(document.createElement('img')).attr({ let img = $(document.createElement('img')).attr({
height:"80", height: "80",
width:"80", width: "80",
src:"textures/gates/xor.jpg" src: "textures/gates/xor.jpg"
}); });
var iDiv = document.createElement("div"); let iDiv = document.createElement("div");
$(iDiv).append(img); $(iDiv).append(img);
this.skin = skin; this.skin = skin;
this.img = img; this.img = img;
$(skin).append(iDiv); $(skin).append(iDiv);
//noname(this); //noname(this);
$(g).append(skin); $(g).append(skin);
var elem = document.getElementById("svg1"); let elem = document.getElementById("svg1");
elem.appendChild(g); elem.appendChild(g);
//updating //updating
this.update = function(){ this.update = function() {
//the main object and his pins //the main object and his pins
let x = this.x(); let x = this.x();
let y = this.y(); let y = this.y();
this.pin1.set(x-20,y); this.pin1.set(x - 20, y);
this.pin2.set(x-20,y+60); this.pin2.set(x - 20, y + 60);
this.o.set(x+80,y+30); this.o.set(x + 80, y + 30);
//and the skin //and the skin
var name = "#"+this.id+"-skin"; let name = "#" + this.id + "-skin";
var skin = $(name); let skin = $(name);
skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString()); skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString()); skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
} }
pieces[pieces.length] = this; pieces[pieces.length] = this;
clk(this,[this.pin1,this.pin2,this.output]); clk(this, [this.pin1, this.pin2, this.output]);
} }

12
st.css
View file

@ -1,14 +1,16 @@
body { body {
background-color:rgba(0,0,0,0.7); background-color: rgba(0, 0, 0, 0.7);
/* /*
background-image: url("bg.jpg"); background-image: url("bg.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
*/ */
margin:0; margin: 0;
} }
.heavy { font: bold 20px sans-serif; } .heavy {
font: bold 20px sans-serif;
}
img { img {
border-radius: 17px; border-radius: 17px;
@ -17,6 +19,6 @@ img {
} }
#butt { #butt {
rx: 10; rx: 5;
ry: 10; ry: 5;
} }