added server communication

clashingcomrades/server.py

@@ -0,0 +1,36 @@
+from flask import Flask
+from flask import render_template, jsonify, request
+app = Flask(__name__)
+
+games = {}
+game = {}
+
+@app.route("/")
+def initial():
+    return render_template('index.html')
+
+@app.route('/game', methods=['GET', 'POST'])
+def update_game():
+    if request.method == 'GET':
+        return jsonify(game)
+    if request.method == 'POST':
+        playerStatus = request.get_json(force=True)
+        if playerStatus["turn"] in game:
+            game[playerStatus["turn"]].append([playerStatus["coordinate"], playerStatus["team"]])
+        else:
+            game[playerStatus["turn"]] = [[playerStatus["coordinate"], playerStatus["team"]]]
+        return jsonify(game)
+
+
+
+# @app.route('/game/<int:game_id>', methods=['GET', 'POST'])
+# def update_game(game_id):
+#     if request.method == 'GET':
+#         return jsonify(games[game_id])
+#     if request.method == 'POST':
+#         print request.form
+#         games[game_id] = {"state": request.form['state']}
+#         return jsonify(games[game_id])
+
+if __name__ == "__main__":
+    app.run(debug=True)

clashingcomrades/static/main.css

@@ -0,0 +1,44 @@
+@font-face {
+  font-family: 'Lato';
+  src: url('../static/resources/fonts/lato-light.woff');
+}
+html {
+	background-image: url("../static/resources/images/bg.png")
+}
+td {
+	min-width: 100px;
+	height: 100px;
+	background-color: #2C3134;
+	transition: background-color 2s ease;
+}
+.player {
+	transition: background-color 0s ease
+}
+.main {
+	margin-left:40%;
+	margin-right:40%;
+	margin-top: 10%;
+	min-width:20%;
+	min-height:60%;
+	background:#e7e7e7;
+	box-shadow: 5px 5px 10px #229ad2;
+	border-radius: 25px;
+}
+.form {
+	font-family: Lato;
+	font-size: 20px;
+	margin-left:5%;
+}
+.scoreboard {
+	font-family: Lato;
+	font-size: 20px;
+	color: #ffffff;
+	position: fixed;
+	padding: 5px 10px 5px 10px;
+	margin-left: 45%;
+	margin-right: 45%;
+	z-index: 1;
+	background-color: #000;
+	opacity: 0.7;
+
+}

clashingcomrades/static/main.js

@@ -0,0 +1,184 @@
+//Global Variables 
+var coordinate;
+var username;
+var team;
+var timer;
+var type;
+var playerColor;
+var claimColor;
+var turn = 1;
+//Colors 
+var redPlayer = "#E62E2E";
+var redClaimed = "#FF9999";
+var bluePlayer = "#4343D8";
+var blueClaimed = "#9999FF";
+
+
+document.getElementsByClassName('play')[0].onclick = function startGame() {
+    /* get this from server later */
+    coordinate = [0,0];
+    team = "red";
+    /* end */
+    if(team === "red") {
+        playerColor = redPlayer;
+        claimColor = redClaimed;
+    } else {
+        playerColor = bluePlayer;
+        claimColor = blueClaimed;
+    }
+
+    // Server Stuff, not necessary now.
+    // var ip = document.getElementsByClassName('ip')[0].value;
+    // console.log(ip);
+    // console.log(username);
+    // if (ip.match(/[a-z]/i) /* && list of ips */ || ip === "") {
+    //  alert("That wasn't a valid ip, so we picked a random one for you!");
+    //  /*
+    //  ip = retrieveServerIPs('array')[Math.floor((Math.random() * retrieveServerIPs('amount')) + 1)];
+    //  */
+    // }
+
+    var element = document.getElementById("login");
+    element.parentNode.removeChild(element);
+
+    var scoreboard = document.getElementsByTagName('body')[0].appendChild(document.createElement("DIV"));
+    scoreboard.className = 'scoreboard';
+    scoreboard.appendChild(document.createTextNode(""));
+    scoreboard.appendChild(document.createElement("BR"));
+    scoreboard.appendChild(document.createTextNode(""));
+    updateScore();
+    tableCreate();
+    createPlayer();
+    /*
+    connectServer(ip);
+    */
+}
+
+function getPlayers() {
+    /******* Add recursive calling for: update other players, scoreboard updating *************/
+}
+
+function serverTransfer(coordinate,team,turn) {
+    var move = {
+        coordinate: coordinate,
+        team: team,
+        turn: turn
+    };
+    console.log(move);
+    $.ajax('http://127.0.0.1:5000/game', {
+        method: 'POST',
+        type : "POST",
+        data: JSON.stringify(move, null, '\t'),
+        dataType: "json",
+        contentType: 'application/json;charset=UTF-8'
+    })
+    .then(
+        function success(data) {
+            //Kenny Do it
+            console.log(data);
+        },
+
+        function fail(data, status) {
+            alert('Request failed.  Returned status of ' + status);
+        }
+    );
+}
+
+
+
+/*********************/
+/* Creation of Table */
+/*********************/
+
+function tableCreate() {
+    var body = document.body
+    var tbl  = document.createElement('table');
+    tbl.style.border = "1px solid black";
+
+    for(var i = 0; i < 20; i++) {
+        var tr = tbl.insertRow();
+        for(var j = 0; j < 30; j++) {
+            var td = tr.insertCell();
+        }
+    }
+    body.appendChild(tbl);
+    table = document.getElementsByTagName('table')[0];
+}
+
+/**********************/
+/* Creation of Player */
+/**********************/
+
+function createPlayer() {
+    table.rows[coordinate[0]].cells[coordinate[1]].style.backgroundColor = playerColor;
+    table.rows[coordinate[0]].cells[coordinate[1]].className = "player ";
+}
+
+
+/* Put this stuff server side to prevent H4X (Arav) later */
+function movement(x,y) {
+    timer =
+        setTimeout(function() {
+            try {
+                if (table.rows[coordinate[0] + y].cells[coordinate[1] + x].className.includes(team)) {
+                    table.rows[coordinate[0]].cells[coordinate[1]].style.backgroundColor = claimColor;
+                    document.getElementsByClassName('player')[0].className = "";
+                    spectatorMode();
+                }
+                else {
+                    table.rows[coordinate[0]].cells[coordinate[1]].className = table.rows[coordinate[0]].cells[coordinate[1]].className.replace("player ", "");
+                    table.rows[coordinate[0] + y].cells[coordinate[1] + x].className = "player ";
+                    table.rows[coordinate[0] + y].cells[coordinate[1] + x].className += team;
+                    document.getElementsByClassName('player')[0].style.backgroundColor = playerColor;
+                    table.rows[coordinate[0]].cells[coordinate[1]].style.backgroundColor = claimColor;
+                    coordinate = [coordinate[0] + y, coordinate[1] + x];
+                    updateScore(); // remove this after server updating
+                    serverTransfer(coordinate,team,turn);
+                    turn = turn + 1;
+                    movement(x,y);
+                }
+            }
+            catch(err) {
+            }
+        }, 100);
+}
+document.onkeydown = movePlayer;
+
+function movePlayer(e) {
+
+    e = e || window.event;
+
+    if(e.keyCode === 38 && type != "up") {
+        type = "up";
+        clearTimeout(timer);
+        movement(0,-1);
+    } else if(e.keyCode === 40 && type != "down") {
+        type = "down";
+        clearTimeout(timer);
+        movement(0,1);
+    }
+    else if(e.keyCode === 37 && type != "left") {
+        type = "left"
+        clearTimeout(timer);
+        movement(-1,0);
+    }
+    else if(e.keyCode === 39 && type != "right") {
+        type = "right"
+        clearTimeout(timer);
+        movement(1,0);
+    }
+}
+
+function spectatorMode() {
+    coordinate = null;
+    /* once in server side add stuff about following players */
+}
+function updateScore() {
+    var score = 
+    [
+    document.getElementsByClassName('red').length,
+    document.getElementsByClassName('blue').length
+    ];
+    document.getElementsByClassName('scoreboard')[0].childNodes[0].nodeValue = "Red: " + score[0];
+    document.getElementsByClassName('scoreboard')[0].childNodes[2].nodeValue = "Blue: " + score[1];
+}

clashingcomrades/templates/index.html

@@ -0,0 +1,25 @@
+<html>
+	<head>
+		<meta charset="utf-8">
+	    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+	    <title>Coexistence</title>
+	    <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
+	    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+	</head>	
+	<body>
+		<div class="main" id="login">
+			<form>
+				<div class="form">
+					<br>
+					<h2>Coexistence</h2>
+					Server IP:<input class="ip" type="text" placeholder="IP">
+					<br>
+					<button type="button" class="play">Play!</button>
+				</div>
+			</form>
+			
+		</div>
+	</body>
+	<script src="{{ url_for('static', filename='main.js') }}"></script>
+	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+</html>