Midnight Pub

Another Door

~she12

The night falls into the city and a full moon slowly rises over the Midnight Pub, illuminating an all new sign above its entry, featuring a rughly resembling image of himself. I sip on my drink, lean back into the furniture and glance at it once more. In my head I reminisce over all the nice reactions it got earlier. Tastes differ and moods vary, though and as I remember euromancer suggesting to randomize the logo, it suddenly hits me! Wasn't there this neat little feature that lets you decorade the pub to your liking, our bartender so thoughtfully is serving us!?

I storm back inside, to take the renovating a little further and while I dig through paint and brushes, canvases and frames, boxes and tables, I discover yet another, mysterious, open door, in the pubs workshop. Behind it, a whole new world of tools just waiting for us to utilize them. But to get through that door...I'll have to close it first:

</style>

Tastes might differ, but I am sure we all can agree, that javascript sucks. It can be fun to hack with it, occasionally. But it's not funny how it tries to hack you, all the time. I know we all come to this pub, because we are safe here. We crawl through tunnels or arrive in our capsules and even when we take the big data highway, we will be bothered with nothing more than one little cookie. But, bear with me here, what if we use these evil forces against, nay for our selfes. Like in the good old days, when you spamed yourself with alert()s and <marquee> text </marquee>, using only an editor and two Netscape windows, one read "SelfHTML", the other "index.html"... Why not make the best of it, as long as we are stuck here, like a fly, in the web.

Well, what can I say?! I'll do just that. I take a deep breath, another big sip, pray to <spiritual leader> and slowly open up Pandora's toolbox:

<script type="text/javascript">

With these heavy tools at hand, a little help and blessing from the 'keep and what little skill set I've got left, I hastily slack together a rotating sign for the Pub's main entry:

</style>
<script type="text/javascript" src="https://she12.midnight.pub/logos"></script>
<script type="text/javascript">
	function change_logo() {
		/* SET LOGO INDEX HERE */
	 	var default_logo = 0;	

		var last_logo = 0;
		for (logo in logos) {
			last_logo++;
		}

		if (!default_logo) {
			default_logo = Math.floor(Math.random() * last_logo + 1);
		}

		var logo_pre = document.getElementsByTagName('pre')[0];
		logo_pre.innerHTML = logos[default_logo];

		logo_pre.onclick = function(){
					if (default_logo >= last_logo) {
						default_logo = 0;
					}
					this.innerHTML = logos[++default_logo];
				};
	}

	if (window.location == "https://midnight.pub/") {
		window.onload = change_logo;
	}
</script>
<style type="text/css">

Add this to your CSS theme and not only will I be able to mine crypto currencys on your hardware but also, in return, you'll be to define the sign of your choice or have it been randomly choosen for you, each time you come to the Midnight! Sudden moodswings can be handled with a simple click on it but to make a permanent decision, you'll have to set the default_logo variable in your theme to the number of your favourite:

var default_logo = x;
Numbered List of Logos

0 makes the random pick.

If you don't trust me, you can copy the logos to your site and source them from there or include them in your theme, but then you might be missing out on updates;p

Speaking of updates: Naturally you are more than welcome to make or suggest improvements!

With all that being said, I slide back down on the Davenport, carefully, as to not wake the snoring cat, strike a match, light up a "cigarette" and inhale deeply as my eyes focus on the sign again. "Ahhh!", *click*, "Ohhh", *click*, "not bad either!"... Smudge thrusts his tail against the cushion.

Happy hacking, everybody!

P.S.:

Sorry for that wall of text plasterd with typos, questionable punctiation, bad grammer, constant time travelling, never-ending sentences and pretencious fantasy English. My next post will hopefully be a comic strip again.

she12
 v
     ^
(") /  `.
 |=/o    `.
 --./    ( (`.) ) )
   /               .-|>='> 
 [Compliment River])
   |            |

she12

One more thing:

If you somehow manage to screw up your theme to the point where the whole pub won't load correctly, including the forms necessary to (re)set said theme (yes, you've guessed it: I am speaking from experience here:), here's an easy way back, that won't involve "embarrassing" yourself and bothering m15o:

curl -F theme=""\
	 -b midn="$(cat ~/.config/.midnight)"\
	 https://midnight.pub/theme/update

Of course you'll need a valid session token in "~/.config/.midnight", but since your screwed theme won't kick in until you've logged in, it can still be easily obtained by doing that in a private tab, for example. More information on this topic can be found here:

man midnight.sh
reply

she12

Ok, to put the cart before the horse, so to speak, you now have the option to limit your choice of logos.

If there is a sign that does not correspond to your taste at all: just exclude it!

Check out ~euromancer's site for detailed instructions:

https://euromancer.midnight.pub/

Thanks bro:D

reply

unclereaton

I can't believe I missed this, it's so cool! These logos are stunning!

reply

she12

Thx!

I found yours for the matrix room and took the liberty of making a quick knock off ;p

https://lutim.lagout.org/o48e0otc/3VhQR3Fc.png
 |'===._____.==='|
 ||     the     ||
 ||    o()`o    ||
 ||   -|===|    ||
 ||   l|___|    ||
 ||    /___\    ||
 !| MidnightPub |! 
  '-==.__ __.==-'
        \V/
reply

unclereaton

Wow it is really neat! :D

reply

isvarahparamahkrsnah

I pasted this in my theme but nothing happened :(

reply

she12

Did you paste it on top!?

Edit:

The script can be sourced now, too...You could try this:

</style>
<script type="text/javascript" src="https://she12.midnight.pub/logos"></script>
<script type="text/javascript" src="https://she12.midnight.pub/change_logo"></script>
<style>

Or for ~euromancers version:

</style>
<script type="text/javascript" src="https://she12.midnight.pub/logos"></script>
<script type="text/javascript" src="https://she12.midnight.pub/randomizeLogo"></script>
<style>
@media only screen and (max-width: 900px) { pre { overflow-x: scroll; } }
reply

isvarahparamahkrsnah

Now this one works!

Thank you!

Very cool!

reply

she12
           \  |  /
  _.-----,_  ,-.
 /          \ \ \
 | ( * ) * ) . ) L.
  \____.--.__|/   _)
   A/       \|    _)
   |\   ( ) /_.-
     `-..--'
reply

euromancer

That's actually quite funny, smolweb adopting bloatweb's JS

reply

euromancer

That idea with misusing user styles never occured to me!

Indeed, this looks damn good! I love it.

Although there is an issue with indices: the provided script's object's keys start at 1, not 0, so sometimes we get undefined instead of a logo.

I let myself do the fix and maybe clean up the code?

</style>
<script type="text/javascript" src="https://she12.midnight.pub/logos"></script>
<script type="text/javascript">
  function randomizeLogo() {
    const logo_container = document.getElementsByTagName('pre')[0];

    let first_sign_set = false;
    let first_sign = 0;
    let last_sign = 0;

    for (logo_key in logos) {
      // Logo container provided by the script loaded above
      // actually starts from 1, not 0, so sometimes the logo
      // is undefined.

      // We do this so we get the first sign right no matter
      // of the starting index.

      // Just in case ~she12 decides to fix the issue or
      // if any new logos are added.

      last_sign = logo_key;

      if (!first_sign_set) {
        // Set the first sign exactly once.

        first_sign = logo_key;
        first_sign_set = true;
      }
    }

    function getRandomIntInclusive(min, max) {
      const min = Math.ceil(min);
      const max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function setLogo(logo_key) {
      logo_container.innerHTML = logos[logo_key];
    }

    let current_sign_key = getRandomIntInclusive(first_sign, last_sign);

    setLogo(current_sign_key);

    logo_container.onclick = function() {
      current_sign_key++;

      if (current_sign_key > last_sign) {
        current_sign_key -= (last_sign - first_sign);
      }

      setLogo(current_sign_key);
    };
  }

  if (window.location == "https://midnight.pub/") {
    window.onload = randomizeLogo;
  }
</script>
<style type="text/css">

That's some creative use of user styles. Now endless possibilities of scripting opened to me! I guess I have quite a space to be toying around now. Never thought about it since the one cannot install GreaseMonkey on mobile Safari.

Edit: Whoopsie, don't mind me. I missed the part about default logo and pasted the script as it is. Didn't test it much the way you intended it to be used. I guess it was throwing undefined error because of me not paying enough attention. Even though, enjoy my script! Although it won't let you set the default preferred logo.

Edit 2:

Now it does support preferred logos. I also got rid of comments since they can be seen above.

</style>
<script type="text/javascript" src="https://she12.midnight.pub/logos"></script>
<script type="text/javascript">
  function randomizeLogo() {
    const logoContainer = document.getElementsByTagName('pre')[0];
    const preferredLogo = null;
    let firstSignSet = false;
    let firstSign = 0;
    let lastSign = 0;

    for (const logoKey in logos) {
      lastSign = logoKey;
      if (!firstSignSet) { firstSign = logoKey; firstSignSet = true; }
    }

    function getRandomSignKey() {
      const min = Math.ceil(firstSign);
      const max = Math.floor(lastSign);
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    const setLogo = (logoKey) => logoContainer.innerHTML = logos[logoKey];
    currentSignKey = typeof preferredLogo == 'number' ? preferredLogo : getRandomSignKey();
    setLogo(currentSignKey);

    logoContainer.onclick = function() {
      currentSignKey++;
      if (currentSignKey > lastSign) { currentSignKey -= (lastSign - firstSign + 1); }
      setLogo(currentSignKey);
    };
  }

  if (window.location == "https://midnight.pub/") { window.onload = randomizeLogo; }
</script>
<style type="text/css">

Just change the value of preferredLogo somewhere at the top from null to the index you prefer!

My favorite one is 11. It got some underground vibe.

Edit 3:

logoContainer.classList.add('logo');
.logo { overflow: hidden; }

Add these lines at appropriate places so too wide logos won't make you suffer the horizontal scroll bar on narrow clients! Had to do it on mobile Safari.

Or just

@media only screen and (max-width: 900px) { pre { overflow-x: scroll; } }

It made browsing on phone much better while not changing desktop experience.

reply

she12

Yeah, the math was intended for an array not a collection starting at 1. Did not think that through and had been on mobile too the whole time, so I just took the "undefined"s as another easter egg;)

I think it is fixed now. Unfortunately your version does not work in my outdated mobile browser. But thanks for the input, in firefox it works like a charm! Also: thanks for the fish!:D

My favorite one is 11.

I usually hang out by the beach hut (#9) now...

reply

euromancer

I wish I knew what's the fish you're talking about

Oh, I see, that river thing :D

Damn, that browser of yours has to be *very* old, these lambdas and lets and consts were there for quite a while

reply

she12

Jup it is, most of the web is broken for me...but I don't mind. Paired with my limited data plan, this is a very good filtering mechanism. I couldn't surf the bloatweb, even if I wanted to;)

reply

euromancer

That actually sounds quite sad :'(

It's like not wanting to do something vs not being able to do something

reply

she12

Well, I still got my workplace aka cyber café;) If I would really feel like missing out, I could finally take the time to setup my new phone and order some "highspeed" internet, wich is not worth the name nor money, where I live.

reply

brewed

I'm a huge fan of what you've done and your art! This all makes me excited. Crazy how letters of a screen and simple tricks seem much more impressive than all the rest of the web I've seen in the last few days. I must say the web is an incredible platform when leverage for good! The line when you talk about mining crypto really made me laugh. :) Thanks for what you've done, this new theme looks just perfect on my page!

reply

she12

You are very welcome, brewed!

The line when you talk about mining crypto really made me laugh.

Until you get your electricity bill... ;p

reply

m15o

she12! I can't believe what I'm seeing. I can't recall when was the last time I was genuinely excited to look at JavaScript. I would've never thought about using the custom CSS theme to pass a <script> tag. And now I can't help but think about the world of possibilities this opens! A little jukebox? Maye a <markee> tag prompting news from Nightfall City...

<marquee>NFC News: HoloBrain AI Concert Sold Out. Line getting out of hands on Main Street.</marquee>

Thinking about it, the logos you've created really add to the world building and make the place even more cozy. I was already a fan when I read the comics you wrote! Bartender, next round on me!

Thanks she12!

reply

she12

XD That headline got me!

Yeah, it really is like that infinite hallway fungmungus discovered behind the restroom:

Possibilities, perhaps endless. Which door do you open and enter next?

Cheers & Thanks m15o!

reply