Files organized

index.html

@@ -287,7 +287,10 @@
     <script src="js/data/data.js"></script>
     <script src="js/utilities/organizer.js"></script>
     <script src="js/utilities/script.js"></script>
+    <script src="js/utilities/init.js"></script>
     <script src="js/utilities/canvas.js"></script>
+    <script src="js/utilities/colors.js"></script>
+
     <script src="js/components/node.js"></script>
     <script src="js/components/point.js"></script>
     <script src="js/components/wire.js"></script>

js/components/alu.js

@@ -1,12 +1,11 @@
 class Alu extends Component {
-  constructor(x, y, isAdd, defaultValue = false) {
+  constructor(x, y, isAdd) {
     super(x, y, 100, 150, isAdd ? "Add" : "Alu", 2.5, 2);
     this.isAdd = isAdd;
     this.wires = [];
     this.inputs = [];
     this.outputs = [];
     this.additionalInput;
-    this.defaultValue = defaultValue;
     this.generateIO();
   }
 
@@ -37,7 +36,7 @@ class Alu extends Component {
       new Node(
         this.x,
         this.y + 120,
-        this.defaultValue,
+        false,
         this.additionalInput ? "right" : "top"
       )
     );
@@ -58,7 +57,6 @@ class Alu extends Component {
     let inp1Val = this.inputs[0].value;
     let inp1 = binToDec(inp1Val);
     let inp2Val = this.inputs[1].value;
-    // let isAddress = inp2Val[1] == "x";
     let inp2 = binToDec(inp2Val);
     if (this.isAdd) {
       let val = dectoBin(inp1 + inp2, 32);

js/components/component.js

@@ -15,24 +15,27 @@ class Component {
     this.wires = wires;
   }
 
-  updateDontCare() {}
+  updateDontCare() {
+    null;
+  }
+
   updateWires() {
     for (let i = 0; i < this.wires.length; i++) {
       this.wires[i].update();
     }
   }
 
   drawText() {
-    fill(0);
+    fill(colors.BLACK);
     noStroke();
     textSize(15);
     text(
       this.text,
       this.x + this.width / this.textXOffset,
       this.y + this.height / this.textYOffset
     );
-    fill(255);
-    stroke(0);
+    fill(colors.WHITE);
+    stroke(colors.BLACK);
     strokeWeight(2);
   }
 

js/components/control.js

@@ -24,13 +24,11 @@ class Control extends Component {
     // Since there is no way to determinate weather if this signal X or not with combinational logic,
     // I reimplement this with brute force way. Sorry for this mess.
 
-    this.outputs[0].changeValue(opCode == "000011"); //jal
-
+    this.outputs[0].changeValue(opCode == "000011"); // jal
     this.outputs[1].changeValue(opCode == "000000"); // regdest
-    this.outputs[2].changeValue(opCode == "000010" || opCode == "000011"); //jump
-
-    this.outputs[3].changeValue(opCode == "000100"); //branch
-    this.outputs[4].changeValue(opCode == "100011"); //memread
+    this.outputs[2].changeValue(opCode == "000010" || opCode == "000011"); // jump
+    this.outputs[3].changeValue(opCode == "000100"); // branch
+    this.outputs[4].changeValue(opCode == "100011"); // memread
     this.outputs[5].changeValue(opCode == "100011"); // memtoreg
     this.outputs[6].changeValue(
       ["000000"].includes(opCode)
@@ -40,30 +38,30 @@ class Control extends Component {
         : opCode == "000100"
         ? "01"
         : "11" //X
-    ); //aluop
-    this.outputs[7].changeValue(opCode == "101011"); //memwrite
-    this.outputs[8].changeValue(opCode != "000000" && opCode != "000100"); //alusrc
+    ); // aluop
+    this.outputs[7].changeValue(opCode == "101011"); // memwrite
+    this.outputs[8].changeValue(opCode != "000000" && opCode != "000100"); // alusrc
     this.outputs[9].changeValue(
       !["101011", "000010", "000100"].includes(opCode)
-    ); //regwrite
+    ); // regwrite
   }
 
   drawText() {
-    fill(5, 176, 239);
+    fill(colors.SKY);
     noStroke();
     textSize(15);
     text(
       this.text,
       this.x + this.width / this.textXOffset,
       this.y + this.height / this.textYOffset
     );
-    fill(255);
-    stroke(0);
+    fill(colors.WHITE);
+    stroke(colors.BLACK);
     strokeWeight(2);
   }
 
   show() {
-    stroke(5, 176, 239);
+    stroke(colors.SKY);
     rect(this.x, this.y, this.width, this.height, 50);
   }
 }

js/components/node.js

@@ -3,7 +3,7 @@ class Node {
     this.x = x;
     this.y = y;
     this.value = value;
-    this.colorValue = color(255, 0, 0);
+    this.colorValue = colors.RED;
     this.isPopupOpen = false;
     this.popUpDirection = popUpDirection;
     this.rollover = false;
@@ -45,12 +45,12 @@ class Node {
     this.value = value;
     this.hasValue = value !== false && value !== true;
     this.colorValue = this.isDontCare
-      ? color(0, 255, 255)
+      ? colors.LIGHTBLUE
       : this.hasValue
-      ? color(0, 0, 255)
+      ? colors.DARKBLUE
       : value
-      ? color(0, 255, 0)
-      : color(255, 0, 0);
+      ? colors.GREEN
+      : colors.RED;
   }
 
   addNodeToValueTable() {
@@ -90,7 +90,7 @@ class Node {
     let val = this.value.length > 6 ? binToHex(this.value) : this.value;
     let width = val.length * 8 + (val.length < 8 ? 10 : 0);
     let [x, y] = [0, 0];
-    let [pX, pY] = [0, 0]; // popup target coordinates
+    let [pX, pY] = [0, 0]; // target popup coordinates
 
     switch (this.popUpDirection) {
       case "top":
@@ -119,18 +119,18 @@ class Node {
         break;
     }
 
-    fill(this.isHighlighted ? color(251, 255, 113) : 255);
+    fill(this.isHighlighted ? colors.YELLOW : colors.WHITE);
     rect(x, y, width + 10, 30, 20);
 
-    gradientLine(this.x, this.y, pX, pY, this.colorValue, color(255));
+    gradientLine(this.x, this.y, pX, pY, this.colorValue, colors.WHITE);
     line(this.x, this.y, pX, pY);
 
-    fill(0);
+    fill(colors.BLACK);
     noStroke();
     textSize(13);
     text(val, x + 10, y + 20);
 
-    stroke(0);
+    stroke(colors.BLACK);
     strokeWeight(2);
   }
 
@@ -139,7 +139,7 @@ class Node {
     ellipse(this.x, this.y, 14);
     if (this.isDontCare && !this.hasValue) {
       strokeWeight(1);
-      fill(this.value ? color(0, 255, 0) : color(255, 0, 0));
+      fill(this.value ? colors.GREEN : colors.RED);
       arc(this.x, this.y, 14, 14, HALF_PI, PI + HALF_PI, PIE);
     }
     strokeWeight(2);

js/components/point.js

@@ -1,13 +1,16 @@
 class Point {
-  constructor(x, y, r = 10) {
+  constructor(x, y, clr = colors.BLACK) {
     this.x = x;
     this.y = y;
-    this.r = r;
+    this.r = 12;
+    this.color = clr;
   }
 
   draw() {
-    fill(0);
+    noStroke();
+    fill(this.color);
     ellipse(this.x, this.y, this.r);
     noFill();
+    stroke(colors.BLACK);
   }
 }

js/components/wire.js

@@ -27,15 +27,14 @@ class Wire {
 
   drawText() {
     fill(this.wireColor);
-    // noStroke();
     textSize(13);
     text(
       this.text,
       this.startNode.x + this.textXOffset,
       this.startNode.y + this.textYOffset
     );
     noFill();
-    stroke(0);
+    stroke(colors.BLACK);
     strokeWeight(2);
   }
 
@@ -46,7 +45,7 @@ class Wire {
           this.startNode.y,
           this.endNode.x,
           this.endNode.y,
-          color(0),
+          colors.BLACK,
           this.wireColor
         )
       : stroke(this.wireColor);
@@ -56,7 +55,7 @@ class Wire {
     vertex(this.startNode.x + (this.backwards ? 0 : 25), this.endNode.y);
     vertex(this.endNode.x, this.endNode.y);
     endShape();
-    stroke(0);
+    stroke(colors.BLACK);
     this.drawText();
   }
 }