small planky improvements

examples/example/games/planky.js

@@ -65,7 +65,7 @@ SettingsWindow = function() {
             case 'loaded':
                 _this.sendData({action: 'load', options: _this.plankyStack.options.getJSON()})
                 break;
-            case 'value_change':
+            case 'value-change':
                 _this.plankyStack.onValueChanged(data.option, data.value);
                 break;
             case 'factory-reset':
@@ -148,6 +148,7 @@ PlankyStack = function() {
     this.ground = false;
     this.editLines = [];
     this.options = new PlankyOptions();
+
     this.deRez = function() {
         _this.planks.forEach(function(plank) {
             Entities.deleteEntity(plank.entity);
@@ -159,13 +160,14 @@ PlankyStack = function() {
         _this.editLines.forEach(function(line) {
             Entities.deleteEntity(line);
         })
+        _this.editLines = [];
         if (_this.centerLine) {
             Entities.deleteEntity(_this.centerLine);
         }
         _this.ground = false;
         _this.centerLine = false;
-        _this.editLines = [];
     };
+
     this.rez = function() {
         if (_this.planks.length > 0) {
             _this.deRez();
@@ -192,7 +194,7 @@ PlankyStack = function() {
         }
         // move ground to rez position/rotation
         Entities.editEntity(_this.ground, {dimensions: _this.options.baseDimension, position: Vec3.sum(_this.basePosition, {y: -(_this.options.baseDimension.y / 2)}), rotation: _this.baseRotation});
-    }
+    };
 
     var refreshLines = function() {
         if (_this.editLines.length === 0) {
@@ -206,7 +208,8 @@ PlankyStack = function() {
             }));
             return;
         }
-    }
+    };
+
     var trimDimension = function(dimension, maxIndex) {
         _this.planks.forEach(function(plank, index, object) {
             if (plank[dimension] > maxIndex) {
@@ -215,6 +218,7 @@ PlankyStack = function() {
             }
         });
     };
+
     var createOrUpdate = function(layer, row) {
         var found = false;
         var layerRotated = layer % 2 === 0;
@@ -256,17 +260,19 @@ PlankyStack = function() {
             _this.planks.push({layer: layer, row: row, entity: Entities.addEntity(newProperties)})
         }
     };
+
     this.onValueChanged = function(option, value) {
         _this.options[option] = value;
         if (['numLayers', 'blocksPerLayer', 'blockSize', 'blockSpacing', 'blockHeightVariation'].indexOf(option) !== -1) {
             _this.refresh();
         }
     };
+
     this.refresh = function() {
         refreshGround();
         refreshLines();
-        trimDimension('layer', _this.options.numLayers);
+        trimDimension('layer', _this.options.numLayers - 1);
-        trimDimension('row', _this.options.blocksPerLayer);
+        trimDimension('row', _this.options.blocksPerLayer - 1);
         _this.offsetRot = Quat.multiply(_this.baseRotation, Quat.fromPitchYawRollDegrees(0.0, _this.options.blockYawOffset, 0.0));
         for (var layer = 0; layer < _this.options.numLayers; layer++) {
             for (var row = 0; row < _this.options.blocksPerLayer; row++) {
@@ -280,6 +286,7 @@ PlankyStack = function() {
             });
         }
     };
+
     this.isFound = function() {
         //TODO: identify entities here until one is found
         return _this.planks.length > 0;

examples/html/plankySettings.html

@@ -42,10 +42,11 @@ PropertyInput = function(key, label, value, attributes) {
 };
 
 var valueChangeHandler = function() {
+
     sendWebEvent({
-        action: 'value_change',
+        action: 'value-change',
-        option: $(this).attr('name'),
+        option: $(this).data('var-name'),
-        value: properties[$(this).attr('name')].getValue()
+        value: properties[$(this).data('var-name')].getValue()
     });
 };
 
@@ -55,14 +56,14 @@ NumberInput = function(key, label, value, attributes) {
 NumberInput.prototype = Object.create(PropertyInput.prototype);
 NumberInput.prototype.constructor = NumberInput;
 NumberInput.prototype.createValue = function() {
-    this.input = $('<input>').attr('name', this.key).attr('type', 'number').val(this.value).on('change', valueChangeHandler);
+    this.input = $('<input>').data('var-name', this.key).attr('name', this.key).attr('type', 'number').val(this.value).on('change', valueChangeHandler);
     if (this.attributes !== undefined) {
         this.input.attr(this.attributes);
     }
     return this.input;
 };
 NumberInput.prototype.getValue = function() {
-    return this.input.val();
+    return parseFloat(this.input.val());
 };
 
 CoordinateInput = function(key, label, value, attributes) {
@@ -71,9 +72,9 @@ CoordinateInput = function(key, label, value, attributes) {
 CoordinateInput.prototype = Object.create(PropertyInput.prototype);
 CoordinateInput.prototype.constructor = CoordinateInput;
 CoordinateInput.prototype.createValue = function() {
-    this.inputX = $('<input>').attr('name', this.key + '-x').attr('type', 'number').addClass('coord').val(this.value.x);
+    this.inputX = $('<input>').data('var-name', this.key).attr('name', this.key + '-x').attr('type', 'number').addClass('coord').val(this.value.x).on('change', valueChangeHandler);
-    this.inputY = $('<input>').attr('name', this.key + '-y').attr('type', 'number').addClass('coord').val(this.value.y);
+    this.inputY = $('<input>').data('var-name', this.key).attr('name', this.key + '-y').attr('type', 'number').addClass('coord').val(this.value.y).on('change', valueChangeHandler);
-    this.inputZ = $('<input>').attr('name', this.key + '-z').attr('type', 'number').addClass('coord').val(this.value.z);
+    this.inputZ = $('<input>').data('var-name', this.key).attr('name', this.key + '-z').attr('type', 'number').addClass('coord').val(this.value.z).on('change', valueChangeHandler);
     if (this.attributes !== undefined) {
         this.inputX.attr(this.attributes);
         this.inputY.attr(this.attributes);
@@ -82,7 +83,7 @@ CoordinateInput.prototype.createValue = function() {
     return [encapsulateInput(this.inputX, 'X'), encapsulateInput(this.inputY, 'Y'), encapsulateInput(this.inputZ, 'Z')];
 };
 CoordinateInput.prototype.getValue = function() {
-    return {x: this.inputX.val(), y: this.inputY.val(), z: this.inputZ.val()};
+    return {x: parseFloat(this.inputX.val()), y: parseFloat(this.inputY.val()), z: parseFloat(this.inputZ.val())};
 };
 function encapsulateInput(input, label) {
     return $('<div>').addClass('input-area').append(label + ' ').append(input);
@@ -95,7 +96,6 @@ function addHeader(label) {
 $(function() {  
     addHeader('Stack Settings');
     properties['numLayers'] = new NumberInput('numLayers', 'Layers', 17, {'min': 0, 'max': 300, 'step': 1});
-    properties['baseDimension'] = new CoordinateInput('baseDimension', 'Base dimension', {x: 7, y: 2, z: 7}, {'min': 0.5, 'max': 200, 'step': 0.1});
     properties['blocksPerLayer'] = new NumberInput('blocksPerLayer', 'Blocks per layer', 4, {'min': 1, 'max': 100, 'step': 1});
     properties['blockSize'] = new CoordinateInput('blockSize', 'Block size', {x: 0.2, y: 0.1, z: 0.8}, {'min': 0.05, 'max': 20, 'step': 0.1});
     properties['blockSpacing'] = new NumberInput('blockSpacing', 'Block spacing', properties['blockSize'].getValue().x / properties['blocksPerLayer'].getValue(), {'min': 0, 'max': 20, 'step': 0.01});
@@ -114,6 +114,7 @@ $(function() {
     addHeader('Spawn Settings');
     properties['spawnDistance'] = new NumberInput('spawnDistance', 'Spawn distance (meters)', 3);
     properties['blockYawOffset'] = new NumberInput('blockYawOffset', 'Block yaw offset (degrees)', 45, {'min': 0, 'max': 360, 'step': 1});
+    properties['baseDimension'] = new CoordinateInput('baseDimension', 'Base dimension', {x: 7, y: 2, z: 7}, {'min': 0.5, 'max': 200, 'step': 0.1});
     addHeader('Actions');
     $('#properties-list')
         .append($('<input>').val('factory reset').attr('type', 'button').on('click', function() { sendWebEvent({action: 'factory-reset'}); }))