updated help

assets/config.json

@@ -1,4 +1,6 @@
 {
+	"debug": false,
+
 	"player.name": "Player",
 	"player.leaderboards": false,
 

public/help.html

@@ -47,6 +47,22 @@
 						A timed game only lasts for 30 seconds, and the goal is to get as high a score as possible.
 					</p>
 				</section>
+				<section>
+					<h3>Survival</h3>
+					<p>
+						In survival mode, the playfield doesn't loop, fruits don't spawn, and you can't win.<br>
+						This modes get progressively harder, with speed increases, and snake growth.<br>
+						At first, this process is slow, but it gets faster with time.
+					</p>
+				</section>
+				<section>
+					<h3>Puzzle mode</h3>
+					<p>
+						In puzzle mode, time doesn't flow until you move.<br>
+						Weird tiles make their debut, like portals, keys, etc.<br>
+						Your goal is to get the fruits in as little moves as you can.
+					</p>
+				</section>
 			</article>
 			<article>
 				<h2>Tiles</h2>
@@ -58,6 +74,8 @@
 					<li><em>Oil</em> is flammable and will periodically catch on fire, which will kill you. It is otherwise perfectly safe</li>
 					<li><em>Super fruits</em> give you 10 points, and sometimes spawn in arcade mode</li>
 					<li><em>Decaying fruits</em> give you 5 points and sometimes spawn in arcade mode, but they also decay after 2 seconds and disappear</li>
+					<li><em>Portals</em> teleport you to the corresponding portal</li>
+					<li><em>Keys</em> make <em>Doors</em> disappear</li>
 				</ul>
 			</article>
 		</main>

src/js/configEditor.js

@@ -22,7 +22,7 @@ class ConfigEditor extends Popup {
 				let id='cfgInput-'+(lastCEId++)+'-'+key.replace(/\./g, '-');
 				let label=span.appendChild(document.createElement('label'));
 				label.innerText=data.name;
-				label.title=key;
+				if(config.getB('debug')) label.title=key;
 
 				let input;
 				if(data.type=='boolean') {
@@ -67,7 +67,7 @@ class ConfigEditor extends Popup {
 						input.disabled=
 							data.excludes
 								.some(key => config.getB(key));
-						input.title=input.disabled?`Disable ${data.excludes.join(',')} to enable`:'';
+						input.title=input.disabled?`Disable '${data.excludes.map(k => metaConfig[k].name).join('\', \'')}' to enable`:'';
 					};
 
 					setEnabled();
@@ -78,7 +78,7 @@ class ConfigEditor extends Popup {
 				} else if(data.parent) {
 					const setEnabled=() => {
 						input.disabled=!config.getB(data.parent);
-						input.title=input.disabled?`Enable ${data.parent} to enable`:'';
+						input.title=input.disabled?`Enable '${metaConfig[data.parent].name}' to enable`:'';
 					};
 
 					setEnabled();

src/js/progress.js

@@ -34,7 +34,7 @@ class ProgressBar {
 		ctx.fillRect(0, 0, canvas.width*this.completeCount/this.taskCount, canvas.height);
 		ctx.fillStyle=textColor;
 		ctx.textAlign='center';
-		ctx.textBaseline='center';
+		ctx.textBaseline='middle';
 		ctx.font=`${canvas.height/2}px 'Fira Code'`;
 		ctx.fillText(this.percent+'%', canvas.width/2, canvas.height/2);
 	}