Choose the number of threads, better error handling
This commit is contained in:
Boris Kubiak
parent
04cf5746a9
commit
692773e400
6 changed files with 86 additions and 14 deletions
|
|
@ -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}}
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
26
index.html
26
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>
|
||||
File diff suppressed because one or more lines are too long
40
js/index.js
40
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++) {
|
||||
this.workers[w] = new Worker('js/bundle.js');
|
||||
this.workers[w].onmessage = function (event) {
|
||||
self.parseWorkerMessage(event.data, 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();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -68,7 +68,11 @@ const getVanityWallet = (input, isChecksum, max) => {
|
|||
|
||||
onmessage = function (event) {
|
||||
const data = event.data;
|
||||
postMessage(getVanityWallet(data.input.prefix, data.input.checksum, data.step));
|
||||
try {
|
||||
postMessage(getVanityWallet(data.input.prefix, data.input.checksum, data.step));
|
||||
} catch (err) {
|
||||
postMessage({error: err.toString()});
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue