Skip to content

Vanilla web component that listens for the Konami Code

License

Notifications You must be signed in to change notification settings

natemoo-re/konami-listener

Repository files navigation

Built With Stencil NPM Version

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

About

Vanilla web component that listens for the Konami Code

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published