more material types

css/main.css

@@ -8,6 +8,10 @@ html, body {
     height: 100%;
 }
 
+.checkbox input[type="checkbox"].custom-checkbox:checked + .icons .icon-checked, .radio input[type="checkbox"].custom-checkbox:checked + .icons .icon-checked, .checkbox input[type="radio"].custom-radio:checked + .icons .icon-checked, .radio input[type="radio"].custom-radio:checked + .icons .icon-checked {
+    color: #888;
+}
+
 .navbar {
     margin-bottom:0;
     z-index: 2;
@@ -333,3 +337,24 @@ label {
     text-overflow: ellipsis;
     -o-text-overflow: ellipsis;
 }
+
+.materialColorSwatch{
+    height: 30px;
+    width: 100%;
+}
+.materialColorSwatch>div {
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    margin-right: 10px;
+}
+
+.materialColorSwatch>span{
+    display: inline-block;
+    vertical-align: middle;
+    padding-bottom: 20px;
+}
+
+label.colorSwatches>span.icons{
+    margin: 5px 0;
+}
\ No newline at end of file

js/cells/supercells/GIKSuperCell.js

@@ -3,9 +3,6 @@
  */
 
 
-var cellBrassMaterial = new THREE.MeshLambertMaterial({color:"#b5a642"});
-var cellFiberGlassMaterial = new THREE.MeshLambertMaterial({color:"#fff68f"});
-
 GIKSuperCell = function(length, range, cells){
     if (range) this.indices = _.clone(range.max);
     this.material = globals.lattice.get("materialType");
@@ -60,9 +57,8 @@ GIKSuperCell.prototype._buildWireframe = function(mesh){
 };
 
 GIKSuperCell.prototype.getMaterial = function(){
-    var material = cellBrassMaterial;
-    if (this.material == "fiberGlass") material = cellFiberGlassMaterial;
-    return material;
+    var material = globals.plist.allMaterialTypes[globals.lattice.get("cellType")][globals.lattice.get("connectionType")][globals.lattice.get("materialType")];
+    return new THREE.MeshLambertMaterial({color:material.color});
 };
 
 GIKSuperCell.prototype.setMode = function(mode){

js/menus/PartMenuView.js

@@ -41,26 +41,19 @@ PartMenuView = Backbone.View.extend({
         <br/><br/>--><br/>\
         <% if (allMaterialTypes[cellType][connectionType]){ %> \
         Materials:<br/>\
-        <label class="checkbox" for="realisticColorScheme">\
-        <input id="realisticColorScheme" data-property="realisticColorScheme" type="checkbox" <% if (realisticColorScheme){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="appState custom-checkbox">\
-        <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
-        Use realistic color scheme</label><br/>\
-        \
         <% _.each(_.keys(allMaterialTypes[cellType][connectionType]), function(key){ %>\
-        <label class="radio">\
+        <label class="radio colorSwatches">\
             <input type="radio" <%if (key == materialType){ %>checked<%}%> name="materialType" value="<%= key %>" data-toggle="radio" class="custom-radio lattice"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
-            <%= allMaterialTypes[cellType][connectionType][key].name %>\
+            <div class="materialColorSwatch">\
+            <div style="background-color:<%= allMaterialTypes[cellType][connectionType][key].color %>"></div>\
+            <span><%= allMaterialTypes[cellType][connectionType][key].name %></span></div>\
         </label>\
         <% }); %>\
-        <br/><br/>\
-        <div class="btn-group">\
-                <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allMaterialTypes[cellType][connectionType][materialType].name %><span class="caret"></span></button>\
-                <ul role="menu" class="dropdown-menu">\
-                    <% _.each(_.keys(allMaterialTypes[cellType][connectionType]), function(key){ %>\
-                        <li><a class="materialType" data-type="<%= key %>" href="#"><%= allMaterialTypes[cellType][connectionType][key].name %></a></li>\
-                    <% }); %>\
-                </ul>\
-            </div><br/><br/>\
+        <br/>\
+        <label class="checkbox" for="realisticColorScheme">\
+        <input id="realisticColorScheme" data-property="realisticColorScheme" type="checkbox" <% if (realisticColorScheme){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="appState custom-checkbox">\
+        <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
+        Use realistic color scheme</label>\
         <% } %>\
         <br/>\
         ')

js/models/AllAppPLists.js

@@ -91,11 +91,23 @@ function AppPList(){
             gik: {
                 brass:{
                     name: "Brass",
-                    color: "#b5a642"
+                    color: "#b5a642",
+                    altColor: "#e67e22"
                 },
                 fiberGlass: {
                     name: "Fiberglass",
-                    color: "#fef1b5"
+                    color: "#fef1b5",
+                    altColor: "#ecf0f1"
+                },
+                carbonFiber: {
+                    name: "Carbon Fiber",
+                    color: "#222",
+                    altColor: "#000"
+                },
+                silicon: {
+                    name: "Silicon",
+                    color: "#bcc6cc",
+                    altColor: "#34495e"
                 }
             }
         },