Merge branch 'Drawer-refactor' of Figg/ColorTubes into master

index.html

@@ -11,7 +11,8 @@
 	<script src="./js/model/game.js"></script>
 	<script src="./js/model/historyItem.js"></script>
 	<script src="./js/ui.js"></script>
-	<script src="./js/drawer.js"></script>
+	<script src="./js/drawer/TubeDrawObject.js"></script>
+	<script src="./js/drawer/drawer.js"></script>
 	<script src="./js/historyHandler.js"></script>
 	<script src="./js/controller.js"></script>
 	<script src="./js/main.js"></script>

js/controller.js

@@ -9,14 +9,18 @@ class Controller
 	{
 		this.initializeGame();
 	}
+
+	drawer()
+	{
+		return this.#drawer
+	}
 	
 	initializeGame() {
 		let params = this.gatherMenuValues();
 		
 		this.#game = new Game(params.TUBESNUMBERS, params.TUBESLEVELS);
-		this.#drawer = new Drawer(params.PADDING, params.SCALE);
-		this.#historyHandler = new HistoryHandler();		
-		this.#drawer.computeGameParams(params.TUBESNUMBERS, params.TUBESLEVELS);
+		this.#drawer = new Drawer(params.PADDING, params.SCALE, this.#game);
+		this.#historyHandler = new HistoryHandler();
 
 		this.ui = new UI(800, 600);
 		this.lastTime = millis();
@@ -68,17 +72,27 @@ class Controller
 	clickTube(tubeIndex)
 	{
 		let _clickedTube = this.#game.tubeAt(tubeIndex);
+		let _selectedTube = this.#game.selectedTube();
+
 		if (_clickedTube == null) return;
 		
-		if (_clickedTube == this.#game.selectedTube())
+		if (_clickedTube == _selectedTube)
+		{
+			this.#drawer.removeSelectedEffect(this.#game.selectedTubeIndex());
 			this.#game.unselectTube();
-		else if (this.canPourInto(this.#game.selectedTube(), _clickedTube))
+		}
+		else if (this.canPourInto(_selectedTube, _clickedTube))
 		{
-			this.pourColorInto(this.#game.selectedTube(), _clickedTube);
+			this.pourColorInto(_selectedTube, _clickedTube);
+			this.#drawer.removeSelectedEffect(this.#game.selectedTubeIndex());
 			this.#game.unselectTube();
 		}
 		else if (!_clickedTube.isEmpty())
+		{
+			if (_selectedTube != null) this.#drawer.removeSelectedEffect(this.#game.selectedTubeIndex());
+			this.#drawer.applySelectedEffect(tubeIndex);
 			this.#game.selectTubeAt(tubeIndex);
+		}
 	}
 	
 	canPourInto(sourceTube, targetTube)
@@ -153,7 +167,7 @@ class Controller
 
 	drawGame()
 	{
-		this.#drawer.draw(this.#game);
+		this.#drawer.draw();
 	}
 
 	drawUI()

js/drawer.js

@@ -1,95 +0,0 @@
-class Drawer
-{
-	#canvas;
-	
-	constructor(_padding, _scale)
-	{
-		this.padding = _padding;
-		this.scale = _scale;
-		
-		this.#canvas = createCanvas(0, 0);
-	}
-	
-	computeGameParams(_tubesNumbers, _tubeLevels)
-	{
-		let canvasWidth = _tubesNumbers * (this.scale + this.padding) + this.padding;
-		let canvasHeight = 2 * this.padding + (_tubeLevels+1) * this.scale;
-		
-		resizeCanvas(canvasWidth, canvasHeight);
-	}
-	
-	draw(game)
-	{
-		clear();
-
-		this.drawTubes(this.padding, this.padding+this.scale, game);
-	}
-
-	drawTubes(x, y, game)
-	{
-		let tubeX = x;
-		let tubeY = y;
-		let selectionOffset = 0;
-		
-		for (let i = 0; i < game.tubesNumber(); i++)
-		{
-			let tube = game.tubeAt(i);
-			selectionOffset = (tube == game.selectedTube() ? this.scale : 0);
-			
-			this.drawTube(tubeX, tubeY - selectionOffset, tube);
-			tubeX += this.padding + this.scale;
-		}
-	}
-
-	drawTube(x, y, tube)
-	{
-		let tubeLevels = tube.height();
-		
-		y += (tubeLevels-1) * this.scale;
-		strokeWeight(2);
-		
-		for(let i = 0; i < tubeLevels; i++)
-		{
-			let layerY = y - i * this.scale;
-
-			let color = tube.getColorAtLevel(i);
-			color == null ? noFill() : fill(color);
-			
-			if (i > 0)
-			{
-				noStroke();
-				rect(x, layerY, this.scale);
-				stroke('black');
-				line(x, layerY, x, layerY + this.scale);
-				line(x + this.scale, layerY, x + this.scale, layerY + this.scale);
-			}
-			else
-			{
-				noStroke();
-				rect(x, layerY, this.scale, this.scale/2);
-				stroke('black');
-				line(x, layerY, x, layerY + this.scale/2);
-				line(x + this.scale, layerY, x + this.scale, layerY + this.scale/2);
-
-				arc(x + this.scale/2, layerY + this.scale/2, this.scale, this.scale, 0, PI);
-			}
-		}
-	}
-	
-	getTubeIdAt(x, y)
-	{
-		if (!this.isInboundsCanvas(x,y)) return -1;
-		
-		let idWithPadding = (x - this.padding) / (this.scale + this.padding);
-		return idWithPadding % 1 > 1 - (this.padding / (this.scale + this.padding)) ? -1 : int(idWithPadding);
-	}
-	
-	isInboundsCanvas(x, y)
-	{
-		return x >= this.padding
-			&& y >= this.padding
-			&& x < this.#canvas.width - this.padding
-			&& y < this.#canvas.height - this.padding;
-	}
-
-}

js/drawer/TubeDrawObject.js

@@ -0,0 +1,64 @@
+class TubeDrawObject
+{
+    #tube;
+
+    constructor(_x, _y, _tube, _scale)
+    {
+        this.x = _x;
+        this.y = _y;
+        this.scale = _scale;
+        this.#tube = _tube;
+    }
+
+    get height()
+    {
+        return this.scale * this.#tube.height();
+    }
+
+    get width()
+    {
+        return this.scale;
+    }
+
+    draw()
+	{
+		for (let layerIndex = 0; layerIndex < this.#tube.height(); layerIndex++)
+        {
+            let color = this.#tube.getColorAtLevel(layerIndex);
+            color == null ? noFill() : fill(color);
+
+            let layerY = this.y + (this.#tube.height()-layerIndex-1) * this.scale;
+
+            if (layerIndex == 0) this.#drawTubeBottom(this.x, layerY, this.scale);
+            else this.#drawTubeLayer(this.x, layerY, this.scale)
+        }
+	}
+
+    #drawTubeLayer(_x, _y, _scale)
+    {
+        noStroke();
+        rect(_x, _y, _scale);
+
+        stroke('black');
+		strokeWeight(2);
+        line(_x, _y, _x, _y + _scale);
+        line(_x + _scale, _y, _x + _scale, _y + _scale);
+    }
+
+    #drawTubeBottom(_x, _y, _scale)
+    {
+        noStroke();
+        rect(_x, _y, _scale, _scale/2);
+
+        stroke('black');
+        line(_x, _y, _x, _y + _scale/2);
+        line(_x + _scale, _y, _x + _scale, _y + _scale/2);
+        arc(_x + _scale/2, _y + _scale/2, _scale, _scale, 0, PI);
+    }
+
+    inbounds(_x, _y)
+    {
+        return _x > this.x && _x < this.x + this.width
+            && _y > this.y && _y < this.y + this.height;
+    }
+}

js/drawer/drawer.js

@@ -0,0 +1,64 @@
+class Drawer
+{
+	#tubeDrawObjects;
+	#scale;
+	
+	constructor(_padding, _scale, _game)
+	{
+		this.#tubeDrawObjects = []
+		this.#scale = _scale;
+		
+		this.#initializeTubeDrawObjects(_game, _padding);
+		this.#computeCanvasSize(_padding);
+	}
+
+	applySelectedEffect(index)
+	{
+		this.#tubeDrawObjects[index].y -= this.#scale;
+	}
+
+	removeSelectedEffect(index)
+	{
+		this.#tubeDrawObjects[index].y += this.#scale;
+	}
+	
+	#initializeTubeDrawObjects(_game, _padding)
+	{
+		let _tubeX = _padding;
+		let _tubeY = _padding + this.#scale;
+
+		for (let tbIndex = 0; tbIndex < _game.tubesNumber(); tbIndex++)
+		{
+			let tubeDrawObject = new TubeDrawObject(_tubeX, _tubeY, _game.tubeAt(tbIndex), this.#scale);
+			this.#tubeDrawObjects.push(tubeDrawObject);
+
+			_tubeX += this.#scale + _padding;
+		}
+	}
+
+	#computeCanvasSize(_padding)
+	{
+		let w = this.#tubeDrawObjects.reduce((res, value) => res + value.width + _padding, _padding);
+		let h = this.#tubeDrawObjects[0].height + 2 * _padding + this.#scale;
+
+		createCanvas(w, h);
+	}
+	
+	draw()
+	{
+		clear();
+		background('orange');
+
+		this.#tubeDrawObjects.forEach(obj => obj.draw());
+	}
+	
+	getTubeIdAt(x, y)
+	{
+		for (let i = 0; i < this.#tubeDrawObjects.length; i++)
+		{
+			if (this.#tubeDrawObjects[i].inbounds(x, y)) return i;
+		}
+
+		return -1;
+	}
+}

js/model/tube.js

@@ -50,7 +50,7 @@ class Tube {
 	
 	getColorAtLevel(index)
 	{
-		if (index < 0 || index >= this.#colors.length) return '';
+		if (index < 0 || index >= this.#colors.length) return null;
 		
 		return this.#colors[index].toString();
 	}