Better code structure with classes and functions

Author: pavtiger

main_server.js

@@ -108,8 +108,8 @@ function addRender(req, res) {
                 num = "0" + num;
             }
 
-
-            fs.writeFile("lib/renders/" + Data["user"] + "_" + num + ".png", base64Data, "base64", function(err) {
+            let output_filename = "lib/renders/" + Data["user"] + "_" + num + ".png"
+            fs.writeFile(output_filename, base64Data, "base64", function(err) {
                 if (err) {
                     return console.log(err);
                 }
@@ -211,7 +211,7 @@ function main(req, res) {
     }
 }
 
-let config = JSON.parse(fs.readFileSync('config.json'));
+let config = JSON.parse(fs.readFileSync("config.json"));
 let app = http.createServer(main);
 app.listen(config["port"]);
 console.log("Listening on " + config["port"]);

scripts/main.js

@@ -6,7 +6,7 @@ import { OBJLoader } from "../lib/OBJLoader.js";
 import { FlyControls } from "../lib/FlyControls.js";
 
 
-let scene, orbitControls, camera, renderer, gui, poly_loaded = false;
+let scene, orbitControls, camera, renderer, gui, polyLoaded = false;
 
 /**
  * Sends a request to the url and returns parsed response
@@ -112,7 +112,7 @@ function renderPoints(frame, fizzyText, arrayOfPoints) {
 function addPolyhedron(scene, data) {
     let verticesOfCube = [];
     if (data !== undefined) {
-        poly_loaded = true;
+        polyLoaded = true;
 
         for (let vert of data) {
             verticesOfCube.push(new THREE.Vector3(vert[0], vert[1], vert[2]))
@@ -125,12 +125,12 @@ function addPolyhedron(scene, data) {
 
         scene.add(mesh);
     } else {
-        poly_loaded = false;
+        polyLoaded = false;
     }
 }
 
 
-function remove_points_from_scene() {
+function removePointsFromScene() {
     while (scene.getObjectByName("point") !== undefined) {
         scene.remove(scene.getObjectByName("point"));
     }
@@ -206,6 +206,50 @@ function init() {
 }
 
 
+function process_online(playback, fizzyText) {
+    let status = httpGet("/get_status")["status"];
+    playback.data = httpGet("/get_frame");
+    if (status && playback.data.length !== 0) {
+        // New frame received from simulator
+        fizzyText.numParticles = playback.data["x"].length;
+        playback.arrayOfPoints = renderPoints(playback.data, fizzyText, playback.arrayOfPoints);
+    }
+
+    if (status) {
+        playback.newFrame = true;
+
+        if (!polyLoaded) {
+            addPolyhedron(scene, httpGet("/get_poly")) ;
+        }
+    }
+
+    return playback;
+}
+
+
+function process_offline(playback, fizzyText) {
+    if (Math.round(playback.frameId) < 1) {
+        playback.direction = 1;
+        fizzyText.play = true;
+        playback.arrayOfPoints = [];
+        removePointsFromScene()
+    }
+    if (playback.frameId >= playback.data.length - 1) {
+        playback.direction = -1;
+    }
+
+    if (fizzyText.play) {
+        playback.frameId += playback.direction * parseFloat(fizzyText.speedMode);
+        fizzyText.time = (playback.frameId + 1) / playback.data.length;
+    }
+
+    if (playback.data.length - 1 > Math.round(playback.frameId) && Math.round(playback.frameId) >= 1) {
+        fizzyText.numParticles = playback.data[Math.round(playback.frameId)]["x"].length;
+        playback.arrayOfPoints = renderPoints(playback.data[Math.round(playback.frameId)], fizzyText, playback.arrayOfPoints);
+    }
+
+    return playback;
+}
 
 
 window.onload = function() {
@@ -227,42 +271,55 @@ window.onload = function() {
         this.play = true;
         this.turnOn = false;
 
-        if (!FilesMissing) {
+        if (!playback.filesMissing) {
             let jsonDictionary = fileGet("/lib/saves/names.json", false);
             this.currentSave = jsonDictionary["default_name"];
         } else {
             this.currentSave = "None";
         }
 
-        this.reset_defaults = function () {
+        this.reset_defaults = function() {
             for (let i = 0; i < gui.__controllers.length; i++) {
                 gui.__controllers[i].setValue(gui.__controllers[i].initialValue);
             }
+            speed_drop_down.setValue("1.00");
         };
 
-        this.restart = function () {
+        this.restart = function() {
             if (fizzyText.mode === "online") {
                 return 0;
             }
 
-            FrameId = 2;
-            direction = 1;
+            playback.frameId = 2;
+            playback.direction = 1;
             fizzyText.play = true;
-            arrayOfPoints = [];
+            playback.arrayOfPoints = [];
 
             // clear scene from points
-            remove_points_from_scene()
+            removePointsFromScene();
         };
     };
 
-    let FrameId = 1, direction = 1, arrayOfPoints = [], data, FilesMissing = false, userId, newFrame = true;
+    class PlaybackInfo {
+        constructor() {
+            this.frameId = 1;
+            this.direction = 1;
+            this.arrayOfPoints = [];
+            this.data;
+            this.filesMissing = false;
+            this.userId;
+            this.newFrame = true;
+        }
+    }
+    let playback = new PlaybackInfo();
     window.default_size = 0.007;
 
+    let allSaves;
     try {
-        var allSaves = fileGet("/lib/saves/names.json", false)["names"];
+        allSaves = fileGet("/lib/saves/names.json", false)["names"];
     } catch (error) {
         console.log("You have no growth saves in the lib/saves/");
-        FilesMissing = true;
+        playback.filesMissing = true;
     }
 
     let stats = initStats(Stats);
@@ -283,30 +340,27 @@ window.onload = function() {
     let controlsModeChooser = gui.add(fizzyText, "mode", ["offline", "online"]).name("Mode");
     gui.add(fizzyText, "reset_defaults").name("Reset defaults");
 
-    let playback = gui.addFolder("Playback");
-    playback.add(fizzyText, "play").name("Play (Space Bar)").listen();
-    playback.add(fizzyText, "restart").name("Restart");
-    playback.add(fizzyText, "speedMode", ["0.25", "0.5", "0.75", "1.00", "1.25", "1.5", "1.75", "2.00", "5.00", "10.0"]).name("Playback Speed");
+    let playback_folder = gui.addFolder("Playback");
+    playback_folder.add(fizzyText, "play").name("Play (Space Bar)").listen();
+    playback_folder.add(fizzyText, "restart").name("Restart");
+    let speed_drop_down = playback_folder.add(fizzyText, "speedMode", ["0.25", "0.5", "0.75", "1.00", "1.25", "1.5", "1.75", "2.00", "5.00", "10.0"]).name("Playback Speed");
 
-    let controlsTimeline = playback.add(fizzyText, "time", 0, 1).step(0.01).name("Timeline").listen();
-    let controlsChooser = playback.add(fizzyText, "currentSave", allSaves).name("Choose save");
-    playback.open();
+    let controlsTimeline = playback_folder.add(fizzyText, "time", 0, 1).step(0.01).name("Timeline").listen();
+    let controlsChooser = playback_folder.add(fizzyText, "currentSave", allSaves).name("Choose save");
+    playback_folder.open();
 
     let renderFolder = gui.addFolder("Render");
     let controlsRotate = renderFolder.add(fizzyText, "rotate").name("Autorotate");
     let controlsRender = renderFolder.add(fizzyText, "dorender").name("Start render");
-    
-    // let author = gui.add(fizzyText, "name").name("Made by:");
-    // author.domElement.style.pointerEvents = "none";
 
 
     let download = function() {
-        while (!httpGet("/get_render_status")["status"][parseInt(userId, 10)]) {
+        while (!httpGet("/get_render_status")["status"][parseInt(playback.userId, 10)]) {
             console.log("Working");
         }
         console.log("Done!");
 
-        let url = "lib/movies/" + userId + ".mp4";
+        let url = "lib/movies/" + playback.userId + ".mp4";
         let a = document.createElement("a");
         a.href = url;
         a.download = url.split("/").pop();
@@ -331,11 +385,11 @@ window.onload = function() {
             let element = document.getElementById("preloader");
             element.appendChild(div);
 
-            httpSend("/add_render", {"img": "", "user": userId, "update": true});
+            httpSend("/add_render", {"img": "", "user": playback.userId, "update": true});
 
             setTimeout(download, 100);
         } else {
-            userId = httpGet("/get_id")["id"];
+            playback.userId = httpGet("/get_id")["id"];
         }
     });
 
@@ -344,44 +398,47 @@ window.onload = function() {
     });
 
     controlsTimeline.onChange(function(value) {
-        FrameId = (data.length) * (value);
+        playback.frameId = (playback.data.length) * (value);
     });
 
     controlsModeChooser.onChange(function(value) {
-        if (value === "offline") { data = fileGet("lib/saves/" + fizzyText.currentSave + ".json", FilesMissing); }
-        FrameId = 2;
+        if (value === "offline") {
+            playback.data = fileGet("lib/saves/" + fizzyText.currentSave + ".json", playback.filesMissing);
+        }
+        playback.frameId = 2;
         fizzyText.play = true;
-        poly_loaded = false;
-        remove_points_from_scene()
+        polyLoaded = false;
+        removePointsFromScene()
         scene.remove(scene.getObjectByName("poly"));
 
         if (value === "online") {
-	        playback.close();
+            playback_folder.close();
             let obj = httpGet("/get_poly");
             if (obj.length === 0) {
                 console.log("No Polyhedron data. Run simulator process or contact admins.");
             } else {
                 addPolyhedron(scene, httpGet("/get_poly"));
             }
         } else {
-	        playback.open();
-            addPolyhedron(scene, undefined);
+            playback_folder.open();
+            addPolyhedron(scene, [[-1,-1,-1], [1,-1,-1], [1, 1,-1], [-1, 1,-1], [-1,-1, 1],
+                [1,-1, 1], [1, 1, 1], [-1, 1, 1]]);
         }
 
-        arrayOfPoints = [];
+        playback.arrayOfPoints = [];
 
     });
 
     let loadSave = function() {
         if (fizzyText.mode === "online") {
             return 0;
         }
-        FrameId = 2;
+        playback.frameId = 2;
         fizzyText.play = true;
-        remove_points_from_scene()
-        arrayOfPoints = [];
+        removePointsFromScene()
+        playback.arrayOfPoints = [];
 
-        data = fileGet("lib/saves/" + fizzyText.currentSave + ".json", FilesMissing);
+        playback.data = fileGet("lib/saves/" + fizzyText.currentSave + ".json", playback.filesMissing);
 
         let elmnt = document.getElementById("preloader");
         elmnt.remove();
@@ -402,14 +459,14 @@ window.onload = function() {
     });
 
     controlsSize.onChange(function(value) {
-        refreshArrayOfPoints(fizzyText, arrayOfPoints);
+        refreshArrayOfPoints(fizzyText, playback.arrayOfPoints);
     });
 
     particlesColor.onChange(function(value) {
         fizzyText.color[0] = value[0];
         fizzyText.color[1] = value[1];
         fizzyText.color[2] = value[2];
-        refreshArrayOfPoints(fizzyText, arrayOfPoints);
+        refreshArrayOfPoints(fizzyText, playback.arrayOfPoints);
     });
 
 
@@ -418,75 +475,40 @@ window.onload = function() {
         let keyCode = event.which;
         if (keyCode === 32) { // Space
             fizzyText.play = !fizzyText.play;
-        } else if (keyCode === 39 && FrameId < data.length) { // Right arrow
-            FrameId += 5;
-            fizzyText.time = (FrameId + 1) / data.length;
+        } else if (keyCode === 39 && playback.frameId < playback.data.length) { // Right arrow
+            playback.frameId += 5;
+            fizzyText.time = (playback.frameId + 1) / playback.data.length;
         } else if (keyCode === 37) { // Left arrow
-            FrameId = Math.max(1, FrameId - 5);
-            fizzyText.time = (FrameId + 1) / data.length;
+            playback.frameId = Math.max(1, playback.frameId - 5);
+            fizzyText.time = (playback.frameId + 1) / playback.data.length;
             return false;
         }
     }
 
     init();
 
-    // Run game loop (update, render, repeat)
-
-    data = fileGet("/lib/saves/" + fizzyText.currentSave + ".json", FilesMissing);
+    playback.data = fileGet("/lib/saves/" + fizzyText.currentSave + ".json", playback.filesMissing);
 
+    // Run game loop (update, render, repeat)
     let GameLoop = function() {
         requestAnimationFrame(GameLoop);
         stats.begin();
         orbitControls.update();
 
         if (fizzyText.mode === "online") {
-
-            let status = httpGet("/get_status")["status"];
-            data = httpGet("/get_frame");
-            if (status && data.length !== 0) {
-                // New frame received from simulator
-                fizzyText.numParticles = data["x"].length;
-                arrayOfPoints = renderPoints(data, fizzyText, arrayOfPoints);
-            }
-
-            if (status) {
-                newFrame = true;
-
-                if (!poly_loaded) {
-                    addPolyhedron(scene, httpGet("/get_poly")) ;
-                }
-            }
+            playback = process_online(playback, fizzyText);
         } else {
-
-            if (Math.round(FrameId) < 1) {
-                direction = 1;
-                fizzyText.play = true;
-                arrayOfPoints = [];
-                remove_points_from_scene()
-            }
-            if (FrameId >= data.length - 1) {
-                direction = -1;
-            }
-
-            if (fizzyText.play) {
-                FrameId += direction * parseFloat(fizzyText.speedMode);
-                fizzyText.time = (FrameId + 1) / data.length;
-            }
-
-            if (data.length - 1 > Math.round(FrameId) && Math.round(FrameId) >= 1) {
-                fizzyText.numParticles = data[Math.round(FrameId)]["x"].length;
-                arrayOfPoints = renderPoints(data[Math.round(FrameId)], fizzyText, arrayOfPoints);
-            }
+            playback = process_offline(playback, fizzyText);
         }
 
         renderer.render(scene, camera);
 
         if ((fizzyText.mode === "offline" && fizzyText.dorender && fizzyText.play)
-            || (fizzyText.mode === "online" && fizzyText.dorender && newFrame)) {
+            || (fizzyText.mode === "online" && fizzyText.dorender && playback.newFrame)) {
             // Capture currect screen and send to server
             let image = renderer.domElement.toDataURL("image/png", 1);
-            httpSend("/add_render", {"img": image, "user": userId, "update": false});
-            newFrame = false;
+            httpSend("/add_render", {"img": image, "user": playback.userId, "update": false});
+            playback.newFrame = false;
         }
 
         stats.end();