Choose the number of threads, better error handling

css/stylesheet.css

@@ -1 +1 @@
-body{padding:0;font-family:Lato,sans-serif;background:#000;margin:8em 0}h1,h2,h3,h4,h5,h6,label,p{margin:0}.header{margin-bottom:8em;color:#fff;font-family:Montserrat,sans-serif}.header h1{font-size:3em;font-weight:700;border:4px solid #fff;width:33%;margin:0 auto;padding:10px}.header p{font-size:1.5em;letter-spacing:2px;font-weight:400;margin-top:1em}.description{margin:15px 0 20px;color:#888}.panel{padding:1.5em 3em;background:#191919;margin-top:2em;color:#fff;font-weight:400}.form input[type=text]{width:100%;color:#fff;background:#2d2c2c;outline:0;font-size:1.3em;padding:.5em;border:none;margin-bottom:10px;-webkit-appearance:none}.form input[type=button]{border:none;outline:0;color:#fff;padding:.6em;font-size:1.3em;font-weight:500;margin:1.3em 0 0 0;cursor:pointer;-webkit-appearance:none;background:#198a88;width:100%}.form input[type=button]:hover{background:#d78716}.form input[type=button]:disabled{background:#2d2c2c;cursor:auto}.form .error-text{display:none;font-size:.85em;color:#ec4a41}.form .error input[type=text]{border:1px solid #ec4a41}.form .error .error-text{display:block}.form .check{margin:.5em 0}.checkbox{margin-bottom:4px;padding-left:30px;line-height:27px;cursor:pointer;position:relative;font-size:1.2em;color:#fff;font-weight:400}.checkbox:last-child{margin-bottom:0}.checkbox i{position:absolute;bottom:4px;left:17.5em;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox i.left{position:absolute;bottom:4px;left:0;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox input{position:absolute;left:-9999px}.checkbox input+i:after{content:'';background:url(../images/tick-mark.png) no-repeat 1px 2px;top:4px;left:2px;width:15px;height:15px;font:normal 12px/16px FontAwesome;text-align:center;position:absolute;opacity:0}.checkbox input:checked+i:after{opacity:1}.result>div:not(:last-child),.statistics>div:not(:last-child){margin-bottom:15px}.statistics{padding-bottom:3.2em}.statistics>div:not(.percentage){clear:both}.probability{width:85%;margin:5px 0;height:18px;background:#2d2c2c;float:left}.probability-bar{height:100%;display:block;background-color:#d78716}.percentage{float:right;width:15%;text-align:center;position:relative;top:-10px;left:15px}.percentage div{font-size:.75em}.percentage h5{color:#fff;font-weight:500}.output{font-family:monospace;font-size:1.2em;color:#888;margin-left:15px;word-break:break-all}@media screen and (max-width:1280px){.header h1{font-size:2.8em;width:35%}}@media screen and (max-width:1024px){.header h1{font-size:2.5em;border:3px solid #fff;width:34%}.header p{font-size:1.4em;margin-top:.8em}body{margin:7em 0 5em 0}.header{margin-bottom:4em}}@media screen and (max-width:768px){.header h1{width:43%}}@media screen and (max-width:640px){.header h1{width:46%;font-size:2.2em;padding:8px}.header p{font-size:1.3em;margin-top:.7em}body{margin:5em 0 4em 0}.header{margin-bottom:4em}}@media screen and (max-width:480px){.header h1{width:65%;font-size:2em;padding:7px;border:2px solid #fff}.header p{font-size:1.2em}}@media screen and (max-width:320px){.header h1{width:73%;font-size:1.6em;padding:6px}.header p{font-size:1em}}
+body{padding:0;font-family:Lato,sans-serif;background:#000;margin:8em 0}h1,h2,h3,h4,h5,h6,label,p{margin:0}[v-cloak]{display:none}.header{margin-bottom:8em;color:#fff;font-family:Montserrat,sans-serif}.header h1{font-size:3em;font-weight:700;border:4px solid #fff;width:33%;margin:0 auto;padding:10px}.header p{font-size:1.5em;letter-spacing:2px;font-weight:400;margin-top:1em}.description{margin:15px 0 20px;color:#888}.panel{padding:1.5em 3em;background-color:#191919;margin-top:2em;color:#fff;font-weight:400}.panel.error{background-color:#ec4a41}.panel.error a,.panel.error a:hover,.panel.error a:visited{color:#fff;text-decoration:underline}.form input[type=text]{width:100%;color:#fff;background:#2d2c2c;outline:0;font-size:1.3em;padding:.5em;border:none;margin-bottom:10px;-webkit-appearance:none}.form input[type=button]{border:none;outline:0;color:#fff;padding:.6em;font-size:1.3em;font-weight:500;margin:1.3em 0 0 0;cursor:pointer;-webkit-appearance:none;background:#198a88;width:100%}.form input[type=button]:hover{background:#d78716}.form input[type=button]:disabled{background:#2d2c2c;cursor:auto}.form .error-text{display:none;font-size:.85em;color:#ec4a41}.form .error input[type=text]{border:1px solid #ec4a41}.form .error .error-text{display:block}.form .check{margin:.5em 0}.checkbox{margin-bottom:4px;padding-left:30px;line-height:27px;cursor:pointer;position:relative;font-size:1.2em;color:#fff;font-weight:400}.checkbox:last-child{margin-bottom:0}.checkbox i{position:absolute;bottom:4px;left:17.5em;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox i.left{position:absolute;bottom:4px;left:0;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox input{position:absolute;left:-9999px}.checkbox input+i:after{content:'';background:url(../images/tick-mark.png) no-repeat 1px 2px;top:4px;left:2px;width:15px;height:15px;font:normal 12px/16px FontAwesome;text-align:center;position:absolute;opacity:0}.checkbox input:checked+i:after{opacity:1}.threads{font-size:1.2em}.threads h4{display:inline}.threads input[type=button].square-btn{display:inline-block;width:24px;height:24px;margin:0 5px 0 0;padding:0;line-height:1em}.result>div:not(:last-child),.statistics>div:not(:last-child){margin-bottom:15px}.statistics{padding-bottom:3.2em}.statistics>div:not(.percentage){clear:both}.probability{width:85%;margin:5px 0;height:18px;background:#2d2c2c;float:left}.probability-bar{height:100%;display:block;background-color:#d78716}.percentage{float:right;width:15%;text-align:center;position:relative;top:-10px;left:15px}.percentage div{font-size:.75em}.percentage h5{color:#fff;font-weight:500}.output{font-family:monospace;font-size:1.2em;color:#888;margin-left:15px;word-break:break-all}@media screen and (max-width:1280px){.header h1{font-size:2.8em;width:35%}}@media screen and (max-width:1024px){.header h1{font-size:2.5em;border:3px solid #fff;width:34%}.header p{font-size:1.4em;margin-top:.8em}body{margin:7em 0 5em 0}.header{margin-bottom:4em}}@media screen and (max-width:768px){.header h1{width:43%}}@media screen and (max-width:640px){.header h1{width:46%;font-size:2.2em;padding:8px}.header p{font-size:1.3em;margin-top:.7em}body{margin:5em 0 4em 0}.header{margin-bottom:4em}}@media screen and (max-width:480px){.header h1{width:65%;font-size:2em;padding:7px;border:2px solid #fff}.header p{font-size:1.2em}}@media screen and (max-width:320px){.header h1{width:73%;font-size:1.6em;padding:6px}.header p{font-size:1em}}

css/stylesheet.sass

@@ -18,6 +18,9 @@ body
 h1, h2, h3, h4, h5, h6, p, label
   margin: 0
 
+[v-cloak]
+  display: none
+
 .header
   margin-bottom: 8em
   color: $white-text
@@ -43,11 +46,15 @@ h1, h2, h3, h4, h5, h6, p, label
 
 .panel
   padding: 1.5em 3em
-  background: $panel-background
+  background-color: $panel-background
   margin-top: 2em
   color: $white-text
   font-weight: 400
-
+  &.error
+    background-color: $red
+    a, a:visited, a:hover
+      color: $white-text
+      text-decoration: underline
 .form
   input
     &[type="text"]
@@ -135,6 +142,19 @@ h1, h2, h3, h4, h5, h6, p, label
     &:checked + i:after
       opacity: 1
 
+.threads
+  font-size: 1.2em
+  h4
+    display: inline
+  input[type=button].square-btn
+    display: inline-block
+    width: 24px
+    height: 24px
+    margin: 0 5px 0 0
+    padding: 0
+    line-height: 1em
+
+
 .statistics > div:not(:last-child), .result > div:not(:last-child)
   margin-bottom: 15px
 

index.html

@@ -43,6 +43,21 @@
             </div>
         </div>
     </div>
+    <div v-if="error" class="row" v-cloak>
+        <div class="col-md-12">
+            <div class="panel error">
+                <p v-if="error === 'local_workers_forbidden'">
+                    Your browser disallows multi-thread computation when run from a local file.<br>
+                    Please use the online version at <a href="https://git.io/veth">git.io/veth</a>, or use a different browser.
+                </p>
+                <p v-else-if="error === 'workers_unsupported'">
+                    Your browser does not support multi-thread computation.<br>
+                    Please use a different browser.
+                </p>
+                <p v-else v-text="error"></p>
+            </div>
+        </div>
+    </div>
     <div class="row">
         <div class="col-md-6">
             <div class="panel form">
@@ -56,9 +71,16 @@
                             Case-sensitive
                         </label>
                     </div>
+                    <div class="threads">
+                        <input type="button" class="square-btn" value="-" @click="threads--" :disabled="running || threads <= 1">
+                        <input type="button" class="square-btn arrow" value="+" @click="threads++" :disabled="running">
+                        <h4 v-text="threads"></h4>
+                        <span v-cloak>threads</span>
+                        <span v-if="threads === cores" v-cloak>(recommended)</span>
+                    </div>
                     <div class="row">
                         <div class="col-lg-6 col-sm-12">
-                            <input type="button" value="Generate" @click="startGen" :disabled="running || inputError">
+                            <input type="button" value="Generate" @click="startGen" :disabled="running || inputError || error">
                         </div>
                         <div class="col-lg-6 col-sm-12">
                             <input type="button" value="Stop" @click="stopGen" :disabled="!running">
@@ -95,9 +117,7 @@
 </div>
 
 <!--JS-->
-<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
-<script src="js/bundle.js" type="text/javascript"></script>
 <script src="js/index.js" type="text/javascript"></script>
 </body>
 </html>

js/index.js

@@ -29,6 +29,7 @@ new Vue({
 		status: 'Waiting',
 		workers: [],
 		threads: 4,
+		cores: 0,
 		result: {
 			address: '',
 			privateKey: ''
@@ -36,7 +37,8 @@ new Vue({
 		input: {
 			prefix: '',
 			checksum: true
-		}
+		},
+		error: false
 	},
 
 	computed: {
@@ -95,16 +97,26 @@ new Vue({
 
 			// Create workers
 			for (let w = this.workers.length; w < this.threads; w++) {
+				try {
 					this.workers[w] = new Worker('js/bundle.js');
 					this.workers[w].onmessage = function (event) {
 						self.parseWorkerMessage(event.data, w);
 					};
+				} catch (err) {
+					this.error = 'local_workers_forbidden';
+					break;
+				}
 			}
 		},
 
 		parseWorkerMessage(add, w) {
 			if (add !== null) {
 				this.stopGen();
+				if (add.error) {
+					this.error = add.error;
+					return;
+				}
+
 				return this.displayResult(add);
 			}
 
@@ -115,7 +127,7 @@ new Vue({
 
 		startGen() {
 			if (!window.Worker) {
-				console.error('Web workers are not supported');
+				this.error = 'workers_unsupported';
 				return;
 			}
 
@@ -139,10 +151,26 @@ new Vue({
 			}
 			this.workers = [];
 			this.initWorkers();
+		},
+
+		countCores() {
+            // Estimate number of cores on machine
+			let cores = 0;
+			try {
+				cores = parseInt(navigator.hardwareConcurrency, 10);
+			} catch (err) {
+				console.error(err);
+			}
+
+			if (cores) {
+				this.cores = cores;
+				this.threads = this.cores;
+			}
 		}
 	},
 
 	created() {
+		this.countCores();
 		this.initWorkers();
 	}
 });

js/vanity.js

@@ -68,7 +68,11 @@ const getVanityWallet = (input, isChecksum, max) => {
 
 onmessage = function (event) {
 	const data = event.data;
+	try {
 		postMessage(getVanityWallet(data.input.prefix, data.input.checksum, data.step));
+	} catch (err) {
+		postMessage({error: err.toString()});
+	}
 };
 
 module.exports = {