First refactoring step

dice/dice.js

@@ -7,12 +7,16 @@
     function rnd() {
         if (!random_storage.length && use_random_storage) {
             try {
-                var random_responce = $t.rpc({ method: "random", n: 512 });
-                if (!random_responce.error)
-                    random_storage = random_responce.result.random.data;
-                else use_random_storage = false;
+                var random_response = $t.rpc({ method: "random", n: 512 });
+                if (!random_response.error) {
+                    random_storage = random_response.result.random.data;
+                }
+                else {
+                    use_random_storage = false;
+                }
+            } catch (e) {
+                use_random_storage = false;
             }
-            catch (e) { use_random_storage = false }
         }
         return random_storage.length ? random_storage.pop() : Math.random();
     }
@@ -42,14 +46,14 @@
             var aa = Math.PI * 2 / fl;
             for (var j = 0; j < fl - 2; ++j) {
                 geom.faces.push(new THREE.Face3(ii[0], ii[j + 1], ii[j + 2], [geom.vertices[ii[0]],
-                            geom.vertices[ii[j + 1]], geom.vertices[ii[j + 2]]], 0, ii[fl] + 1));
+                                                                              geom.vertices[ii[j + 1]], geom.vertices[ii[j + 2]]], 0, ii[fl] + 1));
                 geom.faceVertexUvs[0].push([
-                        new THREE.Vector2((Math.cos(af) + 1 + tab) / 2 / (1 + tab),
-                            (Math.sin(af) + 1 + tab) / 2 / (1 + tab)),
-                        new THREE.Vector2((Math.cos(aa * (j + 1) + af) + 1 + tab) / 2 / (1 + tab),
-                            (Math.sin(aa * (j + 1) + af) + 1 + tab) / 2 / (1 + tab)),
-                        new THREE.Vector2((Math.cos(aa * (j + 2) + af) + 1 + tab) / 2 / (1 + tab),
-                            (Math.sin(aa * (j + 2) + af) + 1 + tab) / 2 / (1 + tab))]);
+                    new THREE.Vector2((Math.cos(af) + 1 + tab) / 2 / (1 + tab),
+                                      (Math.sin(af) + 1 + tab) / 2 / (1 + tab)),
+                    new THREE.Vector2((Math.cos(aa * (j + 1) + af) + 1 + tab) / 2 / (1 + tab),
+                                      (Math.sin(aa * (j + 1) + af) + 1 + tab) / 2 / (1 + tab)),
+                    new THREE.Vector2((Math.cos(aa * (j + 2) + af) + 1 + tab) / 2 / (1 + tab),
+                                      (Math.sin(aa * (j + 2) + af) + 1 + tab) / 2 / (1 + tab))]);
             }
         }
         geom.computeFaceNormals();
@@ -81,7 +85,7 @@
             for (var j = 0; j < fl; ++j) {
                 var vv = chamfer_vectors[face[j]];
                 vv.subVectors(vv, center_point);
-                vv.multiplyScalar(that.chamfer);
+                vv.multiplyScalar(chamfer);
                 vv.addVectors(vv, center_point);
             }
             for (var j = 0; j < fl - 1; ++j) {
@@ -100,14 +104,14 @@
         return geom;
     }
 
-    this.standart_d20_dice_face_labels = [' ', '0', '1', '2', '3', '4', '5', '6', '7', '8',
-            '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'];
-    this.standart_d100_dice_face_labels = [' ', '00', '10', '20', '30', '40', '50',
-            '60', '70', '80', '90'];
+    var standard_d20_dice_face_labels = [' ', '0', '1', '2', '3', '4', '5', '6', '7', '8',
+                                         '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'];
+    var standard_d100_dice_face_labels = [' ', '00', '10', '20', '30', '40', '50',
+                                          '60', '70', '80', '90'];
 
-    this.create_dice_materials = function(face_labels, size, margin) {
+    function create_dice_materials(face_labels, size, margin, labelColor, diceColor) {
         function create_text_texture(text, color, back_color) {
-            if (text == undefined) return null;
+            if (text === undefined) return null;
             var canvas = document.createElement("canvas");
             var context = canvas.getContext("2d");
             canvas.width = size + margin;
@@ -127,13 +131,20 @@
             return texture;
         }
         var materials = [];
-        for (var i = 0; i < face_labels.length; ++i)
-            materials.push(new THREE.MeshPhongMaterial($t.copyto(this.material_options,
-                        { map: create_text_texture(face_labels[i], this.label_color, this.dice_color) })));
+        for (var i = 0; i < face_labels.length; ++i) {
+            materials.push(
+                new THREE.MeshPhongMaterial(
+                    $t.copyto(material_options,
+                              {map: create_text_texture(face_labels[i],
+                                                        labelColor,
+                                                        diceColor)})
+                )
+            );
+        }
         return materials;
-    }
+    };
 
-    this.create_d4_materials = function(size, margin) {
+    function create_d4_materials(size, margin) {
         function create_d4_text(text, color, back_color) {
             var canvas = document.createElement("canvas");
             var context = canvas.getContext("2d");
@@ -148,7 +159,7 @@
             context.translate(0, size / 10);
             for (var i in text) {
                 context.fillText(text[i], canvas.width / 2,
-                        canvas.height / 2 - size - margin / 10);
+                                 canvas.height / 2 - size - margin / 10);
                 context.translate(canvas.width / 2, canvas.height / 2);
                 context.rotate(Math.PI * 2 / 3);
                 context.translate(-canvas.width / 2, -canvas.height / 2);
@@ -160,8 +171,8 @@
         var materials = [];
         var labels = [[], [0, 0, 0], [2, 4, 3], [1, 3, 4], [2, 1, 4], [1, 2, 3]];
         for (var i = 0; i < labels.length; ++i)
-            materials.push(new THREE.MeshPhongMaterial($t.copyto(this.material_options,
-                        { map: create_d4_text(labels[i], this.label_color, this.dice_color) })));
+            materials.push(new THREE.MeshPhongMaterial($t.copyto(material_options,
+                                                                 { map: create_d4_text(labels[i], labelColor, diceColor) })));
         return materials;
     }
 
@@ -173,16 +184,16 @@
 
     this.create_d6_geometry = function(radius) {
         var vertices = [[-1, -1, -1], [1, -1, -1], [1, 1, -1], [-1, 1, -1],
-                [-1, -1, 1], [1, -1, 1], [1, 1, 1], [-1, 1, 1]];
+                        [-1, -1, 1], [1, -1, 1], [1, 1, 1], [-1, 1, 1]];
         var faces = [[0, 3, 2, 1, 1], [1, 2, 6, 5, 2], [0, 1, 5, 4, 3],
-                [3, 7, 6, 2, 4], [0, 4, 7, 3, 5], [4, 5, 6, 7, 6]];
+                     [3, 7, 6, 2, 4], [0, 4, 7, 3, 5], [4, 5, 6, 7, 6]];
         return create_geom(vertices, faces, radius, 0.1, Math.PI / 4);
     }
 
     this.create_d8_geometry = function(radius) {
         var vertices = [[1, 0, 0], [-1, 0, 0], [0, 1, 0], [0, -1, 0], [0, 0, 1], [0, 0, -1]];
         var faces = [[0, 2, 4, 1], [0, 4, 3, 2], [0, 3, 5, 3], [0, 5, 2, 4], [1, 3, 4, 5],
-                [1, 4, 2, 6], [1, 2, 5, 7], [1, 5, 3, 8]];
+                     [1, 4, 2, 6], [1, 2, 5, 7], [1, 5, 3, 8]];
         return create_geom(vertices, faces, radius, 0, -Math.PI / 4 / 2);
     }
 
@@ -193,100 +204,154 @@
             vertices.push([Math.cos(b), Math.sin(b), h * (i % 2 ? 1 : -1)]);
         vertices.push([0, 0, -1]); vertices.push([0, 0, 1]);
         var faces = [[5, 7, 11, 0], [4, 2, 10, 1], [1, 3, 11, 2], [0, 8, 10, 3], [7, 9, 11, 4],
-            [8, 6, 10, 5], [9, 1, 11, 6], [2, 0, 10, 7], [3, 5, 11, 8], [6, 4, 10, 9],
-            [1, 0, 2, v], [1, 2, 3, v], [3, 2, 4, v], [3, 4, 5, v], [5, 4, 6, v],
-            [5, 6, 7, v], [7, 6, 8, v], [7, 8, 9, v], [9, 8, 0, v], [9, 0, 1, v]];
+                     [8, 6, 10, 5], [9, 1, 11, 6], [2, 0, 10, 7], [3, 5, 11, 8], [6, 4, 10, 9],
+                     [1, 0, 2, v], [1, 2, 3, v], [3, 2, 4, v], [3, 4, 5, v], [5, 4, 6, v],
+                     [5, 6, 7, v], [7, 6, 8, v], [7, 8, 9, v], [9, 8, 0, v], [9, 0, 1, v]];
         return create_geom(vertices, faces, radius, 0, Math.PI * 6 / 5);
     }
 
     this.create_d12_geometry = function(radius) {
         var p = (1 + Math.sqrt(5)) / 2, q = 1 / p;
         var vertices = [[0, q, p], [0, q, -p], [0, -q, p], [0, -q, -p], [p, 0, q],
-                [p, 0, -q], [-p, 0, q], [-p, 0, -q], [q, p, 0], [q, -p, 0], [-q, p, 0],
-                [-q, -p, 0], [1, 1, 1], [1, 1, -1], [1, -1, 1], [1, -1, -1], [-1, 1, 1],
-                [-1, 1, -1], [-1, -1, 1], [-1, -1, -1]];
+                        [p, 0, -q], [-p, 0, q], [-p, 0, -q], [q, p, 0], [q, -p, 0], [-q, p, 0],
+                        [-q, -p, 0], [1, 1, 1], [1, 1, -1], [1, -1, 1], [1, -1, -1], [-1, 1, 1],
+                        [-1, 1, -1], [-1, -1, 1], [-1, -1, -1]];
         var faces = [[2, 14, 4, 12, 0, 1], [15, 9, 11, 19, 3, 2], [16, 10, 17, 7, 6, 3], [6, 7, 19, 11, 18, 4],
-                [6, 18, 2, 0, 16, 5], [18, 11, 9, 14, 2, 6], [1, 17, 10, 8, 13, 7], [1, 13, 5, 15, 3, 8],
-                [13, 8, 12, 4, 5, 9], [5, 4, 14, 9, 15, 10], [0, 12, 8, 10, 16, 11], [3, 19, 7, 17, 1, 12]];
+                     [6, 18, 2, 0, 16, 5], [18, 11, 9, 14, 2, 6], [1, 17, 10, 8, 13, 7], [1, 13, 5, 15, 3, 8],
+                     [13, 8, 12, 4, 5, 9], [5, 4, 14, 9, 15, 10], [0, 12, 8, 10, 16, 11], [3, 19, 7, 17, 1, 12]];
         return create_geom(vertices, faces, radius, 0.2, -Math.PI / 4 / 2);
     }
 
     this.create_d20_geometry = function(radius) {
         var t = (1 + Math.sqrt(5)) / 2;
         var vertices = [[-1, t, 0], [1, t, 0 ], [-1, -t, 0], [1, -t, 0],
-                [0, -1, t], [0, 1, t], [0, -1, -t], [0, 1, -t],
-                [t, 0, -1], [t, 0, 1], [-t, 0, -1], [-t, 0, 1]];
+                        [0, -1, t], [0, 1, t], [0, -1, -t], [0, 1, -t],
+                        [t, 0, -1], [t, 0, 1], [-t, 0, -1], [-t, 0, 1]];
         var faces = [[0, 11, 5, 1], [0, 5, 1, 2], [0, 1, 7, 3], [0, 7, 10, 4], [0, 10, 11, 5],
-                [1, 5, 9, 6], [5, 11, 4, 7], [11, 10, 2, 8], [10, 7, 6, 9], [7, 1, 8, 10],
-                [3, 9, 4, 11], [3, 4, 2, 12], [3, 2, 6, 13], [3, 6, 8, 14], [3, 8, 9, 15],
-                [4, 9, 5, 16], [2, 4, 11, 17], [6, 2, 10, 18], [8, 6, 7, 19], [9, 8, 1, 20]];
+                     [1, 5, 9, 6], [5, 11, 4, 7], [11, 10, 2, 8], [10, 7, 6, 9], [7, 1, 8, 10],
+                     [3, 9, 4, 11], [3, 4, 2, 12], [3, 2, 6, 13], [3, 6, 8, 14], [3, 8, 9, 15],
+                     [4, 9, 5, 16], [2, 4, 11, 17], [6, 2, 10, 18], [8, 6, 7, 19], [9, 8, 1, 20]];
         return create_geom(vertices, faces, radius, -0.2, -Math.PI / 4 / 2);
     }
 
-    this.scale = 50;
-    this.chamfer = 0.6;
-    this.material_options = {
+    var scale = 50;
+    var chamfer = 0.6;
+    var material_options = {
         specular: '#171d1f',
         color: '#ffffff',
         emissive: '#000000',
         shininess: 70,
         shading: THREE.FlatShading,
     };
-    this.label_color = '#aaaaaa';
-    this.dice_color = '#202020';
-    this.known_types = ['d4', 'd6', 'd8', 'd10', 'd12', 'd20', 'd100'];
-    this.dice_mass = { 'd4': 300, 'd6': 300, 'd8': 340, 'd10': 350, 'd12': 380, 'd20': 400, 'd100': 350 };
-    this.dice_inertia = { 'd4': 5, 'd6': 13, 'd8': 10, 'd10': 9, 'd12': 8, 'd20': 6, 'd100': 9 };
+    var labelColor = '#aaaaaa';
+    var diceColor = '#202020';
+    var d4MaterialCache, d100MaterialCache;
+    var known_types = ['d4', 'd6', 'd8', 'd10', 'd12', 'd20', 'd100'];
+    var dice_mass = { 'd4': 300, 'd6': 300, 'd8': 340, 'd10': 350, 'd12': 380, 'd20': 400, 'd100': 350 };
+    var dice_inertia = { 'd4': 5, 'd6': 13, 'd8': 10, 'd10': 9, 'd12': 8, 'd20': 6, 'd100': 9 };
+
+    var diceInfo = {
+        d4: {mass: 300, inertia: 5, scaleMultiplier: 1.2},
+        d6: {mass: 300, inertia: 13, scaleMultiplier: 0.9},
+        d8: {mass: 340, inertia: 10, scaleMultiplier: 1},
+        d10: {mass: 340, inertia: 10, scaleMultiplier: 0.9},
+        d12: {mass: 340, inertia: 10, scaleMultiplier: 0.9},
+        d20: {mass: 340, inertia: 10, scaleMultiplier: 1},
+        d100: {mass: 340, inertia: 10, scaleMultiplier: 0.9},
+    };
+    var diceMaterialCache = {}, diceGeometryCache = {};
 
     this.create_d4 = function() {
-        if (!this.d4_geometry) this.d4_geometry = this.create_d4_geometry(this.scale * 1.2);
-        if (!this.d4_material) this.d4_material = new THREE.MeshFaceMaterial(
-                this.create_d4_materials(this.scale / 2, this.scale * 2));
-        return new THREE.Mesh(this.d4_geometry, this.d4_material);
-    }
+        if (!diceGeometryCache.d4) {
+            diceGeometryCache.d4 = this.create_d4_geometry(scale * diceInfo.d4.scaleMultiplier);
+        }
+        if (!diceMaterialCache.d4) {
+            diceMaterialCache.d4 = new THREE.MeshFaceMaterial(
+                create_d4_materials(scale / 2, scale * 2)
+            );
+        }
+        return new THREE.Mesh(diceGeometryCache.d4, diceMaterialCache.d4);
+    };
 
     this.create_d6 = function() {
-        if (!this.d6_geometry) this.d6_geometry = this.create_d6_geometry(this.scale * 0.9);
-        if (!this.dice_material) this.dice_material = new THREE.MeshFaceMaterial(
-                this.create_dice_materials(this.standart_d20_dice_face_labels, this.scale / 2, this.scale));
-        return new THREE.Mesh(this.d6_geometry, this.dice_material);
-    }
-
-    this.create_d8 = function() {
-        if (!this.d8_geometry) this.d8_geometry = this.create_d8_geometry(this.scale);
-        if (!this.dice_material) this.dice_material = new THREE.MeshFaceMaterial(
-                this.create_dice_materials(this.standart_d20_dice_face_labels, this.scale / 2,
-                    this.scale * 1.2));
-        return new THREE.Mesh(this.d8_geometry, this.dice_material);
-    }
-
-    this.create_d10 = function() {
-        if (!this.d10_geometry) this.d10_geometry = this.create_d10_geometry(this.scale * 0.9);
-        if (!this.dice_material) this.dice_material = new THREE.MeshFaceMaterial(
-                this.create_dice_materials(this.standart_d20_dice_face_labels, this.scale / 2, this.scale));
-        return new THREE.Mesh(this.d10_geometry, this.dice_material);
-    }
-
-    this.create_d12 = function() {
-        if (!this.d12_geometry) this.d12_geometry = this.create_d12_geometry(this.scale * 0.9);
-        if (!this.dice_material) this.dice_material = new THREE.MeshFaceMaterial(
-                this.create_dice_materials(this.standart_d20_dice_face_labels, this.scale / 2, this.scale));
-        return new THREE.Mesh(this.d12_geometry, this.dice_material);
+        if (!this.d6_geometry) this.d6_geometry = this.create_d6_geometry(scale * 0.9);
+        if (!diceMaterialCache[labelColor + diceColor]) {
+            diceMaterialCache[labelColor + diceColor] = new THREE.MeshFaceMaterial(
+            create_dice_materials(standard_d20_dice_face_labels,
+            scale / 2,
+            scale,
+            diceColor,
+            labelColor)
+           );
+           }
+            return new THREE.Mesh(this.d6_geometry, diceMaterialCache[labelColor + diceColor]);
+           };
+
+            this.create_d8 = function(/*labelColor, diceColor*/) {
+            if (!this.d8_geometry) {
+            this.d8_geometry = this.create_d8_geometry(scale);
+           }
+            if (!diceMaterialCache[labelColor + diceColor]) {
+            diceMaterialCache[labelColor + diceColor] = new THREE.MeshFaceMaterial(
+            create_dice_materials(standard_d20_dice_face_labels,
+            scale / 2,
+            scale,
+            labelColor,
+            diceColor));
+           }
+            return new THREE.Mesh(this.d8_geometry, diceMaterialCache[labelColor + diceColor]);
+           }
+
+            this.create_d10 = function() {
+            if (!this.d10_geometry) this.d10_geometry = this.create_d10_geometry(scale * 0.9);
+            if (!diceMaterialCache[labelColor + diceColor]) {
+            diceMaterialCache[labelColor + diceColor] = new THREE.MeshFaceMaterial(
+            create_dice_materials(standard_d20_dice_face_labels,
+            scale / 2,
+            scale,
+            labelColor,
+            diceColor));
+           }
+            return new THREE.Mesh(this.d10_geometry, diceMaterialCache[labelColor + diceColor]);
+           }
+
+            this.create_d12 = function() {
+            if (!this.d12_geometry) this.d12_geometry = this.create_d12_geometry(scale * 0.9);
+            if (!diceMaterialCache[labelColor + diceColor]) {
+            diceMaterialCache[labelColor + diceColor] = new THREE.MeshFaceMaterial(
+            create_dice_materials(standard_d20_dice_face_labels,
+            scale / 2,
+            scale,
+                               labelColor,
+                               diceColor));
+        }
+        return new THREE.Mesh(this.d12_geometry, diceMaterialCache[labelColor + diceColor]);
     }
 
     this.create_d20 = function() {
-        if (!this.d20_geometry) this.d20_geometry = this.create_d20_geometry(this.scale);
-        if (!this.dice_material) this.dice_material = new THREE.MeshFaceMaterial(
-                this.create_dice_materials(this.standart_d20_dice_face_labels, this.scale / 2, this.scale));
-        return new THREE.Mesh(this.d20_geometry, this.dice_material);
+        if (!this.d20_geometry) this.d20_geometry = this.create_d20_geometry(scale);
+        if (!diceMaterialCache[labelColor + diceColor]) {
+            diceMaterialCache[labelColor + diceColor] = new THREE.MeshFaceMaterial(
+                create_dice_materials(standard_d20_dice_face_labels,
+                                      scale / 2,
+                                      scale,
+                                      labelColor,
+                                      diceColor));
+        }
+        return new THREE.Mesh(this.d20_geometry, diceMaterialCache[labelColor + diceColor]);
     }
 
     this.create_d100 = function() {
-        if (!this.d10_geometry) this.d10_geometry = this.create_d10_geometry(this.scale * 0.9);
-        if (!this.d100_material) this.d100_material = new THREE.MeshFaceMaterial(
-                this.create_dice_materials(this.standart_d100_dice_face_labels,
-                    this.scale / 2, this.scale * 1.5));
-        return new THREE.Mesh(this.d10_geometry, this.d100_material);
+        if (!this.d10_geometry) this.d10_geometry = this.create_d10_geometry(scale * 0.9);
+        if (!d100MaterialCache) {
+            d100MaterialCache = new THREE.MeshFaceMaterial(
+                create_dice_materials(standard_d100_dice_face_labels,
+                                      scale / 2,
+                                      scale * 1.5,
+                                      labelColor,
+                                      diceColor));
+        }
+        return new THREE.Mesh(this.d10_geometry, d100MaterialCache);
     }
 
     this.parse_notation = function(notation) {
@@ -298,7 +363,7 @@
             var count = parseInt(res[1]);
             if (res[1] == '') count = 1;
             var type = 'd' + res[3];
-            if (this.known_types.indexOf(type) == -1) continue;
+            if (known_types.indexOf(type) == -1) continue;
             while (count--) ret.set.push(type);
             if (res[5]) ret.constant += parseInt(res[5]);
         }
@@ -331,12 +396,12 @@
             this.h = this.ch;
         }
         this.aspect = Math.min(this.cw / this.w, this.ch / this.h);
-        that.scale = Math.sqrt(this.w * this.w + this.h * this.h) / 13;
+        scale = Math.sqrt(this.w * this.w + this.h * this.h) / 13;
         this.use_adapvite_timestep = true;
 
         this.renderer = window.WebGLRenderingContext
             ? new THREE.WebGLRenderer({ antialias: true })
-            : new THREE.CanvasRenderer({ antialias: true });
+        : new THREE.CanvasRenderer({ antialias: true });
         this.renderer.setSize(this.cw * 2, this.ch * 2);
         this.renderer.shadowMapEnabled = true;
         this.renderer.shadowMapSoft = true;
@@ -359,8 +424,8 @@
         var ambientLight = new THREE.AmbientLight(0xf0f0f0);
         this.scene.add(ambientLight);
         var mw = Math.max(this.w, this.h);
-        var light = new THREE.SpotLight(0xffffff);
-        light.position.set(-mw / 2, mw / 2, mw * 2);
+        var light = new THREE.SpotLight(0xf0f0f0);
+        light.position.set(-mw * 2, mw / 2, mw * 2);
         light.target.position.set(0, 0, 0);
         light.castShadow = true;
         light.shadowCameraNear = mw / 10;
@@ -376,14 +441,14 @@
         var desk_body_material = new CANNON.Material();
         var barrier_body_material = new CANNON.Material();
         this.world.addContactMaterial(new CANNON.ContactMaterial(
-                    desk_body_material, this.dice_body_material, 0.01, 0.5));
+            desk_body_material, this.dice_body_material, 0.01, 0.5));
         this.world.addContactMaterial(new CANNON.ContactMaterial(
-                    barrier_body_material, this.dice_body_material, 0, 1.0));
+            barrier_body_material, this.dice_body_material, 0, 1.0));
         this.world.addContactMaterial(new CANNON.ContactMaterial(
-                    this.dice_body_material, this.dice_body_material, 0, 0.5));
+            this.dice_body_material, this.dice_body_material, 0, 0.5));
 
         this.desk = new THREE.Mesh(new THREE.PlaneGeometry(this.w * 2, this.h * 2, 1, 1), 
-                new THREE.MeshLambertMaterial({ color: 0xffffff }));
+                                   new THREE.MeshLambertMaterial({ color: 0xffffff }));
         this.desk.receiveShadow = true;
         this.scene.add(this.desk);
 
@@ -419,8 +484,8 @@
         var dice = that['create_' + type]();
         dice.castShadow = true;
         dice.dice_type = type;
-        dice.body = new CANNON.RigidBody(that.dice_mass[type],
-                dice.geometry.cannon_shape, this.dice_body_material);
+        dice.body = new CANNON.RigidBody(dice_mass[type],
+                                         dice.geometry.cannon_shape, this.dice_body_material);
         dice.body.position.set(pos.x, pos.y, pos.z);
         dice.body.quaternion.setFromAxisAngle(new CANNON.Vec3(axis.x, axis.y, axis.z), axis.a * Math.PI * 2);
         dice.body.angularVelocity.set(angle.x, angle.y, angle.z);
@@ -442,7 +507,7 @@
                 if (dice.dice_stopped == true) continue;
                 var a = dice.body.angularVelocity, v = dice.body.velocity;
                 if (Math.abs(a.x) < e && Math.abs(a.y) < e && Math.abs(a.z) < e &&
-                        Math.abs(v.x) < e && Math.abs(v.y) < e && Math.abs(v.z) < e) {
+                    Math.abs(v.x) < e && Math.abs(v.y) < e && Math.abs(v.z) < e) {
                     if (dice.dice_stopped) {
                         if (time - dice.dice_stopped > 50) {
                             dice.dice_stopped = true;
@@ -465,8 +530,8 @@
             for (var i in this.dices) {
                 var dice = this.dices[i], invert = dice.dice_type == 'd4' ? -1 : 1;
                 var intersects = (new THREE.Raycaster(
-                            new THREE.Vector3(dice.position.x, dice.position.y, 200 * invert),
-                            new THREE.Vector3(0, 0, -1 * invert))).intersectObjects([dice]);
+                    new THREE.Vector3(dice.position.x, dice.position.y, 200 * invert),
+                    new THREE.Vector3(0, 0, -1 * invert))).intersectObjects([dice]);
                 var matindex = intersects[0].face.materialIndex - 1;
                 if (dice.dice_type == 'd100') matindex *= 10;
                 values.push(matindex);
@@ -517,18 +582,18 @@
         this.renderer.render(this.scene, this.camera);
     }
 
-    function make_random_vector(vector) {
-        var random_angle = rnd() * Math.PI / 5 - Math.PI / 5 / 2;
-        var vec = {
-            x: vector.x * Math.cos(random_angle) - vector.y * Math.sin(random_angle),
-            y: vector.x * Math.sin(random_angle) + vector.y * Math.cos(random_angle)
-        };
-        if (vec.x == 0) vec.x = 0.01;
-        if (vec.y == 0) vec.y = 0.01;
-        return vec;
-    }
-
     this.dice_box.prototype.generate_vectors = function(notation, vector, boost) {
+        function make_random_vector(vector) {
+            var random_angle = rnd() * Math.PI / 5 - Math.PI / 5 / 2;
+            var vec = {
+                x: vector.x * Math.cos(random_angle) - vector.y * Math.sin(random_angle),
+                y: vector.x * Math.sin(random_angle) + vector.y * Math.cos(random_angle)
+            };
+            if (vec.x == 0) vec.x = 0.01;
+            if (vec.y == 0) vec.y = 0.01;
+            return vec;
+        }
+
         var vectors = [];
         for (var i in notation.set) {
             var vec = make_random_vector(vector);
@@ -541,7 +606,7 @@
             if (projector > 1.0) pos.y /= projector; else pos.x *= projector;
             var velvec = make_random_vector(vector);
             var velocity = { x: velvec.x * boost, y: velvec.y * boost, z: -10 };
-            var inertia = that.dice_inertia[notation.set[i]];
+            var inertia = dice_inertia[notation.set[i]];
             var angle = {
                 x: -(rnd() * vec.y * 5 + inertia * vec.y),
                 y: rnd() * vec.x * 5 + inertia * vec.x,
@@ -557,7 +622,7 @@
         this.clear();
         for (var i in vectors) {
             this.create_dice(vectors[i].set, vectors[i].pos, vectors[i].velocity,
-                    vectors[i].angle, vectors[i].axis);
+                             vectors[i].angle, vectors[i].axis);
         }
         this.callback = callback;
         this.running = (new Date()).getTime();
@@ -588,9 +653,9 @@
 
     this.dice_box.prototype.search_dice_by_mouse = function(ev) {
         var intersects = (new THREE.Raycaster(this.camera.position, 
-                    (new THREE.Vector3((ev.clientX - this.cw) / this.aspect,
-                                       (ev.clientY - this.ch) / this.aspect, this.w / 9))
-                    .sub(this.camera.position).normalize())).intersectObjects(this.dices);
+                                              (new THREE.Vector3((ev.clientX - this.cw) / this.aspect,
+                                                                 (ev.clientY - this.ch) / this.aspect, this.w / 9))
+                                              .sub(this.camera.position).normalize())).intersectObjects(this.dices);
         if (intersects.length) return intersects[0].object.userData;
     }
 
@@ -598,18 +663,18 @@
         this.clear();
         var step = this.w / 4.5;
         this.pane = new THREE.Mesh(new THREE.PlaneGeometry(this.cw * 20, this.ch * 20, 1, 1), 
-                new THREE.MeshPhongMaterial({ color: 0, ambient: 0xfbfbfb, emissive: 0 }));
+                                   new THREE.MeshPhongMaterial({ color: 0, ambient: 0xfbfbfb, emissive: 0 }));
         this.pane.receiveShadow = true;
         this.pane.position.set(0, 0, 1);
         this.scene.add(this.pane);
 
         var mouse_captured = false;
 
-        for (var i = 0, pos = -3; i < that.known_types.length; ++i, ++pos) {
-            var dice = $t.dice['create_' + that.known_types[i]]();
+        for (var i = 0, pos = -3; i < known_types.length; ++i, ++pos) {
+            var dice = $t.dice['create_' + known_types[i]]();
             dice.position.set(pos * step, 0, step * 0.5);
             dice.castShadow = true;
-            dice.userData = that.known_types[i];
+            dice.userData = known_types[i];
             this.dices.push(dice); this.scene.add(dice);
         }