💾 Archived View for midnight.pub › posts › 550 captured on 2022-06-11 at 21:59:19. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2021-12-03)
-=-=-=-=-=-=-
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;
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])
| |
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's an easy way back:
curl -b midn="$(cat ~/.config/.midnight)"\ -F theme=""\ https://midnight.pub/theme/update
Of course you'll need a valid session token in "~/.config/.midnight", if you don't have that, just login via curl and store the cookie:
curl -c ~/.config/.midnight\ -F name=<your nick>\ -F "password=<your password>"\ https://midnight.pub/check-login
To use that cookie the way it was intended by m15o you'll have to strip it down so the file "~/.config/.midnight" only contains the token/base64 string or modify the curl command, to reset the theme:
curl -b ~/.config/.midnight"\ -F theme=""\ https://midnight.pub/theme/update
More information on this topic can be found here:
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
I can't believe I missed this, it's so cool! These logos are stunning!
~isvarahparamahkrsnah wrote (thread):
I pasted this in my theme but nothing happened :(
That's actually quite funny, smolweb adopting bloatweb's JS
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.
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!
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!