From 109d33edcac0a8d0732c3b9404d79e4da4f921e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n?= <58742147+dip000@users.noreply.github.com> Date: Sun, 13 Feb 2022 18:33:34 -0600 Subject: [PATCH 01/15] bug fix and multimap logic --- MapBuilderForWeb/BuilderVisuals.js | 6 +- MapBuilderForWeb/MapBuilder.js | 63 +++++++------ MapBuilderForWeb/MapBuilderForWeb.html | 117 +++++++++++++++---------- 3 files changed, 110 insertions(+), 76 deletions(-) diff --git a/MapBuilderForWeb/BuilderVisuals.js b/MapBuilderForWeb/BuilderVisuals.js index e8e37d3..feee945 100644 --- a/MapBuilderForWeb/BuilderVisuals.js +++ b/MapBuilderForWeb/BuilderVisuals.js @@ -24,8 +24,9 @@ if(isClicking){ if(isShapeEditorActive) PlaceDotAtPoint(currentItemPlacingInfo.positionX, currentItemPlacingInfo.positionY); - else - PlaceItemAtCurrentItemInfo(); + else{ + OnGridClickAndDrag(currentItemPlacingInfo.positionX, currentItemPlacingInfo.positionY); + } //console.log("isClicking: " + isClicking + "; isShapeEditorActive:" + isShapeEditorActive); } @@ -120,7 +121,6 @@ if(shape==null) return; for(var i=0; i + @@ -53,6 +54,7 @@ const clearedGridColor = "white"; const itemSelectedColor = "#B9F51B"; const itemDefaultColor = "#1D8742"; + const mapCutColor = "#1D8742"; //List Of Shapes var listOfShapes = [ @@ -98,9 +100,11 @@ //GoToShapesEditor(); } + + function initializeMapEditorGrid(x, y){ //Creates grid - let placingLcation = document.getElementById("GridGraphics"); + let placingLcation = document.getElementById("GridGraphics"); table = generate_table(x, y); table.id = "grid"; table.className = "gridMap"; @@ -110,6 +114,7 @@ //Initializes grid logic occupancyMap = Array(x).fill(null).map(()=>Array(y).fill(false)); + cutsMap = Array(x).fill(null).map(()=>Array(y).fill(false)); //Add functionality to the grid var tablerowscount=table.getElementsByTagName("tbody")[0].getElementsByTagName("tr"); @@ -245,8 +250,9 @@ occupancyMap = Array(mapLengthX).fill(null).map(()=>Array(mapLengthY).fill(false)); - //console.log("DELETED MAP INFO:"); - //console.log(formatedCoordenates); + //Reset cuts in map. See MultimapMechanics.js for more info + rows(nrows); + cols(ncols); } function HideMapEditor(){ @@ -254,41 +260,62 @@ let lateralButtons = document.getElementsByClassName("control")[0]; lateralButtons.style.display = "none"; } + + + function OnGridClickAndDrag(x, y){ + UpdateItemPlacingInfo(x, y); + state = GetOccupancyOfPlacingInfo(); - + if (state == FREE){ + PlaceCurrentItemInfo(); + } + } + function OnGridClick(x, y){ + //OCCUPIED happens when you click directly over a shape in the map + //OBSTRUCTED happens when you try to place a shape and indiretctly is being blocked by another + //FREE is space availabe + //Resets Ctrl+Z actions chainedUndoneIndex = 0; - //Creates an object {[x],[y]} where x and y are integrers - var clickedCoordenate = new Vector2Array(x, y); + UpdateItemPlacingInfo(x, y); + state = GetOccupancyOfPlacingInfo(); - if ( GetOccupancyOfCoordenates(clickedCoordenate) == OCCUPIED){ - RemoveItemAtCoordenate(clickedCoordenate); + if ( state == OUT_OF_BOUNDS){ + //console.log("OUT_OF_BOUNDS"); + return; + } + else if (state == OCCUPIED){ + //console.log("OCCUPIED"); + RemoveCurrentItemInfo(); } - else{ - //console.log("Clicked on empty space"); - PlaceItemAtCurrentItemInfo(); + else if (state == OBSTRUCTED){ + //console.log("OBSTRUCTED"); + } + else if (state == MAP_CUT){ + //console.log("MAP_CUT"); + } + else if (state == FREE){ + //console.log("FREE"); + PlaceCurrentItemInfo(); } } - function RemoveItemAtCoordenate(clickedCoordenate){ - let itemPlacingInfo = FindHistoryInfoAtCoordenates(clickedCoordenate); - //console.log("Clicked on an item. Placing info:"); - //console.log(itemPlacingInfo); - DeleteFromHistoryOfPlacements(itemPlacingInfo); - printVisualsOfCoordenates(itemPlacingInfo.coordenates, clearedGridColor); - UpdateOccupancy(itemPlacingInfo.coordenates, FREE); - } - - //Sooo. i know is confusing but here goes: - // 1. Average volume of an object is its center position. Not the bounding box center - // 2. Here changes the index-position for the center-volume-position of the object so it visualy rotates from its center - // 3. The (rows, columns) system is different from the (x, y) system by 90 degrees or (-y, x) - // 4. We need to register the index position as it was taken by a (x,y) system, so it changes again the index-position-row-col to index-position-xy - // 5. Summary; internally we're using (row,col) as original detection of coordenates. Volume-center to place the visuals. And standar (x,y) as output - function PlaceItemAtCurrentItemInfo(){ + function UpdateItemPlacingInfo(x, y){ + //Sooo. i know is confusing but here goes: + // 1. Average volume of an object is its center position. Not the bounding box center + // 2. Here changes the index-position for the center-volume-position of the object so it visualy rotates from its center + // 3. The (rows, columns) system is different from the (x, y) system by 90 degrees or (-y, x) + // 4. We need to register the index position as it was taken by a (x,y) system, so it changes again the index-position-row-col to index-position-xy + // 5. Summary; internally we're using (row,col) as original detection of coordenates. Volume-center to place the visuals. And standar (x,y) as output + + //Creates an object {[x],[y]} where x and y are integrers + let clickedCoordenate = new Vector2Array(x, y); + currentItemPlacingInfo.positionX = x; + currentItemPlacingInfo.positionY = y; + //Finds info let shape = listOfShapes[currentItemPlacingInfo.itemType]; let shapeRotated = RotateCoordenatesByAngle(shape, currentItemPlacingInfo.rotation); @@ -300,28 +327,26 @@ //make info let coordenates = GlobalizeCoordenates(shapeRotated, volumeIndex.x, volumeIndex.y); currentItemPlacingInfo.coordenates = coordenates; - + } + + function RemoveCurrentItemInfo(){ + let infoToRemove = FindHistoryInfoAtCurrentPlacement(); + DeleteFromHistoryOfPlacements(infoToRemove); + printVisualsOfCoordenates(infoToRemove.coordenates, clearedGridColor); + UpdateOccupancy(infoToRemove.coordenates, FREE); + printHoverVisuals(); + } + + function PlaceCurrentItemInfo(){ //Standar (x,y) system for ouputting - let minValues = GetMinValuesOfCoordenates(coordenates) + let minValues = GetMinValuesOfCoordenates(currentItemPlacingInfo.coordenates) currentItemPlacingInfo.positionX = minValues.x; currentItemPlacingInfo.positionY = minValues.y; - //console.log(averageVolume); - //console.log(roundedAverageVolume); - //console.log(volumeIndex); - - if(GetOccupancyOfCoordenates(coordenates) == FREE){ - //console.log("CorrectPlacement"); - printVisualsOfCoordenates(coordenates, listOfShapeColors[currentItemPlacingInfo.itemType]); - UpdateOccupancy(coordenates, OCCUPIED); - RegisterHistoryOfPlacements(currentItemPlacingInfo); - } - else{ - //console.log("Incorrect Placement"); - } - - //console.log("END OF PLACEMENT"); - //console.log(coordenates); + printVisualsOfCoordenates(currentItemPlacingInfo.coordenates, listOfShapeColors[currentItemPlacingInfo.itemType]); + UpdateOccupancy(currentItemPlacingInfo.coordenates, OCCUPIED); + RegisterHistoryOfPlacements(currentItemPlacingInfo); + } var lastShapeElement; @@ -330,8 +355,6 @@ if(itemIndex > listOfShapes.length-1) itemIndex = listOfShapes.length-1; - console.log("new itemIndex:" + itemIndex); - //console.log(shapeElements); currentItemPlacingInfo.itemType = itemIndex; itemType.innerHTML = currentItemPlacingInfo.itemType; From 5ce568410c3395667b5d1ac41dfb084044d87fb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n?= <58742147+dip000@users.noreply.github.com> Date: Sun, 13 Feb 2022 18:35:02 -0600 Subject: [PATCH 02/15] multi maps with cut system --- MapBuilderForWeb/MultimapMechanics.js | 104 ++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 MapBuilderForWeb/MultimapMechanics.js diff --git a/MapBuilderForWeb/MultimapMechanics.js b/MapBuilderForWeb/MultimapMechanics.js new file mode 100644 index 0000000..6cac94d --- /dev/null +++ b/MapBuilderForWeb/MultimapMechanics.js @@ -0,0 +1,104 @@ + + var cutsMap; + var nrows=1, ncols=1; + + function map(x, y){ + if(x == 0 || y == 0) + return; + + if( !AskForReset() ) return; + + initializeMapEditorGrid(x, y); + } + + function rows(numberOfRows){ + + + UpdateCutsMap(TARGET_ROWS, nrows, JOIN); + UpdateCutsMap(TARGET_ROWS, numberOfRows, CUT); + + UpdateCutsMap(TARGET_COLS, ncols, CUT); + nrows = numberOfRows; + } + + function cols(numberOfCols){ + + UpdateCutsMap(TARGET_COLS, ncols, JOIN); + UpdateCutsMap(TARGET_COLS, numberOfCols, CUT); + + UpdateCutsMap(TARGET_ROWS, nrows, CUT); + ncols = numberOfCols; + } + + + const TARGET_ROWS = true; + const TARGET_COLS = false; + const CUT = true; + const JOIN = false; + + function UpdateCutsMap(target, numberOfSuch, state){ + let x, y; + let mapLengthB, mapLengthA; + + if(target == TARGET_ROWS){ + mapLengthA = occupancyMap.length; + mapLengthB = occupancyMap[0].length; + } + else{ + mapLengthB = occupancyMap.length; + mapLengthA = occupancyMap[0].length; + } + + let increment = mapLengthA / numberOfSuch; + let incrementRounded = Math.round( increment ); + + if(numberOfSuch <= 0){ + console.log("Cannot make that few"); + return; + } + if(numberOfSuch > Math.round( mapLengthA/2 )){ + console.log("Cannot make that many"); + return; + } + + + + for(let i=0; i Date: Tue, 15 Feb 2022 09:50:40 -0600 Subject: [PATCH 03/15] Update MapBuilder.js --- MapBuilderForWeb/MapBuilder.js | 55 ++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/MapBuilderForWeb/MapBuilder.js b/MapBuilderForWeb/MapBuilder.js index 3dd982b..48c9e6f 100644 --- a/MapBuilderForWeb/MapBuilder.js +++ b/MapBuilderForWeb/MapBuilder.js @@ -111,6 +111,28 @@ return null; } + + function FindHistoryInfoAtPoint(point){ + for(var i=0; i Date: Tue, 15 Feb 2022 18:30:31 -0600 Subject: [PATCH 04/15] Map cuts badly working --- MapBuilderForWeb/BuilderCalculations.js | 24 +++-- MapBuilderForWeb/MapBuilder.js | 51 +++-------- MapBuilderForWeb/MapBuilderForWeb.html | 7 +- MapBuilderForWeb/MultimapMechanics.js | 112 +++++++++++++++++++++--- MapBuilderForWeb/ShapeBuilder.js | 6 +- 5 files changed, 141 insertions(+), 59 deletions(-) diff --git a/MapBuilderForWeb/BuilderCalculations.js b/MapBuilderForWeb/BuilderCalculations.js index 2d00998..a1994aa 100644 --- a/MapBuilderForWeb/BuilderCalculations.js +++ b/MapBuilderForWeb/BuilderCalculations.js @@ -61,15 +61,15 @@ } function GlobalizeCoordenates(shape, x, y){ - let coordenates = new Vector2Array(shape); - - for(let i=0; i maxRows){ + console.log("Applied maximum ("+maxRows+") instead"); + numberOfRows = maxRows; + } UpdateCutsMap(TARGET_ROWS, nrows, JOIN); UpdateCutsMap(TARGET_ROWS, numberOfRows, CUT); @@ -23,14 +32,23 @@ function cols(numberOfCols){ + let maxCols = Math.round( occupancyMap[0].length/2 ); + if(numberOfCols <= 0){ + console.log("Applied minimum (1) instead"); + numberOfCols = 1; + } + if(numberOfCols > maxCols){ + console.log("Applied maximum ("+maxCols+") instead"); + numberOfCols = maxCols; + } + UpdateCutsMap(TARGET_COLS, ncols, JOIN); UpdateCutsMap(TARGET_COLS, numberOfCols, CUT); UpdateCutsMap(TARGET_ROWS, nrows, CUT); ncols = numberOfCols; } - - + const TARGET_ROWS = true; const TARGET_COLS = false; const CUT = true; @@ -48,21 +66,10 @@ mapLengthB = occupancyMap.length; mapLengthA = occupancyMap[0].length; } - + let increment = mapLengthA / numberOfSuch; let incrementRounded = Math.round( increment ); - if(numberOfSuch <= 0){ - console.log("Cannot make that few"); - return; - } - if(numberOfSuch > Math.round( mapLengthA/2 )){ - console.log("Cannot make that many"); - return; - } - - - for(let i=0; iislandSizeRows*r && rowislandSizeCols*c && col shapeIndex){ + historyOfPlacements[i].itemType--; + } } } From cb0d261441db4f5385ceecc690816a83a2908dc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n?= <58742147+dip000@users.noreply.github.com> Date: Wed, 16 Feb 2022 12:59:14 -0600 Subject: [PATCH 05/15] some fixes --- MapBuilderForWeb/MultimapMechanics.js | 68 ++++++++++++++++----------- 1 file changed, 41 insertions(+), 27 deletions(-) diff --git a/MapBuilderForWeb/MultimapMechanics.js b/MapBuilderForWeb/MultimapMechanics.js index 016bdcc..71e130a 100644 --- a/MapBuilderForWeb/MultimapMechanics.js +++ b/MapBuilderForWeb/MultimapMechanics.js @@ -113,8 +113,15 @@ const mapLengthRows = occupancyMap.length; const mapLengthCols = occupancyMap[0].length; - const islandSizeRows = Math.round(mapLengthRows/nrows) - (nrows-1) + 1; - const islandSizeCols = Math.round(mapLengthCols/ncols) - (ncols-1) + 1; + //Not considenring the space occupied for map cuts + const availableRows = mapLengthRows-(nrows-1); + const availableCols = mapLengthCols-(ncols-1); + + //Number of rows, cols of each island and its residue due map size + const islandSizeRows = Math.floor( availableRows/nrows ); + const islandSizeCols = Math.floor( availableCols/ncols ); + const residueRows = availableRows % nrows; + const residueCols = availableCols % ncols; let outputData = new Array(); @@ -125,25 +132,32 @@ continue; } - let row = historyOfPlacements[i].positionX; - let col = historyOfPlacements[i].positionY; + //TODO: positionsX and positionsY are not always a part of the item. Use coordenates.x[0] instead + let row = historyOfPlacements[i].coordenates.x[0]; + let col = historyOfPlacements[i].coordenates.y[0]; for(var r=0; rislandSizeRows*r && rowislandSizeCols*c && col Date: Wed, 16 Feb 2022 20:05:27 -0600 Subject: [PATCH 06/15] Map cutting finished and style changed Cuts with keyboard arrow keys Not tested on unity --- MapBuilderForWeb/BuilderCalculations.js | 2 +- MapBuilderForWeb/MapBuilder.js | 35 +++++++- MapBuilderForWeb/MapBuilderForWeb.html | 26 +++--- MapBuilderForWeb/MapBuilderStyles.css | 71 ++++++++++------- MapBuilderForWeb/MultimapMechanics.js | 101 +++++++++++++++++------- MapBuilderForWeb/ShapeBuilder.js | 3 +- 6 files changed, 168 insertions(+), 70 deletions(-) diff --git a/MapBuilderForWeb/BuilderCalculations.js b/MapBuilderForWeb/BuilderCalculations.js index a1994aa..1813dac 100644 --- a/MapBuilderForWeb/BuilderCalculations.js +++ b/MapBuilderForWeb/BuilderCalculations.js @@ -176,7 +176,7 @@ } function randomColor(){ - return 'rgb('+random(200)+','+(random(155)+100)+','+random(200)+')'; + return 'rgb('+(random(200)+55)+','+(random(100)+50)+','+(random(100)+50)+')'; } function random(number){ return Math.floor(Math.random()*number);; diff --git a/MapBuilderForWeb/MapBuilder.js b/MapBuilderForWeb/MapBuilder.js index a76d0d0..b8e736d 100644 --- a/MapBuilderForWeb/MapBuilder.js +++ b/MapBuilderForWeb/MapBuilder.js @@ -213,7 +213,7 @@ //UNDO MECHANICS //////////////////////////////////////////////////////// - document.onkeyup = function(e) { + /*document.onkeyup = function(e) { //Ctrl+Z is Undo if( e.ctrlKey && e.which == 90 && !e.shiftKey){ UndoAction(-1); @@ -254,9 +254,40 @@ printVisualsOfCoordenates(itemPlacingInfo.coordenates, itemPlacedColor); UpdateOccupancy(itemPlacingInfo.coordenates, OCCUPIED); } - } + }*/ //////////////////////////////////////////////////////////////////////////////////// +const keyLog = {} +const handleKeyboard = ({ type, key, repeat, metaKey }) => { + if (repeat) return + + if (type === 'keydown') { + keyLog[key] = true + + + if (/*keyLog.c &&*/ key === "ArrowLeft") + cols(ncols-1); + if (/*keyLog.c &&*/ key === "ArrowRight") + cols(ncols+1); + if (/*keyLog.r &&*/ key === "ArrowDown") + rows(nrows-1); + if (/*keyLog.r &&*/ key === "ArrowUp") + rows(nrows+1); + } + + // Remove the key from the log on keyup. + if (type === 'keyup') delete keyLog[key]; +} + + +function initailizeKeyCombos(){ + const events = ['keydown', 'keyup'] + events.forEach(name => document.addEventListener(name, handleKeyboard)) + + return () => + events.forEach(name => document.removeEventListener(name, handleKeyboard)) +} + // TYPES AND CONSTRUCTORS ////////////////////////////////////////////////////////// function Vector2Array(x, y) { diff --git a/MapBuilderForWeb/MapBuilderForWeb.html b/MapBuilderForWeb/MapBuilderForWeb.html index a904ea6..e3fcca3 100644 --- a/MapBuilderForWeb/MapBuilderForWeb.html +++ b/MapBuilderForWeb/MapBuilderForWeb.html @@ -48,13 +48,13 @@ var shapeElements = []; //Colors - const itemShowcaseColor = "#1D8742"; - const itemShadowColor = "#1D874288"; - const itemPlacedColor = "#1D8742"; + const itemShowcaseColor = "#569CD6"; + const itemShadowColor = "#9CDCFE"; + const itemPlacedColor = "#569CD6"; const clearedGridColor = "white"; - const itemSelectedColor = "#B9F51B"; - const itemDefaultColor = "#1D8742"; - const mapCutColor = "#1D8742"; + const itemSelectedColor = "#D69D85"; + const itemDefaultColor = "#1E1E1E"; + const mapCutColor = "#1E1E1E"; //List Of Shapes var listOfShapes = [ @@ -82,6 +82,7 @@ //Both share same stuff initializeMapEditorStatistics(); initializeMapEditorShapes(); + initailizeKeyCombos(); //Initialize Map editor initializeMapEditorGrid(20, 40); @@ -100,8 +101,8 @@ //GoToShapesEditor(); //FOR DEBUGGING ONLY - rows(3); - cols(3); + //rows(3); + //cols(3); } @@ -241,7 +242,11 @@ ///////////////////// MAIN //////////////////////////////////////////////////// function ResetMap(){ - + ResetOccupancyMap(); + ResetCutsMap(); + } + + function ResetOccupancyMap(){ let formatedCoordenates = OccupancyMapToCoordenates(occupancyMap); printVisualsOfCoordenates(formatedCoordenates, clearedGridColor); @@ -255,6 +260,9 @@ occupancyMap = Array(mapLengthX).fill(null).map(()=>Array(mapLengthY).fill(false)); //Reset cuts in map. See MultimapMechanics.js for more info + } + + function ResetCutsMap(){ rows(nrows); cols(ncols); } diff --git a/MapBuilderForWeb/MapBuilderStyles.css b/MapBuilderForWeb/MapBuilderStyles.css index 3427b16..4d789f8 100644 --- a/MapBuilderForWeb/MapBuilderStyles.css +++ b/MapBuilderForWeb/MapBuilderStyles.css @@ -1,6 +1,6 @@ :root{ - /* GREEN TO YELLOW PALLETE + /* GREEN TO YELLOW PALETTE --darker: #00703E; --dark: #1D8742; --normal-dark: #389D43; @@ -9,42 +9,56 @@ --light: #95E02F; --lighter: #B9F51B; */ + + /* VISUAL STUDIO PALETTE + --blue: #569CD6; + --light-blue: #9CDCFE; + --green: #57A64A; + --light-green: #4EC9B0; + --yellow: #DCDCAA; + --pink: #D8A0D1; + --orange: #D69D85; + */ - --background: #1D8742; - --table-shadow: #00703E; - --item-hover: #55B441; - --item-shadow: #00703E; - --item-click: #B9F51B; - --lateral-menu-background: #55B441; - --side-button: #00703E; - --side-button-hover: #00501E; - --download-button: #95E02F; - --download-button-hover: #B9F51B; + --background: #1E1E1E; + --table-shadow: #111111; + --item-hover: #D69D85; + --item-shadow: #D69D85; + --item-click: #D69D85; + --lateral-menu-background: #353535; + --side-button: #D8A0D1; + --side-button-hover: #D69D85; + --download-button: #D8A0D1; + --download-button-hover: #D69D85; + --white:#ffffff; + --light-gray:#DCDCDC; + --delete-icon: #DCDCAA; } tr, td { padding: 0.6rem; - border: 1px dashed lightGray; - background-color:white; + border: 1px dashed var(--light-gray); + background-color: var(--white); vertical-align: top; cursor: pointer; } table { border: 0px; + border-radius: 3px; border-collapse: collapse; margin:2px; box-shadow: 0px 0px 15px var(--table-shadow); font-size: 1rem; font-weight: bold; - color: white; + color: var(--white); } .layout{ background-color: var(--background); padding: 5px; - border: 1px dashed lightGray; + border: 1px dashed var(--background); } body { @@ -56,14 +70,13 @@ .items .item{ display: inline-block; padding: 5px; + margin-right: 20px; cursor: pointer; box-shadow: none; - border: 2px dashed #00000000; border-radius: 3px; transition: 0.1s ease-in-out; } .item:hover { - border: 2px dashed var(--item-click); box-shadow: 0px 0px 15px var(--item-click); transform: scale(1.1); transition: 0.1s ease-in-out; @@ -80,15 +93,15 @@ #lateralMenuGraphics { background-color: var(--lateral-menu-background); box-shadow: 0px 0px 5px var(--lateral-menu-background); - min-height: 410px; + min-height: 423px; cursor: default; width: 290px; } #itemsArea { - height: 180px; + height: 190px; cursor: default; overflow-x: auto; - max-width: 1000px; + max-width: 1236px; display: flex; align-items: center; @@ -106,9 +119,8 @@ .addShapeButton{ - background-color: white; + background-color: var(--white); border-radius: 50px; - border: 2px dashed var(--background); text-align: center; padding-bottom: 9; width: 50; @@ -119,8 +131,7 @@ } .addShapeButton:hover{ background-color: var(--item-hover); - color: white; - border: 2px dashed var(--item-click); + color: var(--white); box-shadow: 0px 0px 15px var(--item-click); transform: scale(1.1); transition: 0.1s ease-in-out; @@ -141,11 +152,11 @@ width: 270px; height: 90px; background-color: var(--side-button); - border: 2px dashed lightGray; + /*border: 5px dashed var(--lateral-menu-background);*/ font-size: 2rem; font-weight: bold; - color: white; + color: var(--white); cursor: pointer; } @@ -162,7 +173,7 @@ } .inputName { - border: 2px dashed lightGray; + border: 2px dashed var(--light-gray); padding: 19px; margin-top: 10px; transition: 0.1s ease-out; @@ -172,7 +183,7 @@ } .inputName:hover { background-color: var(--item-hover); - color: white; + color: var(--white); border: 2px dashed var(--item-click); box-shadow: 0px 0px 15px var(--item-click); transform: scale(1.1); @@ -181,11 +192,11 @@ .deleteIcon{ float: right; - color: white; + color: var(--white); } .deleteIcon:hover{ float: right; - color: #FF5555AA; + color: var(--delete-icon); } /*style="transform: rotate(90deg)"*/ diff --git a/MapBuilderForWeb/MultimapMechanics.js b/MapBuilderForWeb/MultimapMechanics.js index 71e130a..f9c2f61 100644 --- a/MapBuilderForWeb/MultimapMechanics.js +++ b/MapBuilderForWeb/MultimapMechanics.js @@ -3,16 +3,38 @@ var nrows=1, ncols=1; function map(x, y){ - if(x == 0 || y == 0) - return; + if(x <= 0 || y <= 0) return; if( !AskForReset() ) return; - + + ResetOccupancyMap(); + + if(table != null){ + document.getElementById("GridGraphics").removeChild(table); + table = null; + } initializeMapEditorGrid(x, y); + ResetCutsMap(); } + + function AskForReset(){ + let coordenates = OccupancyMapToCoordenates(occupancyMap); + if( (coordenates.x.length != 0) && (confirm("Requires a reset. Continue?") == false) ) + return false; + return true; + } + function rows(numberOfRows){ - + if( !AskForReset() ) return; + + ResetOccupancyMap(); + if(table != null){ + document.getElementById("GridGraphics").removeChild(table); + table = null; + } + initializeMapEditorGrid(occupancyMap.length, occupancyMap[0].length); + let maxRows = Math.round( occupancyMap.length/2 ); if(numberOfRows <= 0){ console.log("Applied minimum (1) instead"); @@ -32,6 +54,14 @@ function cols(numberOfCols){ + if( !AskForReset() ) return; + ResetOccupancyMap(); + if(table != null){ + document.getElementById("GridGraphics").removeChild(table); + table = null; + } + initializeMapEditorGrid(occupancyMap.length, occupancyMap[0].length); + let maxCols = Math.round( occupancyMap[0].length/2 ); if(numberOfCols <= 0){ console.log("Applied minimum (1) instead"); @@ -95,17 +125,7 @@ } } - function AskForReset(){ - let coordenates = OccupancyMapToCoordenates(occupancyMap); - if( (coordenates.x.length != 0) && (confirm("Requires a reset. Continue?") == false) ) - return false; - - if(table != null) - document.getElementById("GridGraphics").removeChild(table); - ResetMap(); - return true; - } function FormatOutput(){ const numberOfInstructions = historyOfPlacements.length; @@ -132,7 +152,7 @@ continue; } - //TODO: positionsX and positionsY are not always a part of the item. Use coordenates.x[0] instead + //PositionsX and positionsY are not always a part of the item. let row = historyOfPlacements[i].coordenates.x[0]; let col = historyOfPlacements[i].coordenates.y[0]; @@ -146,9 +166,28 @@ if(outputData[r][c] == null){ outputData[r][c] = new OutputData(); } + + //console.log("r,c from: "+(islandSizeRows+1)*r + "," + (islandSizeCols+1)*c); + //console.log("r,c to: " + ((islandSizeRows+1)*(r+1)-1) + "," + ((islandSizeCols+1)*(c+1)-1) ); + //console.log("--------------------------------------------"); + //To find previous and next rows of current point + let prevRow = (islandSizeRows+1)*r; + let prevCol = (islandSizeCols+1)*c; + + let nextRow = ((islandSizeRows+1)*(r+1)-1); + let nextCol = ((islandSizeCols+1)*(c+1)-1); + + //To find point even if the map was not sliced evenly + if(c >= ncols-1){ + nextCol += residueCols; + } + if(r >= nrows-1){ + nextRow += residueRows; + } + //Localizating current item by looking at previous and next rows and cols - if( row>islandSizeRows*r && rowislandSizeCols*c && col=prevRow && row<=nextRow && col>=prevCol && col<=nextCol ){ console.log("Found type: " + listOfShapeNames[ historyOfPlacements[i].itemType ] + " in ("+ r +","+c+") island"); //add info on its respective map @@ -157,7 +196,7 @@ outputData[r][c].positionsX.push(historyOfPlacements[i].positionX); outputData[r][c].positionsY.push(historyOfPlacements[i].positionY); - //redoundant here but whatever + //NOTE: Redoundant here outputData[r][c].mapSizeX = islandSizeRows; outputData[r][c].mapSizeY = islandSizeCols; } @@ -165,38 +204,46 @@ } } - - //Stringify the output - console.log("residueRows: " +residueRows + "; residueCols: " +residueCols); + //return outputData; + + //Stringify output of each map let outString = ""; - for(var r=0; r Date: Thu, 17 Feb 2022 12:19:54 -0600 Subject: [PATCH 07/15] development halted New branch opened for rework --- MapBuilderForWeb/MapBuilder.js | 123 ++++++++++++++++++++++--- MapBuilderForWeb/MapBuilderForWeb.html | 8 +- MapBuilderForWeb/MultimapMechanics.js | 42 ++++++--- 3 files changed, 142 insertions(+), 31 deletions(-) diff --git a/MapBuilderForWeb/MapBuilder.js b/MapBuilderForWeb/MapBuilder.js index b8e736d..27a8677 100644 --- a/MapBuilderForWeb/MapBuilder.js +++ b/MapBuilderForWeb/MapBuilder.js @@ -259,21 +259,34 @@ const keyLog = {} const handleKeyboard = ({ type, key, repeat, metaKey }) => { - if (repeat) return - - if (type === 'keydown') { - keyLog[key] = true - - - if (/*keyLog.c &&*/ key === "ArrowLeft") - cols(ncols-1); - if (/*keyLog.c &&*/ key === "ArrowRight") - cols(ncols+1); - if (/*keyLog.r &&*/ key === "ArrowDown") - rows(nrows-1); - if (/*keyLog.r &&*/ key === "ArrowUp") - rows(nrows+1); - } + if (repeat) return + + if (type === 'keydown') { + keyLog[key] = true + + //Create cuts on rows and cols with Ctrl + arrow keys + if(keyLog.Control){ + if (key === "ArrowLeft") + cols(ncols-1); + if (key === "ArrowRight") + cols(ncols+1); + if (key === "ArrowDown") + rows(nrows-1); + if (key === "ArrowUp") + rows(nrows+1); + } + else{ + //Rebuild map rows and cols with arrow keys + if (key === "ArrowLeft") + map( occupancyMap.length, occupancyMap[0].length-1 ); + if (key === "ArrowRight") + map( occupancyMap.length, occupancyMap[0].length+1 ); + if (key === "ArrowDown") + map( occupancyMap.length+1, occupancyMap[0].length ); + if (key === "ArrowUp") + map( occupancyMap.length-1, occupancyMap[0].length ); + } +} // Remove the key from the log on keyup. if (type === 'keyup') delete keyLog[key]; @@ -431,4 +444,84 @@ function OutputData(){ } +//////////////////////////////////////////////////////////////////////////////////// + +/////////////////////////// UPLOAD ///////////////////////////////////////////////// + + function upload(uploadString){ + let mapsAndShapesString = uploadString.split("$"); + let mapsString = mapsAndShapesString[0].split("&"); + let shapesString = mapsAndShapesString[1].split("&"); + + uploadShapes(shapesString); + //uploadMaps(mapsString); + + /*console.log(mapsString) + console.log(shapesString) + + console.log(maps) + console.log(shapes)*/ + } + + function uploadShapes(shapesString){ + listOfShapes = []; + let shapes = []; + for(let i=0; i= ncols-1){ + mapSizeX += residueCols; + } + if(r >= nrows-1){ + mapSizeY += residueRows; + } + + //Apply map size + outputData[r][c].mapSizeX = mapSizeX; + outputData[r][c].mapSizeY = mapSizeY; + + //Map name is its position + outputData[r][c].mapName = "Level " + r + ", " + c; + //string output and add the separator character outString += JSON.stringify( outputData[r][c] ); outString += "&"; - - console.log("----------------------------"); } } From dad703d9878c624472f6cf71c3b192015af8f9b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n?= <58742147+dip000@users.noreply.github.com> Date: Thu, 17 Feb 2022 15:47:04 -0600 Subject: [PATCH 08/15] Multi map reworked Multi maps cannot be outputted yet --- MapBuilderForWeb/BuilderVisuals.js | 33 ++++-- MapBuilderForWeb/MapBuilder.js | 34 +++--- MapBuilderForWeb/MapBuilderForWeb.html | 155 +++++++++++++++---------- MapBuilderForWeb/MapBuilderStyles.css | 49 +++++--- MapBuilderForWeb/MultimapMechanics.js | 5 + MapBuilderForWeb/ShapeBuilder.js | 9 +- 6 files changed, 176 insertions(+), 109 deletions(-) diff --git a/MapBuilderForWeb/BuilderVisuals.js b/MapBuilderForWeb/BuilderVisuals.js index feee945..05b5539 100644 --- a/MapBuilderForWeb/BuilderVisuals.js +++ b/MapBuilderForWeb/BuilderVisuals.js @@ -6,16 +6,17 @@ let value = "646970303030"; var isClicking = false; - function AddHoverListenerToElements(elements){ + function AddHoverListenerToElements(elements, callback){ for(let i=0; i in the and appends into tbl.appendChild(tblBody); body.appendChild(tbl); - tbl.setAttribute("border", "2"); + //tbl.setAttribute("border", "2"); return tbl; } diff --git a/MapBuilderForWeb/MapBuilder.js b/MapBuilderForWeb/MapBuilder.js index 27a8677..a0303da 100644 --- a/MapBuilderForWeb/MapBuilder.js +++ b/MapBuilderForWeb/MapBuilder.js @@ -11,17 +11,19 @@ } - var occupancyMap; const OCCUPIED = true; const FREE = false; const OUT_OF_BOUNDS = 2; const OBSTRUCTED = 3; const MAP_CUT = 4; + const NULL = 5; function GetOccupancyOfPlacingInfo(){ - //If at least one coordenate is occupied, then return occupied - let mapLengthX = occupancyMap.length; - let mapLengthY = occupancyMap[0].length; + + //let mapLengthX = occupancyMap.length; + //let mapLengthY = occupancyMap[0].length; + let occupancyMap = occupancyMaps[currentItemPlacingInfo.level.x][currentItemPlacingInfo.level.y]; + let x = currentItemPlacingInfo.coordenates.x; let y = currentItemPlacingInfo.coordenates.y; @@ -29,7 +31,7 @@ let state = ( occupancyMap[ currentItemPlacingInfo.positionX ][ currentItemPlacingInfo.positionY ] ); if( state == null){ - return MAP_CUT; + return NULL; } if( state == OCCUPIED){ return OCCUPIED; @@ -54,6 +56,7 @@ function UpdateOccupancy(coordenates, state){ + let occupancyMap = occupancyMaps[currentItemPlacingInfo.level.x][currentItemPlacingInfo.level.y]; for(var i=0; i -

Item Type: 0
Rotation: 0
Coordenate: 0 , 0
+

Item Type: 0
Level: 0,0
Rotation: 0
Coordenate: 0 , 0