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 = "" }) -
- +
+
+

-
-
+ +
+

@@ -105,7 +110,7 @@
@Html.HiddenFor(m => m.cornerData, new { @class = "", @id = "cornerData" })
- +
}
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)' }); });