swapping of cards in the browser gets registered by the server

app.py

@@ -1,11 +1,51 @@
-from flask import Flask, render_template
+from flask import Flask, render_template, request
+import random
 
 app = Flask(__name__)
 
+moves = ['forward', 'backward', 'turn left', 'turn right', 'turn around']
 
-@app.route('/')
+class Card:
+    global_counter = 0
+    def __init__(self):
+        self.number = Card.global_counter
+        Card.global_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()
+
+
+player_hand = [card_deck[i] for i in range(9)]
+
+@app.route('/', methods=['GET', 'POST'])
 def hello_world():
-    return render_template('drag_example.html')
+    if request.method == 'GET':
+        return render_template('drag_example.html', cmds=player_hand)
+    elif request.method == 'POST':
+        print(request.form)
+
+        # 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])
+
+        return 'OK'
+
 
 
 if __name__ == '__main__':

static/style.css

@@ -11,19 +11,19 @@
     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; }
+.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; }

templates/drag_example.html

@@ -17,17 +17,11 @@
 
 	<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 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>
 
@@ -67,7 +61,13 @@
             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));
+            $.post(url='/', {drag: ui.draggable.attr('name'), drop: $(this).attr('name')});
 
             draggable.css({
                 left: dropPos.left + "px",