Programming Project - Phase 1

Hi @CaliCrypto22

That most likely happens because you are not running the python server from the frontend folder therefore you are asked to select which file you want to run.

Cheers,
Dani

trying to display a string that is returned from my smart contract called heads
tried like this, but is it possible to get return value from .send() ?
my code is here: https://github.com/voljumet/coinflipp

contractInstance.methods.heads().send(config)
  .on("returnValues", function (ret) {
    console.log(ret[0].returnValues);
  });

Here is my working code for phase 1:
https://github.com/Capplequoppe/coin-flip

Hey @voljumet

What do you get if you try to console.log(ret)?

Regards,
Dani

Hey @dan-i
I get nothing if i do that :sweat_smile:
but I’ve changed some of my code a bit since last night:
I thought that i could use event and emit, but that wont return anything either

smartcontract:

pragma solidity 0.5.12;

import "./balanceCheck.sol";

contract Flipp is balanceCheck{
    string result;
    uint userBalance;

    event BetComplete(
        string result, 
        uint userBalance
    );
    
    function random() internal view returns(uint) {
        return block.timestamp % 2;
    }
  
    function heads() public payable {
        emit BetComplete(flipp(0), getBalancez());
    }
    
    function tails() public payable {
        emit BetComplete(flipp(1), getBalancez());
    }
    
    function flipp(uint guess) internal returns(string memory){
        // the balance has to take into account the value put in the bet
        require(msg.value*2 <= address(this).balance, "Bank is out of cash");
        if(random() == guess){
            msg.sender.transfer(msg.value*2);
            return "You Won!";
        } else {
            return "You Lost!";
        }
    }
    
    function getBalance() public view returns (uint balance){
        return (address(this).balance);
    }
    
    function deposit() public payable returns (uint){
        return address(this).balance;
    }
}

js file:

const web3 = new Web3(Web3.givenProvider);
var contractInstance;
const contractAddress = "0xBffcaCEd602A0908E56b0BC3B1E6FBd314ac9E39";

$(document).ready(function () {
  window.ethereum.enable().then(function (accounts) {
    contractInstance = new web3.eth.Contract(abi, contractAddress, {
      from: accounts[0],
    });
    console.log(contractInstance);
  });

  $("#fund_game").click(funding);
  $("#bet_heads").click(headsInput);
  $("#bet_tails").click(tailsInput);
  $("#get_balance_button").click(disaplyBalance);
});

contractInstance.events.BetComplete(function (error, result) {
  console.log(result);
});

function funding() {
  contractInstance.methods
    .deposit()
    .send({
      value: web3.utils.toWei($("#funding_input").val(), "ether"),
    })
    .on("receipt", function (receipt) {
      console.log(receipt);
    });
}

async function headsInput() {
  contractInstance.methods
    .heads()
    .send({
      value: web3.utils.toWei($("#betting_input").val(), "ether"),
    })
    .on("returnValues", function (ret) {
      console.log(res);
    });
}

async function tailsInput() {
  contractInstance.methods.heads().send({
    value: web3.utils.toWei($("#betting_input").val(), "ether"),
  });
}

function disaplyBalance() {
  contractInstance.methods
    .getBalance()
    .call()
    .then(function (res) {
      $("#balance_output").text(web3.utils.fromWei(res, "ether"));
    });
}

Hey @voljumet

In your function head() you are emitting an event BetComplete.
What you have to do is to setup an event listener in your JS file so that it will be able to catch the event as soon as it is emitted.
I wrote an FAQ that will give you an overview of how event listeners work, check it out: FAQ - How to listen for events

Also you can check the code I wrote, I kept it as simple as possibile so hopefully it will be helpful and easy to understand: https://github.com/dani69654/CoinFlip/blob/master/client/main.js

Happy learning,
Dani

Ready for phase two :slight_smile:

Thank you, my problem was that I misspelled “receipt” :upside_down_face:
Everything is working fine now! :smiley:

1 Like

Hey again @dan-i

Thank you kidnly for your last explanation. I am having the same trouble for a while now and I have tried many things.

PROBLEM: main.js cannot find the function


I have tried different functions and have had since different problems, which I solved, but now I am exactly at the point where I started, having the same problem. I have deployed the contract successfuly and the contract address matches the one in main.js file

solidity code: the important thing here is definition of function depositFunds()

pragma solidity 0.5.12;

import "./Ownable.sol";
import "./UsingModifiers.sol";
import "./SafeMath.sol";
import "./Migrations.sol";

contract Betting is Ownable, UsingModifiers {

  using SafeMath for uint256;

  struct Bet {
      address payable userAddress;
      uint size;
      uint side;
      bool win;
      bool finished;
  }

  uint contractBalance;

  mapping(address => Bet) userBetting;
  mapping(address => uint) userBalances;

  event BetOver(address _sender, uint _amount, bool win);

  function depositFunds(uint _deposit) public payable onlyOwner {
      require(msg.value > 0);
      userBalances[msg.sender] += _deposit;
      contractBalance += _deposit;
  }

  function withdrawFunds(uint _toWithdraw) public onlyOwner {
      require(userBalances[msg.sender] >= _toWithdraw, "Not enough funds on the contract");
      contractBalance -= _toWithdraw;
      msg.sender.transfer(_toWithdraw);
  }

  function fundUserBalance(uint _addCash) public payable {
      require(msg.sender.balance >= _addCash);
      userBalances[msg.sender] += _addCash;
  }

  function withdrawUserBalance(uint _toWithdraw) public {
      require(userBalances[msg.sender] > _toWithdraw, "Not enough funds");
      userBalances[msg.sender] -= _toWithdraw;
      msg.sender.transfer(_toWithdraw);
  }

  function getContractBalance() public view returns(uint){
      return address(this).balance;
  }

  function getUserBalance() public view returns(uint){
      return userBalances[msg.sender];
  }

  function randomise() public view returns(uint) {
    return now % 2;
  }

  function bet(uint _amount, uint _side) public payable costs(0.01 ether) setBettingLimit(){
      require(_amount <= userBalances[msg.sender], "Not enough funds");
      require(_amount <= contractBalance, "Not enough money in the contract");
      require(_side == 0 || _side == 1, "Please input 0 (heads) or 1 (tails)");
      userBalances[msg.sender] -= _amount;
      contractBalance -= _amount;

      uint randomNumber = randomise();

      if(randomNumber == userBetting[msg.sender].side){      //win
          userBalances[msg.sender] += 2*_amount;
          userBetting[msg.sender] = Bet(msg.sender, _amount, _side, true, true);
          emit BetOver(msg.sender, _amount, true);
      }
      else {      //lose
          contractBalance += 2*_amount;
          userBetting[msg.sender] = Bet(msg.sender, _amount, _side, false, true);
          emit BetOver(msg.sender, _amount, false);
      }
  }

  function getBalanceAddress() public view returns (address){
    return address(this);
  }
}

main.js code: I use the above defined function depositFunds and it says what I showed you in the screenshot (contractInstance.methods.depositFunds is not a function). I have even tried out a simple getter function, but have gotten the same error. I googled and found nothing.

var web3 = new Web3(Web3.givenProvider);
const contractAddress = "0xB495fd4bDC3738AdF3de32b20cb370f9b9EbB56e";
var contractInstance;

$(document).ready(async() => {
    await window.ethereum.enable().then(function(accounts){
      contractInstance = new web3.eth.Contract(abi, contractAddress);
    });

    $("#fundContract_button").click(fundThisContract);
});

async function fundThisContract(){
  var toFund = $("#fundContract_input").val();
  contractInstance.methods.depositFunds(toFund).send({from: accounts[0], value: web3.utils.toWei(toFund, "ether")});
}

Do you maybe see where the problem could be?

Thanks

Hey @ZigaP

Can you post you abi file?

thanks
Dani

1 Like

Hey @dan-i

I have updated the abi file, since you presented me with an obvious hint :slight_smile: I am now getting a different error, one that hopefully I will be able to solve myself, it should only be a solidity contract code now. If not, I will let you know for sure :slight_smile:

Thank you so much for your quick reply and I will keep you posted!

Žiga

1 Like

Here is my work.
https://github.com/Aoi020608/eth_CoinFlip

1 Like

I completed the assignment. Here is the repository: https://github.com/BogdanStirbat/double-or-nothing

The administrator can add funds. Then, other users can play bets.

I added a screenshot.

1 Like

Hi,

Javascript question. The first console.log(a); displays the address correctly, the second console.log(a); displays 0. Can anyone explain to me why? I am thinking it should display the address since the variable a is declare outside the scope.

let a = 0;
window.ethereum.enable()
    .then(function(accounts) {
      a = accounts[0];
      console.log("1) "+a);
      contractInstance = new web3.eth.Contract(window.abi, contractAddress, {from: accounts[0]});
});

console.log("2) "+a);

By adding numbers in the console.log I noticed the console.log #2 is executed before the #1. Is there a way to force to wait before the function execution is complete before proceeding to console.log("2) "+a);

Hi @seblife

Let’s check your code

window.ethereum.enable()
    .then(function(accounts) {
      a = accounts[0];
      console.log("1) "+a);

You used .then() because window.ethereum.enable() is an asynchronous function.
It means that its result is not available immediately.

In your code console.log("2) "+a); is executed before the callback that returns accounts.

I suggest you to follow this lessons where Ivan explains async functions and callbacks, it is an extremely important concept that you need to master because you will use it a lot: https://academy.ivanontech.com/products/javascript-programming-for-blockchain-developers/categories/1708400?page=3

These 4:

Happy learning!
Dani

1 Like

LateNight UPDATE: Repository up to date here —> Project repository on GitHub

Alright! I managed to display and update the max bet value after each round and each deposit. celebrations!

Still working on the Withdraw function and still getting the same error message, anybody help please?

WithdrawError

inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error. {code: -32603, message: “Internal JSON-RPC error.”, data: {…}}
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:17
_runReturnHandlers @ inpage.js:17
_processRequest @ inpage.js:17
async function (async)
_processRequest @ inpage.js:17
_handle @ inpage.js:17
handle @ inpage.js:17
_rpcRequest @ inpage.js:1
sendAsync @ inpage.js:1
s.send @ web3.min.js:1
n @ web3.min.js:1
t @ web3.min.js:1
o._executeMethod @ web3.min.js:1
withdrawContractBalance @ main.js:61
dispatch @ jquery-3.4.1.min.js:2
v.handle @ jquery-3.4.1.min.js:2
web3.min.js:1 Uncaught (in promise) Error: Internal JSON-RPC error.
{
“message”: “VM Exception while processing transaction: invalid opcode”,
“code”: -32000,
“data”: {
“0x33f769ea2cce520a94d233dce9aa37e855e8c898fac756e45465a5065b416a08”: {
“error”: “invalid opcode”,
“program_counter”: 1965,
“return”: “0x”
},
“stack”: “RuntimeError: VM Exception while processing transaction: invalid opcode\n at Function.RuntimeError.fromResults (C:\Users\sound\AppData\Local\Programs\Ganache\resources\static\node\node_modules\ganache-core\lib\utils\runtimeerror.js:94:13)\n at C:\Users\sound\AppData\Local\Programs\Ganache\resources\static\node\node_modules\ganache-core\lib\blockchain_double.js:568:26”,
“name”: “RuntimeError”
}
}
at Object._fireError (web3.min.js:1)
at u (web3.min.js:1)
at web3.min.js:1
at s._handle (inpage.js:17)
_fireError @ web3.min.js:1
u @ web3.min.js:1
(anonymous) @ web3.min.js:1
_handle @ inpage.js:17
setTimeout (async)
_fireError @ web3.min.js:1
u @ web3.min.js:1
(anonymous) @ web3.min.js:1
_handle @ inpage.js:17
async function (async)
_handle @ inpage.js:17
handle @ inpage.js:17
_rpcRequest @ inpage.js:1
sendAsync @ inpage.js:1
s.send @ web3.min.js:1
n @ web3.min.js:1
t @ web3.min.js:1
o._executeMethod @ web3.min.js:1
withdrawContractBalance @ main.js:61
dispatch @ jquery-3.4.1.min.js:2
v.handle @ jquery-3.4.1.min.js:2

And also I am working on displaying the round result (You Win/ You Loose) after each round but am struggling with it. I now know that I can access variable through web3.eth.getStorageAt(address, index) but I can’t make the value of the variable that I am calling display correctly in the FrontEnd. It just shows 0x0. Why is that? Any help highly appreciated guys!

SundayWork

UPDATE: I could make the “Query Contract Balance” thing work. Yipiaiyeee! Haha! consistency pays off. The only thing left to fix is the withdraw function. And to print the result of the round.

Anyone knows how to fix this error? It shows in browser console when calling the withdraw function:

Also I can’t wrap my head around how to print the round result to the console. Any help highly appreciated!

Hello again,

today, 28th of feb, I managed to improve crucial functions. The placeBet function is now working! Hooray! Users are now able to placebets and win or loose. I had messed up data types! I feel relieved.

Also, contract owner is able to deposit money into the contract and the max. bet for users is contractBalance / 2, to make sure that there are enough funds available for potential wins at all times.

Two things are broken though at the moment:

Query for contract Balance.
Withdraw all funds by owner.

Can someone give me a hint?

ErrorDescription

inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error. {code: -32603, message: “Internal JSON-RPC error.”, data: {…}}code: -32603data: code: -32000data: 0x8628daeeaa5cc9123ec59ef033d7f70b30f2e0365352af5403918d83a04e6f4b: {error: “invalid opcode”, program_counter: 1965, return: “0x”}name: "RuntimeError"stack: "RuntimeError: VM Exception while processing transaction: invalid opcode↵ at Function.RuntimeError.fromResults (C:\Users\sound\AppData\Local\Programs\Ganache\resources\static\node\node_modules\ganache-core\lib\utils\runtimeerror.js:94:13)↵ at C:\Users\sound\AppData\Local\Programs\Ganache\resources\static\node\node_modules\ganache-core\lib\blockchain_double.js:568:26"proto: Objectmessage: "VM Exception while processing transaction: invalid opcode"proto: Objectmessage: "Internal JSON-RPC error."proto: Object
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:17
_runReturnHandlers @ inpage.js:17
_processRequest @ inpage.js:17
async function (async)
_processRequest @ inpage.js:17
_handle @ inpage.js:17
handle @ inpage.js:17
_rpcRequest @ inpage.js:1
sendAsync @ inpage.js:1
s.send @ web3.min.js:1
n @ web3.min.js:1
t @ web3.min.js:1
o._executeMethod @ web3.min.js:1
withdrawContractBalance @ main.js:51
dispatch @ jquery-3.4.1.min.js:2
v.handle @ jquery-3.4.1.min.js:2
web3.min.js:1 Uncaught (in promise) Error: Internal JSON-RPC error.
{
“message”: “VM Exception while processing transaction: invalid opcode”,
“code”: -32000,
“data”: {
“0x8628daeeaa5cc9123ec59ef033d7f70b30f2e0365352af5403918d83a04e6f4b”: {
“error”: “invalid opcode”,
“program_counter”: 1965,
“return”: “0x”
},
“stack”: “RuntimeError: VM Exception while processing transaction: invalid opcode\n at Function.RuntimeError.fromResults (C:\Users\sound\AppData\Local\Programs\Ganache\resources\static\node\node_modules\ganache-core\lib\utils\runtimeerror.js:94:13)\n at C:\Users\sound\AppData\Local\Programs\Ganache\resources\static\node\node_modules\ganache-core\lib\blockchain_double.js:568:26”,
“name”: “RuntimeError”
}
}
at Object._fireError (web3.min.js:1)
at u (web3.min.js:1)
at web3.min.js:1
at s._handle (inpage.js:17)
_fireError @ web3.min.js:1
u @ web3.min.js:1
(anonymous) @ web3.min.js:1
_handle @ inpage.js:17
setTimeout (async)
_fireError @ web3.min.js:1
u @ web3.min.js:1
(anonymous) @ web3.min.js:1
_handle @ inpage.js:17
async function (async)
_handle @ inpage.js:17
handle @ inpage.js:17
_rpcRequest @ inpage.js:1
sendAsync @ inpage.js:1
s.send @ web3.min.js:1
n @ web3.min.js:1
t @ web3.min.js:1
o._executeMethod @ web3.min.js:1
withdrawContractBalance @ main.js:51
dispatch @ jquery-3.4.1.min.js:2
v.handle @ jquery-3.4.1.min.js:2

SaturdayMarch27th

Hi everyone,

I am running into 2 issues with the CoinFlip dApp:

  1. When calling the placeBet function inside the browser the console will say:
    Error: Can not send value to non-payable contract method or constructor

  2. I can’t make the withdraw function work. Somehow I can’t make the dApp send the user input withdrawAmount to the wallet. I tried different ways but somehow I am stuck on this.

Here is my code:

CoinFlip.sol works nicely in Remix…

CoinFlip.sol
pragma solidity 0.7.5;

contract CoinFlip{

    constructor() public payable{
        
    }

    uint public contractBalance;
    mapping (address => uint) balanceMap;
    uint userBet;
    string result;
    string message = "Hey there!";

    event CoinFlipped(string);

    function getMessage() public view returns(string memory){
      return message;
    }

    function deposit() public payable{
        balanceMap[msg.sender] += msg.value;
        contractBalance += msg.value;
    }

    function getBalance() public view returns(uint){
      return balanceMap[msg.sender];
    }

    function withdraw(uint _amount) public payable returns(uint){
      require(balanceMap[msg.sender] >= _amount);
      msg.sender.transfer(_amount);
      balanceMap[msg.sender] -= _amount;
      return balanceMap[msg.sender];
    }

    function placeBet(uint _amount, bool _bet) public payable returns(string memory){
      require(balanceMap[msg.sender] >= _amount, "Insufficient funds! Deposit more ETH!");
      require(contractBalance >= _amount*2, "Insufficient funds in contract to pay out possible win. Please bet lower!");
      uint flip = random();
      if (_bet == true && flip == 1){
        balanceMap[msg.sender] +=  _amount * 2;
        contractBalance -= _amount * 2;
        result = "You WIN!";
        emit CoinFlipped(result);
      }
      else if(_bet == false && flip == 0){
        balanceMap[msg.sender] += _amount * 2;
        contractBalance -= _amount * 2;
        result = "You WIN!";
        emit CoinFlipped(result);
      }
      else{
        balanceMap[msg.sender] -= _amount;
        result = "You LOOSE! Try Again!";
        emit CoinFlipped(result);
      }
        return result;
    }

    function random() private returns(uint){
      return block.timestamp % 2;
    }

}

In main.js I am somehow stuck with the withdraw function and placebet function. I checked out code from others, but only got confused somehow.

main.js

var web3 = new Web3(Web3.givenProvider);
var contractInstance;

$(document).ready(function() {
    window.ethereum.enable().then(function(accounts){
      contractInstance = new web3.eth.Contract(window.abi, "0x8B66318bf529A4Fae42110BAB9C525a633985aa6", {from: accounts[0]});
    });
    $("#deposit_button").click(deposit);
    $("#getBalance_button").click(getBalance);
    $("#placebet_button").click(placeBet);
    $("#withdraw_button").click(userWithdraw);

})

function placeBet(){
  var usersbet = $("#userbet").val();
  var amount_bet = $("#amount_bet").val();
  contractInstance.methods.placeBet(amount_bet, usersbet).send({value: web3.utils.toWei(amount_bet, "ether")}) //will send data and eth to placeBet
    .on("transactionHash", function(hash){ //event listener that listens for transactionHash
      console.log("tx hash");
    })
    .on("confirmation", function(confirmationNumber, receipt){ //listener for confirmationNumber only works on real blockchain as local will not confirm for real
        console.log("conf");

    })
    .on("receipt", function(receipt){
      console.log(receipt);
    })
  }

function deposit(){
  var depositAmount = parseInt($("#depositETH").val());
  contractInstance.methods.deposit().send({value: web3.utils.toWei(depositAmount.toString(), "ether")});
}

function getBalance(){
  contractInstance.methods.getBalance().call().then(function(bal){
    document.getElementById("showuser_balance").value = (bal/1000000000000000000);
  })
}

function userWithdraw(){
  var withdrawAmount = parseInt($("#withdraw_amount").val());
  contractInstance.methods.withdraw(parseInt(withdrawAmount)).send();
  }
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Coin Flip</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
    <script type="text/javascript" src="./web3.min.js"></script>
    <script type="text/javascript" src="./abi.js"></script>
    <script type="text/javascript" src="./main.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  </head>
  <body>
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-4">Coin Flip</h1>
        <p class="lead">Flip the coin and try your luck!</p>
      </div>
    </div>
    <div class="container">
      <div>
        <h2 align="center">Pick Heads or Tails</h2><br>
        <h3 align="center">Heads</h3><br>
        <div class="input-group mb-3">
          <label for="Bet"></label>
          <input type="radio" name ="userBet" value="1" checked="checked" class="form-control" id="heads_input" placeholder="Heads" ></input>
        </div>
        <h3 align="center">Tails</h3><br>
        <div class="input-group mb-3">
          <input type="radio" name = "userBet" value="0" class="form-control" id="tails_input" placeholder="Tails" >
        </div>
        </div>
        <p align="center"><button type="button" id="placebet_button" class="btn btn-primary">Place Bet!</button></p>
        <p align="center">How much will you bet?<br><input type="text" id="amount_bet" placeholder="10"></input>
      <div>
        <h2 align="center">Result of this round:</h2>
        <div>
           <p align="center"><span id="result_output"></span></p>
        </div>
    </div>

    <div class="jumbotron jumbtron-fluid">
      <div class="container">
        <h3>Deposit some ETH!</h3>
        <div class="deposit_input">
          <input type="text" id="depositETH" placeholder="10"></input>
          <button type="button" id="deposit_button" class="btn btn-primary">Deposit ETH!</button>
        <h3>Check your balance</h3>
        <div class="getBalance">
          <input type="text" id="showuser_balance">ETH</input>
          <button type="button" id="getBalance_button" class="btn btn-primary">Query your balance!</button>
      </div>
      <h3>Withdraw</h3>
      <div class="withdraw">
        <input type="text" id="withdraw_amount"></input>
        <button type="button" id="withdraw_button" class="btn btn-primary">Withdraw ETH!</button>
    </div>
    </div>


  </body>
</html>

All help highly appreciated!

:pray:

I have a question. In the PeopleProject Dapp that Filip created, he created a website such that a person would click on the button “Add Data” to send information to the smart contract. Underneath that, he had a button “Get Data” to display the information that had just been sent.

In the video, Filip alluded to the fact that the data could be returned automatically, without having to have the “Get Data” button. I can’t figure out how to do this.

Below is a portion of the javascript from my Coin Flip Dapp. On my web-page, I have a “place bet” button, where people can enter the ETH amount they would like to wager. After they enter an ETH amount and click the “place bet” button, Metamask pops up and they need to approve the transaction. The smart contract then records the amount they bet. In the screenshot below, you can see that I would like the amount that they just bet to show up on the screen (after they have sent their bet amount to the smart contract). I know that the next step in the process would be for the webpage to automatically fetch the amount back from the smart contract. But I can’t figure out how to do this without making the user click on another button.

Please help! Below are two screenshots: 1) the relevant section of my webpage (which is very basic at this point) and 2) the javascript code.

One more thing: So far the process [code and website] is working as intended. When the user enters his/her ETH bet, then the information is transmitted to the smart contract (and recorded there).

Hi,

My source code and screenshots can be found here:
https://github.com/SebCoding/CoinBet-Dapp.

I did not spend too much time on the appearance, but more on the functionality.

Hi @Bhujanga

Still working on the Withdraw function and still getting the same error message, anybody help please?

function withdrawContractBalance(){
  contractInstance.methods.withdraw().call();
};

Use .send() here and try again.

And also I am working on displaying the round result (You Win/ You Loose) after each round but am struggling with it.

Check the faq I wrote about event listeners:
https://forum.ivanontech.com/t/faq-how-to-listen-for-events/23098/3

Cheers,
Dani