added sleep to simulate processing

app.py

@@ -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.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():
-    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__':
-    app.run()
+    app.run(host='0.0.0.0', port=5000)

static/style.css

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

templates/drag_example.html

@@ -12,33 +12,65 @@
 
 </head>
 <body>
+<h1>Hallo Spieler {{ player_id + 1 }}</h1>
 <!-- container -->
 <div class="container">
 
 	<div class="main-canvas">
 
-        <div class="box card1" name="card1">1 up
-            <p style="font-size: 10px">100</p>
+        {% for i in range(0,9) %}
+            <div class="box card{{ i }}"  name="{{ cmds[i].number }}" >{{ cmds[i].action }}
+            <p style="font-size: 10px">{{ cmds[i].priority }}</p>
         </div>
-        <div class="box card2">2</div>
-        <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>
+        {% endfor %}
 
     </div>
 
 </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>
     $(document).ready(function () {
 
+        var please_wait = $(".notification").hide();
+
     var box = $(".box");
     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({
         containment: mainCanvas,
         helper: "clone",
@@ -67,7 +99,14 @@
             var dragPos = draggable.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({
                 left: dropPos.left + "px",