Konami code help 3

[tyutghf]

I would love to enter a konami code on one of our websites, whereby entering a key combination will blur the screen, entering again will blur even more, entering for a third time redirects to our safe drinking page.

I have found a konami code script at

https://codepen.io/ultraschaller/pen/jPPQRq

which seems great, however my boss doesn't want to use the konami code (boooo), instead he wants the word 'drink'.

There are two questions,

1. how do I find out the keys for d r i n k to replace up up down down etc
2. to blur the whole page fir the first time, I'll set

body {
filter: blur(2px);
}

on the second time the text is entered, I'd like to double this to

body {
filter: blur(4px);
}

and for the third time, redirect to another page on our website.

How do I modify the javascript to do this?

Thanks for any help

 

[MakeItSo]

First of all: LOL!
Secondly:

https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

;-)

Oh, for point 2): You could try with a cookie as counter. A simple if / switch case should suffice for the rest.

"Knowledge is power. Information is liberating. Education is the premise of progress, in every society, in every family." (Kofi Annan)
Oppose SOPA, PIPA, ACTA; measures to curb freedom of information under whatever name whatsoever.

 

[feherke]

Hi

1. how do I find out the keys for d r i n k to replace up up down down etc

Open your browser's Console and type :

[i][green]'drink'[/green][/i][teal].[/teal][COLOR=orange]split[/color][teal]([/teal][i][green]''[/green][/i][teal]).[/teal][COLOR=orange]map[/color][teal]([/teal]c [teal]=>[/teal] c[teal].[/teal][COLOR=orange]toUpperCase[/color][teal]().[/teal][COLOR=orange]charCodeAt[/color][teal]())[/teal]

How do I modify the javascript to do this?

Use a counter variable to keep track of drinks then use conditional statement to do either one or other action :

[b]var[/b] keys [teal]= [];[/teal]
[b]var[/b] konami [teal]=[/teal] [i][green]'68,82,73,78,75'[/green][/i][teal];[/teal]
[b]var[/b] count [teal]=[/teal] [purple]0[/purple][teal];[/teal]

$[teal]([/teal]document[teal]).[/teal][COLOR=orange]keydown[/color][teal]([/teal][b]function[/b][teal]([/teal]e[teal]) {[/teal]
    keys[teal].[/teal][COLOR=orange]push[/color][teal]([/teal]e[teal].[/teal]keyCode[teal]);[/teal]
    [b]if[/b] [teal]([/teal]keys[teal].[/teal][COLOR=orange]toString[/color][teal]().[/teal][COLOR=orange]indexOf[/color][teal]([/teal]konami[teal]) >=[/teal][purple]0[/purple][teal]) {[/teal]
        keys [teal]= [];[/teal]
        [b]if[/b] [teal](++[/teal]count [teal]==[/teal] [purple]3[/purple][teal])[/teal]
            location[teal].[/teal]href [teal]=[/teal] [i][green]'[URL unfurl="true"]https://example.com/'[/URL][/green][/i][teal];[/teal]
        [b]else[/b]
            $[teal]([/teal][i][green]'body'[/green][/i][teal]).[/teal][COLOR=orange]css[/color][teal]([/teal][i][green]'filter'[/green][/i][teal],[/teal] `[COLOR=orange]blur[/color][teal]([/teal]$[teal]{[/teal] count [teal]*[/teal] [purple]2[/purple] [teal]}[/teal]px)`[teal]);[/teal]
    [teal]}[/teal]
[teal]});[/teal]

Feherke.
feherke.github.io

 

[tyutghf]

Awesome, thanks for the help

 

[tyutghf]

Oh dear, my boss loves it and wants another.

Can I add a redirect for another set of keys? If the user types in 'offer', it redirects to a hidden page on the website.

Thnks

 

[feherke]

Hi

redirects to a hidden page

Is your boss aware that we are talking about client side scripting ? So the JavaScript source code will contain the page's name, so will not be so hidden anymore.

Beside that, what should happen if the visitor types "drink" twice then "offer" once ? Will that act as 1[sup]st[/sup] interaction and lower the blur back to 2px ( although the 2[sup]nd[/sup] "drink" already set it to 4px ) or will act as 3[sup]rd[/sup] interaction and redirect to the hidden page ( although "offer" was only typed in once ) ?


Feherke.
feherke.github.io

 

[tyutghf]

It's only hidden as far as not visible on the site navigation and hidden to robots. he is happy for anyone to view it if it gives him more sales.

offer should direct the user to the 'hidden' page, so take them away from whatever they were doing anyway. I can place a 'go back' button on the hidden page so they can resume what page they were browsing.

the redirect on drink needs to stay in place if they type drink three times

 

[feherke]

Hi

You did not answered the question aimed to clarify whether "drink" and "offer" should be counted together or separately.

the redirect on drink needs to stay in place if they type drink three times

Does that mean, if the visitor enters "drink" twice, then "offer" enough times to visit the hidden page, then navigate back, then entering "drink" one more time should directly redirect to the non-hidden page ? Then a cookie will be needed as MakeItSo suggested, which complicates abit both the theory and the implementation.


Feherke.
feherke.github.io

 

[tyutghf]

The two should work independently of each other ideally.

scenarios
Type drink - blur 2px
Type drink - blur 4px
type drink - redirect to the drink awareness page

type offer - redirect to the offer page

type drink - blur 2px
type offer - redirect to the offer page

Does that make sense?

We don't need it to carry across the site, so they type drink on the homepage which blurs the page. If they navigate away, the page is back to normal. They can type drink again, this will blur 2px the new page etc. If they blur 4px and can;t navigate, a page refresh will bring it back to normal.

 

[feherke]

Hi

Ah, so the "offer" redirects immediately ? Then maybe would be place for abit more flexibility :

[b]var[/b] konami [teal]= {[/teal]
  [i][green]'drink'[/green][/i][teal]: {[/teal][i][green]'need'[/green][/i][teal]:[/teal] [purple]3[/purple][teal],[/teal] [i][green]'url'[/green][/i][teal]:[/teal] [i][green]'[URL unfurl="true"]https://example.com/'[/URL][/green][/i][teal]},[/teal]
  [i][green]'offer'[/green][/i][teal]: {[/teal][i][green]'url'[/green][/i][teal]:[/teal] [i][green]'hidden-page.html'[/green][/i][teal]},[/teal]
[teal]};[/teal]
[b]var[/b] keys [teal]=[/teal] [i][green]''[/green][/i][teal];[/teal]

$[teal]([/teal]document[teal]).[/teal][COLOR=orange]keydown[/color][teal]([/teal][b]function[/b][teal]([/teal]e[teal]) {[/teal]
    keys [teal]+=[/teal] e[teal].[/teal]key[teal];[/teal]
    [b]for[/b] [teal]([/teal][b]var[/b] word [b]in[/b] konami[teal])[/teal]
        [b]if[/b] [teal]([/teal]keys[teal].[/teal][COLOR=orange]indexOf[/color][teal]([/teal]word[teal]) >=[/teal] [purple]0[/purple][teal]) {[/teal]
            keys [teal]=[/teal] [i][green]''[/green][/i][teal];[/teal]
            konami[teal][[/teal]word[teal]].[/teal]count [teal]= ([/teal]konami[teal][[/teal]word[teal]].[/teal]count [teal]||[/teal] [purple]0[/purple][teal]) +[/teal] [purple]1[/purple][teal];[/teal]
            [b]if[/b] [teal]([/teal]konami[teal][[/teal]word[teal]].[/teal]count [teal]== ([/teal]konami[teal][[/teal]word[teal]].[/teal]need [teal]||[/teal] [purple]1[/purple][teal]))[/teal]
                location[teal].[/teal]href [teal]=[/teal] konami[teal][[/teal]word[teal]].[/teal]url[teal];[/teal]
            [b]else[/b]
                $[teal]([/teal][i][green]'body'[/green][/i][teal]).[/teal][COLOR=orange]css[/color][teal]([/teal][i][green]'filter'[/green][/i][teal],[/teal] `[COLOR=orange]blur[/color][teal]([/teal]$[teal]{[/teal] konami[teal][[/teal]word[teal]].[/teal]count [teal]*[/teal] [purple]2[/purple] [teal]}[/teal]px[teal])[/teal]`[teal]);[/teal]
        [teal]}[/teal]
[teal]});[/teal]

I guess you got the point :
[ul]
[li]Enumerate in the konami object all actions, with the trigger word as key[/li]
[li]For each trigger word specify its own URL to redirect to[/li]
[li]Optionally for trigger words which not redirect immediately specify the count with the need keyword[/li]
[/ul]
Note that trigger word checking is case sensitive ( "Drink" != "drink" ).


Feherke.
feherke.github.io

 

[tyutghf]

That's awesome thanks