Interactivity

2 files changed, 25 insertions, 1 deletions

diff --git a/index.html b/index.html
index 61618d9..5c636b0 100644
--- a/index.html
+++ b/index.html
@@ -16,5 +16,5 @@ canvas {
 }
 </style>
 Nice.
-<canvas id="canvas"></canvas>
+<canvas id="canvas" tabindex="1"></canvas>
 <script src="index.js"></script>
diff --git a/index.js b/index.js
index 7f73c5d..0d00cab 100644
--- a/index.js
+++ b/index.js
@@ -143,6 +143,22 @@ class ActionMenu {
   getRectW(level) {
     return Math.floor((this.canvas.width - 2) / 3 * level)
   }
+
+  downOption() {
+    this.currentOptionIndex++
+
+    if (this.currentOptionIndex >= this.options.length) {
+      this.currentOptionIndex = 0
+    }
+  }
+
+  upOption() {
+    this.currentOptionIndex--
+
+    if (this.currentOptionIndex <= -1) {
+      this.currentOptionIndex = this.options.length - 1
+    }
+  }
 }
 
 const atbBar = new ATBBar()
@@ -171,4 +187,12 @@ function drawLoop() {
   requestAnimationFrame(drawLoop)
 }
 
+canvas.addEventListener('keypress', evt => {
+  if (evt.keyCode === 38) {
+    actionMenu.upOption()
+  } else if (evt.keyCode === 40) {
+    actionMenu.downOption()
+  }
+})
+
 requestAnimationFrame(drawLoop)