Add button to simulate machine

index.html

@@ -215,9 +215,11 @@
 
         <button class="btn action-button" id="openBtn"><i class="fa fa-folder-open"></i> Öffnen</button>
 
-        <button class="btn action-button" id="importBtn"><i class="fa fa-upload"></i> Importieren</button>
+        <button class="btn action-button" id="importBtn"><i class="fa fa-file-import"></i> Importieren</button>
 
-        <button class="btn action-button" id="exportBtn"><i class="fa fa-download"></i> Exportieren</button>
+        <button class="btn action-button" id="exportBtn"><i class="fa fa-file-export"></i> Exportieren</button>
+
+        <button class="btn action-button" id="simulateBtn"><i class="fa fa-play"></i> Simulieren</button>
 
     </div>
 

js/components/state.js

@@ -6,7 +6,7 @@ class State {
         this.y = y;
         this.mouseOffsetX = 0;
         this.mouseOffsetY = 0;
-        this.color = '#f0f';
+        this.color = '#fff';
         this.isActive = false;
         this.activeTime = 0;
         this.isAcceptState = false;

js/export/export.js

@@ -58,6 +58,7 @@ function parseFromJson(json) {
 
     doc.states = doc.states.map(state => Object.assign(new State(0, 0), state));
     doc.connections = doc.connections.map(connection => {
+        console.log(connection.type);
         switch(connection.type) {
             case 'Connection':
                 connection = Object.assign(new Connection(null, null), connection);
@@ -73,9 +74,10 @@ function parseFromJson(json) {
 
                 break;
             case 'StartConnection':
-                connection = Object.assign(new StartConnection(null, {x: 0, y: 0}), connection);
+                connection = Object.assign(new StartConnection(), connection);
 
                 connection.state = doc.states.find(state => state.id === connection.state);
+                console.log(connection.state);
 
                 break;
         }

js/menu.js

@@ -86,6 +86,16 @@ modalImport.addFooterBtn('Laden', 'btn', () => {
     }
 });
 
+const modalSimulate = new tingle.modal({
+    footer: true,
+});
+modalSimulate.setContent('<h3>Maschine simulieren</h3> <label for="simulationInput">Eingabe</label> <input type="text" id="simulationInput">');
+modalSimulate.addFooterBtn('Simulation starten', 'btn', () => {
+    modalSimulate.close();
+    const input = document.getElementById('simulationInput').value;
+    simulate(input);
+});
+
 document.getElementById('saveBtn').addEventListener('click', () => {
     if(activeDocument === null) {
         return;
@@ -109,3 +119,7 @@ document.getElementById('importBtn').addEventListener('click', () => {
 document.getElementById('exportBtn').addEventListener('click', () => {
     modalExport.open();
 });
+
+document.getElementById('simulateBtn').addEventListener('click', () => {
+    modalSimulate.open();
+});

js/simulate.js

@@ -3,7 +3,7 @@ let singleCharMode = true;
 let simulationStepDuration = 500;
 
 function simulate(word) {
-    if(activeDocument !== null) {
+    if(activeDocument === null) {
         return false;
     }
 
@@ -24,6 +24,8 @@ function simulate(word) {
     startConnections.forEach(connection => animations.push(new ConnectionAnimation(connection)));
     simulationStates = startConnections.map(conn => conn.state);
 
+    // TODO: Check if there are no connections and throw error message to user
+
     setTimeout(() => {
         simulationStates.forEach(state => {
             state.isActive = true;
@@ -37,6 +39,8 @@ function simulate(word) {
                 return;
             }
 
+            // TODO: Check if there are any possibilities left or stop run
+
             simulationStep(steps[stepIndex]);
             stepIndex++;
         }, simulationStepDuration * 4);