georgemandis/konami-js

Adding the Konami Code easter egg to your projects since 2009! Compatible with gestures on smartphones and tablets as well. Compatible with all front-end frameworks and vanilla JavaScript

Konami JS

Making the web more fun since 2009.

Add the Konami Code as an easter egg to your project! Compatible with keyboard and touch events.

A joyful, frivolous project by George Mandis

Documentation

A brand-new documentation site now lives at konamijs.mand.is. Please check it out, in particular the showcase:

https://konamijs.mand.is/docs/showcase

Contributions

Your pull requests are welcome! Especially updates for the documentation. You'll find the source for it in the documentation branch.

konami-js's Issues

SyntaxError: missing ; before statement

When I used a JS minifier and I have 2 syntax errors because line breaks are removed:

1. Line 23 after } and before obj.attachEvent("on"
2. Line 96 after } and before typeof callback

NPM package

Is there a release on NPM?

The current version of konami (https://www.npmjs.com/package/konami) on NPM seems to be an older release of this one.

Touch input broken

#34 broke touch input by deleting and not re-introducing the code that memorises past touch inputs and that checks whether it was the Konami sequence (https://github.com/snaptortoise/konami-js/pull/34/files#diff-c82c3f68a171889fa7fc775455959b3aL78)

Could you please give this a license?

I'd like to use this code to implement an Easter egg in our app. Could you please clarify the license you consider this project under?

Preferably GPL2?

Thanks,
Dan

Add optional semi-colons

A lot of them are left out, sure it works just fine but some minifiers have problems with it :)

Thanks!

Create Type Definitions for TS and/or Flow

I guess this will be great for people who use type checkers.
Maybe using TS or Flow inside konami-js will be a good idea too

Add an ESLint configuration

This should be part of the existing package.json file.

Usage of "const" keyword breaks older browsers and uglifyjs2

In the last update you are using the "const" keyword in a single place.

https://github.com/snaptortoise/konami-js/blob/060339e39599c0fb9f87dcaa1bc22102ec4ed3df/konami.js#L77

This breaks in older IE (< 11) and some mobile browser. It also breaks running your code through uglifyjs2 unless I run it through babel first. How about switching it back to a regular "var" instead to make life easier for everyone? :)

Edit

You are also using the shorthand form for declaring a method in one place it seems.

https://github.com/snaptortoise/konami-js/blob/060339e39599c0fb9f87dcaa1bc22102ec4ed3df/konami.js#L102

I'm not sure about browser support here but it breaks uglifyjs2 at least.

Create better examples and tutorials

When version 2.0 (#44) comes out the "Getting Started" instructions for Konami-JS will have to change. I like that the new version will integrate better with modern toolchains and processes, but I don't want to lose the ability for anyone to copy-and-paste a couple lines of code to stick it on their blog.

I'd like new examples to link to CDN-hosted versions of Konami-JS at unpkg.com. The the code will need to be written so that a distribution-ready version of konami.js is accessible via npm. That touches on the discussion of build-tools and bundlers (#48) to some degree.

Here are some example ideas listed under "Coming Soon!" on the current GitHub-hosted site:

• How to present different easter eggs for gesture versus keyboard input
• How to override the default code for both keyboard and gesture
• More complex examples beyond a simple redirect
• How to track the Konami Code using Google Analytics

Version 2 api changing

Since the idea is to change the major version, do you think the api should stay the same? Or do you think it needs some changes?

Update documentation on the functions

Many of the functions are not documented (especially the unload function).
It'd be great to have a short description of the functions.

Feature Request: Release a version

In order to use bower to handle this package (along with all of the rest of my product codebase) there must be a released version. Could you please add one with the current version?

Broken on mobile

A call is made to konami.touchCapture, but it exists as konami.iphone.touchCapture.
Moreover, when logging result at the end of check_direction, the result for a UP gesture is UP, DOWN, idem for a DOWN gesture, and the result for a TAP is LEFT.
Don't know if it's in relation, but doesn't work at all on any mobile device.
Thanks!

Drop Bower support

No longer supported or necessary.

Roadmap of improvement

I saw that you wanted some help to improve this lib, and i'd like to help you with it! So, I wanted to know if you have some roadmap of improvement.

Some things that caught my eye were:

• Lack of eslint
• No babel for es6
• No bundler for libraries, like Rollup
• Bower (do you intend on keeping bower support? Not even bower supports it)
• Do you want some new features? Maybe listing would be nice so people can help

Modernize code with ES6-features and functional aesthetic

The code could stand to make better use of ES6 features and modern JavaScript coding styles. This might be the most wide-open issue in terms of solving and I'm open to all manners and discussion on the subject.

Some low hanging fruit and ideas to get started:

• Remove all instances of var
• Remove the custom event-listening code that existed for IE6(!!) compatibility
• Perhaps this could/should be rewritten as an ES6 Class?
• The one for loop could probably be rewritten to use forEach

If we can get a base rewrite that adheres to this we can break down the code and discuss more specific improvements.

Calling another Javascript file from a URL?

Hi. Would it be possible to use konami-js to pull in and run another Javascript file sourced from a URL? Here is what I tried, but all it does is display the Javascript code in the browser tab when I run it:

<script src="{{ SITEURL }}/theme/assets/js/konami.js"></script>
<script type="text/javascript">
    var kitteh = new Konami("https://webneko.net/n20171213.js");
</script>

Note: I can redirect to a different URL entirely without trouble.

I don't want to pull down a copy of the file and self-host it because the author of Webneko asks folks to not do that, and I want to respect his wishes.

bower.json

It would be nice to have a bower.json file for this library.

Potential keyboard bug

In the source file shouldn't line 13
sequence: ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA'] , be equal to sequence: ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'], ?

Add a new method to enable/disable the Konami code

Could be really useful when integrated into a single page application (SPA).

You might want to enable the Konami code only on some screens or pages.

It could also be useful to be able to reset the current inputs.

New feature discussion

Adding new features to 2.0 was brought up (#44) when discussing a general roadmap. I'm open to suggestions!

Currently the project listens for and triggers "easter eggs" in response to keyboard or touchscreen input. An "easter egg" can be any bit of JavaScript code but defaults to loading a new webpage in the browser.

Are there "features" that would make sense to add beyond this?

Incorporate some kind of bundler support

I'm not sure what approach to take here. Konami-JS has no external dependencies (which I'd like to stay that way) but I want the project to accommodate more modern toolchains.

Should I provide separate configuration files for the more popular ones? Webpack? Parcel? Rollup?

I'm open to a big discussion here because I'm not really sure what makes the most sense for a project like this where one of my goals is to keep the barrier-to-entry low.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of snaptortoise/konami-js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library snaptortoise/konami-js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "snaptortoise/konami-js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Touch input is not properly validated

With the current code setup the user is able to have any gestures or taps present between the expected pattern elements and it will still execute correctly. For example, the following sequence will trigger the easter egg:

UP, UP, LEFT, LEFT, LEFT, LEFT, DOWN, DOWN, LEFT, RIGHT, LEFT, RIGHT, TAP, TAP

This could become a problem for pages that demand a lot of user interaction. Extended use of a page is likely to cause accidental triggering of the easter egg.

iPad Pro keyboard compatability

Right now Konami-JS works with gestures on an iPad Pro with the keyboard plugged in. It would be nice if the keyboard worked as well.

Heard you on the podcast. Liked what I heard. Here's a cheat code...

// The Library

function CHEATCODE(callback=null, customPattern=null) {

  let pattern = customPattern || ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b', 'a', 'Enter'];
  let inputs = [];

  window.onkeydown = (e) => {
    if (inputs.length === pattern.length) {
      inputs.shift();
    }
    inputs.push(e.key);
    if (JSON.stringify(inputs) === JSON.stringify(pattern) && callback && typeof callback === 'function') {
      callback();
    }
  };

}


// Test
var cheat = CHEATCODE(()=>{
  console.log('Code entered correctly!');
});


/*

// Custom Test
var custom = CHEATCODE(()=>{
  console.log('Custom entered correctly!');
},['a','b','c','x']);

*/

GPL3

Really?

The konami code of the demo redirects to a non-existing page

More specifically it redirects to http://snaptortoise.github.io/konami-js/undefined

Future proof with new key event properties, remove deprecated ones

See this comment from pull request #20:

https://github.com/snaptortoise/konami-js/pull/20#issuecomment-141828647

Short summary: we shouldn't use these (theoretically)

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

We should be using these:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

In reality there doesn't seem to be browser consensus with the new ones and the old ones work fine.

So... leaving this open for a future fix.

The Konami Code never included Start, by default this shouldn't require Enter.

Small bug I know, but it's true.

The original Konami Code (and the one they still use occationally) doesn't include Start. It was only thought to include start because most uses were before the "Press Start" title screen so many people just added start to Start the game.

http://en.wikipedia.org/wiki/Konami_Code

As per Gradius and Contra (and many more).

Add a release containing PR #42

Latest release doesn't contain https://github.com/snaptortoise/konami-js/pull/42, so a lot of console.log are triggered when installing through npm install or yarn add which get latest release and not master.

Anyway, thanks for your work :).