added help page (closes #15)

5 years ago · a87b4679f4
parent e34e7e07bd
commit a87b4679f4
5 changed files with 109 additions and 0 deletions
--- a/public/help.html
+++ b/public/help.html
@ -0,0 +1,64 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>Snek - Help</title>
 		<meta charset="UTF-8">
 		<link rel="favicon" href="favicon.ico">
 		<link rel="stylesheet" href="css/snek.css">
 	</head>
 	<body>
 		<main class="help">
 			<article>
 				<h2>Controls</h2>
 				<p>
 					On keyboard, the game is played with the arrow keys.<br>
 					You can use the <code>f</code> key to go fullscreen.<br>
 					You can also use the <code>r</code> key to quickly restart a game.<br>
 				</p>
 				<p>
 					On mobile or with a touchscreen, the game can be played in 3 modes.<br>
 					In crosspad mode, the screen is divided into 4 regions, and each one corresponds to a direction.<br>
 					In joystick mode, the point where you press your finger is the center of a virtual joystick, and moving it will trigger the directions.<br>
 					In swipe mode, you just swipe to move.
 				</p>
 			</article>
 			<article>
 				<h2>Game modes</h2>
 				<section>
 					<h3>Speedrun mode</h3>
 					<p>
 						In speedrun mode, the goal is to collect all the fruits as fast as possible.<br>
 						Attempting to go through the edge of the playfield will kill you.<br>
 						Each level introduces a new mechanic.
 					</p>
 				</section>
 				<section>
 					<h3>Arcade</h3>
 					<p>
 						Arcade mode is mostly like the classics.<br>
 						In arcade mode, you can go through the edge of the playfield and come out on the other side.<br>
 						Super fruits and decaying fruits may also appear. They are worth <em>10</em> and <em>5</em> points respectively.
 					</p>
 				</section>
 				<section>
 					<h3>Timed</h3>
 					<p>
 						Timed mode is a bare-bones mode with a looping playfield.<br>
 						A timed game only lasts for 30 seconds, and the goal is to get as high a score as possible.
 					</p>
 				</section>
 			</article>
 			<article>
 				<h2>Tiles</h2>
 				<ul>
 					<li><em>Walls</em> kill you if you touch them</li>
 					<li><em>Fruits</em> give you one point and make you grow. In arcade gamemodes, they also make the game go faster</li>
 					<li><em>Holes</em> kill you if the entire snake is over a hole, or the head and 3 subsequent tiles are over a hole</li>
 					<li><em>Fire</em> kills you if you touch it</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>
 				</ul>
 			</article>
 		</main>
 	</body>
 </html>
--- a/src/js/main.js
+++ b/src/js/main.js
@ -162,6 +162,22 @@
 		location.hash='menu';
 	};
 	// show help page
 	help=async () => {
 		stopGame();
 		let iframe=document.createElement('iframe');
 		iframe.src='help.html';
 		iframe.style.width='100%';
 		iframe.style.height='100%';
 		await new Popup(
 			"Help",
 			[iframe],
 			{ok: "OK"},
 			true
 		).display();
 		location.hash='menu';
 	};
 	// display the win popup
 	handleWin=async snek => {
 		// hide the HUD
--- a/src/less/help.less
+++ b/src/less/help.less
@ -0,0 +1,16 @@
 .help {
 	display: block;
 	article {
 		margin-bottom: 2ex;
 	}
 	section {
 		margin-bottom: 1ex;
 	}
 	ul {
 		margin-left: 2ex;
 		font-size: 1.6em;
 	}
 }
--- a/src/less/popup.less
+++ b/src/less/popup.less
@ -48,6 +48,7 @@
 				flex-direction: column;
 				align-items: center;
 				overflow-y: auto;
 				flex: 1;
 				& > * {
 					margin: .5rem;
--- a/src/less/snek.less
+++ b/src/less/snek.less
@ -31,6 +31,10 @@ h1, h2, h3, h4, h5, h6 {
 	margin-bottom: .1em;
 }
 p + p {
 	margin-top: 1em;
 }
 a {
 	text-decoration: inherit;
 	display: contents;
@ -40,6 +44,11 @@ em {
 	font-style: italic;
 }
 code {
 	background: @accentbg;
 	font-weight: bold;
 }
 header, footer {
 	background: @accentbg;
@ -131,3 +140,6 @@ p {
 // setup the hud
@import 'hud';
 // setup the help file
@import 'help';