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

display more info and add damage effects

Browse Source
This commit is contained in:
Simon Pirkelmann 2020-09-26 01:56:15 +02:00
parent 5ffec68506
commit dab4c69d50
5 changed files with 99 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app.py
View File

@ -28,6 +28,7 @@ class Game:
print("connected!") print("connected!")
except socket.error: except socket.error:
print("could not connect to robot control socket!") print("could not connect to robot control socket!")
self.comm_socket = None
def ready(self): def ready(self):
# have all players chosen an action? # have all players chosen an action?
@ -54,7 +55,7 @@ class Game:
# process the chosen commands and generate a list of robot commands to send to the controller program # process the chosen commands and generate a list of robot commands to send to the controller program
cmd_list = self.board.apply_actions(chosen_cards) cmd_list = self.board.apply_actions(chosen_cards)
if True: if self.comm_socket is not None:
# send movements to the controller program # send movements to the controller program
for c in cmd_list: for c in cmd_list:
if not 'nop' in c: if not 'nop' in c:
@ -111,6 +112,7 @@ class Player:
def initialize_robot(self, x, y, orientation, marker_id): def initialize_robot(self, x, y, orientation, marker_id):
self.robot = game.board.create_robot(x, y, orientation, self.id, marker_id) self.robot = game.board.create_robot(x, y, orientation, self.id, marker_id)
if game.comm_socket is not None:
# TODO: general form # TODO: general form
# (1,1) <-> (-6, 3) # (1,1) <-> (-6, 3)
# (1,2) <-> (-6, 2) -> y_ctrl = y_game - 4 # (1,2) <-> (-6, 2) -> y_ctrl = y_game - 4
@ -151,8 +153,9 @@ def send_cmds():
marker_id = int(request.form.get('marker_id')) marker_id = int(request.form.get('marker_id'))
p.initialize_robot(x, y, orient, marker_id) p.initialize_robot(x, y, orient, marker_id)
if game.register_actions(p.id, p.player_hand[0:p.action_count]): number_of_cards = p.action_count - p.robot.damage
p.player_hand = p.player_hand[p.action_count:] # discard used cards if game.register_actions(p.id, p.player_hand[0:number_of_cards]):
p.player_hand = p.player_hand[number_of_cards:] # discard used cards
p.draw_new_cards() p.draw_new_cards()
if game.ready(): if game.ready():
@ -192,7 +195,7 @@ def hello_world():
if request.method == 'GET': if request.method == 'GET':
robot = players[player_id].robot robot = players[player_id].robot
if robot is not None: if robot is not None:
robot_info = (robot.x, robot.y, robot.orientation, robot.marker_id) robot_info = (robot.x, robot.y, robot.orientation, robot.marker_id, robot.damage, robot.collected_flags)
else: else:
robot_info = None robot_info = None
return render_template('drag_example.html', cmds=player_hand, player_id=player_id, robot_info=robot_info) return render_template('drag_example.html', cmds=player_hand, player_id=player_id, robot_info=robot_info)

2
board.txt
View File

@ -1,5 +1,5 @@
############### ###############
# #p<<<<< # #p #p<<<<< #
# a # b # # a # b #
# v # v>> # # v # v>> #
# + - +r- + p-# # + - +r- + p-#

2
roborally.py
View File

@ -201,7 +201,7 @@ class Robot:
return True return True
def take_damage(self, count): def take_damage(self, count):
self.damage = min(self.damage + count, 10) self.damage = min(self.damage + count, 4)
def heal_damage(self, count): def heal_damage(self, count):
self.damage = max(self.damage - count, 0) self.damage = max(self.damage - count, 0)

11
static/style.css
View File

@ -6,6 +6,14 @@
position: relative; position: relative;
} }
.register {
outline: 3px dashed #dddddd;;
width: 120px;
height: 240px;
margin: 0px auto 0;
position: relative;
}
.box{ .box{
width: 62px; width: 62px;
height: 100px; height: 100px;
@ -79,6 +87,9 @@
transform: rotate(270deg); transform: rotate(270deg);
} }
.top-buffer { margin-top:20px; }
.card0 { left: 0; top: 0; background-color: #E74C3C; } .card0 { left: 0; top: 0; background-color: #E74C3C; }
.card1 { left: 100px; top: 0; background-color: #8E44AD; } .card1 { left: 100px; top: 0; background-color: #8E44AD; }
.card2 { left: 200px; top: 0; background-color: #5DADE2; } .card2 { left: 200px; top: 0; background-color: #5DADE2; }

76
templates/drag_example.html
View File

@ -1,23 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Drag</title> <title>Drag</title>
<script src="static/jquery-3.5.1.js"></script> <script src="static/jquery-3.5.1.js"></script>
<script src="static/jquery-ui.min.js"></script> <script src="static/jquery-ui.min.js"></script>
<script src="static/bootstrap.min.js"></script>
<link rel="stylesheet" href="static/bootstrap.css">
<link rel="stylesheet" href="static/style.css"> <link rel="stylesheet" href="static/style.css">
</head> </head>
<body> <body>
<h1>Hallo Spieler {{ player_id + 1 }}</h1>
<!-- container --> <!-- container -->
<div class="container"> <div class="container">
<h1>Hallo Spieler {{ player_id + 1 }}</h1>
<div class="row top-buffer">
<div class="main-canvas"> <div class="main-canvas">
{% for i in range(0,9) %} {% for i in range(0,9) %}
<div class="box card{{ i }}" name="{{ cmds[i].number }}" >{{ cmds[i].action }} <div class="box card{{ i }}" name="{{ cmds[i].number }}" >{{ cmds[i].action }}
<p style="font-size: 10px">{{ cmds[i].priority }}</p> <p style="font-size: 10px">{{ cmds[i].priority }}</p>
@ -25,33 +28,45 @@
{% endfor %} {% endfor %}
</div> </div>
</div>
<div class="row"> <div class="row top-buffer">
{% if robot_info is none %} {% if robot_info is none %}
<label for="inputRobotX">X:</label> <div class="col-sm">
<input type="number" id="inputRobotX" name="robot_x" min="1" max="13" value="1"> <label for="inputRobotX">X Position:</label>
<input class="form-control" type="number" id="inputRobotX" name="robot_x" min="1" max="13" value="1">
<br> <br>
<label for="inputRobotY">Y:</label> <label for="inputRobotY">Y Position:</label>
<input type="number" id="inputRobotY" name="robot_y" min="1" max="7" value="1"> <input class="form-control" type="number" id="inputRobotY" name="robot_y" min="1" max="7" value="1">
<br> </div>
<label for="orientation">Orientation:</label> <div class="col-sm">
<label for="orientation">Blickrichtung:</label><br>
<img id="orientation" class="robotOrientation" src="/static/orientation.png" alt="0"> <img id="orientation" class="robotOrientation" src="/static/orientation.png" alt="0">
<input hidden id="inputRobotOrientation" value=">" readonly> <input hidden id="inputRobotOrientation" value=">" readonly>
<br> </div>
<label for="inputRobotID">Robot ID:</label> <div class="col-sm">
<select name="robotID" id="inputRobotID"> <label for="inputRobotID">Roboter ID:</label>
<select name="robotID" class="form-control" id="inputRobotID">
<option value="11">11</option> <option value="11">11</option>
<option value="12">12</option> <option value="12">12</option>
<option value="13">13</option> <option value="13">13</option>
<option value="14">14</option> <option value="14">14</option>
</select> </select>
<label for="outputRobotFlags">Flaggen:</label><br>
{% for f in ['a', 'b', 'c', 'd'] %}
<input type="checkbox" class="form-check-input" id="flag_{{ f }}" onclick="return false;">
<label class="form-check-label" for="flag_{{ f }}">{{ f }}</label><br>
{% endfor %}
</div>
{% else %} {% else %}
<label for="outputRobotX">X:</label> <div class="col-sm">
<input type="number" id="outputRobotX" name="robot_x" min="1" max="12" value="{{ robot_info[0] }}" readonly> <label for="outputRobotX">X Position:</label>
<br> <input class="form-control" type="number" id="outputRobotX" name="robot_x" min="1" max="12" value="{{ robot_info[0] }}" readonly>
<label for="outputRobotY">Y:</label>
<input type="number" id="outputRobotY" name="robot_y" min="1" max="6" value="{{ robot_info[1] }}" readonly>
<br> <br>
<label for="outputRobotY">Y Position:</label>
<input class="form-control" type="number" id="outputRobotY" name="robot_y" min="1" max="6" value="{{ robot_info[1] }}" readonly>
</div>
<div class="col-sm">
<label for="outputOrientation">Blickrichtung:</label><br>
{% if robot_info[2] == '>' %} {% if robot_info[2] == '>' %}
<img id="outputOrientation" class="robotOrientation" src="/static/orientation.png" alt="0"> <img id="outputOrientation" class="robotOrientation" src="/static/orientation.png" alt="0">
{% elif robot_info[2] == 'v' %} {% elif robot_info[2] == 'v' %}
@ -62,15 +77,31 @@
<img id="outputOrientation" class="robotOrientation270" src="/static/orientation.png" alt="0"> <img id="outputOrientation" class="robotOrientation270" src="/static/orientation.png" alt="0">
{% endif %} {% endif %}
<br> <br>
<label for="outputRobotID">Robot ID:</label> <label for="outputRobotDmg">Schaden:</label><br>
<input name="robotID" id="outputRobotID" value="{{ robot_info[3] }}" readonly> <input class="form-control" name="robotDmg" id="outputRobotDmg" value="{{ robot_info[4] }}" readonly>
</div>
<div class="col-sm">
<label for="outputRobotID">Roboter ID:</label>
<input class="form-control" name="robotID" id="outputRobotID" value="{{ robot_info[3] }}" readonly>
<label for="outputRobotFlags">Flaggen:</label><br>
{% for f in ['a', 'b', 'c', 'd'] %}
{% if f in robot_info[5] %}
<input type="checkbox" class="form-check-input" id="flag_{{ f }}" checked onclick="return false;">
{% else %}
<input type="checkbox" class="form-check-input" id="flag_{{ f }}" onclick="return false;">
{% endif %}
<label class="form-check-label" for="flag_{{ f }}">{{ f }}</label><br>
{% endfor %}
</div>
{% endif %} {% endif %}
</div> </div>
<div class="row top-buffer">
<input class="btn btn-primary" id="btnSubmit" type="submit" value="Befehle abschicken" />
</div>
</div><!-- container --> </div><!-- container -->
<input id="btnSubmit" type="submit" value="Befehle abschicken" />
<div class="container notification" hidden> <div class="container notification" hidden>
@ -119,6 +150,7 @@
var robot_orient = $("#inputRobotOrientation"); var robot_orient = $("#inputRobotOrientation");
var robot_id = $("#inputRobotID"); var robot_id = $("#inputRobotID");
//alert("button"); //alert("button");
for (i = 0; i < 9; i++) { for (i = 0; i < 9; i++) {
var c = document.getElementsByClassName("box card" + String(i)); var c = document.getElementsByClassName("box card" + String(i));
if (c[0].offsetTop === 0) { if (c[0].offsetTop === 0) {