add help

532910 · 532910 · commit 8f98d066180a · 2026-01-05T14:31:36.000+03:00
diff --git a/index.html b/index.html
@@ -19,6 +19,10 @@
 </head>
 <body>
 	<canvas id="canvas"></canvas>
+	<div id="help">
+		<p>Tile: scroll, swipe ↑↓</p>
+		<p>Color: shift + scroll, swipe ←→</p>
+	</div>
 	<div class="select" id="colors"></div>
 	<div class="select" id="tiles"></div>
 	<script type="module" src="tile.js"></script>
diff --git a/main.css b/main.css
@@ -80,3 +80,13 @@ input[type="radio"]:checked {
 @media screen and (min-width: 15cm) {
 	.select { width: 50%; }
 }
+
+#help {
+	position: fixed;
+	top: 50%;
+	background-color: black;
+	padding: 1em;
+	font-size: 22pt;
+	box-shadow: 0 0 16px 16px black;
+	transition: opacity 1s ease-in-out;
+}
diff --git a/tile.js b/tile.js
@@ -128,6 +128,8 @@ function RadioHandler( e ){
 }
 
 function EventHandler( e ){
+//	document.getElementById( 'help' ).style.display = 'none';
+	document.getElementById( 'help' ).style.opacity = 0;
 	switch( e.type ){
 		case 'keydown':
 			switch( e.key ){

Original file line number	Diff line number	Diff line change
`@@ -128,6 +128,8 @@ function RadioHandler( e ){`
`128`	`128`	`}`
`129`	`129`
`130`	`130`	`function EventHandler( e ){`
	`131`	`+// document.getElementById( 'help' ).style.display = 'none';`
	`132`	`+ document.getElementById( 'help' ).style.opacity = 0;`
`131`	`133`	`switch( e.type ){`
`132`	`134`	`case 'keydown':`
`133`	`135`	`switch( e.key ){`