From 82fd2d911f173045a6c316a4893721cf94da54e1 Mon Sep 17 00:00:00 2001
From: Pete Shadbolt <pete.shadbolt@gmail.com>
Date: Wed, 18 May 2016 14:24:45 +0100
Subject: [PATCH] Getting somewhere with requirejs

---
 static/scripts/gui.js       | 44 ++++++++++++++++++++++++++++
 static/scripts/main.js      | 57 ++++---------------------------------
 static/scripts/message.js   |  1 +
 static/scripts/websocket.js | 33 +++++++++++++++++++++
 4 files changed, 84 insertions(+), 51 deletions(-)
 create mode 100644 static/scripts/gui.js
 create mode 100644 static/scripts/message.js
 create mode 100644 static/scripts/websocket.js

diff --git a/static/scripts/gui.js b/static/scripts/gui.js
new file mode 100644
index 0000000..bae3bc9
--- /dev/null
+++ b/static/scripts/gui.js
@@ -0,0 +1,44 @@
+define(["three", "orbitcontrols", "message"], function() {
+    return {
+        construct: function() {
+            this.renderer = new THREE.WebGLRenderer();
+            this.renderer.setSize(window.innerWidth, window.innerHeight);
+            this.renderer.setClearColor(0xffffff, 1);
+            document.querySelector("body").appendChild(this.renderer.domElement);
+            window.addEventListener("resize", this.onWindowResize, false);
+
+            this.makeScene();
+
+            this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.3, 1000);
+            this.controls = new THREE.OrbitControls(this.camera);
+            this.controls.center.set(0, 0, 0);
+            this.controls.rotateSpeed = 0.2;
+            this.camera.position.set(0, 0, 20);
+            this.controls.addEventListener("change", this.render);
+        },
+
+        // Someone resized the window
+        onWindowResize: function(evt) {
+            this.camera.aspect = window.innerWidth / window.innerHeight;
+            this.camera.updateProjectionMatrix();
+            this.renderer.setSize(window.innerWidth, window.innerHeight);
+            this.render();
+        },
+
+        // Render the current frame to the screen
+        render: function() {
+            this.renderer.render(this.scene, this.camera);
+        },
+
+        // Make the extra bits of gui
+        makeScene: function() {
+            this.scene = new THREE.Scene();
+            var grid = new THREE.GridHelper(10, 1);
+            grid.rotation.x = Math.PI / 2;
+            grid.setColors(0xdddddd, 0xeeeeee);
+            this.scene.add(grid);
+        }
+
+
+    };
+});
diff --git a/static/scripts/main.js b/static/scripts/main.js
index 77fe2de..111ed0a 100644
--- a/static/scripts/main.js
+++ b/static/scripts/main.js
@@ -1,55 +1,10 @@
 // Import modules
-requirejs(["anders_briegel", "three", "orbitcontrols", "graph"], init);
-var controls, renderer, raycaster, scene, selection, camera;
-
-// Clear the whole scene
-function makeScene() {
-    var myScene = new THREE.Scene();
-    var grid = new THREE.GridHelper(10, 1);
-    grid.rotation.x = Math.PI / 2;
-    grid.setColors(0xdddddd, 0xeeeeee);
-    myScene.add(grid);
-    return myScene;
-}
-
-
-// Render the current frame to the screen
-function render() {
-    requestAnimationFrame(function() {
-        renderer.render(scene, camera);
-    });
-}
-
-// Someone resized the window
-function onWindowResize(evt) {
-    camera.aspect = window.innerWidth / window.innerHeight;
-    camera.updateProjectionMatrix();
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    render();
-}
-
-function constructDisplay(){
-    // Renderer
-    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);
-
-    // Camera, controls, raycaster
-    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.3, 1000);
-    controls = new THREE.OrbitControls(camera);
-    controls.center.set(0, 0, 0);
-    controls.rotateSpeed = 0.2;
-    camera.position.set(0, 0, 20);
-    controls.addEventListener("change", render);
-}
-
+requirejs(["anders_briegel", "gui"], init);
+var ab;
 
 // Called on startup
-function init() {
-    constructDisplay();
-    scene = makeScene();
-    connectToServer();
-    render();
+function init(anders_briegel, gui) {
+    ab = anders_briegel;
+    gui.construct();
+    gui.render();
 }
diff --git a/static/scripts/message.js b/static/scripts/message.js
new file mode 100644
index 0000000..20e4f18
--- /dev/null
+++ b/static/scripts/message.js
@@ -0,0 +1 @@
+define({});
diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js
new file mode 100644
index 0000000..0a9f983
--- /dev/null
+++ b/static/scripts/websocket.js
@@ -0,0 +1,33 @@
+define(["message"], function(message){
+return {
+    bindEvents: function(update){
+        var ws = new WebSocket("ws://localhost:5000");
+        ws.onopen = function(evt)
+        {
+            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");
+           update(JSON.parse(evt.data));
+        };
+         
+        ws.onclose = function(evt)
+        { 
+            message.innerHTML = "Connection to server lost. <a href='#' onclick='javascript:connect_to_server()'>Reconnect</a>.";
+            message.className = "visible";
+        };
+    }
+    };
+}
+);
+
+