Telos4/RoboRallyGUI
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
5ffec68506
RoboRallyGUI/templates/drag_example.html

201 lines
6.4 KiB
HTML
Raw Normal View History

initial commit
2020-09-11 12:30:40 +00:00
<!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>
implemented jquery communication with the server to submit commands and wait for them to be processed
2020-09-11 20:49:56 +00:00
<h1>Hallo Spieler {{ player_id + 1 }}</h1>
initial commit
2020-09-11 12:30:40 +00:00
<!-- container -->
<div class="container">
<div class="main-canvas">
swapping of cards in the browser gets registered by the server
2020-09-11 13:44:38 +00:00
{% 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>
initial commit
2020-09-11 12:30:40 +00:00
</div>
swapping of cards in the browser gets registered by the server
2020-09-11 13:44:38 +00:00
{% endfor %}
initial commit
2020-09-11 12:30:40 +00:00
</div>
enabled displaying robot position in the web app and setting the position at the start of the game
2020-09-24 21:58:17 +00:00
<div class="row">
added level editor and improved user interface
2020-09-25 21:31:31 +00:00
{% if robot_info is none %}
enabled displaying robot position in the web app and setting the position at the start of the game
2020-09-24 21:58:17 +00:00
<label for="inputRobotX">X:</label>
added level editor and improved user interface
2020-09-25 21:31:31 +00:00
<input type="number" id="inputRobotX" name="robot_x" min="1" max="13" value="1">
<br>
enabled displaying robot position in the web app and setting the position at the start of the game
2020-09-24 21:58:17 +00:00
<label for="inputRobotY">Y:</label>
added level editor and improved user interface
2020-09-25 21:31:31 +00:00
<input type="number" id="inputRobotY" name="robot_y" min="1" max="7" value="1">
<br>
<label for="orientation">Orientation:</label>
<img id="orientation" class="robotOrientation" src="/static/orientation.png" alt="0">
<input hidden id="inputRobotOrientation" value=">" readonly>
<br>
<label for="inputRobotID">Robot ID:</label>
<select name="robotID" id="inputRobotID">
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
enabled displaying robot position in the web app and setting the position at the start of the game
2020-09-24 21:58:17 +00:00
{% else %}
added level editor and improved user interface
2020-09-25 21:31:31 +00:00
<label for="outputRobotX">X:</label>
<input type="number" id="outputRobotX" name="robot_x" min="1" max="12" value="{{ robot_info[0] }}" readonly>
<br>
<label for="outputRobotY">Y:</label>
<input type="number" id="outputRobotY" name="robot_y" min="1" max="6" value="{{ robot_info[1] }}" readonly>
<br>
{% if robot_info[2] == '>' %}
<img id="outputOrientation" class="robotOrientation" src="/static/orientation.png" alt="0">
{% elif robot_info[2] == 'v' %}
<img id="outputOrientation" class="robotOrientation90" src="/static/orientation.png" alt="0">
{% elif robot_info[2] == '<' %}
<img id="outputOrientation" class="robotOrientation180" src="/static/orientation.png" alt="0">
{% elif robot_info[2] == '^' %}
<img id="outputOrientation" class="robotOrientation270" src="/static/orientation.png" alt="0">
{% endif %}
<br>
<label for="outputRobotID">Robot ID:</label>
<input name="robotID" id="outputRobotID" value="{{ robot_info[3] }}" readonly>
enabled displaying robot position in the web app and setting the position at the start of the game
2020-09-24 21:58:17 +00:00
{% endif %}
added orientation icon to the web app
2020-09-24 22:37:10 +00:00
</div>
enabled displaying robot position in the web app and setting the position at the start of the game
2020-09-24 21:58:17 +00:00
initial commit
2020-09-11 12:30:40 +00:00
</div><!-- container -->
processing submitted commands on the server side and dealing new cards when commands have been submitted
2020-09-14 12:56:30 +00:00
<input id="btnSubmit" type="submit" value="Befehle abschicken" />
implemented jquery communication with the server to submit commands and wait for them to be processed
2020-09-11 20:49:56 +00:00
<div class="container notification" hidden>
Bitte warten, bis alle Spieler ihre Aktion gewählt haben...
</div>
initial commit
2020-09-11 12:30:40 +00:00
<script>
$(document).ready(function () {
implemented jquery communication with the server to submit commands and wait for them to be processed
2020-09-11 20:49:56 +00:00
var please_wait = $(".notification").hide();
initial commit
2020-09-11 12:30:40 +00:00
var box = $(".box");
var mainCanvas = $(".main-canvas");
added orientation icon to the web app
2020-09-24 22:37:10 +00:00
var orientation_icon = $("#orientation");
added level editor and improved user interface
2020-09-25 21:31:31 +00:00
var orientation_input = $("#inputRobotOrientation");
added orientation icon to the web app
2020-09-24 22:37:10 +00:00
orientation_icon.click(function () {
if (this.alt === "0") {
this.alt = "90";
added level editor and improved user interface
2020-09-25 21:31:31 +00:00
$("#inputRobotOrientation").val("v");
//document.getElementById("inputRobotOrientation").value = "v";
added orientation icon to the web app
2020-09-24 22:37:10 +00:00
}
else if (this.alt === "90") {
this.alt = "180";
added level editor and improved user interface
2020-09-25 21:31:31 +00:00
$("#inputRobotOrientation").val("<");
//document.getElementById("inputRobotOrientation").value = "<";
added orientation icon to the web app
2020-09-24 22:37:10 +00:00
}
else if (this.alt === "180") {
this.alt = "270";
added level editor and improved user interface
2020-09-25 21:31:31 +00:00
$("#inputRobotOrientation").val("^");
//document.getElementById("inputRobotOrientation").value = "^";
added orientation icon to the web app
2020-09-24 22:37:10 +00:00
}
else if (this.alt === "270") {
this.alt = "0";
added level editor and improved user interface
2020-09-25 21:31:31 +00:00
$("#inputRobotOrientation").val(">");
//document.getElementById("inputRobotOrientation").value = ">";
added orientation icon to the web app
2020-09-24 22:37:10 +00:00
}
$(this).css({'transform' : 'rotate('+ this.alt +'deg)'});
});
enabled displaying robot position in the web app and setting the position at the start of the game
2020-09-24 21:58:17 +00:00
implemented jquery communication with the server to submit commands and wait for them to be processed
2020-09-11 20:49:56 +00:00
$("#btnSubmit").click(function () {
enabled displaying robot position in the web app and setting the position at the start of the game
2020-09-24 21:58:17 +00:00
var robot_x = $("#inputRobotX");
var robot_y = $("#inputRobotY");
added level editor and improved user interface
2020-09-25 21:31:31 +00:00
var robot_orient = $("#inputRobotOrientation");
var robot_id = $("#inputRobotID");
implemented jquery communication with the server to submit commands and wait for them to be processed
2020-09-11 20:49:56 +00:00
//alert("button");
processing submitted commands on the server side and dealing new cards when commands have been submitted
2020-09-14 12:56:30 +00:00
for (i = 0; i < 9; i++) {
implemented jquery communication with the server to submit commands and wait for them to be processed
2020-09-11 20:49:56 +00:00
var c = document.getElementsByClassName("box card" + String(i));
processing submitted commands on the server side and dealing new cards when commands have been submitted
2020-09-14 12:56:30 +00:00
if (c[0].offsetTop === 0) {
$(c).hide();
}
implemented jquery communication with the server to submit commands and wait for them to be processed
2020-09-11 20:49:56 +00:00
}
$(please_wait).show();
added level editor and improved user interface
2020-09-25 21:31:31 +00:00
$.post("/send_cmds", { "x" : robot_x.val(), "y": robot_y.val(), "orient": robot_orient.val(), "marker_id": robot_id.val()}, function (data) {
implemented jquery communication with the server to submit commands and wait for them to be processed
2020-09-11 20:49:56 +00:00
console.log(data);
processing submitted commands on the server side and dealing new cards when commands have been submitted
2020-09-14 12:56:30 +00:00
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
}
})
implemented jquery communication with the server to submit commands and wait for them to be processed
2020-09-11 20:49:56 +00:00
}
});
});
initial commit
2020-09-11 12:30:40 +00:00
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();
swapping of cards in the browser gets registered by the server
2020-09-11 13:44:38 +00:00
var cmds = [ui.draggable.attr('name').toString(), $(this).attr('name')]
//console.log(dragPos);
//console.log(dropPos);
implemented jquery communication with the server to submit commands and wait for them to be processed
2020-09-11 20:49:56 +00:00
//console.log($(cmds));
// notify server that cards have been swapped
swapping of cards in the browser gets registered by the server
2020-09-11 13:44:38 +00:00
$.post(url='/', {drag: ui.draggable.attr('name'), drop: $(this).attr('name')});
initial commit
2020-09-11 12:30:40 +00:00
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>
Reference in New Issue Copy Permalink