Client working, server done bug smashing time

2020-04-17 00:49:55 +03:00
parent d50ccb48f8
commit 2129889248
11 changed files with 531 additions and 111 deletions
--- a/client/simpleclient/index.css
+++ b/client/simpleclient/index.css
@@ -0,0 +1,12 @@
+body{
+    margin:40px auto;
+    max-width:650px;
+    line-height:1.6;
+    font-size:18px;
+    color:#444;
+    padding:0 10px;
+}
+
+h1,h2,h3{
+    line-height:1.2
+}
--- a/client/simpleclient/index.html
+++ b/client/simpleclient/index.html
@@ -0,0 +1,73 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="index.css">
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding"/>
+    <script src="index.js"></script>
+    <script src="jq.js"></script>
+  </head>
+
+  <body>
+    <div class="controls">
+      <div class="Reigster-Container">
+      </br>Register
+      
+      <input id="register" type="text" placeholder="Name"/> <button onclick="register()">Register</button>
+      </div>
+      
+      <div class="Make-Container">
+      </br>Make
+      
+      <input id="makeSeats" type="number"/> <button onclick="make()">Make</button>
+      
+      </div>
+      
+      <div class="Join-Container">
+      </br>Join
+      
+      <input id="join" type="text" placeholder="Name"/> <button onclick="join()">Join</button>
+      
+      </div>
+      
+      <div class="Start-Container">
+      </br>Start
+      
+      <button onclick="start()">Start</button>
+      </div>
+      
+      
+      <div class="Donate-Container">
+      </br>Donate
+      <select id="donate" name="list">
+          <option value="x">x</option>
+        </select> 
+      
+      <input id="amount" type="number">
+      
+      <button onclick="donate()">Donate</button>
+      
+      </div>
+      
+      <div class="Accuse-Container">
+      </br>Accuse
+      
+      <input id="accuse" type="text" placeholder="Name"/> <button onclick="accuse()">Accuse</button>
+      </div>
+      </div>
+      
+      <div id="info">
+        <div id="messages"></div>
+        <div id="games"></div>
+        <div id="gameInfo"></div>
+        <div id="myCharity"></div>
+        <div id="charityStatus"></div>
+        <div id="boardFunding"></div>
+        <div id="transactionLog"></div>
+        <div id="accusationLog"></div>
+
+        <div id="messages"></div>
+
+      </div>
+  </body>
+
+</html>
--- a/client/simpleclient/index.js
+++ b/client/simpleclient/index.js
@@ -0,0 +1,287 @@
+// Global Vars
+
+serverAddr="http://localhost:3000"
+ 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
+        listGames()
+    })
+    .catch((error) => {
+    console.error('Error:', error);
+    });
+}
+
+function listGames(){
+    fetch(serverAddr+"/lobby/list")
+    .then((response) => {
+        return response.json();
+    })
+    .then((data) => {
+        document.getElementById('messages').value='data.gamesArr'
+        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)
+
+    })
+    .catch((error) => {
+    console.error('Error:', error);
+    });
+}
+
+function join(){
+    console.log("join")
+    gameID=document.getElementById('join').value
+    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) => {
+        // console.log(data)
+        gameData(gameID)
+    })
+    .catch((error) => {
+    console.error('Error:', error);
+    });
+}
+
+
+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)
+        if (document.getElementById("messages").innerText != "Game Name: "+data.name+", GameID: "+data.gameID) {
+            document.getElementById("messages").innerText="Game Name: "+data.name+", GameID: "+data.gameID
+        }
+    })
+}
+
+function start(){
+    console.log("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)
+
+    })
+    .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) => {
+        // 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)
+        document.getElementById("accuseLog").innerText=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
+    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
+            } 
+            document.getElementById("charityStatus").innerHTML=charityStatusFormat(data)
+        });
+
+
+        fetch(serverAddr+'/game/'+gameID+'/playerList')
+        .then((response) => {
+            return response.json();
+        })
+        .then((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.forEach(element => {
+        html=html+"<b>"+element.name+":</b> "+element.capital
+    })
+    return html
+}
+
+function boardFundingFormat(data) {
+
+}
--- a/client/simpleclient/jq.js
+++ b/client/simpleclient/jq.js