diff --git a/clashingcomrades/README.md b/clashingcomrades/README.md index 40cd0b2..960e6b4 100644 --- a/clashingcomrades/README.md +++ b/clashingcomrades/README.md @@ -1,2 +1,52 @@ -# Coexistence -A game coded in the script of java. +https://2.bp.blogspot.com/cxXexDVzE2xj4NuMUX3xMVPzMq_B8eYWyl0jmmrJxHU=m18 +https://2.bp.blogspot.com/V7u4hi20B4Oab1F6ZJiODTvSBd7tKHlz7JnDsk0RjwU=m22 +https://2.bp.blogspot.com/Ko-jUtDzIxUP8biiR8RrhZl1qg7SRxdecwDUH5bXeLw=m22 +https://2.bp.blogspot.com/tSLFsujej1XC9ddfotku1VjFVNEsD_TWpCV7M9U4MW4=m22 +https://2.bp.blogspot.com/WoxW-YsqbBfYSmd5xeFcThJXqZ1z488mNO-3sTjC0LQ=m22 +https://2.bp.blogspot.com/yg1iLWiGf-_lVo8pk9nG5ZwGIiExd8AVDCpX0HrpgOQ=m22 +https://2.bp.blogspot.com/U5sZruL8lfj7Ivd8UojbQEFadRm0fk3Tw0qdUEi350k=m22 +https://2.bp.blogspot.com/1MTIE6NhCg-tFcEsIHap0uwLOsyZwgeQ_vweWh9gIRA=m22 +https://2.bp.blogspot.com/dVgcDiAvxvyLbdsbSrhKgfJXeYkfTbDU12x_kN0qUN0=m22 +https://2.bp.blogspot.com/gPr4QsZIzRTeJ_L8DTcv0xukfZXaV5LSViGNelkPw9A=m22 +https://2.bp.blogspot.com/l3T6_kuUfVNaKEfuedi3iuq3iWynpJI97UJ8Al1JX8Y=m22 +https://2.bp.blogspot.com/e8upEkOCAULZr4-P32p8F31U2SGq0XWrNLUAN_oKfsg=m22 +https://2.bp.blogspot.com/Jf48N7nJlgInsdvCgw9m94MQVfrJ4N9TeFrDMWaLZvQ=m22 +https://2.bp.blogspot.com/Z1yVSHbcuUn_Kv3TxeantF-KvdfIoCOO6RVfAn7CYTc=m22 +https://2.bp.blogspot.com/m6Tai6LkKupOsSHDPyp9oV9AIHk9yx94liE-9kKBPMA=m22 +https://2.bp.blogspot.com/zSEUSYfpIfdvCcCGMR4R6OYXU7FcwvYv4QOc5vslT-U=m22 +https://2.bp.blogspot.com/KaO4MThxGlOYuzj1vLphA1JZYz56nC2sFNBuATqu6fA=m22 +https://2.bp.blogspot.com/eNGbPk6ihW2Cl07jAH5yPumBTvrSfM4XnYskZGTNnRg=m22 +https://2.bp.blogspot.com/rvJyVeoix3bjnOVJCGQ0aBGNN7ispIsazmU11zj7ZMs=m22 +https://2.bp.blogspot.com/gRH7aEuXv572QQ3wZHKfE_w5X3eMzU82aBZi8LqqEEg=m22 +https://2.bp.blogspot.com/cQv6LpOrlL5ythg5mIGgxyPhd0OZ8m1qtmB96fvin-I=m22 +https://2.bp.blogspot.com/_ELQwWMqp7YMBmX12nqPZnIJPeBFtRTsB1pGgXEVc1Y=m22 +https://2.bp.blogspot.com/AC3zHiYri3JbaamvY2MLEZQsdqtTObcCJ1M0JNds41c=m22 +https://2.bp.blogspot.com/-ZmPc_RJDxfWqq8HJKbi4xWsy0Aq9bzPI_zw93nL1H0=m22 +https://2.bp.blogspot.com/zYMofYVxV3ymkG8MMJBtIYrIUPZXErUdZnlCC5VQTzM=m22 +https://2.bp.blogspot.com/JKZhBwOIIip7vfjmNfiae8plgC_4zHTguCjeiT7q2TA=m22 +https://2.bp.blogspot.com/WsknaIaaBYinjwbwRb32HitkN8cl1uUAvql8vD4_UuQ=m22 +https://2.bp.blogspot.com/fiL5p6ztX_bka4JpGU7N-aFHUH9TeKX9yQJNK95Zc4A=m22 +https://2.bp.blogspot.com/Z9jbLvVwW5cBFkix4fj5DWKMw8zkvpjMv26lTWDkLQw=m22 +https://2.bp.blogspot.com/etUBNrqd_zOam6_DEe1WglftjBw55WN3ip_eG9fqebM=m22 +https://2.bp.blogspot.com/xb23jj_9SQmWWpf8P2E3aZZJCauC8QOODs8LKUMMJz8=m22 +https://2.bp.blogspot.com/ciAJd3d5fI0xcCc5cV4cKcP0D9sBHD1MXgygzgD5L5E=m22 +https://2.bp.blogspot.com/IKq8ziQ-ousawwHPoiGVylP-mWwS-qKXeb4nHtjFSfw=m22 +https://2.bp.blogspot.com/G2E-xc82LlVthF7L-PHVjE1Z0ic2NEC_gEdgf3FfWcE=m22 +https://2.bp.blogspot.com/ZKAteoSBQ25zjz7deJlQ2-zAZKuEzbNKU5vDH6kXTSk=m22 +https://2.bp.blogspot.com/ykGs4IQVvgqg4YBvQyQjQ-aJzqAfIjuG1YcSm-DyoHY=m22 +https://2.bp.blogspot.com/LSqqKmwBYNG8jbq1zx84bQxlF2rXBUVSs6FhnxiqkIg=m22 +https://2.bp.blogspot.com/yhXPh6lzS0T2JyiDoeFitNazy6cv_SGSlOxv331AWaA=m22 +https://2.bp.blogspot.com/C2nVVVRBG-AS19HBkV5t13FnMv2d3xF0oBlRmNu3ios=m22 +https://2.bp.blogspot.com/vUN9COlZGlaIrMN7EF5Jcf-qBLJKsml08aAOI5VOclY=m22 +https://2.bp.blogspot.com/VKmToLrPJB9TVHxtFH5MdWOdK6LcTgo1oWszTwOX4OI=m22 +https://2.bp.blogspot.com/1TuBeP7KjpluSl2rjLT7n-a2uPZNsu8d54A31fxUxUs=m22 +https://2.bp.blogspot.com/7qzyMUoSE-JU9uMCpSRWAiazLDgvsj7E4gyzKGaU6fE=m22 +https://2.bp.blogspot.com/YZNKmsQX56vePVD-emcNyw4CUUHmARP9D_tBIrqpjCs=m22 +https://2.bp.blogspot.com/OwyEdn57VgRC2kQrd25KCm2-zd2Q5LvPPU3EIiOLhLg=m22 +https://2.bp.blogspot.com/xS2-IHwrSz6lxM_A6AYoxt_zQuXP4QggkFcl7rdAk6Q=m22 +https://2.bp.blogspot.com/s00Qmathj2FNoE4jX6hYaJPLgYTxyAXuIiJ6p08kKRQ=m22 +https://2.bp.blogspot.com/KlBVQPTnngtLAUJuOhm9vWkv4v6Wl_xLoTIhzbB5xY8=m22 +https://2.bp.blogspot.com/F4xupjEI7hOcYrJBTgPXT2w1jfoj45M280_iL8sn7MY=m22 +https://2.bp.blogspot.com/mg_s4ALkIfm4ZQr2GX_wMiFFRAUiFqyZT7qpp4CbTfo=m22 +https://2.bp.blogspot.com/XD-Sz5cmjP3DMFIzKD5pjLmfgJ7K1k5yJ5AYkN5O_6U=m22 +https://2.bp.blogspot.com/upOsaiCucr5AUuYQJRdH3_rXIlY9aDZQYRuk2dT-3GM=m18 \ No newline at end of file diff --git a/clashingcomrades/server.py b/clashingcomrades/server.py index 5fd9b7a..3c23e38 100644 --- a/clashingcomrades/server.py +++ b/clashingcomrades/server.py @@ -1,11 +1,15 @@ from flask import Flask from flask import render_template, jsonify, request +from time import sleep app = Flask(__name__) # Since only one game for now, this is the object that will hold the data for the game game = {} color = 0 vertical = 0 +playersInGame = [] +maxPlayers = 10 +timeLeft = 10 + 1 # Renders client @app.route("/") @@ -46,6 +50,34 @@ def update_game(): # Return the game with the information you added, in addition to everyone else return jsonify(game) +@app.route('/pregame', methods=['GET','POST','EXIT','COUNT']) +def update_players(): + + if method.request == 'GET': + return jsonify(len(playersInGame)) + if method.request == 'POST': + #Define the data given by client. + uuid4 = request.get_json(force=True) + # If this client has not already registered with the server, register. + if uuid4 not in playersInGame: + playersInGame.append(uuid4) + + if method.request == 'EXIT': + #Define the data given by client. + uuid4 = request.get_json(force=True) + playersInGame.remove(uuid4) + + if method.request == 'COUNT': + countdown() + return timeLeft + +def countdown(): + timeLeft = timeLeft - 1 + time.sleep(1) + if len(playersInGame) != maxPlayers: + timeLeft = 11 + else: + countdown() # Eventual more than one game can be played on website diff --git a/clashingcomrades/static/main.css b/clashingcomrades/static/main.css index 0db422b..6a208f8 100644 --- a/clashingcomrades/static/main.css +++ b/clashingcomrades/static/main.css @@ -12,8 +12,8 @@ html { } body { - overflow: hidden; -} + overflow: hidden; +} td { min-width: 100px; height: 100px; @@ -42,19 +42,30 @@ td { margin-left:5%; } -.scoreboard { +.scoreboard, .spectator { 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; } +.scoreboard { + padding: 5px 10px 5px 10px; + font-size: 20px; + margin-left: 45%; + margin-right: 45%; +} + +.spectator { + padding: 10px 15px 10px 15px; + font-size: 50px; + margin-left: 86%; + margin-right: 1%; + margin-top: 45%; +} + #redscore { color: #E62E2E; background-color: #E62E2E; diff --git a/clashingcomrades/static/main.js b/clashingcomrades/static/main.js index 3b40bef..0a2ccab 100644 --- a/clashingcomrades/static/main.js +++ b/clashingcomrades/static/main.js @@ -8,9 +8,12 @@ var username; var playerColor; var claimColor; var turn = 0; +var spectatorChoose = 1; var spectatedUser; +var numberOfPlayers; +var canMove = false; // Colors -var playerColors = { +var playerColors = {s "red": "#E62E2E", "blue": "#4343D8" }; @@ -30,10 +33,7 @@ document.getElementsByClassName('play')[0].onclick = function startGame() { username = uuid4(); spectatedUser = username; - //********************* - // TODO Get from server - //********************* - getInitial() + getInitial(); // TODO IP Handling, most likely not necessary @@ -44,14 +44,13 @@ document.getElementsByClassName('play')[0].onclick = function startGame() { createTable(); // Update score before creating player so scoreboard starts at 0 updateScore(); - createPlayer(); - autoScroll('start'); + waitForPlayers(); document.onkeydown = movePlayer; } function getInitial() { $.ajax({ - url: 'http://127.0.0.1:5000/game', + url: 'http://127.0.0.1:5000/pregame', type: 'GET', async: false, // data: '', @@ -112,6 +111,69 @@ function serverTransfer(coordinate,team,turn,username) { ); } +function waitForPlayers(uuid4) { + timer = setTimeout(function() { + // Sending "I'm here." + $.ajax({ + url: 'http://127.0.0.1:5000/pregame', + type: 'GET', + async: false, + // data: '', + success: function(data) { + //called when successful + numberOfPlayers = data + if (numberOfPlayers == '10') { + countdown(); + // try catch delete table for visuals later. + + } + }, + error: function(e) { + //called when there is an error + //(e.message); + } + }) + .then( + function sendhere() { + $.ajax('http://127.0.0.1:5000/pregame', { + method: 'POST', + type : "POST", + data: JSON.stringify(uuid4, null, '\t'), + async: false, + dataType: "json", + contentType: 'application/json;charset=UTF-8' + }) + .then( + waitForPlayers(); + ); + } + ); + + }, 3000) +} + +function countdown() { + $.ajax({ + url: 'http://127.0.0.1:5000/pregame', + type: 'COUNT', + async: false, + success: function(data) { + //called when successful + timeLeft = data; + //MAKE VISUAL STUFF HERE + countdown() + if(timeLeft == 0) { + createPlayer(); + autoScroll('start'); + } + + }, + error: function(e) { + //called when there is an error + //(e.message); + } + }) +} // CREATION // Creation of Table @@ -233,25 +295,27 @@ function movement(x,y) { function movePlayer(e) { - e = e || window.event; + if (canMove) { + 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); - } + 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 killPlayer(coordinate, team) { if (playerTeam != "spectator") { @@ -264,13 +328,33 @@ function killPlayer(coordinate, team) { spectatorMode(); serverTransfer(coordinate,team,turn,username); } + function spectatorMode() { - //*************************** - // TODO Finish Spectator Mode - //*************************** playerCoordinate = null; playerTeam = 'spectator'; + document.getElementsByClassName('spectator')[0].style.opacity = 0.7; + spectatorType = 'spectatorFull'; + spectatorFull(); + document.getElementsByClassName('spectator')[0].onclick = function changeText() { + spectatorChoose = spectatorChoose * (-1); + if(spectatorChoose == -1) { + document.getElementsByClassName('spectator')[0].childNodes[0].childNodes[0].nodeValue = "Following"; + spectatorType = 'spectatorFollow'; + document.getElementsByTagName('body')[0].style.overflow = "hidden"; + } else { + document.getElementsByClassName('spectator')[0].childNodes[0].childNodes[0].nodeValue = "Full View"; + spectatorType = 'spectatorFull'; + spectatorFull(); + } + } +} +function spectatorFull() { + for(var i = 0; i < document.getElementsByTagName('td').length;i++) { + document.getElementsByTagName('body')[0].style.overflow = "auto"; + document.getElementsByTagName('td')[i].style.minWidth = "75px"; + document.getElementsByTagName('td')[i].style.height = "75px"; + } } function autoScroll(type) { center = [