Skip to content

User interface changes for boardMaker. #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

User interface changes for boardMaker. #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5b5bfa5
User interface changes for boardMaker.
techlemur Sep 9, 2018
a271487
Fix board selection glitch.
techlemur Sep 9, 2018
81438db
More fixes
techlemur Sep 9, 2018
aed8458
Fixed right click on boardMaker
techlemur Sep 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions src/RoboRuckus/Views/Setup/boardMaker.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,17 @@
@Html.ValidationMessageFor(m => m.y_size, "", new { @class = "" })
</div>
</div>
<div class="left" id="trashCan">
<img src="~/images/maker/trash.png" />
<div id="startMakerDiv" class="left clear">
<button id="startMaker" class="ui-button ui-widget ui-corner-all ">Continue</button>
</div>

<div class="clear"></div>
<br />
<div id="boardMaker" class="left"></div>
<div id="flagContainer" class="left ui-helper-reset">

<div id="flagContainer" class="left ui-helper-reset hidden">
<div id="trashCan">
<img src="~/images/maker/trash.png" />
</div>
<div data-orientation="0" class="element CCWR">
<img src="~/images/maker/CCWRotator.png" />
</div>
Expand Down Expand Up @@ -97,6 +101,7 @@
<img src="~/images/maker/Wrench.png" />
</div>
</div>
<div id="boardMaker" class="left transparent"></div>
<div class="clear"></div>
<br />
<div>
Expand All @@ -105,7 +110,7 @@
<div>
@Html.HiddenFor(m => m.cornerData, new { @class = "", @id = "cornerData" })
</div>
<input id="submitButton" type="submit" value="Make Board" class="" />
<input id="submitButton" type="submit" value="Make Board" class="hidden" />
</div>
}
<br />
Expand Down
94 changes: 82 additions & 12 deletions src/RoboRuckus/wwwroot/Scripts/boardMaker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
// Maps the direction indicators to corresponding integer values
var dirs = ["X", "Y", "NEG_X", "NEG_Y"];

window.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
return false;
}, false);

$(function () {
// Create buttons.
$("#submitButton").button();
Expand Down Expand Up @@ -41,17 +46,27 @@ $(function () {
$("#boardSel").selectmenu({
width: null,
change: function (event, ui) {
var name = $(this).val();



var name = $(this).val();
if (name) {
$("#name").val(name);
$("#printImg").attr("href", "/images/printable_boards/" + name.replace(" ", "") + ".png");
$("#nameContainer").hide();
$("#exButtons").show();
createBoard(name);
$("#startMaker").fadeOut();
$("#flagContainer").fadeIn();
$("#submitButton").fadeIn();
createBoard(name);

} else {
$("#name").val("");
$("#nameContainer").show();
$("#exButtons").hide();
$("#startMaker").fadeOut();
$("#flagContainer").fadeIn();
$("#submitButton").fadeIn();
}
}
});
Expand All @@ -63,11 +78,40 @@ $(function () {
// Add corner date to form
$("#cornerData").val(getCorners());
});

//Clear the value on click if 0
$("#x_size").on('click', function(e) {
console.log($("#x_size").val());
if($("#x_size").val() == 0){
$("#x_size").val('');
}
});

//Clear the value on click if 0
$("#y_size").on('click', function(e) {
console.log($("#y_size").val());
if($("#y_size").val() == 0){
$("#y_size").val('');
}
});

// Intercept startMaker button.
$("#startMaker").on('click', function(e) {
//Event.stop(event); // suppress submit
e.preventDefault();
drawBoard($("#x_size").val(), $("#y_size").val());
$("#startMaker").fadeOut();
$("#flagContainer").fadeIn();
$("#boardMaker").fadeTo(500,1);
$("#submitButton").fadeIn();
});


// Redraw board on size change.
$(".boardSize").on("change", function () {
drawBoard($("#x_size").val(), $("#y_size").val());
});

// Redraw board on size change.
$(".boardSize").change(function () {
drawBoard($("#x_size").val(), $("#y_size").val());
});

// Makes board elements draggable.
$(".element").draggable({
Expand All @@ -89,18 +133,38 @@ $(function () {
});

// Allow for rotateable elements to rotate.
$("#boardMaker").on("click", ".boardSquare .rotateable", function () {
var rotation = 0;
var current = Number($(this).data("orientation"));
$("#boardMaker").on("click", ".boardSquare .rotateable", function (e) {
console.log(e);
var rotation = 0;
var current = Number($(this).attr("data-orientation"));
if (current !== 3) {
current++;
rotation = -90 * current;
$(this).data("orientation", current);
$(this).attr("data-orientation", current);
} else {
$(this).attr("data-orientation", 0);
}
$(this).css({ 'transform': 'rotate(' + rotation + 'deg)' });
});

// Allow for rotateable elements to rotate.
$("#boardMaker").on("contextmenu", ".boardSquare .rotateable", function (e) {
console.log(e);
var rotation = 0;
var current = Number($(this).attr("data-orientation"));
if (current !== 1) {
current--;
if (current == -1) {
current = 3;
}
rotation = -90 * current;
$(this).attr("data-orientation", current);
} else {
$(this).data("orientation", 0);
$(this).attr("data-orientation", 0);
}
$(this).css({ 'transform': 'rotate(' + rotation + 'deg)' });
});

});

// Draws the board
Expand Down Expand Up @@ -423,7 +487,8 @@ function createBoard(boardName) {
$.get("/Setup/getBoard", { name: boardName },
function (board) {
$("#x_size").val(board.size[0] + 1);
$("#y_size").val(board.size[1] + 1).change();
$("#y_size").val(board.size[1] + 1);
drawBoard($("#x_size").val(), $("#y_size").val());
placeWrenches(board.wrenches);
placePits(board.pits);
placeTurntables(board.turntables);
Expand Down Expand Up @@ -451,6 +516,11 @@ function createBoard(boardName) {
.on('selectstart', false)
.css({ top: "", left: "", position: "" }); // Fix the CSS
}, "json");
$("#startMaker").fadeOut();
$("#flagContainer").fadeIn();
$("#boardMaker").fadeTo(500,1);
$("#submitButton").fadeIn();

}

// Places wrences on a board based on their data
Expand Down
28 changes: 27 additions & 1 deletion src/RoboRuckus/wwwroot/css/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,10 @@
display: none;
}

.transparent {
opacity: 0;
}

.slot ul {
list-style: none;
padding: 0;
Expand Down Expand Up @@ -212,7 +216,7 @@
min-width: 5em;
max-width: 7em;
margin-top: 3em;
margin-left: 5em;
/*margin-left: 5em;*/
}

#flagContainer .flags {
Expand Down Expand Up @@ -274,6 +278,12 @@ select {
margin-right: 1em;
}

.center{
margin-left:auto;
margin-right:auto;
text-align:center;
}

/* Bot tuning stuff */

.tuneFactor {
Expand Down Expand Up @@ -319,6 +329,11 @@ select {
overflow: auto;
white-space: nowrap;
padding: 1em;
z-index:0;
}

.ui-draggable-dragging{
z-index:500;
}

#boardMaker .boardSquare {
Expand All @@ -328,6 +343,14 @@ select {
opacity: 1;
}

#startMakerDiv{
height:5px;
}

#startMaker{
margin-top:0.5em;
}

.element {
height: 2.5em;
width: 2.5em;
Expand Down Expand Up @@ -365,6 +388,9 @@ select {
}

#trashCan {
position: relative;
left: 0.5em;
top: -0.5em;
height: 5em;
width: 5em;
background-size: contain;
Expand Down