natemoo-re / konami-listener

Vanilla web component that listens for the Konami Code

Konami Listener

<konami-listener> is a web component that listens for the Konami Code. When a match is triggered, it will automatically show any content placed inside of the component, like so <konami-listener> <h1> Hello world! </h1> </konami-listener>

See the demo at http://projects.natemoo.re/konami-listener

Getting Started

Script tag

• Add the javascript module in the head of your index.html file

  <script src='https://unpkg.com/konami-listener/dist/konami-listener.js'></script>

• Use <konami-listener></konami-listener> anywhere in your templates, JSX, html, etc

Node Modules

• Run npm install konami-listener --save
• Add the javascript module in the head of your index.html file

  <script src='node_modules/konami-listener/dist/konami-listener.js'></script>

• Use <konami-listener></konami-listener> anywhere in your templates, JSX, html, etc

In a stencil-starter app

• Run npm install konami-listener --save
• Add { name: 'konami-listener' } to your collections
• Use <konami-listener></konami-listener> anywhere in your templates, JSX, html, etc

API

Simple Usage

<konami-listener> allows you to place any content inside of it. It will then be shown when the code is matched. By default, the container is absolutely positioned over the entire page, so style the internal markup accordingly.

<konami-listener>
  <h1> 💩 </h1>
</konami-listener>

Events

<konami-listener> emits the following custom events

Event Name	Description	Data
input	Emitted on each keydown as the code progresses	{ key: string, index: number }
match	Emitted on the final match	none

To listen for events, just use addEventListener. Since it uses custom HTML events, the data payload is bound to event.detail.

const konami = document.querySelector('konami-listener');
konami.addEventListener('match', () => {
  console.log('Konami Code matched!');
})
konami.addEventListener('input', (e) => {
  const { key, index } = e.detail;
  console.log('Konami Code progress', { key, index });
})

Framework Integration

If you'd like to drop this component into Angular, React, or any other framework, take a look at Stencil's Framework Integration guide