Fucking javascript bastard :gun:

static/scripts/graph.js

@@ -1,69 +1,52 @@
-var colors = ["red", "green", "yellow", "blue", "pink", "orange", "purple"];
-var ws;
+define(["three", "anders_briegel", "websocket"], function(three, websocket) {
+    return {
 
-function connectToServer() {
-    ws = new WebSocket("ws://localhost:5000");
-    ws.onopen = function()
-    {
-        message.innerHTML = "Connected to server.";
-        message.className = "visible";
-    };
+        colors: ["red", "green", "yellow", "blue", "pink", "orange", "purple"],
 
-    ws.onerror = function(err)
-    {
-        message.innerHTML = "Could not connect to server.";
-        message.className = "visible";
-    };
-     
-    ws.onmessage = function (evt) 
-    { 
-        console.log("Received update");
-       var new_state = JSON.parse(evt.data);
-       vops = new_state.vops;
-       ngbh = new_state.ngbh;
-       meta = new_state.meta;
-       updateScene();
-    };
-     
-    ws.onclose = function()
-    { 
-        message.innerHTML = "Connection to server lost. <a href='#' onclick='javascript:connect_to_server()'>Reconnect</a>.";
-        message.className = "visible";
-    };
-}
+        hookEvents: function() {
+            websocket.connect(this.update);
+        },
+
+        update : function(json){
+            anders_briegel.vops = json.vops;
+            anders_briegel.ngbh = json.ngbh;
+            anders_briegel.meta = json.meta;
+            this.updateScene();
+        },
 
-function updateScene() {
-    var oldState = scene.getObjectByName("graphstate");
-    scene.remove(oldState);
-    oldState = null;
-   
-    var geometry = new THREE.Geometry();
-    for (var i in abj.vops) {
-        var vop = abj.vops[i];
-        var pos = abj.meta[i].position;
-        var vertex = new THREE.Vector3(pos.x, pos.y, pos.z);
-        geometry.vertices.push(vertex);
-        geometry.colors[i] = new THREE.Color(colors[abj.vops[i] % colors.length]);
-    }
+        updateScene: function() {
+            var oldState = scene.getObjectByName("graphstate");
+            scene.remove(oldState);
+            oldState = null;
 
-    var edges = new THREE.Object3D();
-    var my_edges = abj.edgelist();
-    for (i=0; i < my_edges.length; ++i) {
-        var edge = my_edges[i];
-        var start = abj.meta[edge[0]].position;
-        var startpos = new THREE.Vector3(start[0], start[1], start[2]);
-        var end = abj.meta[edge[1]].position;
-        var endpos = new THREE.Vector3(end[0], end[1], end[2]);
-        var newEdge = makeCurve(startpos, endpos);
-        edges.add(newEdge);
-    }
+            var geometry = new THREE.Geometry();
+            for (var i in abj.vops) {
+                var vop = abj.vops[i];
+                var pos = abj.meta[i].position;
+                var vertex = new THREE.Vector3(pos.x, pos.y, pos.z);
+                geometry.vertices.push(vertex);
+                geometry.colors[i] = new THREE.Color(colors[abj.vops[i] % colors.length]);
+            }
 
-    var particles = new THREE.Points(geometry, materials.qubit);
-    var newState = new THREE.Object3D();
-    newState.name = "graphstate";
-    newState.add(particles);
-    newState.add(edges);
-    scene.add(newState);
-    render();
-}
+            var edges = new THREE.Object3D();
+            var my_edges = abj.edgelist();
+            for (i = 0; i < my_edges.length; ++i) {
+                var edge = my_edges[i];
+                var start = abj.meta[edge[0]].position;
+                var startpos = new THREE.Vector3(start[0], start[1], start[2]);
+                var end = abj.meta[edge[1]].position;
+                var endpos = new THREE.Vector3(end[0], end[1], end[2]);
+                var newEdge = makeCurve(startpos, endpos);
+                edges.add(newEdge);
+            }
 
+            var particles = new THREE.Points(geometry, materials.qubit);
+            var newState = new THREE.Object3D();
+            newState.name = "graphstate";
+            newState.add(particles);
+            newState.add(edges);
+            scene.add(newState);
+            render();
+        }
+    };
+});

static/scripts/main.js

@@ -1,11 +1,7 @@
 // Import modules
-requirejs(["anders_briegel"]);
+requirejs(["anders_briegel", "three", "orbitcontrols", "graph"], init);
 var controls, renderer, raycaster, scene, selection, camera;
 
-// Run on startup
-window.onload = init;
-
-
 // Clear the whole scene
 function makeScene() {
     var myScene = new THREE.Scene();
@@ -32,21 +28,14 @@ function onWindowResize(evt) {
     render();
 }
 
-
-// Called on startup
-function init() {
+function constructDisplay(){
     // Renderer
-    renderer = new THREE.WebGLRenderer({
-        "antialias": true
-    });
+    renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.setClearColor(0xffffff, 1);
     document.querySelector("body").appendChild(renderer.domElement);
     window.addEventListener("resize", onWindowResize, false);
 
-    // Time to load the materials
-    loadMaterials();
-
     // Camera, controls, raycaster
     camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.3, 1000);
     controls = new THREE.OrbitControls(camera);
@@ -54,8 +43,12 @@ function init() {
     controls.rotateSpeed = 0.2;
     camera.position.set(0, 0, 20);
     controls.addEventListener("change", render);
+}
+
 
-    // Run
+// Called on startup
+function init() {
+    constructDisplay();
     scene = makeScene();
     connectToServer();
     render();

static/scripts/websocket_interface.js

@@ -1,34 +0,0 @@
-var ws;
-
-function connect_to_server() {
-    ws = new WebSocket("ws://localhost:5000");
-    ws.onopen = function()
-    {
-        message.innerHTML = "Connected to server.";
-        message.className = "visible";
-    };
-
-    ws.onerror = function(err)
-    {
-        message.innerHTML = "Could not connect to server.";
-        message.className = "visible";
-    };
-     
-    ws.onmessage = function (evt) 
-    { 
-        console.log("Received update");
-       var new_state = JSON.parse(evt.data);
-       vops = new_state.vops;
-       ngbh = new_state.ngbh;
-       meta = new_state.meta;
-       updateScene();
-    };
-     
-    ws.onclose = function()
-    { 
-        message.innerHTML = "Connection to server lost. <a href='#' onclick='javascript:connect_to_server()'>Reconnect</a>.";
-        message.className = "visible";
-    };
-}
-
-