From 96d06602e905963272722e707c420a3ab9fe0e33 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 20:05:27 -0600 Subject: [PATCH] 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