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

added level editor and improved user interface

Browse Source
This commit is contained in:
Simon Pirkelmann 2020-09-25 23:31:31 +02:00
parent 4597fa88d6
commit 5ffec68506
5 changed files with 170 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app.py
View File

@ -3,6 +3,7 @@ import random
import socket
import time
import roborally
import numpy as np
app = Flask(__name__)
app.secret_key = b'RoboRallyRolling'
@ -110,6 +111,28 @@ class Player:
def initialize_robot(self, x, y, orientation, marker_id):
self.robot = game.board.create_robot(x, y, orientation, self.id, marker_id)
# TODO: general form
# (1,1) <-> (-6, 3)
# (1,2) <-> (-6, 2) -> y_ctrl = y_game - 4
# (2,1) <-> (-5, 3) -> x_ctrl = x_game - 7
x_trans = x - 7
y_trans = 4 - y
angle_trans = {'>': 0.0, 'v': -np.pi/2, '<': -np.pi, '^': np.pi/2}
cmd = "set position, {}, ({}, {}, {})\n".format(marker_id, x_trans, y_trans, angle_trans[orientation])
game.comm_socket.sendall(cmd.encode())
data = game.comm_socket.recv(32)
print("data from set position: ", data)
cmd2 = "turn left, {}\n".format(marker_id)
game.comm_socket.sendall(cmd2.encode())
data = game.comm_socket.recv(32)
print("data from turn left: ", data)
cmd3 = "turn right, {}\n".format(marker_id)
game.comm_socket.sendall(cmd3.encode())
data = game.comm_socket.recv(32)
print("data from turn right: ", data)
def draw_new_cards(self):
self.player_hand += deck.draw_cards(self.max_cards - len(self.player_hand))
@ -124,7 +147,9 @@ def send_cmds():
if p.robot is None:
x = int(request.form.get('x'))
y = int(request.form.get('y'))
p.initialize_robot(x, y, '>', 11)
orient = request.form.get('orient')
marker_id = int(request.form.get('marker_id'))
p.initialize_robot(x, y, orient, marker_id)
if game.register_actions(p.id, p.player_hand[0:p.action_count]):
p.player_hand = p.player_hand[p.action_count:] # discard used cards
@ -167,10 +192,10 @@ def hello_world():
if request.method == 'GET':
robot = players[player_id].robot
if robot is not None:
robot_pos = (robot.x, robot.y, robot.orientation)
robot_info = (robot.x, robot.y, robot.orientation, robot.marker_id)
else:
robot_pos = None
return render_template('drag_example.html', cmds=player_hand, player_id=player_id, robot_pos=robot_pos)
robot_info = None
return render_template('drag_example.html', cmds=player_hand, player_id=player_id, robot_info=robot_info)
elif request.method == 'POST':
#print(request.form)

9
board.txt Normal file
View File

@ -0,0 +1,9 @@
###############
# #p<<<<< #
# a # b #
# v # v>> #
# + - +r- + p-#
#^<<^ # ^ #
# d # c #
# >>>>> < #
###############

79
roborally.py
View File

@ -225,7 +225,10 @@ class Tile:
#
# occupant: Robot that is standing on the tile
def __init__(self, x, y, modifier=None):
self.modifier = modifier
if modifier == ' ':
self.modifier = None
else:
self.modifier = modifier
self.occupant = None
self.x = x
self.y = y
@ -265,39 +268,42 @@ class Tile:
class Board:
x_dims = 12 # number of tiles in x direction
y_dims = 6 # number of tiles in y direction
x_dims = 13 # number of tiles in x direction
y_dims = 7 # number of tiles in y direction
def __init__(self):
self.board = {}
for x in range(Board.x_dims + 2):
for y in range(Board.y_dims + 2):
if (x == 0) or (x == Board.x_dims + 1) or (y == 0) or (y == Board.y_dims + 1):
# place walls around the board
self.board[(x, y)] = Tile(x, y, '#')
elif y > 2 and y < 6 and x == 7:
self.board[(x, y)] = Tile(x, y, '#')
elif x == 1 and (y >= 1) and (y < 4):
self.board[(x, y)] = Tile(x, y, 'v')
elif y == 4:
self.board[(x, y)] = Tile(x, y, '>')
elif y == 1 and (x >= 2) and (x < 5):
self.board[(x, y)] = Tile(x, y, '>')
elif y == 1 and (x >= 6) and (x <= 8):
self.board[(x, y)] = Tile(x, y, '<')
else:
self.board[(x,y)] = Tile(x,y)
self.board = self.read_board_from_file('board.txt')
self.board[(5, 1)].modifier = '+'
self.board[(5, 4)].modifier = '-'
self.board[(2, 2)].modifier = 'p'
self.board[(3, 3)].modifier = 'r'
#self.read_board_from_file('board.txt')
# place flags near the corners of the board
self.board[(2,2)].modifier = 'a'
self.board[(Board.x_dims-1, 2)].modifier = 'b'
self.board[(Board.x_dims-1, Board.y_dims-1)].modifier = 'c'
self.board[(2, Board.y_dims-1)].modifier = 'd'
# for x in range(Board.x_dims + 2):
# for y in range(Board.y_dims + 2):
# if (x == 0) or (x == Board.x_dims + 1) or (y == 0) or (y == Board.y_dims + 1):
# # place walls around the board
# self.board[(x, y)] = Tile(x, y, '#')
# elif y > 2 and y < 6 and x == 7:
# self.board[(x, y)] = Tile(x, y, '#')
# elif x == 1 and (y >= 1) and (y < 4):
# self.board[(x, y)] = Tile(x, y, 'v')
# elif y == 4:
# self.board[(x, y)] = Tile(x, y, '>')
# elif y == 1 and (x >= 2) and (x < 5):
# self.board[(x, y)] = Tile(x, y, '>')
# elif y == 1 and (x >= 6) and (x <= 8):
# self.board[(x, y)] = Tile(x, y, '<')
# else:
# self.board[(x,y)] = Tile(x,y)
#
# self.board[(5, 1)].modifier = '+'
# self.board[(5, 4)].modifier = '-'
# self.board[(2, 2)].modifier = 'p'
# self.board[(3, 3)].modifier = 'r'
#
# # place flags near the corners of the board
# self.board[(2,2)].modifier = 'a'
# self.board[(Board.x_dims-1, 2)].modifier = 'b'
# self.board[(Board.x_dims-1, Board.y_dims-1)].modifier = 'c'
# self.board[(2, Board.y_dims-1)].modifier = 'd'
# self.board[(2, 2)].modifier = '^'
@ -310,6 +316,19 @@ class Board:
#self.robots[3] = Robot(2, 2, 'v', 3, self.board)
#self.create_robot(1,1,'>', 7, 11)
def read_board_from_file(self, file):
fh = open('board.txt').readlines()
Board.x_dims = len(fh[0].strip()) - 2
Board.y_dims = len(fh) - 2
board = {}
for y, line in enumerate(fh):
for x, tile_modifier in enumerate(line.strip()):
board[(x,y)] = Tile(x, y, tile_modifier)
return board
def create_robot(self, x, y, orientation, player_id, marker_id):
new_robot = Robot(x, y, orientation, marker_id, self.board)
self.robots[player_id] = new_robot

37
static/style.css
View File

@ -18,7 +18,44 @@
cursor: move;
}
.robotOrientation {
width: 75px;
height: 75px;
}
.robotOrientation90 {
width: 75px;
height: 75px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.robotOrientation180 {
width: 75px;
height: 75px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.robotOrientation270 {
width: 75px;
height: 75px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate90 {
width: 100px;
height: 100px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);

62
templates/drag_example.html
View File

@ -27,23 +27,43 @@
</div>
<div class="row">
{% if robot_pos is none %}
{% if robot_info is none %}
<label for="inputRobotX">X:</label>
<input type="number" id="inputRobotX" name="robot_x" min="1" max="12" value="5">
<input type="number" id="inputRobotX" name="robot_x" min="1" max="13" value="1">
<br>
<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">
<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>
{% 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] }}">
<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>
{% endif %}
</div>
@ -66,19 +86,28 @@
var mainCanvas = $(".main-canvas");
var orientation_icon = $("#orientation");
var orientation_input = $("#inputRobotOrientation");
orientation_icon.click(function () {
if (this.alt === "0") {
this.alt = "90";
$("#inputRobotOrientation").val("v");
//document.getElementById("inputRobotOrientation").value = "v";
}
else if (this.alt === "90") {
this.alt = "180";
$("#inputRobotOrientation").val("<");
//document.getElementById("inputRobotOrientation").value = "<";
}
else if (this.alt === "180") {
this.alt = "270";
$("#inputRobotOrientation").val("^");
//document.getElementById("inputRobotOrientation").value = "^";
}
else if (this.alt === "270") {
this.alt = "0";
$("#inputRobotOrientation").val(">");
//document.getElementById("inputRobotOrientation").value = ">";
}
$(this).css({'transform' : 'rotate('+ this.alt +'deg)'});
});
@ -87,7 +116,8 @@
$("#btnSubmit").click(function () {
var robot_x = $("#inputRobotX");
var robot_y = $("#inputRobotY");
var robot_orient = $("#inputRobotOrientation");
var robot_id = $("#inputRobotID");
//alert("button");
for (i = 0; i < 9; i++) {
var c = document.getElementsByClassName("box card" + String(i));
@ -97,7 +127,7 @@
}
$(please_wait).show();
$.post("/send_cmds", { "x" : robot_x.val(), "y": robot_y.val()}, function (data) {
$.post("/send_cmds", { "x" : robot_x.val(), "y": robot_y.val(), "orient": robot_orient.val(), "marker_id": robot_id.val()}, function (data) {
console.log(data);
if (data === 'OK') {
location.reload(); // reload page to get new cards for next round