Updated Karmageddeon comic viewer (Patreon)

Hi guys! Another fun web development post for the KG site!

So, a while back I shared this post showcasing the look of the official site and the comic viewer - but I have been working on a new, improved iteration of it, and today I'm gonna show you what it looks like/how it works! (Note that the GIFs in this post may not work in the Patreon app, try your email notification or in a browser)

So, here's the new look! Unlike in its previous iteration, the comic is sorted by updates and each individual page in an update is all accessible on one single page for the entire update. This was intended to give the comic a similar feel to Tumblr ask blog comic posts, and it would reduce the number of site pages overall to just individual updates, since single panel pages can make things pretty long pretty fast.

The arrows at the sides of the comic page will navigate you through the update. The page you're currently on will be indicated on one of the little dots at the bottom below the "view transcript" button (and you can actually click those dots to navigate through the update to get to a specific page!)

Now, for showing off the viewer itself, I've disabled this, but the cover page actually has a content warning on it that looks like this due to the blood.

This little box functions pretty much exactly like the CWs on the Sparklecare site - you click the button to unblur the censored page. But something is different here...

Wait. Wait. What is that?

It is exactly what it looks like. That is a content warning toggler, basically a switch you can flip to either turn on content warnings or turn them off entirely. In other words, if you're someone who has little-to-no sensitivities about content (and prefer to not have things spoiled with the content warnings) then fear not, because there is now an option to completely disable them if you wish! It stays that way on refresh, and basically until you clear your browser cache.

If you have the CW switch toggled ON, then content warnings will still display by default even when you dismiss one you have open in the current update. When you reload the page, the warning will return unless you turn the toggle switch to OFF. You can access and enable/disable the toggle at any point during reading! 

This is a feature that has been requested for the SC site for literally ages - and I do intend to implement it there once I get to working more on the revamp (this code actually was what I used for the SC revamp as well!) but I'm very happy to be able to implement this early on to save myself the hassle of adding it later!

Here's an example of the update progression, before I forget. Clicking the arrows in either direction moves the pages like so (and are swipe-able on mobile devices, YAY):

As you traverse through the pages of the update, as you can see, these indicators change:

Now, you might be wondering what that button for transcript does. It's similar to the transcripts on the SC site... but works a little differently and is a lot more useful, in my opinion.

The transcripts for the Karmageddeon site slide out from the side as an offcanvas element, making it so you can read the comic page and the transcript at the same time. (However, if you are on a mobile device, limitations will make the transcript need to cover the entire screen to be readable. It's still useful, though!)

As you can see, the transcript includes a visual description of everything happening on the page, and a verbal transcription of all text and dialogue displayed on the page. These are separated as "VISUAL" and "VERBAL" respectively.

On pages with narration, the verbal section will look like this:

And on pages with dialogue, it looks like this. As you can see, the dialogue box will change color to match the color theme of the speaking character, similar to the in-comic dialogue boxes!

The first update actually includes a trigger warning page at the beginning on the second slide, which gives a brief list of sensitive content:

The "details" button will open a box like the transcript titled "trigger contexts" that goes into expanded detail about the chapter's sensitive content and what readers need to look out for when they're reading.

(Blurred for spoiler reasons, however this will be unblurred when the comic goes live. Just for now, I'll leave you guys hanging!)

The reason this is here is because the box itself on the slide isn't big enough on every device to include all of these details in regular text. For example, this is that same box on an iPhone's screen dimensions. Yikes.

(There may be potential workarounds for this, but as of right now this is what I'm doing. Besides, I think the expanded details are useful anyways!)

You can still scroll the page (on desktop) when the transcript box is open if you want to look at the update's comments as you read the transcript. However, clicking outside of the transcript box will automatically close it.

Below the page indicators, you will see the update navigation, with tooltips that explain what the buttons do.

And underneath those buttons, you'll find the update summary button which will open a box that explains everything important that is shown in the update, with a button that will take you to the archive page which will have all the update summaries easily accessible in one place.

And lastly, there's the chapter navigation dropdown that allows you to jump between available chapters. This existed in the original version of the reader, but this one is a lot cleaner.

This has been in development for a couple months now, but I've been doubling down on it the past few days and I think I've got it looking the way I want! If I get any ideas, I may make additions, but as of right now I'm pretty satisfied with the way this comic viewer has turned out. There's still a possibility of tweaks, but again, I like what I've got here so far! It's honestly pretty fun to play with.

I don't make enough web dev posts on here, and I'd like to make them more often - I hope this post made you guys look forward to this comic a little more!