// ==UserScript==
// @name Eza's Homestuck Reader
// @namespace https://inkbunny.net/ezalias
// @description A mobile-friendly page simplifier for MSPaintAdventures.com
// @license MIT
// @license Public domain / No rights reserved
// @include http://www.mspaintadventures.com/*
// @version 1.0
// @grant none
// ==/UserScript==
// MSPA on mobile is painful, so let's replace the page with an AJAX updater that only cares about the comic area.
// Scratch pages are like http://www.mspaintadventures.com/scratch.php?s=6&p=005954 which complicates using window.location.search.
// The transition is on page 005663. That page doesn't link it, the site itself redirects to scratch.php?s=6&p=005954. Same with any page in the scratch.php range.
// Ah, scratch.php pages don't have the same convenient 'begin comic content' comments.
// Hacky solution: find 'CREDITS</font>', then open from next '<table>' after that index. End at '<!-- FULL LOGO HEADER -->'?
// Backgrounds in Scratch and Trickster pages aren't quite right. E.g. Trickster pages should be all garish Z's. (Trickster mode: p=007614)
// Mobile link does not appear on Trickster pages. The whole nav bar is wacko.
// Act 7 super doesn't work. Ditto [s] Collide.
// Oh shit, password pages. That'll screw with preloading... but... oh well?
// Password pages work, but redirect you outside of #mobile. (c. p=008948, first password is HOME. No, not HOM3.)
// For usability, replace "what content" error message with a link somewhere. Frontpage? Homestuck's first page?
// Style isn't quite right on links. '==>' is supposed to be bold, and Scratch links are supposed to be green.
// Oh shit, Openbound. (c. p=007208)
// Link back to original from mobile? E.g. to fix Trickster & Scratch inconsistencies, and make broken game/video pages easy to navigate.
// Ah, maybe just link inside our fake HTML.
// Consider anchoring #mobile to the top of the page to automatically scroll up... er, except we aren't following real links. Hmm.
// Doesn't work around e.g. p=005935 because Flash elements load late. Fuck me. Maybe try again later.
// Doesn't work on Cascade, /cascade.php?s=6&p=6009 - total blank.
if( window.location.href.indexOf( '#mobile' ) > 0 ) { // On a #mobile page, blank everything and attempt to present a comic page.
// Replace the page with some simple divs and dummy text
document.body.innerHTML = "<center><div id='content'>What content?</div><div id='hidden_preload' style='display: none;'>DUNKASS</div></center>";
document.body.innerHTML += "<center><a href=\"javascript:window.location.href=window.location.href.replace('#mobile','');\">Exit Mobile Mode</a></center>";
// Setup the fake history for our fake links
window.onpopstate = function( event ) { update( event.state.update, 'content' ); }; // Faking the Back button: update() to a previous history state, which we also fake
history.replaceState( { update: window.location.href }, 'MS Paint Adventures', window.location.href ); // You are here. JS doesn't do this itself because fuck you.
// Call Update for whatever ?s=X&p=Y page we're on
update( window.location.search, 'content' );
} else { // If it's not #mobile then we're on unaugmented MSPA. Augment it with a link to the appropriate #mobile version.
// Mobile link from the front page has to be different because '/?s=...&#mobile' works, but '/&?s=...' doesn't. Dunno why it's a CORS error, though.
var mobile_link = window.location.href + "&#mobile"; // The '&' forces a reload despite being a misused anchor link
if( window.location.href.indexOf( '?s=' ) < 0 ) { mobile_link = "/?s=6#mobile"; } // Frontpage is Homestuck? Link Homestuck.
// "Mobile" link goes after the "Credits" link
var credits_index = document.body.innerHTML.indexOf( "CREDITS</font></a>" ) + "CREDITS</font></a>".length;
if( credits_index > 20 ) { // Sloppy not to check for indexOf > -1, but fuck, am I ever tired of verbose indexOf nonsense. Gimme some spliceAtText function.
document.body.innerHTML =
document.body.innerHTML.substring( 0, credits_index ) +
" | <a href='" + mobile_link + "'><font color='88ff44'>MOBILE</font></a>" +
document.body.innerHTML.substring( credits_index );
}
}
// End of main execution.
// Grab a page, put the important stuff in one of our divs
function update( page_path, target_div ) {
var ajax = new XMLHttpRequest(); // Create AJAX object with which to fetch page
ajax.onreadystatechange = function () { // When the AJAX object updates -
if( ajax.readyState == 4 ) { // If the update state means "finished" -
// Grab comic content from the fetched HTML
var replacement_html = ajax.responseText.substring(
ajax.responseText.indexOf( '<!-- begin nav -->' ), // Alternately '<!-- begin comic content -->' - but that misses Trickster fluff. Hmm.
ajax.responseText.indexOf( '<!-- end comic content -->' )
);
if( replacement_html == '' ) { // If the easy way failed (e.g. on Scratch pages), try again:
var replacement_html = ajax.responseText.substring(
ajax.responseText.indexOf( '<table width="941" border="0" cellpadding="2"' ), // Ugly, ugly hack. Replace if possible.
ajax.responseText.indexOf( '<!-- FULL LOGO HEADER -->' )
);
}
// Consider inserting non-mobile link into #mobile pages here. Consolidate a function with main execution's "else" block if so: splice-text-at or something.
// Enable Flash content
while( replacement_html.indexOf( '<noscript>' ) > 0 ) { // Dunno why AC_RunActiveContent.js doesn't run, but the results are right here anyway -
replacement_html = replacement_html.replace( '<noscript>', '' ); // Flash pages provide NoScript-friendly best-guess results. Let's use those.
}
// Update our fake page to show the comic and text
document.getElementById( target_div ).innerHTML = replacement_html;
// On visible updates, change links into Update calls and preload the next page
if( target_div == 'content' ) { // If we're updating the main div -
// Diddle the next-page link to allow preloading and prevent actual link behavior
var links = document.getElementById( 'content' ).getElementsByTagName( 'a' ); // Wish people would ID their fuckin' links.
var next_page = ''; // It'll be the first ?s= etc link on the page, so we'll do for(links) backwards and use the final value.
for( var n = links.length - 1; n >= 0; n-- ) {
if( links[n].href.indexOf( '?s=' ) > 0 && links[n].href.indexOf( '?game' ) == -1 ) { // If it's a page link but not a Save / Load / Etc. '?game' link -
next_page = links[n].fake_href = links[n].href.replace( '/mobile', '' ); // Store links[n]'s original target inside that link, because callbacks are dumb
links[n].addEventListener ( "click", function() {
update( this.fake_href, 'content' ); // Grab the link with this script instead of visiting it
history.pushState( { update: this.fake_href + "#mobile" }, 'MS Paint Adventures', this.fake_href + "#mobile" ); // So the Back button works on a fake link
} , false );
links[n].href = 'javascript:void(0)'; // Break link, so the script's function predominates.
} // End of if() block checking for page links
} // End of for() loop over links in 'content' div
update( next_page, 'hidden_preload' ); // Load the next page in a hidden div, so images download while you're reading. EVERY WEBCOMIC SHOULD DO THIS.
} // End of if() block for 'content'-specific code
} // End of if() block for when page is fully fetched
} // End of anonymous AJAX-update function
if( page_path.indexOf( '://' ) < 0 ) { page_path = "http://www.mspaintadventures.com/" + page_path; } // Some links read as '/?s=etc', others as 'http...' - make all 'http'.
ajax.open( "GET", page_path, true ); // GET this URL, false = synchronous
ajax.send();
} // End of Update function