171 lines
4.6 KiB
HTML
171 lines
4.6 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 class="row">
|
|
{% if robot_pos is none %}
|
|
<label for="inputRobotX">X:</label>
|
|
<input type="number" id="inputRobotX" name="robot_x" min="1" max="12" value="5">
|
|
|
|
<label for="inputRobotY">Y:</label>
|
|
<input type="number" id="inputRobotY" name="robot_y" min="1" max="6" value="3">
|
|
|
|
<img id="orientation" src="/static/orientation.png" alt="0">
|
|
{% else %}
|
|
<label for="inputRobotX">X:</label>
|
|
<input type="number" id="inputRobotX" name="robot_x" min="1" max="12" value="{{ robot_pos[0] }}" readonly>
|
|
|
|
<label for="inputRobotY">Y:</label>
|
|
<input type="number" id="inputRobotY" name="robot_y" min="1" max="6" value="{{ robot_pos[1] }}" readonly>
|
|
|
|
<img id="orientation" src="/static/orientation.png" name="{{ robot_pos[2] }}">
|
|
|
|
{% endif %}
|
|
</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");
|
|
|
|
var orientation_icon = $("#orientation");
|
|
|
|
orientation_icon.click(function () {
|
|
if (this.alt === "0") {
|
|
this.alt = "90";
|
|
}
|
|
else if (this.alt === "90") {
|
|
this.alt = "180";
|
|
}
|
|
else if (this.alt === "180") {
|
|
this.alt = "270";
|
|
}
|
|
else if (this.alt === "270") {
|
|
this.alt = "0";
|
|
}
|
|
$(this).css({'transform' : 'rotate('+ this.alt +'deg)'});
|
|
});
|
|
|
|
|
|
$("#btnSubmit").click(function () {
|
|
var robot_x = $("#inputRobotX");
|
|
var robot_y = $("#inputRobotY");
|
|
|
|
//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", { "x" : robot_x.val(), "y": robot_y.val()}, 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",
|
|
|
|
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> |