less and more constrasting colours, allow HeadRenderer to fail

.gitignore

@@ -3,4 +3,5 @@
 /public/blob/*
 !/public/blob/.gitkeep
 /node_modules
+/public/js/dist
 

src/components/Bar.js

@@ -5,7 +5,7 @@ export default class Bar extends Component {
         const ceilCurrent = Math.ceil(current);
         const perc = (ceilCurrent / base) * 100;
         return <div className={`bar ${type}`}>
-            <div className="inner-bar" style={{width: Math.max(perc) + '%'}}>
+            <div className="inner-bar" style={{width: Math.max(perc, 100) + '%'}}>
                 <span className="inner-text">{ceilCurrent}/{base} ({Math.ceil(perc)}%)</span>
             </div>
         </div>

src/head-render/HeadRenderer.js

@@ -84,16 +84,19 @@ export class HeadRenderer {
         this.clear();
         while (this.renderQueue.length > 0) {
             let [objects, res] = this.renderQueue.shift();
-            console.log(objects, res);
-            let shapePromises = objects.map(async x => {
-                let req = await fetch(`blob/shape/${x}.json`);
-                let json = await req.json();
-                let shapeColl = await ShapeCollection.forceLoad(json, 'blob/texture/');
-                this.add(shapeColl);
-            });
-            await Promise.all(shapePromises);
-            this.rotate(-5 * (Math.PI / 180), -30 * (Math.PI / 180), 0);
-            res(await this.draw());
+            try {
+                let shapePromises = objects.map(async x => {
+                    let req = await fetch(`blob/shape/${x}.json`);
+                    let json = await req.json();
+                    let shapeColl = await ShapeCollection.forceLoad(json, 'blob/texture/');
+                    this.add(shapeColl);
+                });
+                await Promise.all(shapePromises);
+                this.rotate(-5 * (Math.PI / 180), -30 * (Math.PI / 180), 0);
+                res(await this.draw());
+            } catch (e) {
+                console.log("Failed to render", objects);
+            }
             this.clear();
         }
 

src/utils.js

@@ -12,26 +12,26 @@ export function uuidv4() {
 }
 
 const COLORS = [
-    '#fc5c65',
+    // '#fc5c65',
     '#fd9644',
-    '#fed330',
+    // '#fed330',
     '#26de81',
-    '#2bcbba',
+    // '#2bcbba',
     '#eb3b5a',
-    '#fa8231',
-    '#f7b731',
-    '#20bf6b',
-    '#0fb9b1',
+    // '#fa8231',
+    // '#f7b731',
+    // '#20bf6b',
+    // '#0fb9b1',
     '#45aaf2',
-    '#4b7bec',
+    // '#4b7bec',
     '#a55eea',
-    '#d1d8e0',
-    '#778ca3',
-    '#2d98da',
-    '#3867d6',
-    '#8854d0',
-    '#a5b1c2',
-    '#4b6584',
+    '#fff',
+    // '#778ca3',
+    // '#2d98da',
+    // '#3867d6',
+    // '#8854d0',
+    // '#a5b1c2',
+    // '#4b6584',
 ];
 
 export function colorFromName(name) {