From 5b5bfa587ff97e5a03df4256e49fc7163a617735 Mon Sep 17 00:00:00 2001
From: techlemur <34924313+techlemur@users.noreply.github.com>
Date: Sun, 9 Sep 2018 15:59:15 -0700
Subject: [PATCH 1/4] User interface changes for boardMaker.
-added two stage setup
-added fading effect
-swapped board and element position
---
src/RoboRuckus/Views/Setup/boardMaker.cshtml | 15 ++++---
src/RoboRuckus/wwwroot/Scripts/boardMaker.js | 44 +++++++++++++++++---
src/RoboRuckus/wwwroot/css/site.css | 24 ++++++++++-
3 files changed, 72 insertions(+), 11 deletions(-)
diff --git a/src/RoboRuckus/Views/Setup/boardMaker.cshtml b/src/RoboRuckus/Views/Setup/boardMaker.cshtml
index bdd5453..cd8dada 100644
--- a/src/RoboRuckus/Views/Setup/boardMaker.cshtml
+++ b/src/RoboRuckus/Views/Setup/boardMaker.cshtml
@@ -35,13 +35,17 @@
@Html.ValidationMessageFor(m => m.y_size, "", new { @class = "" })
-
-

+
+
+
-
-
+
+
+
+

+
@@ -97,6 +101,7 @@
+
}
diff --git a/src/RoboRuckus/wwwroot/Scripts/boardMaker.js b/src/RoboRuckus/wwwroot/Scripts/boardMaker.js
index a8ce819..818db16 100644
--- a/src/RoboRuckus/wwwroot/Scripts/boardMaker.js
+++ b/src/RoboRuckus/wwwroot/Scripts/boardMaker.js
@@ -41,7 +41,10 @@ $(function () {
$("#boardSel").selectmenu({
width: null,
change: function (event, ui) {
- var name = $(this).val();
+ $("#startMaker").fadeOut();
+ $("#flagContainer").fadeIn();
+ $("#submitButton").fadeIn();
+ var name = $(this).val();
if (name) {
$("#name").val(name);
$("#printImg").attr("href", "/images/printable_boards/" + name.replace(" ", "") + ".png");
@@ -63,11 +66,42 @@ $(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());
+
+ // Redraw board on size change.
+ $(".boardSize").change(function () {
+ drawBoard($("#x_size").val(), $("#y_size").val());
+ });
+
+ $("#startMaker").fadeOut();
+ $("#flagContainer").fadeIn();
+ $("#submitButton").fadeIn();
+
+ });
- // Redraw board on size change.
- $(".boardSize").change(function () {
- drawBoard($("#x_size").val(), $("#y_size").val());
- });
+
+
// Makes board elements draggable.
$(".element").draggable({
diff --git a/src/RoboRuckus/wwwroot/css/site.css b/src/RoboRuckus/wwwroot/css/site.css
index 9cdf876..414be8a 100644
--- a/src/RoboRuckus/wwwroot/css/site.css
+++ b/src/RoboRuckus/wwwroot/css/site.css
@@ -212,7 +212,7 @@
min-width: 5em;
max-width: 7em;
margin-top: 3em;
- margin-left: 5em;
+ /*margin-left: 5em;*/
}
#flagContainer .flags {
@@ -274,6 +274,12 @@ select {
margin-right: 1em;
}
+ .center{
+ margin-left:auto;
+ margin-right:auto;
+ text-align:center;
+ }
+
/* Bot tuning stuff */
.tuneFactor {
@@ -319,6 +325,11 @@ select {
overflow: auto;
white-space: nowrap;
padding: 1em;
+ z-index:0;
+}
+
+.ui-draggable-dragging{
+ z-index:500;
}
#boardMaker .boardSquare {
@@ -328,6 +339,14 @@ select {
opacity: 1;
}
+#startMakerDiv{
+ height:5px;
+}
+
+#startMaker{
+ margin-top:0.5em;
+}
+
.element {
height: 2.5em;
width: 2.5em;
@@ -365,6 +384,9 @@ select {
}
#trashCan {
+ position: relative;
+ left: 0.5em;
+ top: -0.5em;
height: 5em;
width: 5em;
background-size: contain;
From a2714872f60f4493c94ca02cfd7aedf4fbef9996 Mon Sep 17 00:00:00 2001
From: techlemur <34924313+techlemur@users.noreply.github.com>
Date: Sun, 9 Sep 2018 16:28:41 -0700
Subject: [PATCH 2/4] Fix board selection glitch.
---
src/RoboRuckus/wwwroot/Scripts/boardMaker.js | 67 +++++++++++++++-----
1 file changed, 51 insertions(+), 16 deletions(-)
diff --git a/src/RoboRuckus/wwwroot/Scripts/boardMaker.js b/src/RoboRuckus/wwwroot/Scripts/boardMaker.js
index 818db16..26831ea 100644
--- a/src/RoboRuckus/wwwroot/Scripts/boardMaker.js
+++ b/src/RoboRuckus/wwwroot/Scripts/boardMaker.js
@@ -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();
@@ -41,20 +46,27 @@ $(function () {
$("#boardSel").selectmenu({
width: null,
change: function (event, ui) {
- $("#startMaker").fadeOut();
- $("#flagContainer").fadeIn();
- $("#submitButton").fadeIn();
+
+
+
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();
}
}
});
@@ -88,20 +100,18 @@ $(function () {
//Event.stop(event); // suppress submit
e.preventDefault();
drawBoard($("#x_size").val(), $("#y_size").val());
-
- // Redraw board on size change.
- $(".boardSize").change(function () {
- drawBoard($("#x_size").val(), $("#y_size").val());
- });
-
$("#startMaker").fadeOut();
$("#flagContainer").fadeIn();
$("#submitButton").fadeIn();
-
+ // Redraw board on size change.
+ $(".boardSize").off("change"); //Prevent extras
+ $(".boardSize").on("change", function () {
+ drawBoard($("#x_size").val(), $("#y_size").val());
+ });
});
+
+
-
-
// Makes board elements draggable.
$(".element").draggable({
@@ -123,8 +133,9 @@ $(function () {
});
// Allow for rotateable elements to rotate.
- $("#boardMaker").on("click", ".boardSquare .rotateable", function () {
- var rotation = 0;
+ $("#boardMaker").on("click", ".boardSquare .rotateable", function (e) {
+ console.log(e);
+ var rotation = 0;
var current = Number($(this).data("orientation"));
if (current !== 3) {
current++;
@@ -135,6 +146,22 @@ $(function () {
}
$(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).data("orientation"));
+ if (current !== 3) {
+ current--;
+ rotation = +90 * current;
+ $(this).data("orientation", current);
+ } else {
+ $(this).data("orientation", 0);
+ }
+ $(this).css({ 'transform': 'rotate(' + rotation + 'deg)' });
+ });
+
});
// Draws the board
@@ -457,7 +484,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);
@@ -485,6 +513,13 @@ function createBoard(boardName) {
.on('selectstart', false)
.css({ top: "", left: "", position: "" }); // Fix the CSS
}, "json");
+
+ // Redraw board on size change.
+ $(".boardSize").off("change"); //Prevent extras
+ $(".boardSize").on("change", function () {
+ drawBoard($("#x_size").val(), $("#y_size").val());
+ });
+
}
// Places wrences on a board based on their data
From 81438db4742e45552cb4661caaf58a093f22ba84 Mon Sep 17 00:00:00 2001
From: techlemur <34924313+techlemur@users.noreply.github.com>
Date: Sun, 9 Sep 2018 16:47:07 -0700
Subject: [PATCH 3/4] More fixes
---
src/RoboRuckus/Views/Setup/boardMaker.cshtml | 4 ++--
src/RoboRuckus/wwwroot/Scripts/boardMaker.js | 20 +++++++++-----------
src/RoboRuckus/wwwroot/css/site.css | 4 ++++
3 files changed, 15 insertions(+), 13 deletions(-)
diff --git a/src/RoboRuckus/Views/Setup/boardMaker.cshtml b/src/RoboRuckus/Views/Setup/boardMaker.cshtml
index cd8dada..c593f8a 100644
--- a/src/RoboRuckus/Views/Setup/boardMaker.cshtml
+++ b/src/RoboRuckus/Views/Setup/boardMaker.cshtml
@@ -36,7 +36,7 @@
-
+
@@ -101,7 +101,7 @@
-
+
diff --git a/src/RoboRuckus/wwwroot/Scripts/boardMaker.js b/src/RoboRuckus/wwwroot/Scripts/boardMaker.js
index 26831ea..1adca76 100644
--- a/src/RoboRuckus/wwwroot/Scripts/boardMaker.js
+++ b/src/RoboRuckus/wwwroot/Scripts/boardMaker.js
@@ -102,15 +102,15 @@ $(function () {
drawBoard($("#x_size").val(), $("#y_size").val());
$("#startMaker").fadeOut();
$("#flagContainer").fadeIn();
+ $("#boardMaker").fadeTo(500,1);
$("#submitButton").fadeIn();
- // Redraw board on size change.
- $(".boardSize").off("change"); //Prevent extras
- $(".boardSize").on("change", function () {
- drawBoard($("#x_size").val(), $("#y_size").val());
- });
});
+ // Redraw board on size change.
+ $(".boardSize").on("change", function () {
+ drawBoard($("#x_size").val(), $("#y_size").val());
+ });
// Makes board elements draggable.
@@ -513,12 +513,10 @@ function createBoard(boardName) {
.on('selectstart', false)
.css({ top: "", left: "", position: "" }); // Fix the CSS
}, "json");
-
- // Redraw board on size change.
- $(".boardSize").off("change"); //Prevent extras
- $(".boardSize").on("change", function () {
- drawBoard($("#x_size").val(), $("#y_size").val());
- });
+ $("#startMaker").fadeOut();
+ $("#flagContainer").fadeIn();
+ $("#boardMaker").fadeTo(500,1);
+ $("#submitButton").fadeIn();
}
diff --git a/src/RoboRuckus/wwwroot/css/site.css b/src/RoboRuckus/wwwroot/css/site.css
index 414be8a..6b1ae3f 100644
--- a/src/RoboRuckus/wwwroot/css/site.css
+++ b/src/RoboRuckus/wwwroot/css/site.css
@@ -99,6 +99,10 @@
display: none;
}
+.transparent {
+ opacity: 0;
+}
+
.slot ul {
list-style: none;
padding: 0;
From aed845876652b1e83a9fa3ec07a9be4fbc4ce28d Mon Sep 17 00:00:00 2001
From: techlemur <34924313+techlemur@users.noreply.github.com>
Date: Sun, 9 Sep 2018 18:02:09 -0700
Subject: [PATCH 4/4] Fixed right click on boardMaker
---
src/RoboRuckus/wwwroot/Scripts/boardMaker.js | 19 +++++++++++--------
1 file changed, 11 insertions(+), 8 deletions(-)
diff --git a/src/RoboRuckus/wwwroot/Scripts/boardMaker.js b/src/RoboRuckus/wwwroot/Scripts/boardMaker.js
index 1adca76..c7dba68 100644
--- a/src/RoboRuckus/wwwroot/Scripts/boardMaker.js
+++ b/src/RoboRuckus/wwwroot/Scripts/boardMaker.js
@@ -136,13 +136,13 @@ $(function () {
$("#boardMaker").on("click", ".boardSquare .rotateable", function (e) {
console.log(e);
var rotation = 0;
- var current = Number($(this).data("orientation"));
+ 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).data("orientation", 0);
+ $(this).attr("data-orientation", 0);
}
$(this).css({ 'transform': 'rotate(' + rotation + 'deg)' });
});
@@ -151,13 +151,16 @@ $(function () {
$("#boardMaker").on("contextmenu", ".boardSquare .rotateable", function (e) {
console.log(e);
var rotation = 0;
- var current = Number($(this).data("orientation"));
- if (current !== 3) {
+ var current = Number($(this).attr("data-orientation"));
+ if (current !== 1) {
current--;
- rotation = +90 * current;
- $(this).data("orientation", 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)' });
});