app.py

@@ -1,168 +1,12 @@
-from flask import Flask, render_template, request, session, make_response
+from flask import Flask, render_template
-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
 
 
-    def ready(self):
+@app.route('/')
-        # 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():
-    if not 'player_id' in session:
+    return render_template('drag_example.html')
-        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(host='0.0.0.0', port=5000)
+    app.run()

static/style.css

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

templates/drag_example.html

@@ -12,65 +12,33 @@
 
 </head>
 <body>
-<h1>Hallo Spieler {{ player_id + 1 }}</h1>
 <!-- container -->
 <div class="container">
 
 	<div class="main-canvas">
 
-        {% for i in range(0,9) %}
+        <div class="box card1" name="card1">1 up
-            <div class="box card{{ i }}"  name="{{ cmds[i].number }}" >{{ cmds[i].action }}
+            <p style="font-size: 10px">100</p>
-            <p style="font-size: 10px">{{ cmds[i].priority }}</p>
         </div>
-        {% endfor %}
+        <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>
 
     </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",
@@ -99,14 +67,7 @@
             var dragPos = draggable.position();
             var dropPos = droppable.position();
 
-            var cmds = [ui.draggable.attr('name').toString(), $(this).attr('name')]
+            console.log(dropPos);
-
-            //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",