konami | Fires the 'konami ' event when the konami code

Personally, I would go about this by storing each keystroke's keyCode into an array, and then checking the last X number of items in that keylogger array and match that against the patterns you want to listen for.

To keep that array lightweight as you mentioned, I would trim the array length on every keystroke to the array length of your longest pattern, which would be the maximum number of keystrokes necessary to track all your patterns.

When comparing the most recently typed keys, I am unshifting the new key codes to add them to the beginning of the keylog array and then comparing that to the reversed state of every pattern to check from right to left. This is crucial since we are continually trimming off the last characters from the array, the oldest characters. The most recent characters will always appear first in the keylog array. To make a shallow reverse of the pattern, so as not to mutate the original pattern's order, I use .slice().reverse().

Lastly, in order to get accurate keyCodes for lowercase and uppercase letters, I take e.key.charCodeAt() if the key property of the event is exactly one character. Without this, all letters are rendered as uppercase and certain characters such as "slashes" will have the wrong charCode.

Try it out here:

I don't think this is actually a proper question to ask here (maybe code review is a better place) but I made some improvements to Your code:

Given

Update (since you've added error output to the question):

Invalid token '+=' in class, struct, or interface member declaration type expected

you can't just place C# code at the top-level in your class, there's a minimal structure you have to follow. You can place such code in a constructor method or some other method or some static initialization block for the class (if you only refer static stuff in your code)

Next Update (after newer error):

Using the generic type 'Cheet' requires 1 type arguments

you're using the generic package instead of the Wpf one where they do:

If you lower the grid gap, it should fix your issue. By using 20% and 80%, you aren't really leaving any room for margins (or grid gaps) on the page. It can sometimes push a margin or padding off the screen, which will make a scroll bar appear.

(I'm assuming based on the fact that you used some jQuery code that you are using jQuery, even though you didn't tag that in the question.)

This is the problematic line:

This should help

Making it hidden by default is easy, with css you can set all #hidden to have display:none, making the text not render on the page

You can listen for key presses in javascript by using document.body.addEventListener("keydown", callback);. You can then store the e.keys in a string and check if it equals your sequence of characters in the callback. e => {myString += e.key; if(myString === konamiCode) {make element visible} }. To set the element to visible, you can set the element's .style.display = block.