refactor a bunch of things and adds isometric feature

victorqribeiro · Oct 14, 2020 · 9b2f42f · 9b2f42f
1 parent 5a21d81
commit 9b2f42f
Show file tree

Hide file tree

Showing 5 changed files with 312 additions and 152 deletions.
diff --git a/css/main.css b/css/main.css
@@ -12,39 +12,60 @@ html, body {
   font-family: Sans Serif;
 }
 
+canvas {
+    display: block;
+}
+
 #desktop {
 	width: 100%;
 	height: 100%;
 	display: flex;
-	flex-wrap: wrap;
+	flex-direction: column;
 }
 
+
 #menubar {
-	width: 100%;
-	height: 3%;
-	display: block;
-	background-color: #777;
+    flex-basis: 1.1em;
+    flex-grow: 0;
+    background-color: #777;
+}
+
+#middle {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    overflow: auto;
+}
+
+#statusbar {
+    flex-basis: 1.1em;
+    flex-grow: 0;
+    background-color: #777;
 }
 
 #canvasarea {
-	width: 70%;
-	height: 94%;
-	display: block;
-	overflow: auto;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: auto;
+    overflow: auto;
+    resize: horizontal;
 }
 
 #toolbar {
-	width: 30%;
-	height: 94%;
-	display: block;
-	overflow: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    overflow: auto;
 }
 
-#statusbar {
-	width: 100%;
-	height: 3%;
-	display: block;
-	background-color: #777;
+.tool {
+	font-family: 'Font Awesome';
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.5em;
+	width: 32px;
+	height: 32px;
 }
 
 .menu {
@@ -101,13 +122,32 @@ html, body {
 	justify-content: space-around;
 }
 
+.row > label {
+    min-width: 10em;
+}
+
+.row > input {
+    min-width: 15em;
+    box-sizing: border-box;
+}
+
+.row > input[type="file"] {
+    max-width: 15em;
+}
+
+#tools {
+    display: flex;
+}
+
 #tileIcons {
 	display: flex;
 	flex-wrap: wrap;
 }
 
 .tileIcon {
 	display: block;
+	border: solid 1px black;
+	box-sizing: border-box;
 }
 
 .tile {
@@ -129,19 +169,3 @@ html, body {
 	display: block;
 	background-color: gray;
 }
-
-#eraser {
-	display: inline-block;
-	width: 32px;
-	height: 32px;
-	background-color: yellow;
-	margin: 2px;
-}
-
-#bucket {
-	display: block;
-	width: 32px;
-	height: 32px;
-	background-color: green;
-	margin: 2px;
-}
diff --git a/index.html b/index.html
@@ -10,14 +10,15 @@
 <meta property="og:description" content="Website pessoal" />
 <meta property="og:image" content="http://www.victorribeiro.com/tileEditor/screenshot.jpg" />
 <title> Victor Ribeiro </title>
+<link rel="preload" href="css/solid.min.css" as="style">
 <link rel="icon" type="image/x-icon" href="favicon.png" />
 <link rel="icon" type="image/png" href="favicon.png" />
+<link rel="stylesheet" type="text/css" href="css/solid.min.css" />
 <link rel="stylesheet" type="text/css" href="css/main.css" />
 </head>
 <body>
 
 <div id="desktop">
-
 	<div id="menubar">
 		<div class="menu">
 			<div class="title">Map</div>
@@ -30,16 +31,33 @@
 				<li>Shrink</li>
 			</ul>
 		</div>
-		<div class="menu"><div class="title">Texture</div><ul class="menu_content"><li>Load</li></div>
-		<div class="menu"><div class="title">Brushes</div><ul class="menu_content"><li>Custom</li><li>Random</li></div>
+		<div class="menu">
+		    <div class="title">Texture</div>
+		    <ul class="menu_content">
+		        <li>Load</li>
+		    </ul>
+		</div>
+		<div class="menu">
+		    <div class="title">Brushes</div>
+		    <ul class="menu_content">
+		        <li>Custom</li>
+		        <li>Random</li>
+		    </ul>
+        </div>
 	</div>
 
-	<div id="canvasarea"></div>
-	<div id="toolbar"></div>
-	<div id="statusbar"></div>
+	<div id="middle">
+	    <div id="canvasarea"></div>
+	    <div id="toolbar"></div>
+    </div>
+
+	<div id="statusbar">status</div>
 </div>
+
+<script src="js/Texture.class.js"></script>
 <script src="js/Map.class.js"></script>
 <script src="js/Menu.class.js"></script>
 <script src="js/main.js"></script>
+
 </body>
 </html>
diff --git a/js/Map.class.js b/js/Map.class.js
@@ -1,26 +1,88 @@
 class Map {
 
-	constructor(width = 0, height = 0, tileSize = 0, border = 0, tileSizeDraw = 0, nLayers = 1){
-		this.tileSize = tileSize
-		this.border = border
-		this.tileSizeDraw = tileSizeDraw
+	constructor(width = 0, height = 0, gridWidth = 0, gridHeight = 0, nLayers = 1, isometric = 0){
+		this.gridWidth = gridWidth
+		this.gridHeight = gridHeight
 		this.intW = width
 		this.intH = height
-		this.width = this.intW * this.tileSizeDraw
-		this.height = this.intH * this.tileSizeDraw
+		this.width = this.intW * this.gridWidth
+		this.height = this.intH * this.gridHeight
 		this.nLayers = nLayers
 		this.activeLayer = 0
+		this.isometric = isometric
 		this.grid = true
 		this.layers = Array(this.nLayers).fill().map( __ => Array(this.intH).fill().map( _ => Array(this.intW).fill(0)))
 		this.needCanvasUpdate = false
 	}
 
-	showGrid(c){
+    drawIsometricTile = (c, x, y, fillColor, strokeColor) => {
+	    c.save()
+	    c.translate((y-x) * this.gridWidth/2, (x+y) * this.gridHeight/2)
+	    c.beginPath()
+	    c.moveTo(0,0)
+	    c.lineTo(this.gridWidth/2, this.gridHeight/2)
+	    c.lineTo(0, this.gridHeight)
+	    c.lineTo(-this.gridWidth/2, this.gridHeight/2)
+	    c.closePath()
+	    c.fillStyle = fillColor
+	    c.fill()
+	    c.strokeStyle = strokeColor
+	    c.stroke()
+	    c.restore()
+    }
+
+    showIsometricGrid(c){
+        c.save()
+        c.translate(this.width/2, 0)
+		for(let i = 0; i < this.intH; i++)
+			for(let j = 0; j < this.intW; j++)
+			    this.drawIsometricTile(c, i, j, 'rgba(0,0,0,0)', 'black')
+        c.restore()
+    }
+
+    showSquareGrid(c){
 		for(let i = 0; i < this.intH; i++)
 			for(let j = 0; j < this.intW; j++)
-				c.strokeRect(j * this.tileSizeDraw, i * this.tileSizeDraw, this.tileSizeDraw, this.tileSizeDraw)	
+				c.strokeRect(j * this.gridWidth, i * this.gridHeight, this.gridWidth, this.gridHeight)
+    }
+
+	showGrid(c){
+	    if(this.isometric)
+	        this.showIsometricGrid(c)
+	    else
+	        this.showSquareGrid(c)
 	}
 
+    showSquaredTile(c, x, y, i, j){
+	    c.drawImage(
+		    t.image, 
+		    x * t.tileRealWidth, 
+		    y * t.tileRealHeight, 
+		    t.tileRealWidth, 
+		    t.tileRealHeight,
+		    j * this.gridWidth, 
+		    i * this.gridHeight, 
+		    this.gridWidth,
+		    this.gridHeight
+	    )
+    }
+
+    showIsometricTile(c, x, y, i, j){
+	    c.save()
+	    c.translate((i-j) * t.tileWidth/2, (i+j) * t.tileHeight/2)
+
+	    c.drawImage(
+	        t.image,
+		    x * (t.tileRealWidth + t.border), 
+		    y * (t.tileRealHeight + t.border), 
+		    t.tileRealWidth, t.tileRealHeight,
+	        -t.tileWidth/2, -t.tileRealHeight+t.tileHeight+t.bottomOffset,
+	        t.tileRealWidth, t.tileRealHeight
+	    )
+
+	    c.restore()
+    }
+
 	show(c){
 		if(this.needCanvasUpdate){
 			c.canvas.width = this.width
@@ -31,44 +93,66 @@ class Map {
 		c.clearRect(0, 0, this.width, this.height)
 		if(this.grid)
 			this.showGrid(c)
-		for(let l = 0; l < this.nLayers; l++)
-			for(let i = 0; i < this.intH; i++)
-				for(let j = 0; j < this.intW; j++)
-					if( this.layers[l][i][j] ){
-						const x = this.layers[l][i][j][1],
-									y = this.layers[l][i][j][0]
-						c.drawImage(
-							tileImage, 
-							x * (this.tileSize + this.border), 
-							y * (this.tileSize + this.border), 
-							this.tileSize, this.tileSize,
-							j * this.tileSizeDraw, 
-							i * this.tileSizeDraw, 
-							this.tileSizeDraw, this.tileSizeDraw
-						)
-					}
+        if(this.isometric){
+            c.save()
+            c.translate(this.width/2, 0)
+        }
+		for(let l = 0; l < this.nLayers; l++){
+			for(let i = 0; i < this.intH; i++){
+				for(let j = 0; j < this.intW; j++){
+					if( !this.layers[l][i][j] )
+					    continue
+					const x = this.layers[l][i][j][1],
+					      y = this.layers[l][i][j][0]
+                    if(this.isometric)
+                        this.showIsometricTile(c, x, y, i, j)
+                    else
+                        this.showSquaredTile(c, x, y, i, j)
+                }
+            }
+        }
+        if(this.isometric)  
+            c.restore()
 	}
 
 	load(data){
 		this.width = data.width
 		this.height = data.height
-		this.tileSize = data.tileSize
-		this.tileSizeDraw = data.tileSizeDraw
+		this.gridWidth = data.gridWidth
+		this.gridHeight = data.gridHeight
 		this.intW = data.intW
 		this.intH = data.intH
 		this.nLayers = data.nLayers
 		this.layers = data.layers
+		this.isometric = data.isometric
 		this.textures = data.textures
 		this.needCanvasUpdate = true
 	}
 
 	paintCustom(brush,nlayer,posy,posx){
+	    if(this.isometric){
+	        this.paintCustomIsometric(brush,nlayer,posy,posx)
+	    }else{
+	        this.paintCustomSquare(brush,nlayer,posy,posx)
+	    }
+	}
+
+	paintCustomSquare(brush,nlayer,posy,posx){
 		for(let i = 0; i < brush.data.length; i++){
 			for(let j = 0; j < brush.data[0].length; j++){
 				if( posy+i < this.intH && posx+j < this.intW )
 					this.layers[nlayer][posy+i][posx+j] = brush.data[i][j]
 			}
-		}		
+		}	
+	}
+
+	paintCustomIsometric(brush,nlayer,posy,posx){
+		for(let i = 0; i < brush.data.length; i++){
+			for(let j = 0; j < brush.data[0].length; j++){
+				if( posy+i+j < this.intH && posx+i-j < this.intW )
+					this.layers[nlayer][posy+i+j][posx+i-j] = brush.data[i][j]
+			}
+		}
 	}
 
 	paintRandom(brush,nlayer,posy,posx){
@@ -163,8 +247,8 @@ class Map {
 		}
 		this.intH = this.layers[0].length
 		this.intW = this.layers[0][0].length
-		this.height = this.tileSizeDraw * this.intH
-		this.width = this.tileSizeDraw * this.intW
+		this.height = this.gridHeight * this.intH
+		this.width = this.gridWidth * this.intW
 		this.needCanvasUpdate = true 
 	}
 
@@ -187,8 +271,8 @@ class Map {
 		}
 		this.intH = this.layers[0].length
 		this.intW = this.layers[0][0].length
-		this.height = this.tileSizeDraw * this.intH
-		this.width = this.tileSizeDraw * this.intW
+		this.height = this.gridHeight * this.intH
+		this.width = this.gridWidth * this.intW
 		this.needCanvasUpdate = true 
 	}