petit rework

index.html

 	<link href="./css/style.css" rel="stylesheet">
 	<script src="./js/p5.min.js"></script>
 	<script src="./js/tube.js"></script>
+	<script src="./js/ui.js"></script>
 	<script src="./js/game.js"></script>
 	<script src="./js/drawer.js"></script>
 	<script src="./js/controller.js"></script>

js/controller.js

 function setup()
 {
+	this.width = 800
+	this.height = 600
+	this.ui = new UI(this.width, this.height);
+	this.lastTime = 0;
 	newGame();
 }
 
 function newGame() {
-	let params = gatherMenuValues();
+	const params = gatherMenuValues();
 	
 	this.game = new Game(params.TUBESNUMBERS, params.TUBESLEVELS);
-	this.drawer = new Drawer(params.PADDING);
+	this.drawer = new Drawer(params.PADDING, this.width, this.height);
 	
 	this.drawer.setTubesParams(params.TUBESNUMBERS, params.TUBESLEVELS, params.TUBESIZE);
 	
 	{
 		this.game.selectTube(tubeId);
 	}
-	
 	this.needUpdate = true;
 }
 
 		PADDING: inputPadding
 	};
 }
+
 function draw()
 {
-	if (!this.needUpdate && !game.isCompleted) return;
+
+	const timeDelta = millis() - lastTime;
+	// peut-être pas nécessaire de limiter le framerate
+	if (timeDelta < 50)
+		return;
+	this.lastTime = millis();
 	
+	const steps = [
+		(this.needUpdate || this.game.isCompleted) && drawGame,
+		this.game.isCompleted && drawUI
+	]
+
+	steps.forEach(step => step && step());
+}
+
+function drawGame()
+{
 	this.drawer.draw(this.game);
-	
 	this.needUpdate = false;
-}
+}
+
+function drawUI()
+{
+	this.ui.drawWinView();
+}

js/drawer.js

 class Drawer
 {
-	#canvasWidth
-	#canvasHeight
 	
-	constructor(_padding)
+	constructor(_padding, width, height)
 	{
 		this.padding = _padding;
-		
-		createCanvas(0, 0);
+
+		this.width = width;
+		this.height = height;
+
+		createCanvas(width, height);
 	}
 	
 	setTubesParams(_tubesNumbers, _tubeLevels, _tubeSize)
 	{
 		this.tubesNumbers = _tubesNumbers;
 		this.tubeLevels = _tubeLevels;
-		this.tubeSize = _tubeSize;
-		
-		this.#canvasWidth = this.tubesNumbers * (this.tubeSize + this.padding) + this.padding;
-		this.#canvasHeight = 2 * this.padding + (this.tubeLevels+1) * this.tubeSize;
-		
-		resizeCanvas(this.#canvasWidth, this.#canvasHeight);
+		this.tubeSize = _tubeSize;		
 	}
 	
 	draw(game)
 		
 		this.drawTubes(this.padding, this.padding+this.tubeSize, tubes, selectedTube);
 
-		if(game.isCompleted)
-			this.drawWinView();
 	}
 
 	drawTubes(x, y, tubes, selectedTube)
 	{
 		return x >= this.padding
 			&& y >= this.padding
-			&& x < this.#canvasWidth - this.padding
-			&& y < this.#canvasHeight - this.padding;
+			&& x < this.width - this.padding
+			&& y < this.height - this.padding;
 	}
 
-	drawWinView(){
-		fill('red');
-		textSize(50);
-		let textX = this.#canvasWidth / 2 - 175 + 10 * sin(frameCount/10);
-		let textY = this.#canvasHeight / 2 		+ 10 * cos(frameCount/10);
-		let message = "👑 You Win! 👑"  
-		text(message, textX, textY);
-		textX ++;
-		textY ++;
-		fill('yellow');
-		text(message, textX, textY);
-	}
 }

js/ui.js

+class UI {
+
+    constructor(width, height){
+        this.width = width;
+        this.height = height;
+    }
+
+    drawWinView(){
+        fill('red');
+		textSize(50);
+		let textX = lerp(this.width / 2 - 175, 20 * sin(frameCount/10), 0.2);
+		let textY = lerp(this.height / 2, 20 * cos(frameCount/10), 0.2);
+		let message = "👑 You Win! 👑"  
+		text(message, textX, textY);
+		textX ++;
+		textY ++;
+		fill('yellow');
+		text(message, textX, textY);
+    }
+}