Redesign web app

app.js

@@ -1,7 +1,4 @@
-var common = require('./lib/common');
-
-var viewport = document.getElementById('viewport');
-var starbound = common.setup(viewport);
+var starbound = require('./lib/starbound').setup(document.getElementById('viewport'));
 
 var openButton = document.getElementById('open');
 

gulpfile.js

@@ -69,8 +69,8 @@ gulp.task('watch', function () {
   ], ['browserify-app', 'browserify-web']);
   // TEMPORARY ^^^
 
-  gulp.watch(['app.js', 'lib/*.js'], ['browserify-app']);
-  gulp.watch(['web.js', 'lib/*.js'], ['browserify-web']);
+  gulp.watch(['app.js', 'lib/**/*.js'], ['browserify-app']);
+  gulp.watch(['web.js', 'lib/**/*.js'], ['browserify-web']);
 });
 
 gulp.task('default', ['browserify-app', 'browserify-web']);

lib/common.js → lib/starbound.js

@@ -9,14 +9,19 @@ exports.setup = function (viewport) {
     workers: 4
   });
 
-  // Create a world manager that handles loading the world and its regions.
-  var world = new WorldManager({workerPath: 'build/worker-world.js'});
+  // Create a world manager that handles loading worlds.
+  var worlds = new WorldManager({workerPath: 'build/worker-world.js'});
 
   // Set up a renderer that will render the graphics onto screen.
-  var renderer = new WorldRenderer(viewport, world, assets);
+  var renderer = new WorldRenderer(viewport, assets);
+
+  // Update the viewport when the page is resized.
+  window.addEventListener('resize', function () {
+    renderer.refresh();
+  });
 
   // Enable keyboard scrolling.
-  document.body.addEventListener('keydown', function (event) {
+  document.addEventListener('keydown', function (event) {
     switch (event.keyCode) {
       case 37:
         renderer.scroll(-10, 0, true);
@@ -41,6 +46,7 @@ exports.setup = function (viewport) {
   var dragging = null;
   viewport.addEventListener('mousedown', function (e) {
     dragging = [e.clientX, e.clientY];
+    e.preventDefault();
   });
 
   document.addEventListener('mousemove', function (e) {
@@ -64,6 +70,6 @@ exports.setup = function (viewport) {
   return {
     assets: assets,
     renderer: renderer,
-    world: world,
+    worlds: worlds,
   };
 };

lib/ui/os.js

@@ -0,0 +1,12 @@
+var ua = require('useragent-wtf');
+
+module.exports = function () {
+  switch (ua.os) {
+    case 'mac':
+      $('.mac').show();
+      break;
+    case 'windows':
+      $('.windows').show();
+      break;
+  }
+};

lib/ui/progress.js

@@ -0,0 +1,25 @@
+module.exports = function (starbound) {
+  var maxTasks = 0,
+      progress = $('#progress');
+
+  requestAnimationFrame(function loop() {
+    var pendingTasks = starbound.assets.api.pendingCalls +
+                       starbound.worlds.api.pendingCalls;
+
+    if (pendingTasks) {
+      if (maxTasks < pendingTasks) {
+        maxTasks = pendingTasks;
+      }
+
+      var percentage = (maxTasks * 1.1 - pendingTasks) / (maxTasks * 1.1) * 100;
+      progress.css('width', percentage + '%');
+      progress.show();
+    } else if (maxTasks) {
+      maxTasks = 0;
+      progress.css('width', '100%');
+      progress.fadeOut();
+    }
+
+    requestAnimationFrame(loop);
+  });
+};

lib/ui/web-selector.js

@@ -0,0 +1,97 @@
+var once = require('once');
+
+module.exports = function (starbound, callback) {
+  var directory = document.getElementById('directory'),
+      file = document.getElementById('file');
+
+  if (directory.webkitdirectory) {
+    $('#directory-selector').modal({backdrop: 'static', keyboard: false});
+    directory.onchange = function () {
+      // Verify that a Starbound directory is selected.
+      var verified = false;
+      for (var i = 0; i < this.files.length; i++) {
+        var file = this.files[i];
+        if (file.webkitRelativePath == 'Starbound/assets/packed.pak') {
+          verified = true;
+          break;
+        }
+      }
+
+      var status = $('#directory-status');
+      if (verified) {
+        status.attr('class', 'text-success');
+        status.find('span').attr('class', 'glyphicon glyphicon-ok');
+        status.find('strong').text('Click Load assets to continue')
+        $('#load-directory').attr('disabled', false);
+      } else {
+        status.attr('class', 'text-danger');
+        status.find('span').attr('class', 'glyphicon glyphicon-remove');
+        status.find('strong').text('That does not appear to be the Starbound directory')
+        $('#load-directory').attr('disabled', true);
+      }
+    };
+  } else {
+    $('#file-selector').modal({backdrop: 'static', keyboard: false});
+    file.onchange = function () {
+      // Verify that packed.pak is selected.
+      var status = $('#file-status');
+      if (this.files[0].name == 'packed.pak') {
+        status.attr('class', 'text-success');
+        status.find('span').attr('class', 'glyphicon glyphicon-ok');
+        status.find('strong').text('Click Load assets to continue')
+        $('#load-file').attr('disabled', false);
+      } else {
+        status.attr('class', 'text-danger');
+        status.find('span').attr('class', 'glyphicon glyphicon-remove');
+        status.find('strong').text('That does not appear to be the packed.pak file')
+        $('#load-file').attr('disabled', true);
+      }
+    };
+  }
+
+  $('#load-directory').click(function () {
+    var pendingFiles = 0;
+
+    var worldFiles = [];
+    for (var i = 0; i < directory.files.length; i++) {
+      var file = directory.files[i],
+          path = file.webkitRelativePath,
+          match;
+
+      // Skip hidden files/directories.
+      if (file.name[0] == '.') continue;
+
+      if (file.name.match(/\.(ship)?world$/)) {
+        worldFiles.push(file);
+      } else if (match = path.match(/^Starbound\/(?:assets|mods)(\/.*)/)) {
+        // Not sure why music files are stored incorrectly like this.
+        if (match[1].substr(0, 13) == '/music/music/') {
+          match[1] = match[1].substr(6);
+        }
+
+        // Add the file and then preload the renderer once all assets have been
+        // added.
+        pendingFiles++;
+        starbound.assets.addFile(match[1], file, once(function (err) {
+          pendingFiles--;
+          if (!pendingFiles) {
+            starbound.renderer.preload();
+            callback(null, {worldFiles: worldFiles});
+          }
+        }));
+      }
+    }
+
+    $('#directory-selector').modal('hide');
+  });
+
+  $('#load-file').click(function () {
+    // TODO: Allow adding mods?
+    starbound.assets.addFile('/', file.files[0], once(function () {
+      starbound.renderer.preload();
+      callback(null, {worldFiles: []});
+    }));
+
+    $('#file-selector').modal('hide');
+  });
+};

lib/ui/world-selector.js

@@ -0,0 +1,52 @@
+var moment = require('moment');
+
+module.exports = function (starbound) {
+  var addWorlds = document.getElementById('add-world-files');
+  addWorlds.onchange = (event) => {
+    for (var i = 0; i < addWorlds.files.length; i++) {
+      starbound.worlds.open(addWorlds.files[i]);
+    }
+  };
+
+  var worldList = $('#worlds');
+
+  var worlds = [];
+
+  worldList.on('click', '.list-group-item', (event) => {
+    var item = $(event.target).closest('.list-group-item');
+
+    var index = item.data('index');
+    starbound.renderer.setWorld(worlds[index]);
+    starbound.renderer.requestRender();
+  });
+
+  starbound.renderer.on('load', () => {
+    worldList.find('.list-group-item').removeClass('active');
+    for (var i = 0; i < worlds.length; i++) {
+      if (worlds[i] == starbound.renderer.world) {
+        worldList.find('[data-index=' + i + ']').addClass('active');
+        break;
+      }
+    }
+  });
+
+  starbound.renderer.on('unload', () => {
+    worldList.find('.list-group-item').removeClass('active');
+  });
+
+  starbound.worlds.on('load', (event) => {
+    var world = event.world;
+
+    var index = worlds.length;
+    worlds.push(world);
+
+    var item = $('<a href="#" class="list-group-item">')
+      .attr('data-index', index)
+      .append(
+        $('<h4 class="list-group-item-heading">').text(world.name),
+        $('<p class="list-group-item-text">').text('Played ' + moment(world.lastModified).fromNow())
+      );
+
+    worldList.append(item);
+  });
+};

package.json

@@ -13,17 +13,19 @@
     "url": "https://github.com/blixt/starbounded.git"
   },
   "dependencies": {
-    "moment": "~2.5.1",
+    "moment": "^2.5.1",
+    "once": "^1.3.0",
     "starbound-assets": "~0.8.0",
-    "starbound-world": "~0.5.0"
+    "starbound-world": "~0.6.0",
+    "useragent-wtf": "^1.0.1"
   },
   "devDependencies": {
     "es6ify": "~0.4.8",
-    "gulp": "~3.5.5",
+    "gulp": "^3.5.5",
     "gulp-browserify": "~0.5.0",
-    "gulp-rename": "~1.2.0",
+    "gulp-rename": "^1.2.0",
     "gulp-uglify": "~0.2.1",
-    "gulp-util": "~2.2.14",
-    "merge": "~1.1.2"
+    "gulp-util": "^2.2.14",
+    "merge": "^1.1.2"
   }
 }