Embezzle/client/simpleclient/index.js

// Global Vars
serverAddr="https://embezzle-server.nannal.com"
 ownerID=''
// ownerID='6298bc89-41cb-4cc7-84cd-7fd8e419f263'
gameID=''

//Meta Game Utils 
function register(){
    const data = { name: document.getElementById('register').value };

    fetch(serverAddr+'/lobby/register', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
    })
    .then((response) => response.json())
    .then((data) => {
        // console.log(data)
        ownerID=data.ownerID
        document.getElementById('register').value=data.name
        //hide register
        //show make & join
        //show list of games
        cssHide("Reigster-Container")
        cssShow("Make-Container")
        cssShow("Join-Container")

        listGames()
    })
    .catch((error) => {
    console.error('Error:', error);
    });
}

function listGames(){
    fetch(serverAddr+"/lobby/list")
    .then((response) => {
        return response.json();
    })
    .then((data) => {
        gamesFormat(data)
        cssShow("games")
        console.log(data);
    });
}

function make(){
    console.log("make")
    const data = {
        ownerID: ownerID,
        seats: document.getElementById('makeSeats').value };

    fetch(serverAddr+'/lobby/make', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
    })
    .then((response) => response.json())
    .then((data) => {
        // console.log(data)
        gameID=data.gameID
        gameData(gameID)
        document.getElementById("gameID").innerHTML="<h2>Your gameID is:"+gameID+"</h2><p> share the gameID with any users you want to join your game</p>"
        cssHide("games")
        cssHide("Make-Container")
        cssHide("Join-Container")

        cssShow("messages")
        cssShow("gameInfo")
        cssShow("playerInfo")
        cssShow("Start-Container")


    })
    .catch((error) => {
    console.error('Error:', error);
    });
}

function join(){
    console.log("join")
    gameID=document.getElementById('join').value
    gameData(gameID)

    cssHide("games")
    cssHide("Make-Container")
    cssHide("Join-Container")

    cssShow("messages")
    cssShow("gameInfo")
    cssShow("playerInfo")
    const data = {
        ownerID: ownerID,
        gameID: gameID };
    // console.log(data)
    fetch(serverAddr+'/lobby/join', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
    })
    .then((response) => response.json())
    .then((data) => {
        document.getElementById("gameID").innerHTML="<h2>Your gameID is:"+gameID+"</h2><p> share the gameID with any users you want to join your game</p>"
        // console.log(data)

    })
    .catch((error) => {
    console.error('Error:', error);

    cssShow("games")
    cssShow("Make-Container")
    cssShow("Join-Container")

    cssHide("messages")
    cssHide("gameInfo")
    });
}


function gameData(gameID) {
    fetch(serverAddr+'/lobby/details/'+gameID)
    .then((response) => {
        if (response.status == 404) {
            status()
        }
        return response.json();
    })
    .then((data) => {
        checkIfStarted = setInterval(function(){
            gameData(gameID)
            clearInterval(checkIfStarted)
        }, 1000)
        html="Waiting For "+data.name+" to start the game, "+data.players.length+"/"+data.seats+" seats are full</br>"
        data.players.forEach(element => {
            html=html+"Player: "+element.name+"</br>"
        })
        if (document.getElementById("messages").innerHTML != html) {
            document.getElementById("messages").innerHTML=html

        }
    })
}

function start(){
    const data = {
        ownerID: ownerID,
        gameID: gameID };
    // console.log(data)
    fetch(serverAddr+'/lobby/start', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
    })
    .then((response) => response.json())
    .then((data) => {
        console.log(data)
        cssHide("Start-Container")
    })
    .catch((error) => {
    console.error('Error:', error);
    });
}


// Game controls
function donate(){
    console.log("donate")
    // /game/:gameID/distribution
    amount=document.getElementById('amount').value
    doante=document.getElementById('donate').value
    const data = {
        ownerID: ownerID,
        gameID: gameID,
        charityID: doante,
        amount: amount };
    // console.log(data)
    fetch(serverAddr+'/game/'+gameID+'/distribution', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
    })
    .then((response) => response.json())
    .then((data) => {
        donateFormat(data)
        // console.log(data)
        // gameData(gameID)
    })
    .catch((error) => {
    console.error('Error:', error);
    });
}

function accuse(){
    console.log("accuse")
    name = document.getElementById('accuse').value
    const data = {
        ownerID: ownerID,
        gameID: gameID,
        player: name };
    // console.log(data)
    fetch(serverAddr+'/game/'+gameID+'/accuse', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
    })
    .then((response) => response.json())
    .then((data) => {
        // console.log(data)
        accuseFormat(data)
        // gameData(gameID)
    })
    .catch((error) => {
    console.error('Error:', error);
    });
}


// Game Utils
function status() {
    //the game has started, get the data
    // One off updates

    const data = {
        ownerID: ownerID,
        gameID: gameID };

    fetch(serverAddr+'/game/'+gameID+'/charity', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
        })
        .then((response) => response.json())
        .then((data) => {
            // console.log(data)
            myCharityFormat(data)

        })
        .catch((error) => {
        console.error('Error:', error);
        });

    
    //Quick Recurring updates
    statusint = setInterval(function(){
        fetch(serverAddr+'/game/'+gameID+'/boardFunding', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
        })
        .then((response) => response.json())
        .then((data) => {
            boardFundingFormat(data)
            // statusObj.funding=data

        })
        .catch((error) => {
        // console.error('Error:', error);
        });

        fetch(serverAddr+'/game/'+gameID+'/charityList')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            // console.log(data);
            dropDownList=""
            data.charatiesArr.forEach(element => {
                dropDownList=dropDownList+'<option value="'+element.charityID+'">'+element.name+'</option>'
            });
            if (document.getElementById("donate").innerHTML != dropDownList){
                document.getElementById("donate").innerHTML=dropDownList
                // statusObj.charitylist=data
            } 
            charityStatusFormat(data)
        });


        fetch(serverAddr+'/game/'+gameID+'/playerList')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            playerListFormat(data)
            // statusObj.playerlist=data
            // console.log(data);
        });

        fetch(serverAddr+'/game/'+gameID+'/accuseinfo')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            accuseFormat(data)
            // statusObj.playerlist=data
            // console.log(data);
        });
        fetch(serverAddr+'/game/'+gameID+'/distributioninfo')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            donateFormat(data)
            // statusObj.playerlist=data
            // console.log(data);
        });

        fetch(serverAddr+'/game/'+gameID+'/statusinfo')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            statusFormat(data)
            // statusObj.playerlist=data
            // console.log(data);
        });        
        // fdocument.getElementById("info").innerText=prettyprint(statusObj)
    }, 3000)
}


//Formating Functions 

function myCharityFormat(data) {
    document.getElementById("myCharity").innerText="Your Charity: "+data.charity
}

function charityStatusFormat(data) {
    html=""
    data.charatiesArr.forEach(element => {
        html=html+"<b>"+element.name+":</b> "+element.capital+"</br>"
    })
    if (document.getElementById("charityStatus").innerHTML != html) {
        document.getElementById("charityStatus").innerHTML=html
    }
    
}

function boardFundingFormat(data) {
    if (document.getElementById("boardFunding").innerHTML != "<b>My Funds: </b>"+data.funds) {
        document.getElementById("boardFunding").innerHTML= "<b>My Funds: </b>"+data.funds
    }
    
}

function donateFormat(data) {
    html=""
    data.log.forEach(element => {
        html=html+element.donator+", donated "+element.amount+" to "+element.charity+"</br>"
    })
    if(document.getElementById("transactionLog").innerHTML != html){
        document.getElementById("transactionLog").innerHTML=html
    }
}

function accuseFormat(data) {
    html=""
    if(typeof data.winner != "undefined"){
        document.getElementById("accusationLog").innerHTML="<h1>"+data.winner+" has won the game</h1>"
        clearInterval(statusint)
    }
    else{
        accusers=Object.keys(data.log)
        accusers.forEach(element => {
            html=html+element+" accuses "+data.log[element]+"</br>"
        })
        if(document.getElementById("accusationLog").innerHTML != html){
            document.getElementById("accusationLog").innerHTML=html
        }   
    }
}


function gamesFormat(data) {
    html="<h4>Games:</h4></br>"
    data.gamesArr.forEach(element => {
        html=html+element.gameID+", "+element.name+"</br>"
    })
    if (document.getElementById("games").innerHTML != html) {
        document.getElementById("games").innerHTML = html
    }
}

function playerListFormat(data) {
    html=""
    accuseListFormat(data.playersArr)
    data.playersArr.forEach(element => {
        html=html+"<b>"+element.name+"</b>: Funds "+element.funds+", Status: "+element.status+"</br>"
    })
    if (document.getElementById("playerInfo").innerHTML != html){
        document.getElementById("playerInfo").innerHTML=html
    }
}

function statusFormat(data) {
    if (document.getElementById("gameInfo").innerHTML != "<h1>Round Status: "+data.status+"</h1>") {
        document.getElementById("gameInfo").innerHTML="<h1>Round Status: "+data.status+"</h1>"
    }
    if (data.status == "Distribution") {
        cssHide("messages")
        cssShow("gameInfo")
        cssShow("myCharity")
        cssShow("charityStatus")
        cssShow("boardFunding")

        cssShow("Donate-Container")
        cssShow("transactionLog")

        cssHide("messages")
        cssHide("accusationLog")
        cssHide("Accuse-Container")
    }
    else {
        cssHide("Donate-Container")
        cssShow("accusationLog")
        cssShow("Accuse-Container")
    }
}

function accuseListFormat(data){
    dropDownList=""
    data.forEach(element => {
        dropDownList=dropDownList+'<option value="'+element.name+'">'+element.name+'</option>'
    });
    if (document.getElementById("accuse").innerHTML != dropDownList){
        document.getElementById("accuse").innerHTML=dropDownList
        // statusObj.charitylist=data
    } 
}

function cssHide(id){
    if (document.getElementById(id).style.visibility != "Hidden") {
        document.getElementById(id).style.lineHeight=0
        document.getElementById(id).style.margin=0
        document.getElementById(id).style.fontSize=0
        document.getElementById(id).style.visibility="Hidden"
        document.getElementById(id).style.size="0px"
        document.getElementById(id).style.zIndex="100"
        document.getElementById(id).style.scale="0"
    }
}

function cssShow(id){
    if (document.getElementById(id).style.visibility != "Visible") {
        document.getElementById(id).style.lineHeight=1.6
        document.getElementById(id).style.fontSize="Large"
        document.getElementById(id).style.visibility="Visible"
        document.getElementById(id).style.size="Auto"
        document.getElementById(id).style.zIndex="0"
        document.getElementById(id).style.scale="1"
    }

}