RoboRallyGUI/templates/drag_example.html

121 lines
2.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag</title>
<script src="static/jquery-3.5.1.js"></script>
<script src="static/jquery-ui.min.js"></script>
<link rel="stylesheet" href="static/style.css">
</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 card{{ i }}" name="{{ cmds[i].number }}" >{{ cmds[i].action }}
<p style="font-size: 10px">{{ cmds[i].priority }}</p>
</div>
{% endfor %}
</div>
</div><!-- container -->
<input id="btnSubmit" type="submit" value="Click Me" />
<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 < 5; i++) {
var c = document.getElementsByClassName("box card" + String(i));
$(c).hide();
}
$(please_wait).show();
$.post("/send_cmds", "", function (data) {
console.log(data);
$(please_wait).hide();
for (i = 0; i < 5; i++) {
var c = document.getElementsByClassName("box card" + String(i));
$(c).show();
}
});
});
box.draggable({
containment: mainCanvas,
helper: "clone",
start: function () {
$(this).css({
opacity: 0
});
$(".box").css("z-index", "0");
},
stop: function () {
$(this).css({
opacity: 1
});
}
});
box.droppable({
accept: box,
drop: function (event, ui) {
var draggable = ui.draggable;
var droppable = $(this);
var dragPos = draggable.position();
var dropPos = droppable.position();
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",
top: dropPos.top + "px",
"z-index": 20
});
droppable.css("z-index", 10).animate({
left: dragPos.left,
top: dragPos.top
});
}
});
});
</script>
</body>
</html>