Compare commits

...

6 Commits

3 changed files with 222 additions and 25 deletions

164
app.py
View File

@ -1,12 +1,168 @@
from flask import Flask, render_template from flask import Flask, render_template, request, session, make_response
import random
import socket
import time
app = Flask(__name__) app = Flask(__name__)
app.secret_key = b'RoboRallyRolling'
random.seed(0)
moves = ['forward', 'forward x2', 'forward x3', 'backward', 'turn left', 'turn right', 'turn around']
class Game:
def __init__(self):
self.action_stack = {}
self.processing_done = False # indicates whether all commands in the current round have been processed
self.comm_socket = socket.socket() # socket for communicating with the program controlling the robots
@app.route('/') def ready(self):
# have all players chosen an action?
return len(self.action_stack.keys()) == Player.player_counter
def register_actions(self, player_id, actions):
if not player_id in self.action_stack.keys():
self.action_stack[player_id] = actions
self.processing_done = False
return True
else:
print("actions already chosen!")
return False
def process_actions(self):
# send commands to the robots in the order of priority
for i in range(5):
current_actions = []
for p in self.action_stack.keys():
current_actions += [(p, self.action_stack[p][i])]
print("actions in step {}: {}".format(i, ["robot {} action {}".format(c[0], c[1]) for c in current_actions]))
time.sleep(1)
#self.comm_socket.send()
# clear the action stack for the next round
self.action_stack = {}
self.processing_done = True
class Card:
card_counter = 0
def __init__(self):
self.number = Card.card_counter
Card.card_counter += 1
self.action = random.choice(moves)
self.priority = random.randint(0, 100)
def __str__(self):
return "Card No. " + str(self.number) + " " + self.action + " " + str(self.priority)
card_deck = {}
for i in range(0,20):
card_deck[i] = Card()
class Player:
MAX_PLAYERS = 3
player_counter = 0
def __init__(self):
if Player.player_counter < Player.MAX_PLAYERS:
self.id = Player.player_counter
Player.player_counter += 1
self.max_cards = 9
self.player_hand = random.sample(list(card_deck.values()), self.max_cards)
print("current hand: ", [str(c) for c in self.player_hand])
self.action_count = 5
self.action_chosen = False
else:
print("max players reached!")
def draw_new_cards(self):
self.player_hand += random.sample(list(card_deck.values()), self.max_cards - len(self.player_hand))
players = {}
game = Game()
@app.route('/send_cmds', methods=['POST', 'GET'])
def send_cmds():
if request.method == 'POST':
# POST is used for submitting commands
player_id = session['player_id']
p = players[player_id]
if game.register_actions(p.id, p.player_hand[0:p.action_count]):
p.player_hand = p.player_hand[p.action_count:] # discard used cards
p.draw_new_cards()
if game.ready():
game.process_actions()
return 'OK'
else:
return 'please wait'
elif request.method == 'GET':
# GET is used when we have to wait for other players to finish
while not game.processing_done: # wait for other players to choose commands and processing to finish
pass
return 'OK'
@app.route('/', methods=['GET', 'POST'])
def hello_world(): def hello_world():
return render_template('drag_example.html') if not 'player_id' in session:
if Player.player_counter < Player.MAX_PLAYERS:
# new player
p = Player()
session['player_id'] = p.id
players[p.id] = p
player_id = session['player_id']
else:
return "Sorry, maximum number of players reached!"
else:
player_id = session['player_id']
if Player.player_counter < player_id + 1:
session.clear()
response = make_response('Please reload the page!')
#response.set_cookie('player_id', '', expires=0)
return response
player_hand = players[player_id].player_hand
if request.method == 'GET':
return render_template('drag_example.html', cmds=player_hand, player_id=player_id)
elif request.method == 'POST':
#print(request.form)
if request.form.get('drag') and request.form.get('drop'):
# swap cards in the current hand
i1 = int(request.form.get('drag')) # number of first card
i2 = int(request.form.get('drop')) # number of second card
card1 = card_deck[i1] # get card by number
card2 = card_deck[i2]
j1 = player_hand.index(card1) # get index of card in the hand
j2 = player_hand.index(card2)
player_hand[j1], player_hand[j2] = player_hand[j2], player_hand[j1] # swap the cards in the list
#print("current hand: ", [str(c) for c in player_hand[player_id]])
return 'OK'
else:
return render_template('drag_example.html', cmds=player_hand, player_id=player_id)
if __name__ == '__main__': if __name__ == '__main__':
app.run() app.run(host='0.0.0.0', port=5000)

View File

@ -11,19 +11,21 @@
height: 100px; height: 100px;
position: absolute; position: absolute;
top: 100px; top: 100px;
font-size: 24px; font-size: 15px;
color: #ffffff; color: #ffffff;
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
cursor: move; cursor: move;
} }
.card1 { left: 0; top: 0; background-color: #E74C3C; } .card0 { left: 0; top: 0; background-color: #E74C3C; }
.card2 { left: 100px; top: 0; background-color: #8E44AD; } .card1 { left: 100px; top: 0; background-color: #8E44AD; }
.card3 { left: 200px; top: 0; background-color: #5DADE2; } .card2 { left: 200px; top: 0; background-color: #5DADE2; }
.card4 { left: 300px; top: 0; background-color: #1ABC9C; } .card3 { left: 300px; top: 0; background-color: #1ABC9C; }
.card5 { left: 400px; top: 0; background-color: #F1C40F; } .card4 { left: 400px; top: 0; background-color: #F1C40F; }
.card6 { left: 50px; top: 120px; background-color: #F39C12; } .card5 { left: 50px; top: 120px; background-color: #F39C12; }
.card7 { left: 150px; top: 120px; background-color: #34495E; } .card6 { left: 150px; top: 120px; background-color: #34495E; }
.card8 { left: 250px; top: 120px; background-color: #FF00FF; } .card7 { left: 250px; top: 120px; background-color: #FF00FF; }
.card9 { left: 350px; top: 120px; background-color: #008080; } .card8 { left: 350px; top: 120px; background-color: #008080; }
.card_hidden { background-color: #dddddd; }

View File

@ -12,33 +12,65 @@
</head> </head>
<body> <body>
<h1>Hallo Spieler {{ player_id + 1 }}</h1>
<!-- container --> <!-- container -->
<div class="container"> <div class="container">
<div class="main-canvas"> <div class="main-canvas">
<div class="box card1" name="card1">1 up {% for i in range(0,9) %}
<p style="font-size: 10px">100</p> <div class="box card{{ i }}" name="{{ cmds[i].number }}" >{{ cmds[i].action }}
<p style="font-size: 10px">{{ cmds[i].priority }}</p>
</div> </div>
<div class="box card2">2</div> {% endfor %}
<div class="box card3">3</div>
<div class="box card4">4</div>
<div class="box card5">5</div>
<div class="box card6">6</div>
<div class="box card7">7</div>
<div class="box card8">8</div>
<div class="box card9">9</div>
</div> </div>
</div><!-- container --> </div><!-- container -->
<input id="btnSubmit" type="submit" value="Befehle abschicken" />
<div class="container notification" hidden>
Bitte warten, bis alle Spieler ihre Aktion gewählt haben...
</div>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
var please_wait = $(".notification").hide();
var box = $(".box"); var box = $(".box");
var mainCanvas = $(".main-canvas"); var mainCanvas = $(".main-canvas");
$("#btnSubmit").click(function () {
//alert("button");
for (i = 0; i < 9; i++) {
var c = document.getElementsByClassName("box card" + String(i));
if (c[0].offsetTop === 0) {
$(c).hide();
}
}
$(please_wait).show();
$.post("/send_cmds", "", function (data) {
console.log(data);
if (data === 'OK') {
location.reload(); // reload page to get new cards for next round
}
else {
console.log('waiting...')
$.get("/send_cmds", "", function (data) {
if (data === 'OK') {
location.reload(); // reload page to get new cards for next round
}
})
}
});
});
box.draggable({ box.draggable({
containment: mainCanvas, containment: mainCanvas,
helper: "clone", helper: "clone",
@ -67,7 +99,14 @@
var dragPos = draggable.position(); var dragPos = draggable.position();
var dropPos = droppable.position(); var dropPos = droppable.position();
console.log(dropPos); var cmds = [ui.draggable.attr('name').toString(), $(this).attr('name')]
//console.log(dragPos);
//console.log(dropPos);
//console.log($(cmds));
// notify server that cards have been swapped
$.post(url='/', {drag: ui.draggable.attr('name'), drop: $(this).attr('name')});
draggable.css({ draggable.css({
left: dropPos.left + "px", left: dropPos.left + "px",