diff --git a/README.md b/README.md index 363dc5a..e6d4800 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ Scrolling your mouse will speed up or slow down time. | d | toggles debug mode (including FPS counter) | | n | toggles display of nodes | | l | toggles display of lines | +| ? | toggles display of help modal | ### Tweaking diff --git a/css/style.css b/css/style.css index 64880ab..0dcc521 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,17 @@ html { overflow: hidden; } + +#help { + display: flex; + justify-content: center; + background-color: black; + color: white; + position: absolute; + top: 0; + left: 0; +} + +#help table { + color: white; +} diff --git a/index.html b/index.html index dc4de1a..8a6d671 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,91 @@ + diff --git a/js/proximity.js b/js/proximity.js index 6111499..a79ae3d 100644 --- a/js/proximity.js +++ b/js/proximity.js @@ -761,7 +761,7 @@ document.addEventListener('mouseleave', function (e) { /* KEYBOARD EVENTS */ window.addEventListener('keydown', function (e) { - var i; + var i, help; if (e.keyCode === 37) { // left pointShiftBiasX = -1; } else if (e.keyCode === 38) { // up @@ -822,5 +822,12 @@ window.addEventListener('keydown', function (e) { } } else if (e.keyCode === 76) { // l drawLines = !drawLines; + } else if (e.keyCode === 191) { // ? + help = document.getElementById('help'); + if (help.style.display === 'none') { + help.style.display = 'flex'; + } else { + help.style.display = 'none'; + } } });