Figg
/
ColorTubes
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge branch 'feat/keep_complete_tubes'

master
Figg 9 months ago
parent
6c65ff057d 2ae8559d05
commit
5078fa2c6d
6 changed files with 96 additions and 28 deletions
Unified View Show Diff Stats
  1. 29
    9
      css/style.css
  2. 15
    12
      index.html
  3. 20
    4
      js/controller.js
  4. 1
    0
      js/drawer.js
  5. 11
    3
      js/game.js
  6. 20
    0
      js/ui.js

+ 29
- 9
css/style.css View File

3 
 	margin: 0;
 3 
 	margin: 0;
4 
 }
 4 
 }
5
5
6 
-menu {
7 
-	padding: 0;
8 
-	margin: 5px;
6 
+.menuitem label::after {
7 
+	content: " :";
9 
 }
 8 
 }
10
9
11 
-menuitem {
12 
-	margin-right: 10px;
10 
+.menuitem input {
11 
+	max-width: 50px;
13 
 }
 12 
 }
14
13
15 
-menuitem label::after {
16 
-	content: " :";
14 
+.row {
15 
+	display: flex;
16 
+	flex-direction: row;
17 
 }
 17 
 }
18
18
19 
-menuitem input {
20 
-	max-width: 50px;
19 
+.w-max {
20 
+	width: max-content;
21 
+}
22 
+
23 
+.justify-evenly {
24 
+	justify-content: space-evenly;
25 
+}
26 
+
27 
+.justify-center {
28 
+	justify-content: center;
29 
+}
30 
+
31 
+.border {
32 
+	border: 1px solid black;
33 
+}
34 
+
35 
+.p-2 {
36 
+	padding: 0.5rem;
37 
+}
38 
+
39 
+.m-2 {
40 
+	margin: 0.5rem;
21 
 }
 41 
 }

+ 15
- 12
index.html View File

4 
 <head>
 4 
 <head>
5 
 	<meta charset="utf-8">
 5 
 	<meta charset="utf-8">
6 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7 
-	<title>Le jeu des tubes là</title>
7 
+	<title>🌟 Les jeu des bouteilles là glou glou 🌟</title>
8 
 	<link href="./css/style.css" rel="stylesheet">
 8 
 	<link href="./css/style.css" rel="stylesheet">
9 
 	<script src="./js/lib/p5.min.js"></script>
 9 
 	<script src="./js/lib/p5.min.js"></script>
10 
 	<script src="./js/model/tube.js"></script>
 10 
 	<script src="./js/model/tube.js"></script>
11 
+	<script src="./js/ui.js"></script>
11 
 	<script src="./js/model/game.js"></script>
 12 
 	<script src="./js/model/game.js"></script>
12 
 	<script src="./js/drawer.js"></script>
 13 
 	<script src="./js/drawer.js"></script>
13 
 	<script src="./js/controller.js"></script>
 14 
 	<script src="./js/controller.js"></script>
15 
 </head>
 16 
 </head>
16
17
17 
 <body>
 18 
 <body>
18 
-	<menu>
19 
-		<menuitem>
19 
+	<div class="row w-full justify-evenly border p-2 m-2">
20 
+		<span class="menuitem">
20 
 			<label>Tubes Number</label>
 21 
 			<label>Tubes Number</label>
21 
 			<input type="number" size="5" id="tbNumber" value="10">
 22 
 			<input type="number" size="5" id="tbNumber" value="10">
22 
-		</menuitem>
23 
-		<menuitem>
23 
+		</span>
24 
+		<span class="menuitem">
24 
 			<label>Tubes Levels</label>
 25 
 			<label>Tubes Levels</label>
25 
 			<input type="number" size="5" id="tbLevel" value="6">
 26 
 			<input type="number" size="5" id="tbLevel" value="6">
26 
-		</menuitem>
27 
-		<menuitem>
27 
+		</span>
28 
+		<span class="menuitem">
28 
 			<label>Padding</label>
 29 
 			<label>Padding</label>
29 
 			<input type="number" size="5" id="padding" value="10">
 30 
 			<input type="number" size="5" id="padding" value="10">
30 
-		</menuitem>
31 
-		<menuitem>
31 
+		</span>
32 
+		<span class="menuitem">
32 
 			<label>Tube Scale</label>
 33 
 			<label>Tube Scale</label>
33 
 			<input type="number" size="5" id="scale" value="50">
 34 
 			<input type="number" size="5" id="scale" value="50">
34 
-		</menuitem>
35 
+		</span>
35 
 		<button type="button" onclick="controller.initializeGame()">New game</button>
 36 
 		<button type="button" onclick="controller.initializeGame()">New game</button>
36 
-	</menu>
37 
-	<main oncontextmenu="return false;">
37 
+	</div>
38 
+	<div class="row justify-center">
39 
+		<main oncontextmenu="return false;">
40 
+	</div>
38 
 	</main>
 41 
 	</main>
39 
 </body>
 42 
 </body>
40
43

+ 20
- 4
js/controller.js View File

16 
 		this.drawer = new Drawer(params.PADDING, params.SCALE);
 16 
 		this.drawer = new Drawer(params.PADDING, params.SCALE);
17
17
18 
 		this.drawer.computeGameParams(params.TUBESNUMBERS, params.TUBESLEVELS);
 18 
 		this.drawer.computeGameParams(params.TUBESNUMBERS, params.TUBESLEVELS);
19 
+		this.width = 800
20 
+		this.height = 600
21 
+		this.ui = new UI(this.width, this.height);
22 
+		this.lastTime = 0;
19
23
20 
 		this.initializeColorTubes(params.TUBESLEVELS - 1);
 24 
 		this.initializeColorTubes(params.TUBESLEVELS - 1);
21
25
123
127
124 
 	runLoop()
 128 
 	runLoop()
125 
 	{
 129 
 	{
126 
-		if (!this.needUpdate) return;
130 
+		const timeDelta = millis() - lastTime;
131 
+		// peut-être pas nécessaire de limiter le framerate
132 
+		if (timeDelta < 50)
133 
+			return;
134 
+		this.lastTime = millis();
127
135
128 
-		this.drawer.draw(this.game);
129 
-
130 
-		this.needUpdate = false;
136 
+		const steps = [
137 
+			(this.needUpdate || this.game.isCompleted) && drawGame,
138 
+			this.game.isCompleted && drawUI
139 
+		]
140 
+
141 
+		steps.forEach(step => step && step());
142 
+	}
143 
+
144 
+	function drawUI()
145 
+	{
146 
+		this.ui.drawWinView();
131 
 	}
 147 
 	}
132 
 }
 148 
 }

+ 1
- 0
js/drawer.js View File

74 
 			&& x < this.#canvas.width - this.padding
 74 
 			&& x < this.#canvas.width - this.padding
75 
 			&& y < this.#canvas.height - this.padding;
 75 
 			&& y < this.#canvas.height - this.padding;
76 
 	}
 76 
 	}
77 
+
77 
 }
 78 
 }

+ 11
- 3
js/game.js View File

4
4
5 
 	constructor(nbTubes, tubeLevel)
 5 
 	constructor(nbTubes, tubeLevel)
6 
 	{
 6 
 	{
7 
-		this.#tubes = [];
8 
-		this.#selectedTube = null;
9 
-
7 
+		this.tubes = [];
8 
+		this.selectedTube = null;
9 
+		this.isCompleted = false;
10 
+
10 
 		for (let i = 0; i < nbTubes; i++)
 11 
 		for (let i = 0; i < nbTubes; i++)
11 
 		{
 12 
 		{
12 
 			this.#tubes.push(new Tube(tubeLevel));
 13 
 			this.#tubes.push(new Tube(tubeLevel));
64 
 	{
 65 
 	{
65 
 		return index >= 0 && index < this.#tubes.length;
 66 
 		return index >= 0 && index < this.#tubes.length;
66 
 	}
 67 
 	}
68 
+
69 
+	isComplete()
70 
+	{
71 
+		return this.#tubes.every(
72 
+			tube => tube.isComplete() || tube.isEmpty()
73 
+		);
74 
+	}
67 
 }
 75 
 }

+ 20
- 0
js/ui.js View File

1 
+class UI {
2 
+
3 
+    constructor(width, height){
4 
+        this.width = width;
5 
+        this.height = height;
6 
+    }
7 
+
8 
+    drawWinView(){
9 
+        fill('red');
10 
+		textSize(50);
11 
+		let textX = lerp(this.width / 2 - 175, 20 * sin(frameCount/10), 0.2);
12 
+		let textY = lerp(this.height / 2, 20 * cos(frameCount/10), 0.2);
13 
+		let message = "👑 You Win! 👑"
14 
+		text(message, textX, textY);
15 
+		textX ++;
16 
+		textY ++;
17 
+		fill('yellow');
18 
+		text(message, textX, textY);
19 
+    }
20 
+}

Write Preview
Loading…
Cancel
Save