nodelympics

by Wuzhong Zhu

HTML

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container" >
    <div id = "banner">
        <img src="https://raw.githubusercontent.com/wuzhong-zhu/node-lympic/main/resources/logo1.png">
    </div>
    <div id = "wrapper">
        <div id = "left">
            <div id="entry">
                <div id="wallet">
                    <h2> config</h2>
                    <p>Private key</p>
                    <input type="text" id="walletPrivateKey" placeholder="private key of your wallet" /></br>
                    <p>Public key</p>
                    <input type="text" id="walletPublicKey" placeholder="public key of your wallet" /></br>
                    <p>Number of rounds</p>
                    <input type="text" id="epoch" value="1"></br>
                    <p>Transaction value</p>
                    <input type="text" id="transValue" value="0.1" ></br>
                    <p>Default value is 0.1 ether + gas fee</p>
                    <h2 > ************ </h2>
                </div>

                <div id="endpoints">
                    <h2> endpoints </h2>
                    <div id="endpoint1" type="nodediv">
                        <h4> node 1: </h4>
                        <input type="text" id="wsURL1" placeholder="web socket endpoint address" /></br>
                    </div>
                    <div id="endpoint2" type="nodediv">
                        <h4> node 2: </h4>
                        <input type="text" id="wsURL2" placeholder="web socket endpoint address" /></br>
                    </div>
                </div>
            </div>
            <button id="addNode" type="button" onClick="addNode();">add node</button>
        </div>
        <div id = "right">
            <div id="info">
            </div>
            <button id="run" type="button"...

CSS

html,
body {
    height: 100%;
    width: 100%;
}

p,
h2,
h4 {
    margin-block-start: 15px;
    margin-block-end: 0px;
}

#container {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid orange;
    padding: 0.5%;
    width: 95%;
    height: 95%;
}

#banner {
    position: relative;
    background-image: url("https://raw.githubusercontent.com/wuzhong-zhu/node-lympic/main/resources/logo2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 2%;
    margin-bottom: 2%;
    width: 100%;
    height: 20%;
    text-align: center;
}

img {
    max-width: 100%;
    max-height: 100%;
}

input {
    width: 90%;
}

#wrapper {
    width: 100%;
    height: 69%;
    padding: 0.5%;
}

#left {
    position: relative;
    width: 25%;
    height: 100%;
    border: 1px solid orange;
    padding: 0.5%;
    text-align: left;
    overflow: auto;
    float: left;
}

#right {
    position: relative;
    width: 70%;
    height: 100%;
    padding: 0.5%;
    border: 1px solid orange;
    text-align: center;
    overflow: auto;
    float: left;
}

#entry {
    position: relative;
    overflow: auto;
    height: 90%;
    width: auto;
}

#addNode {
    position: absolute;
    color: white;
    font-size: large;
    background-color: orange;
    font-weight: bolder;
    height: 30px;
    bottom: 2%;
    left: 5%;
    right: 5%;
}

#info {
    position: relative;
    overflow: auto;
    height: 90%;
    width: auto;
}

#run {
    position: absolute;
    color: white;
    font-size: large;
    background-color: orange;
    font-weight: bolder;
    height: 30px;
    bottom: 2%;
    left: 20%;
    right: 20%;
}

JavaScript

var walletPrivateKey
var walletPublicKey
var transValue
var nodeNum = 2
var epoch = 5
var epoch1 = 5
var pitch_time
var pitcher

var nodes = []
var endedTrxHistory = []

function run(){
    init()
    updateInfo("Program started")
    updateInfo("******")
}

function initNode(index, wsURL){
    nodes[index].isReady = false
    nodes[index].web3 = new Web3(new Web3.providers.WebsocketProvider(wsURL));
    nodes[index].web3.eth.accounts.wallet.add(walletPrivateKey);
    nodes[index].web3.eth.getBalance(walletPublicKey).then(function(object){
        updateInfo(nodes[index].name + " connected")
        console.log(nodes[index].name + " get balance:")
        console.log(object)
        nodes[index].subscription = nodes[index].web3.eth.subscribe('pendingTransactions')
        .on("connected", function(subscriptionId){
            updateInfo(nodes[index].name + " is ready, subscirption ID="+subscriptionId)
            nodes[index].isReady = true
            if(allReady()){
                pitcher = 0
                pitch()
            }
        })
        .on("data", function(result){
            txHash = result
            nodes[index].timer = new Date();
            nodes[index].web3.eth.getTransaction(txHash).then(function(tx){
                if(tx && tx.from !== undefined && tx.from == walletPublicKey && !window["endedTrxHistory"].includes(tx)){
                    nodes[index].isReady = true
                    nodes[index].timer = new Date();
                    updateInfo(nodes[index].name +" catches the transaction after " +(nodes[index].timer-pitch_time)+"ms.")
                    nodes[index].totalTime += (nodes[index].timer-pitch_time)
                    console.log(tx)
                }
            })
        })
    })
}

function pitch(){
    var web3_pitcher = nodes[pitcher].web3
    updateInfo("***************")
    updateInfo("node "+(pitcher+1) + " is the sender now")
    for (let i =0; i <nodeNum; i++){
        nodes[i].isReady = false
    }
   ...