Using User Input

MANAWAVE can take advantage of user inputs by applying browser events. This builds on overriding default behaviors, so if you want to find out more, read there. A more artistic example can be found visiting the HYPERPINK Realm.

Controlling direction with keyboard

For this example, you’re going to use your keys to control the direction of the marquee. It should feel like eight-direction movement in old-school JRPGs.

Step 1: Setup

Generally, if you’re going to start working with more customized behavior, you should initialize a DOM element marquee. It should have some attributes to define the initial state.

<div id="manawave-marquee" data-autoplay data-direction="15" data-speed="1.5">
  <div class="text-manawave">MANAWAVE&nbsp;</div>
</div>

import { MW } from "manawave";

const mw = new MW("#manawave-marquee");

Step 2: Listen

Now, you need to gather data for the MW instance. MW is just a controller for the MANAWAVE marquee. It just needs data to act upon. For our example, we’ll go with keyboard data.

document.addEventListener("keydown", (ev) => {
  ev.preventDefault();

  switch (ev.key) {
    case "ArrowUp":
      break;
    case "ArrowRight":
      break;
    case "ArrowDown":
      break;
    case "ArrowLeft":
      break;
  }
});

Step 3: Apply

Now you can perform changes to MW given data. This will let you create a marquee that reacts with what users do interactively.

document.addEventListener("keydown", (ev) => {
  ev.preventDefault();

  switch (ev.key) {
    case "ArrowUp":
      mw.direction = 90;
      break;
    case "ArrowRight":
      mw.direction = 0;
      break;
    case "ArrowDown":
      mw.direction = 270;
      break;
    case "ArrowLeft":
      mw.direction = 180;
      break;
  }
});

Controlling direction with mouse

Here’s another completed example, but for mouse movements.