Telos4
/
RoboRallyGUI
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

swapping of cards in the browser gets registered by the server

master
Simon Pirkelmann 2020-09-11 15:44:38 +02:00
parent 90278d23dc
commit 415303c10f
3 changed files with 64 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app.py
View File

@ -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__':

20
static/style.css
View File

@ -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; }
.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; }

22
templates/drag_example.html
View File

@ -17,17 +17,11 @@
<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>
@ -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",